As a kid, I played tennis. I was taught to hit the ball hard, and as close as possible over the net. Nowadays, trainers tell you to hit the ball slower, hit it longer, giving you more control, with topspin. So that is a trade-off between power and control.

A traditional, classic CMS is usually stuck in the past. Using dead technologies, like jQueryUI, an old stack. That is partially true for Plone 5 as well, although it looks prettier than most of the others.

WordPress uses the Gutenberg editor. Whenever I try out WordPress again, I keep having the feeling: I am not smart enough for this. I add a few images, and want to make them look the same size. They have lots of controls for that. Eventually I succeed, because I am a web developer. For text, you can choose lots of sizes and colors.

But: I am not a designer. I can accidentally pick a color combination that does not work for colorblind people. I don't know all this, so I tinker around and end up with a bad product.

The web is hard. You need a consistent design. Designers themselves are specialized into UI or UX. It needs to be responsive.

Plone 6 is not a classic CMS. It is a modern CMS providing both power and easy of use, and I think it is the only enterprise CMS that offers this.

Albert Casado created the Pastanaga UI. In the toolbar you see options to add or edit or order content, and the rest is still there, but hidden. For image alignment we show four options, and for size three options. This is simple, but it already gives you twelve possible combinations.

The Plone 6 UI is all about blocks, blocks, blocks. Responsive design means you usually have only one column, instead of the three that you can have in Plone 5.2. That single column will be a stream of blocks.

In Plone 6 you can use grid layouts. We started from scratch a couple of times on this, but we have something good now.

We have a teaser block. This is often used for landing pages. You add a teaser block that is linked to an existing content item, and it will show its image, title, description.

Plone 6 will ship with a few default blocks, like text, image, video, table of contents, etcetera. There are about a hundred Plone packages on npm now which have their own blocks. The Plone company Eau de Web works for the EEA (European Environment Agency) and they open source all their blocks, for example a faceted search block. RedTurtle created a forms block. Some others did as well, and then we usually cooperate and end up with an improved version.

We have "No Code Content Types". You can create contenttypes TTW in Plone, but what was always missing, was templates so you can customize how they look. We now have that.

The Volto frontend that will be in Plone 6 is in production use since 2019. A top German government institution uses Plone 6, American universities, Osaka University in Japan, EEA in Europe, many municipalities in Italy.

Today you can use battle tested Plone 5.2 plus Plone REST api plus Volto. That is already Plone 6-ish. You can also use the real Plone 6 alpha release.

In the past, all Plone versions were supported for many many years, but we never really advertised it. Now the Release Team and Security Team have said they will support Plone 6 for at least five years.

If you are not ready yet and need more time before you jump on Volto, then you can use Plone Classic UI. There is no need to rush, we have got you covered.

Summary: Plone 6 provides something really unique.

How can we efficiently develop a Plone backend? What do we expect from the tooling?

• Should be easy to adopt for new developers
• reduced development time
• following best practices
• provide test infrastructure and basic tests

These are our two friends:

• plonecli
• plone-snippets for VS Code

plonecli is a command line tool, installed with pip together with bobtemplates.plone, here version 6.0b10. With it, you iteratively enhance your add-on.

Let's create a restaurant add-on with a content type for the menu data, a vocabulary for the menu category, control panel, plus a bit more.

Demo:

plonecli create addon collective.restaurant
cd collective.restaurant/
plonecli add controlpanel

Open Visual Studio Code (my preferred editor) and edit the created controlpanel.py. Add a field: a list of categories. Now add a vocabulary for this:

plonecli add vocabulary

Edit menu_category.py to let this get the contents of the controlpanel field from the registry.

Add two content types: Menu and Menu Item:

plonecli add content_type

Edit menu_item.py. When you have plone-vs-snippets installed in VS Code, it is easy to add fields. Add a photo (NamedBlobImage), menu_category (Choice with your menu vocabulary name).

Edit the types/*.xml files to enable behaviors like plone.basic and plone.namefromtitle.

Now get a local environment, mostly by running buildout, and start the instance, with:

plonecli build
plonecli serve

On http://localhost:8080 create a Plone Site and activate collective.restaurant and plone.restapi. Go to the Restaurant control panel and add a few categories, like Starters, Main, Desserts. Now you can add a Menu folder and add menu items in various categories.

The basic data is available through the REST api. But we want more. Add a service RelatedDishes:

plonecli add restapi service

Edit api/services/related_dishes/get.py and use api.content.find to look for other Menu Items with the same category.

To make searching easier, edit profiles/default/catalog.xml. With the Plone VS code snippets, you can agains easily add a catalog index here. We will need an upgrade step to apply this:

plonecli add upgrade_step

Restart, reindex, and it works.

Please help by contributing templates to bobtemplates.plone or create an issue when you think a template can be improved. Or create an own similar package, like bobtemplates.migration.

Ideas for the future:

• Rest API support question in addon template
• Rest API sub-templates for serializer and deserializer
• support for Mosaic tiles
• graphical UI (ncurses) to make choices easier

I have been working alongside of the documentation training teams the past months. In this talk I will tell you about the past, present and future of these. Of course, I follow this with a call to contribute!

I am just a messenger. Discussions can get heated between developers when talking about how to document things. Don't shoot the messenger.

https://plone.org should use Plone 6, with default frontend Volto. Rikupekka Oksanen will talk about that tomorrow.

We made a couple of talks for Plone Conference 2020. This talk is basically a summary of the story behind modernize Plone's classic UI + Theming based on this work. We're going to show how to create a theme for Plone 6 Classic UI based on Barceloneta and from scratch.

In discussions during several Plone events, we saw that everyone tried to use Bootstrap, including its components. We wanted to use bootstrap variables in Plone, instead of having our own definitions with slightly different names.

We and others made several PLIPs, Plone Improvement Proposals:

• Modernize markup in templates
• Modernize default theme, Barceloneta LTS
• Modernize javascript to ES6

We want to make things easier. Creating a modern UI for the web is complex. You need to support different devices. Users expect things to work in a certain way, because they have seen it on many other sites.

From a developer perspective:

• You expect one way to do things.
• Developers should not have to worry about design, markup. You just want to use a component.
• Find examples in (Bootstrap) documentation and just copy it.

In Plone 6, the default UI is Volto. But Classic UI will remain there for years, so it had to be updated. For starters: Bootstrap 5. It is the most used framework. If you don't use it, you miss out on a lot of fun.

• There is support for custom properties, also known as CSS variables.
• SVG icon library
• vanilla javascript, no jQuery
• dropped IE10 and IE11 support.

In Plone 6 Classic UI:

• Templates updated to Bootstrap 5.
• They use the Bootstrap components as documented.
• Barceloneta theme uses an opinionated set of bootstrap variables.

Demo site is on https://6-classic.demo.plone.org/

TTW theming:

• No more Through The Web compilation.
• You can sill upload a zip with a theme.
• Support for custom css via theming controlpanel, via a simple form which is already there in Plone 5.2.

Filesystem based theming:

• plonetheme-barceloneta-base as npm package
• We have updated bobtemplates.plone using that package. Use plonecli to create an add-on package and then let it add a theme to your package.
• Three options: you inherit from Barceloneta or create from scratch or use Diazo.
• Compile the scss with npm.
• Diazo is still there and works like before.

Javascript:

• The javascript no longer uses RequireJS.
• We updated jQuery, although you do not need it much anymore.
• No more TTW build.
• Mockup was udpated to ES6, based on patternslib.
• Resource Registries is there, but the TTW compilation is gone.
• There are basically only bundles, no resources.
• You no longer have to create manual timestamps. The webresource library creates automatic hashes instead.

How to deal with icons?

• We use bootstrap icons by default.
• Icons are loaded as inline SVG.
• We have icons for content types, Plone UI icons, toolbar, mimetypes with fallback.
• Registration is done in plone.staticresources, in XML.
• Use in a template:

<tal:icon replace="structure icons.tag('love', tag_class='custom-class', tag_alt='foobar')" />

Can you insert icons in content?

• You could copy SVG into HTML, though it is not so nice.
• Planned is a TinyMCE pluging to select and add an icon.
• But discussion is in progress.

Custom icons in Plone:

• Try out collective.fontawesome
• Register SVG icons as resource.
• Add XML to register icon names.
• Setup a profile for an icon font, but that is also part of discussion.

Further:

• Typography and overall look is modernized.
• Especially the Event, File and Image content type look nicer.
• Control panel has much bigger icons.
• We made sure it looks good on mobile devices.

How to theme:

• https://training.plone.org is updated, and we used it on Saturday
• https://docs.plone.org will be updated pretty soon.

Talk to us on Plone Discord in the #classic-ui room.

The community surrounding the Plone Foundation is an integral part in the success of Plone, and is what continually draws us to meet together for conferences and sprints.

Plone Foundation President Chrissy Wainwright talks about what the community has meant to her, the current state of the community, and what our hopes are for the future.

Each conference is a family reunion for us. It is also about swapping pants, borrowing flags, playing accordeon, drinking a barrel of saki, sword fights, or trying to get a katana on a plane.

Plone has a Steering Circle now, where team leaders and others meet, and discuss what is happening currently in Plone and where we are going. If you have questions for these meetings, please send them. The next one is next Friday during this conference.

https://training.plone.org has lots of training material, including the updated trainings from last weekend.

We have two podcasts now: the Plone podcast and the Plone Newsroom.

Sprints are meetings in person where we code, document, discuss. Covid has made this mostly impossible, but some online sprints were held. This online conference is being followed by people on a sprint in Sorrento, Italy.

My first talk was in 2009 about viewlets in Plone 3. I realized that due to my work for SixFeetUp I was learning parts of Plone that not everyone else knew. Since then I have done lots of talks, and have been on the Plone Foundation Board for seven years. My current term will be my last, so I can focus more on my family. I won't go anywhere: I will continue to use Plone.

Get involved! How can you help Plone?

• Fix bugs, write new features.
• Ask and answer questions on https://community.plone.org
• Contribute to the documentation: https://docs.plone.org
• Update translations for your language.
• Go to a conference, or organize one.
• Join a team: https://plone.org/teams

Tips for gettings started:

• Even small contributions are helpful.
• Don't complain about things that do not work as you expect. Open an issue instead. Document a workaround.
• Ignore the imposter syndrome. Lots of Plone people will be happy to help you.

I am looking forward to many more Plone memories.