Skip to content

Commit

Permalink
Merge branch '6.0' into maurits-upgrade-61-distributions
Browse files Browse the repository at this point in the history
  • Loading branch information
stevepiercy authored Nov 5, 2024
2 parents 7ccaecd + 7c69118 commit 769336a
Show file tree
Hide file tree
Showing 12 changed files with 113 additions and 59 deletions.
Binary file added docs/_static/classic-ui.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/_static/volto-ui.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ This is [PLIP 1351](https://github.com/plone/Products.CMFPlone/issues/1351).
#### For end users

This has no changes for Editors.
Admins will notice that the ZMI has a new Twitter Bootstrap-based theme, and some control panels have moved.
Admins will notice that the ZMI has a new Bootstrap-based theme, and some control panels have moved.


#### For developers
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,9 @@ zodb-temporary-storage = off

(v60-templates-bootstrap-5-label)=

## Changed templates to Twitter Bootstrap 5 markup
## Changed templates to Bootstrap 5 markup

All templates in core Plone have been updated to use Twitter Bootstrap 5 markup.
All templates in core Plone have been updated to use Bootstrap 5 markup.
Add-on authors are encouraged to do the same.
If you have customized a core template, you should check if your change is still needed, and update it to fit the new markup.
Any CSS and JavaScript that relies on a specific structure, or certain IDs or classes, should be checked as well.
Expand Down
2 changes: 1 addition & 1 deletion docs/classic-ui/icons.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Examples include the following.

## Bootstrap Icons

Twitter Bootstrap 5 is the default CSS framework in Plone 6.
Bootstrap 5 is the default CSS framework in Plone 6.
Plone uses its icons.
Check out all the available Bootstrap icons at [icons.getbootstrap.com](https://icons.getbootstrap.com/).

Expand Down
43 changes: 8 additions & 35 deletions docs/classic-ui/index.md
Original file line number Diff line number Diff line change
@@ -1,49 +1,22 @@
---
myst:
html_meta:
"description": "Classic UI is a secondary user interface for Plone, but updated to use Twitter Bootstrap 5. It is familiar to users of Plone 5."
"property=og:description": "Classic UI is a secondary user interface for Plone, but updated to use Twitter Bootstrap 5. It is familiar to users of Plone 5."
"description": "Classic UI is a secondary user interface for Plone, but updated to use Bootstrap 5. It is familiar to users of Plone 5."
"property=og:description": "Classic UI is a secondary user interface for Plone, but updated to use Bootstrap 5. It is familiar to users of Plone 5."
"property=og:title": "Classic UI"
"keywords": "Plone 6, Classic UI, Twitter Bootstrap 5"
"keywords": "Plone 6, Classic UI, Bootstrap 5"
---

(classic-ui-index-label)=

# Classic UI

```{todo}
Perhaps some of this introduction should be an include, so we don't have to repeat ourselves?
```

Plone 6 ships with two user interfaces or frontends.

The default frontend of Plone 6 is Volto.
It is based on the React JavaScript framework.

The other frontend is based on Twitter Bootstrap 5.
This frontend is now called {term}`Classic UI`.


## Which frontend?

Choosing one frontend over another depends on several factors.
This chapter is a developer reference manual for working with {term}`Classic UI`.

Classic UI would be a better choice for the following situations.

- Reason 1
- Reason 2
- Reason N

The default frontend Volto would be a better choice for the following situations.

- Reason 1
- Reason 2
- Reason N


## Contents

This chapter is a developer reference manual for working with Classic UI.
```{seealso}
Plone has two user interfaces, Volto and Classic UI.
To understand their differences, see {doc}`/conceptual-guides/choose-user-interface`.
```

```{toctree}
:maxdepth: 2
Expand Down
2 changes: 1 addition & 1 deletion docs/classic-ui/theming/through-the-web.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Add screenshots.

## CSS variables

Plone uses Twitter Bootstrap's CSS variables.
Plone uses Bootstrap's CSS variables.
They are used to tweak colors, fonts, spacing, and other CSS attributes.

```{todo}
Expand Down
4 changes: 2 additions & 2 deletions docs/classic-ui/whatsnew.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ myst:

# What's new in Plone 6 Classic UI

- HTML markup is now based on [Twitter Bootstrap 5](https://getbootstrap.com/).
- Twitter Bootstrap 5 icons are now included.
- HTML markup is now based on [Bootstrap 5](https://getbootstrap.com/).
- Bootstrap 5 icons are now included.
- Bootstrap JavaScript is available by default.
- JavaScript has been modernized.
- RequireJS has been removed.
Expand Down
68 changes: 68 additions & 0 deletions docs/conceptual-guides/choose-user-interface.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
myst:
html_meta:
"description": "Explanation of how to choose between Plone's two user interfaces, Volto and Classic UI"
"property=og:description": "Explanation of how to choose between Plone's two user interfaces, Volto and Classic UI"
"property=og:title": "Choose a user interface"
"keywords": "Plone 6, Conceptual guides, UI, user interface, frontend, Volto, Classic UI, distribution"
---

# Choose a user interface

This guide explains the differences between Plone's two user interfaces, Volto and Classic UI, to help inform you to choose one when developing your new project in Plone, or whether to migrate from Classic UI to Volto.
There is no migration path available from Volto to Classic UI.

The choice of user interface has implications for editors, admins, and developers.

`````{grid} 1 1 1 2
:gutter: 1
:margin: 0
:padding: 0
````{grid-item-card} Volto
```{image} /_static/volto-ui.png
:alt: Plone home page in Volto
:target: /_static/volto-ui.png
```
For editors and other end users:
- The user interface is a fast, modern, single-page web application.
- Editors can create sophisticated page layouts by arranging {term}`blocks` of different types.
- There is not a comprehensive {doc}`/volto/user-manual/index` yet, and only a few pages exist.
For developers and integrators:
- The frontend is a {term}`React`-based application written in JavaScript and TypeScript.
- The backend is a Python process which provides a {term}`REST API` for the frontend.
- Python skills are not required, but can be helpful for extending the backend.
- Content is stored as structured JSON.
- Customization of themes is well-documented and relatively easy for developers who have experience with React.
````
````{grid-item-card} Classic UI
```{image} /_static/classic-ui.png
:alt: Plone home page in Classic UI
:target: /_static/classic-ui.png
```
For editors and other end users:
- The user interface is similar to Plone 5.
- Editors create a page using a {term}`WYSIWYG` editor, {term}`TinyMCE`.
- Additional widgets can be added to predefined locations, using {term}`portlets`.
More sophisticated page layout requires the use of add-ons.
- There is a comprehensive [User Manual for Plone 5](https://5.docs.plone.org/working-with-content/index.html), but it has not been updated for Plone 6.
For developers and integrators:
- The frontend and backend run in a single Python process, so hosting is a bit simpler.
- The frontend is implemented as server-side templates using the {term}`ZPT` language.
- Interactive functionality is implemented in JavaScript using {term}`Mockup`.
- The visual design is based on the {term}`Barceloneta` theme from Plone 5, but updated to use Bootstrap 5.
- Content is stored as HTML.
- Customization of themes is not well-documented.
````
`````
1 change: 1 addition & 0 deletions docs/conceptual-guides/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ This part of the documentation provides explanation of concepts to deepen and br
```{toctree}
:maxdepth: 2
choose-user-interface
distributions
package-management
make-build-backend-walk-through
Expand Down
43 changes: 27 additions & 16 deletions docs/glossary.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,9 @@ pm2
[PM2](https://pm2.keymetrics.io/) is a daemon process manager.

REST API
```{todo}
REST API in general. REST API of Plone.
```
A REST API (also called a RESTful API or RESTful web API) is an application programming interface (API) that conforms to the design principles of the representational state transfer (REST) architectural style.
REST APIs provide a flexible, lightweight way to integrate applications and to connect components in microservices architectures.
Plone uses [`plone.restapi`](https://github.com/plone/plone.restapi/) for its REST API.

S3
[Amazon Web Services S3](https://aws.amazon.com/s3/).
Expand Down Expand Up @@ -172,11 +172,11 @@ Rapido application
It contains the features you implement.
It is a folder containing templates, Python code, and YAML files.

block
Blocks display a chunk of HTML which can be inserted in your Plone pages.
blocks
Blocks are the fundamental components of a page layout in {term}`Volto`.

element
Elements are the dynamic components of your blocks.
Elements are the dynamic components of your {term}`blocks`.
They can be input fields, buttons, or computed HTML.
They can also return JSON if you call them from a JavaScript app.

Expand Down Expand Up @@ -422,18 +422,19 @@ Traefik Proxy

Volto
[Volto](https://github.com/plone/volto) is a React-based frontend for Plone.
It is the default user interface for Plone 6.
It is one of two supported user interfaces, or frontends, for Plone 6.

The other frontend is {term}`Classic UI`.
````{seealso}
{doc}`/conceptual-guides/choose-user-interface`
````

Classic UI
Classic UI is a secondary frontend for Plone 6.
It is integrated with [Products.CMFPlone](https://github.com/plone/Products.CMFPlone/).
Its theme is named [Barceloneta](https://github.com/plone/plonetheme.barceloneta/).
It is based on Twitter Bootstrap 5.
It uses {term}`Mockup` as its JavaScript stack.
Classic UI is a frontend for Plone 6 that is based on {term}`ZPT` and {term}`Mockup`.
It is one of two supported user interfaces, or frontends, for Plone 6.

The other frontend is {term}`Volto`.
````{seealso}
{doc}`/conceptual-guides/choose-user-interface`
````

Mockup
[Mockup](https://github.com/plone/mockup/) is a package that, together with {term}`Patternslib`, builds the UI toolkit for {term}`Classic UI`, a frontend for Plone.
Expand All @@ -447,11 +448,17 @@ Patternslib
Accessibility, SEO, and well-structured HTML are core values of Patterns.

Slate
[Slate.js](https://docs.slatejs.org/) is a highly customizable platform for creating rich-text editors, also known as `WYSIWYG` editors.
[Slate.js](https://docs.slatejs.org/) is a highly customizable platform for creating rich-text editors, also known as {term}`WYSIWYG` editors.
It enables you to create powerful, intuitive editors similar to those you've probably used in Medium, Dropbox Paper, or Google Docs.

`volto-slate`
`volto-slate` is an interactive default text editor for Volto, developed on top of {term}`Slate`, offering enhanced WYSIWYG functionality and behavior.
`volto-slate` is an interactive default text editor for Volto, developed on top of {term}`Slate`, offering enhanced {term}`WYSIWYG` functionality and behavior.

WYSIWYG
WYSIWYG is an acronym for "what you see is what you get", referring to software that allows content to be edited in a form that resembles its appearance when printed or displayed as a finished product.

TinyMCE
The rich text {term}`WYSIWYG` editor used in {term}`Classic UI`.

elementEditor
A generic {term}`volto-slate` plugin architecture that can be used to create other editor interactions that follow the pattern of having a button that toggles a format (an inline element).
Expand Down Expand Up @@ -816,4 +823,8 @@ distributions
JSON Schema
[JSON Schema](https://json-schema.org/) is the vocabulary that enables JSON data consistency, validity, and interoperability at scale.

portlets
Portlets are widgets that can be inserted in predefined locations in pages in {term}`Classic UI`.
Portlets are most commonly used to add sidebars to the left or right of the main page content.

```
3 changes: 2 additions & 1 deletion docs/install/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,9 @@ https://demo.plone.org/
## Install Plone

First, choose a Plone user interface, or frontend.
% TODO: once https://github.com/plone/documentation/pull/1749 is merged, link to it
You can read {doc}`/conceptual-guides/choose-user-interface` to help inform your choice between Volto and Classic UI.

Then choose one of the following installation methods.
If you are following a [Plone training](https://training.plone.org/), it should specify which option to choose.

{doc}`create-project-cookieplone`
Expand Down

0 comments on commit 769336a

Please sign in to comment.