8. What’s New in Plone 5¶

If you are already used to Plone 5 you could skip this section.

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.

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

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

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.

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.

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!

Control panel¶

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

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

plone.app.multilingual¶

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

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.

Remove portal_skins¶

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