8. What’s New in Plone 5 and 5.1

Plone 5.0 was released in September 2015 and is the currently at version 5.0.8 main version if Plone. Plone 5 was a mayor release, that changed the content type framework, the user interface and the default design.

Plone 5.1 will be released in Oktober 2017 and holds a couple of smaller improvements.

If you are already familiar with Plone 5 and 5.1 you can skip this section.

8.1. Default Theme

The new default theme is called Barceloneta

It is a Diazo theme, meaning it uses plone.app.theming to insert the output of Plone into static html/css.

It uses html5, so it uses <header>, <nav>, <aside>, <section>, <article> and <footer> for semantic html.

The theme is mostly built with LESS (lots of it!) and uses the same grid system as bootstrap. This means you can use css classes like col-xs-12 col-sm-9 to control the width of elements for different screen-sizes. If you prefer a different grid-system (like foundation) over bootstrap you can adapt the theme to use that.

The index.html and rules.xml are actually not that complicated. Have a look at them.

The following example from rules.xml makes sure that the banner saying “Welcome! Plone 5 rocks!” is only visible on the frontpage:

<!-- include view @@hero on homepage only -->
<after css:theme="#mainnavigation-wrapper"
       css:content=".principal"
       href="/@@hero"
       css:if-content="body.template-document_view.section-front-page" />

The browser-view @@hero (you can find it by searching all ZCML-files for name="hero") is only included when the body-tag of the current page has the css-classes template-document_view and section-front-page.

8.2. New UI and widgets

The green edit bar is replaced by a toolbar that is located on the left or top and can be expanded. The design of the toolbar is pretty isolated from the theme and it should not break if you use a different theme.

The widgets where you input data are also completely rewritten.

  • We now use the newest TinyMCE
  • The tags (keywords) widget and the widgets where you input usernames now use select2 autocomplete to give a better user experience
  • The related-items widget is a complete rewrite

8.3. Folder Contents

The view to display the content of a folder is new and offers many new features:

  • configurable table columns
  • changing properties of multiple items at once
  • querying (useful for folders with a lot of content)
  • persistent selection of items

8.4. Content Types

All default types are based on Dexterity. This means you can use behaviors to change their features and edit them through the web. Existing old content can be migrated to these types.

8.5. Resource Registry

The resource registry allows you to configure and edit the static resources (js, css) of Plone. It replaces the old javascript and css registries. And it can be used to customize the theme by changing the variables used by LESS or overriding LESS files.

8.6. Chameleon template engine

Chameleon is the new rendering engine of Plone 5. It offers many improvements:

Old syntax:

<h1 tal:attributes="title view/title"
    tal:content="view/page_name">
</h1>

New (additional) syntax:

<h1 title="${view/title}">
    ${view/page_name}
</h1>

Template debugging:

You can now put a full-grown pdb in a template.

<?python import pdb; pdb.set_trace() ?>

For debugging check out the variable econtext, it holds all the current elements.

You can also add real Python blocks inside templates.

<?python

from plone import api

catalog = api.portal.get_tool('portal_catalog')
results = []
for brain in catalog(portal_type='Folder'):
    results.append(brain.getURL())

?>

<ul>
    <li tal:repeat="result results">
      ${result}
    </li>
</ul>

Don’t overdo it!

8.7. Control panel

  • You can finally upload a logo in @@site-controlpanel.
  • All control panels were moved to z3c.form
  • Many small improvements

8.8. Date formatting on the client side

Using the js library moment.js the formatting of dates was moved to the client.

<ul class="pat-moment"
    data-pat-moment="selector:li;format:calendar;">
    <li>${python:context.created().ISO()}</li>
    <li>2015-10-22T12:10:00-05:00</li>
</ul>

returns

  • Today at 3:24 PM
  • 10/22/2015

8.9. plone.app.multilingual

plone.app.multilingual is the new default add-on for sites in more than one language.

8.10. New portlet manager

plone.footerportlets is a new place to put portlets. The footer (holding the footer, site_actions, colophon) is now built from portlets. This means you can edit the footer TTW.

There is also a useful new portlet type Actions used for displaying the site_actions.

8.11. Remove portal_skins

Many of the old skin templates were replaced by real browser views.

8.12. Plone 5.1

Plone 5.1 holds a long list of incremental improvements. But none really changes the way you develop for Plone. Here are three noteworthy changes:

  • The operations for indexing, reindexing and unindexing are queued, optimized and only processed at the end of the transaction. This change can have big performance benefits.
  • Actions now have a user-interface in the Plone control panel. You no longer need to use the ZMI to manage them by hand.
  • “Retina” Image scales: Plone now has scales for high pixel density images.

For a longer list of changes see the upgrade-guide (once 5.1 is released).