Plone Mephisto Sprint 2016 Report

Plone Mosaic 2.0 RC has now been released for Plone 5. Similarly to previous releases, you can deploy a demo site of it at Heroku with a single click. Please, join the bug hunt and help with reporting and fixing issues which matter you the most. Please note that Mosaic 2.0 is a major release because it no longer supports for Plone 4.3 (yet, most of the bug fixes could be cherry-picked to 1.0 branch by those who care). The final release will be made once possible migration problems from 1.0 have been solved.

Yes, there was a yet another Plone community sprint. Plone Mephisto Sprint 2016 happened at Leipzig, Germany, from 5th to 9th September, and was focused on improving TTW (through-the-web) experience of customizing Plone sites for better flexibility and hackability. The sprint was organized by Maik Derstappen and it was sponsored by Derico, e-ventis and Plone Foundation. Once the sprint was approved as a strategic sprint by the foundation, enhancing Plone Mosaic became the main target of the sprint.

The participants included Maik Derstappen (derico), Peter Holzer (agitator Weblösungen - BDA), Thomas Massmann (it-spirit), Asko Soukka (University of Jyväskylä), Thomas Lotze, Andreas Jung, Stefania Trabucchi, Jens Klein (Klein & Partner KG - BDA), Christoph Scheid (Uni Marburg), Kristin Kuche (Uni Marburg), Stephan Klinger (der Freitag), Nathan Van Gheem (Windcard Corp), Veit Schiele, Gil Forcada Codinachs (der Freitag), Ramon Navarro Bosch, Michael Töpfl (e-ventis.de) and Christoph Töpfl (e-ventis.de). During the sprint there was also remote participation by Dylan Jay and Rodrigo Ferreira de Souza (Simples Consultoria).

Let's start with some Github Activity statistics collected by Nathan Vangheem from the sprint. During the sprint, at least the following packages were touched with these great numbers:

• plone.app.mosaic (23 PR, 154 commits, 2 outstanding PRs)
• plone.app.blocks (4 PR, 18 commits)
• plone.app.standardtiles (9 PR, 18 commits, 2 outstanding PRs)
• plone.app.tiles (4 PR, 9 commits)
• plone.tiles (2 PR, 16 commits)

Behind those numbers, there was a lot of bug fixes, new issues reported, some refactoring and simplification, few major changes to the foundations of Plone Mosaic, and the long awaited initiative for more complete configuration documentation. Thanks to all the bug fixes, Mosaic Editor and TinyMCE in it will break much less often. Also layout related permission work now as expected. To name the other major fixes and changes to Plone Mosaic, we:

• deprecated dedicated image and attachment tiles in favor of using image and file content types and linking them with rich text tiles as without Mosaic.
• removed complex universal pluggable grid system (tm) implementation in favor of simply using such CSS grid class names that it's possibly to build any current grid system for those class names. This finally makes Mosaic edit and view mode show the same grid by default on Plone 5.
• removed Mosaic Editor from content add forms and introduced a simple add form with just title and description for those content types, which have Mosaic enabled and its layout view defined as their default view. This removes all experienced confusion of add forms some times behaving differently from edit forms and not being able to save images directly inside the new containerish content.
• unified HTML tile implementations and removed dedicated example tiles for headers, lists, etc, in favor of a single rich text tile (which would still allow similar dedicated or templated tiles).
• introduced outline mode for the editor (pressing Alt modifier key while in editor) to keep the default editor experience simple, but still allow more technical look into the layout and make it easier to split the layout into separate rows.
• fixed a major issue where versioning of content with blobs in its tiles' configuration created empty blobs into filesystem. This has been a major issue for collective.cover users and is now fixed with new plone.app.tiles releases (1.1.0 for collective.cover).

In addition

• we fixed a few site layouts related compatibility issues with Plone 5 and added a support for enabling site layouts support with a single line in buildout. Site layouts are not yet enabled by default.
• we implemented a new, but transparent, tile configuration and data storage to mostly avoid using annotation objects with shared content layouts (and be more friendly for ZODB connection cache).
• Michael and Christoph (Töpfl) worked on Rob Gietema's ReactJS based Mosaic Editor experiment, and Ramon started a new Angular 2 based Mosaic Editor experiment. Hopefully at least the other one will succeed to give us a fresh flexbox based layout editor during the next year.
• Maik lead work on example content layout to be shipped with the final Mosaic 2.0 release.
• Andreas started work on allowing custom views for existing content tile.
• Dylan worked on user interface and TinyMCE support for allowing tiles inside rich text tiles.
• Rodrigo worked on refactoring code of RSS and calendar portlets to be easily re-usable with respective tiles.

We also discussed about the path to get Mosaic into Plone core. The current plan is to get Mosaic dependencies into Plone core first (plone.tiles, plone.app.tiles, plone.app.blocks, plone.app.standardtiles), but only PLIP the user interface package (plone.app.mosaic) when it works well enough with the other add-ons shipped with Plone (e.g. multilingual). Unfortunately, no PLIPs were written yet.

A few photos from the sprint are available at Google Photos. In addition to full day sprinting, we did get a city tour around Leipzig and enjoyed Maik's barbequing at the sprint garden. Maik did a great job in organizing the sprint, and I really hope, we made it worth the effort. And as always, the work around Plone Mosaic continues also after the sprint. It's still huge effort left, but while it's still not ready for Plone core, it can already be customized to give real return on investment, as seen in Castle CMS. Finally, Big thanks for everyone participating the sprint. It was a pleasure to work with you, and I hope to see you all again!

Creating flexible and responsive tile-based pages using Plone Mosaic

What is Plone Mosaic?

Plone Mosaic is a new layout solution for Plone CMS. Mosaic, Blocks and Tiles provide a simple, yet powerful way to manage the pages on your Plone website. 

In this article I will give examples on how to create and edit flexible and responsive tile-based pages using Plone Mosaic. I'll also discuss some issues I have so far bumped into, and ponder on the possibility to use Mosaic to replace Portalview, our current tool to compose customized portals. I'll use Plone 5, the newest version of Plone CMS.

• https://github.com/plone/plone.app.mosaic
• Mosaic documentation
• Example page made using mosaic 

Normally a Plone page consists of a title, description and content section. Using Mosaic one can easily create custom layouts and use them as templates for othes pages.

Mosaic editor example

1. How to Create a Mosaic Page

All too easy:

1. Add a new page
2. Select Display -> Mosaic layout
3. Select Basic or Document layout
4. Save

Basically you first have to create a page and then change how the page is viewed - using normal Plone page layout or Mosaic layout. 

2. How to Edit a Mosaic Page 

Mosaic editor on Plone 5

You can still edit normal page properties on the top left corner, but for editing Mosaic layout, there are two menus on the top right corner: Format and Insert.

At first I'll insert a couple of tiles into place. Starting with text tiles is the way to go.

Insert menu

It is easy to drag and drop the tile into a desired place. There can be 1-4 colums side by side. And they are responsive too.

In this example I added two text tiles and an image.

 

Drag and drop the new tile to a desired place.

Image dropped over a text tile

Embedding media works well too using the Embed tile (and Oembed). Just add a media URL.

One thing missing here, though, is the opportunity to change embed size. Quite often the video size is not optimal.

3. Formatting a Mosaic Page

I can quickly drag and drop new tiles to the page, rearrange or delete tiles.

If I want to edit a text tile, I'll just click it and a TinyMCE editor appears:

TinyMCE on Mosaic text tile

The editor has basic editing features, such as:

• Formatting (headers, paragraphs etc.)
• Text alignment
• Bullet lists
• Images
• Links

Occasionally I have missed the opportunity to edit HTML, though.


However, the basic formatting functions on tiles go a long way:

Formatting options

I can change content alignment, add a dark background and add some padding between tiles. Of course this could be done using Plone theming tools too.

Changing the structure of a mosaic page is really easy and it works well - I haven't come across any issues on drag and drop (Using Firefox on OSX).

Replacing Portalview with Mosaic?

One use case for Mosaic when we migrate our websites to Plone 5 could be replacing our multiple portal pages. They are created using our own Portalview composition add on (sorry, only a really old version available!). Portalview contains e.g. the following features:

• Possibility to compose a customised layout (based on folders and other Plone content)
• Image/text/video/page carousel (Yes I know, carousels are evil :)
• Accordions
• Tabs
• Dropdown menu
• Custom CSS!

All can be manipulated in the browser.

An example here:

And another one:

Issues and suggestions

In addition to myself there are couple of users and content managers working with Mosaic. First comments have been positive: "This looks shiny and modern!" More experience we will get next autumn when users begin to create new site for a new faculty at University of Jyväskylä.

"This looks shiny and modern!"

Some issues or suggestions for features so far:

• Selecting between basic and document layout is probably not needed activating Mosaic layout?
• In addition to text tile there are list elements and subheadings - they can be added through text tiles - perhaps not needed as tiles at all?
• No unique ID:s on different tiles - makes it harder to create customised CSS for certain tiles
• TinyMCE doesn't show html view. Could come handy at some cases (embedding an iframe for example)
• Not possible to change embed size.  
• No custom CSS

Overall technically Mosaic is very robust - I haven't come across any errors or technical issues while using it.

However, Mosaic still has some missing features in order to replace Portalview as it is, but luckily:

Plone Mephisto Sprint 2016, Leipzig, Germany, September 5th-9th 2016

Due to power of the awesome Plone open source community, there will be a sprint to develop Plone Mosaic further!

• Mephisto Sprint 2016
• Mosaic Issues