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.

This talk is about the issues that you face when your project grows, the code base grows, the database grows, the problems grow. This is about the causes and some of the remedies.

[zeoserver]
eggs = ${buildout:eggs}

ModuleNotFoundError
AttributeError
ImportError
PostKeyError
BrokenObject

./bin/instance zodbverify -f var/filestorage/Data.fs -o  -D

import transaction
transaction.commit()

from collective.relationhelpers.api import cleanup_intids
from collective.relationhelpers.api import purge_relations
from collective.relationhelpers.api import restore_relations
from collective.relationhelpers.api import store_relations
# store all relations in a annotation on the portal
store_relations()
# empty the relation-catalog
purge_relations()
# remove all relationvalues and refs to broken objects from intid
cleanup_intids()
# recreate all relations from a annotation on the portal
restore_relations()

How does Plone theming look in classic UI?

• html5 theme plus a mapping configuration
• deploying themes as ZIP-file for shared hosting is possible
• With Diazo you can map any Plone html to a static theme layout.

Separating frontend and backend theme. Don't reinvent the backend views! You could theme the backend, so for content editors and admins, but it looks fine, not needed. You should focus on the frontend layout for visitors. To use the default backend layout you can include backend.xml in your rules, with some conditions.

Diazo is not for everything! If the backend markup differs from what you need, do not try to solve it with Diazo or XSLT. Instead, fix the backend templates directly, most likely with a z3c.jbot override.

You can use theme fragments or browser views to add new templates. The theme fragments can also be used as tiles in Mosaic.

I like using SASS mixins. Say you have a

For more information on Diazo, see https://diazo.org.

How to create a theme for Plone 6. Quite easy, because the templates use Bootstrap 5 classes. We build a theme from scratch, no Barceloneta, no Diazo.

First step is to create an empty plone_addon package with plonecli or mr.bob. For the questions you can answer: use Plone 5.2.1. We will switch later. My theme is plonetheme.munich.

I recommend to cleanup the standard package a bit. I remove tests, constraints for Plone 4 and 5. Check it out in the commits.

Now switch to extend Plone 6 and run the buildout.

You can add theme structure with a bob template, but I prefer creating my own.

Some interesting files:

• package.json lists various tasks, especially the watch task.
• In the theme manifest.cfg we more or less disable Diazo by emptying the rules line.
• The compiled CSS and JavaScript are registered in registry.xml.

You can compile SASS to CSS using npm or yarn. Do yarn install in the top of your package. Later, with yarn dist you make it ready for production.

After these steps Plone is partially broken, or at least ugly. I do some basic fixes and it looks better.

For templates that you need to change you add z3c.jbot overrides. Personally I always kick out the "search in section" checkbox.

I don't like columns, but for this example I kept them. In most cases I need just one column. Plus maybe a side bar for portlets, but portlets must die.

With plonetheme.tokyo everything is Bootstrap, no columns, so no portlets, really fully responsive. This was the package where we built on Barceloneta Plone 5.2 and introduced lots of template overrides to put in Bootstrap. For Plone 6 we can just remove the overrides.

What about the toolbar? Yes, we dropped it. We bring editing features and navigation together. This is now a few feature: collective.sidebar. It is only one template to override. It works for Plone 5.2 at the moment, and I may work on it for Plone 6 during the sprints.

Question: is TTW still a viable path?

Answer: I like to concentrate on one path. I am not an expert in TTW theming. I switched to file system, except really small customizations. For small CSS customizations there is a field in the theming control panel.