A report on the Plone Mosaic sprint in Barcelona and its amazing outcome: save the deco vision.

Plone Mosaic sprint final report

A report on the Plone Mosaic sprint in Barcelona and its amazing outcome: save the deco vision.

Last week we attended the Plone Mosaic sprint in Barcelona. The sprint was hosted at "Universitat Politècnica de Catalunya · BarcelonaTech" from 11th to 13th of June.

The goal of the sprint was to come out with a tool that will make Plone editors' life much easier: Mosaic.

Plone Mosaic allows you to define global site layouts and override them on specific contents or sections. You can then compose the content of the page using the Mosaic editor.

The Mosaic editor lets you insert blocks (a.k.a. tiles) into the content of the page so that you can easily build custom composite pages for your contents on the fly.

What have been done

As anticipated in our pre-sprint post we started from the hard work that has been done with the Deco prototype years ago.

The main intention was to reuse as much as possible, because we already had a lot of technology in there: portlets, tiles, viewlets, and of course the blocks rendering system.

We started with a summary by Rob Gietema and Asko Soukka on the latest state of the Deco eco-system: the editor, the layout management and the prototype of plone.app.page (an attempt to replace standard content types).

mosaic composer

We continued discussing on how to take the most out of this and above all on what we really wanted to achieve during the sprint. Finally we ended the first day with a shared vision of what we wanted to do.

We divided in teams and started working on the following main subjects:

  • Mosaic editor (use tinymce 4, make it a pattern for plone.app.widgets)
  • Site/page layout storage and management
  • Reuse single portlets
  • Dynamic rendering of CSS grid
  • Dynamic tiles retrieval based on custom policies
  • Update and fix tests

Mosaic editor

Mosaic editor teamFirst Rob ported the Deco editor to Mosaic, then I helped him to make the editor (formerly the Deco editor) work with the latest TinyMCE release shipped with plone.app.widgets. A lot of the internal APIs changed, but we managed to get it working after struggling a bit with the not-so-complete TinyMCE documentation.

In the meantime Ramon and Carlos created a modern widget for the layout field that relies on plone.app.widgets and the Patternslib.

The field that stores the custom layout of the page comes from the ILayoutAware behaviour that you can enable on any dexterity type. When you install Mosaic addon, the behaviour - hence the layout editing functionality - is activated by default on Plone default types.

Site / page layout storage and management

With Mosaic is possible to apply different layout on a site or on a section or on single content, and Asko did a great work this subject.

He simplified and improved the machinery for storing and retrieving the layouts, making possible to easily select and apply a different layout on a context by using the usual "Display" menu of the Plone green bar. It's also possible to define per content-type layout and to apply them by default on a specific content type.

Moreover he paved the road towards the missing functionality: editing the layouts Through-The-Web. This will make possible to create new layouts from the browser and use them on the fly. This will answer another common requirement for developers and integrators: create browser views TTW.

We still need to work on porting the editor from plone.app.page but we are already in good shape for this.

Reuse existing portlets


To ease the adoption of Mosaic and composite pages we agreed that the possibility to reuse existing portlets was a must-have.

We already have two important tiles into plone.app.standardtiles: the viewlet manager tile and the portlet manager tile.

The first one allows to render a portlet manager (like the entire left or right column), while the second one allow to render a viewlet manager (like header, footer, above content title, etc).

plone.app.standardtiles is the package that defines all the base standard tiles. All the most important viewlets (edit bar, navigation, document by line and so on) are already moved to tiles. Moving a portlets and viewlets to tiles is really easy, we will make sure to write some docs for it.

I worked together with Victor on a new tile that allows to render a single portlet. When you add this tile, you can select a type of portlet and you can configure it for the layout you are editing (global or local). We fought with the portlet machinery that is really complex but in the end we found the road trough views/managers/storages overrides.

We still need to solve the interaction with the Mosaic editor since this is a two-steps configuration (first the tile form, then the portlet form) and the editor is not made to work like this yet.

Dynamic rendering of CSS grid

Nowadays, when you are creating a site layout you usually want to use a specific grid-system like bootstrap or foundation. In Plone we have a default one called deco grid.


You can now declare the grid system you want to use by using a simple attribute on the <html/> element of the page:

<html data-gridsystem="deco">

Current available options are: deco and bs3, but you can easily register more of them.

Once you declared the grid system, to make your grids dynamic you need to provide grid metadata via json like this:

<div data-grid='{"type": "row"}'>
    <div data-grid='{"type": "cell",
"info": {"xs": "false",
"sm": "False",
"lg": "True",
"pos": {"x":1,
"width": 12}}}'>

If you are using the deco grid system this will be rendered as:

<div class="row">
   <div class="cell position-1 width-12">

That is... awesome!

The 'xs', 'sm', 'lg', properties will make possible to define how to render the elements on mobile devices. The editor does not support this at the moment but you can already decide if the element is to be shown or not when you create the static layout.

Dynamic tiles retrieval based on custom policies

A nice feature when showing a homepage or a dashboard to a user is to present him/her contents based on his/her interests or location or other personal informations. Guido worked on solving this kind of use case.

He created an extra addon called collective.dynamicmosaic that allows to assign tiles to page blocks on runtime, instead of using the assignment defined by the layout design. With this feature you can build the content of the page based on your custom rendering policies.

This package is independent from Mosaic because it uses the plone.app.blocks machinery to hook into the transform chain and retrieve tile assignments programmatically. Check the package docs to discover how to use it.

Update and fix tests

Arno, Gil and Guido, worked together on modernizing the test suite of all the main packages involved in the Mosaic project: plone.app.blocks, plone.tiles, plone.app.tiles, plone.app.standardtiles. They had tests but they need be dusted out and fixed to make them working with the latest plone release. This is always an ugly task but they did a great work!


Big thanks...

To Victor and Ramon for organizing this amazing sprint and the BarcelonaTech University for hosting us in such a nice and comfortable place!

To all the attendees that worked hard for pushing this forward.

To Abstract for allowing us to participate once again in the active and sparkling life of the Plone community.


The teams did an amazing work to revive the Deco vision and from now on we should refer to it as the Mosaic vision. The Plone community finally has something that is almost ready to use to boost Plone editing experience and making editors' life much easier.

We are going to work again on this in the next few months in order to translate this vision into reality. If you want to help, you can start by trying out the plone.app.mosaic package and maybe submitting bugs and ideas.

We will keep you up to date on any evolution of the Mosaic project. Stay tuned!

UPDATE - Mosaic screencast.

Thanks to Asko for this great screencast that shows what has been achieved during this sprint:


Some links to get involved

Share this on

Share |

On same topics


comments powered by Disqus