plone.app.mosaic 2.0.0rc1

Concepts

Mosaic, Blocks and Tiles provide a simple, yet powerful way to manage the pages on your Plone website. At their core, they rely on semantic HTML and resources with valid, publishable URLs.

Mosaic Editor editor is a visual editor for pages rendered using Blocks. It relies on a grid system to place tiles onto a page in an intuitive, WYSIWYG, drag-and-drop manner. Using Mosaic Editor, it is easy to compose pages with complex, balanced and visually appealing layouts.

Currently, the Mosaic Editor is activated, when any content with Mosaic layout view active is being edited. (Mosaic layout is available for any content with Layout support behavior enabled.)

Blocks is a rendering algorithm based on HTML markup conventions. A page managed by Mosaic Editor is stored as a simple HTML document representing the actual content of that page as a standalone, publishable resource devoid of any site layout content (e.g. global navigation elements). This is referred to as content layout.

Tiles represent the dynamic portions of a page. At its most basic level, a tile is simply an HTML document with a publishable URL.

In practice, tiles are usually implemented as browser views deriving from the Tile base class and registered with the <plone:tile /> ZCML directive. This allows tiles to have some basic metadata and automatically generated edit forms for any configurable aspects, which Mosaic will expose to users. See plone.tiles for examples.

When work with tiles in Mosaic Editor, there are three types of tiles:

Text tiles

Static HTML markup (WYSIWYG-edited text) placed into the content or site layout. Strictly speaking, text tiles are not tiles in that they do not involve any tile fetching or merging - instead they are stored as part of the page or site layout. To the user, however, a text tile can be moved around and managed like any other.

Field tiles

Render the value of a metadata field such as the title or description. The values of field tiles may be edited in-place in the page, but the value is stored in the underlying field and can be indexed in the catalog, used for navigation and so on. In practice, a field tile is an instance of the special tile plone.app.standardtiles.fields with the field name passed as a parameter.

App tiles

Any other type of dynamic tile. Examples may include a folder listing, a media player, a poll or pretty much anything else you can think of.

Installation

Plone Mosaic is installed by building a Plone site with package plone.app.mosaic and activating its Plone Mosaic add-on. The package has following dependencies:

plone.tiles >= 1.8.0
plone.app.tiles >= 3.0.0rc1
plone.app.standardtiles = 2.0.0rc1
plone.app.blocks >= 4.0.0rc1
plone.app.drafts >= 1.1.1
plone.app.widgets >= 1.8.0

A example set of version pins for Plone 5 that works with the latest plone.app.mosaic is:

plone.tiles = 1.8.0
plone.subreqeust = 1.7.0
plone.app.tiles = 3.0.0
plone.app.standardtiles = 2.0.0rc1
plone.app.blocks = 4.0.0rc1
plone.app.drafts = 1.1.1
plone.app.mosaic = 2.0.0rc1

After the add-on activation, the new content layout and editor support can be enabled for any content type by enabling behaviors Layout support and Drafting support.

Status

Plone Mosaic is considered to be in beta phase. Most features for the first final release are done, but there may still be bugs, which should be reported. Not all the features of Plone Mosaic have yet easily accessible UI (e.g. layouts can be created into portal_resources and bound to content types as named views only through Zope Management Interface, ZMI).

Backend development

Plone 5 version of Plone Mosaic is available for development using plips/plip-mosaic.cfg at Plone 5 coredev-buildout.

Plone 4 version of Plone Mosaic can be developed by cloning the product directly.

Clone and build:

$ git clone https://github.com/plone/plone.app.mosaic
$ cd plone.app.mosaic
$ python bootstrap.py  # clean python 2.7 virtualenv recommended
$ bin/buildout

Startup:

$ bin/demo

Get started:

• open a browser at http://localhost:55001/plone/++add++Document

• login as admin with password secret

• save the new page

• from the Display-menu, select the new entry Mosaic layout

• click Edit to see the new Mosaic Editor

Alternatively you can also use bin/instance fg.

Frontend development

Plone Mosaic requires javascript and css bundles, which must be manually updated for Plone 4.3.x with:

$ make install
$ make clean all mode=release

The bundle can also be built with source maps and watched for changes with:

$ npm install
$ make clean all watch

Webpack based frontent development

Plone Mosaic can be developed with Webpack running:

$ make watch_theme

or starting the instances either manually or with make watch_instance and starting the Webpack development server with:

$ make watch_webpack

Once you have activated theme called Plone Mosaic, the editor will be reloaded and rebuilt by Webpack development server after each filesystem change.

Documentation screenshots

To script screenshots into the Sphinx documentation, use the development buildout:

$ git clone https://github.com/plone/plone.app.mosaic
$ cd plone.app.mosaic
$ python bootstrap.py  # clean python 2.7 virtualenv recommended
$ bin/buildout -c develop.cfg

To speed up your iterations, before compiling the docs, start the robot server with:

$ bin/robot-server plone.app.mosaic.testing.PLONE_APP_MOSAIC_ROBOT -v

With robot-server running, you can re-build the docs’ screenshots relatively fast with:

$ bin/robot-sphinx docs html

Or simply run the embedded screenshots as robot tests from a single document with:

$ bin/robot docs/getting-started.rst

or with phantomjs:

$ bin/robot -v BROWSER:phantomjs docs/getting-started.rst

and open ./report.html to view the test report.

Just add Debug keyword anywhere to pause the robot in the middle of the screenshot script and drop you into a Robot Framework REPL.

2.0.0rc1 (2016-09-15)

WARNING: Migration from 1.0.0 to 2.0.0 may still unsolved have issues.

Breaking changes:

• Drop compatibility with Plone 4.3. For Plone 4.3 support, please use plone.app.mosaic < 2.0 [datakurre, jensens]

• Depend on adapterized plone.app.blocks >= 4.0.0 [jensens]

• Depend on plone.app.contenttypes (for GS install profile) [jensens]

• Move to using plone.app.standardtiles.html instead of the deprecated plone.app.standardtiles.rawhtml [vangheem]

• No longer use special HTML tiles that do not work in reusable layouts. These tiles are now all deprecated: table, numbers, bullets, text, subheading, heading [vangheem]

• Remove use image and attachment tiles as they are now deprecated [vangheem]

• Move custom layout from ‘content’ to ‘customContentLayout’ attribute [datakurre]

• Replace Deco-grid styles with Bootstrap mixins form mixins.grid.plone.less. Allows to use override grid system using standard mosaic class names. Main purpose is to unify the edit and view of your layout (fixes https://github.com/plone/plone.app.mosaic/issues/231). [agitator]

New features:

• Customize add form for types that have ILayoutAware enabled so that it just presents a title/description field [vangheem]

• Provide outline mode to be able to inspect rows and tiles [datakurre]

• Add preview button (disabled by default) for previewing currently edited layout [datakurre]

• Add a new raw embed tile [agitator]

• Saving a layout will now save default values for html tiles on the reusable layout. [vangheem]

• Provide better use of permissions in UI and enforcements on the server [vangheem]

• Enhance layout selector styles [vangheem]

• Hide plone toolbar when mosaic editor is active [vangheem]

• Move tile remove button onto tile instead of in toolbar [vangheem]

• Rename “Close” to “Done” on properties form. [vangheem]

• Add sitelayouts-meta.zcml, which allows enabling site layouts in buildout with zcml = plone.app.mosaic-meta:sitelayouts-meta.zcml [datakurre]

Bug fixes:

• Handle missing tiles and tile configuration with layout editor where it doesn’t destroy user’s ability to still edit the layout/tiles. [vangheem]

• Fix bug when tinymce editor would no longer work when dragging one rich text tile around another rich text tile. [vangheem]

• Fixes TinyMCE focus issues, disables row merging [vangheem]

• Fix TinyMCE Insert Image search results to have fixed maximum height to prevent it from flowing over viewport [datakurre]

• Fix fieldset tabbing not working after user edits field tiles [vangheem]

• Fix pasting into title, description fields [vangheem]

• Use POST to render tiles through the editor so default query parameters provided in url can be utilized with latest plone.tiles [vangheem]

• Fix problem where layouts could be saved without a name [vangheem]

• Fix table context menu overlapping modals [vangheem]

• Fix default layout image not showing properly [vangheem]

• Fix modal to be structured like other plone modals [vangheem]

• Fix to not set own overhead space of edit modal, the default should apply [jensens]

• Fix reference to default layout preview image [vangheem]

• Fix issue where pattern settings are not applied to the body tag for mosaic layouts [jensens]

• Fix issue where plone_pattern_setting view lookup ran into empty (now renders all) [jensens]

Refactoring:

• Move list of valid layout view names for LayoutWidget in a module variable, so it can be extended on demand [jensens]

• Remove superfluos empty testing gs profile and its zcml [jensens]

• Log warning if plone_pattern_settings view was not found [jensens]

• Fix robot tests in docs to no run into timing traps [jensens, gforcada]

• Use buildout.coredev version pins [gforcada]

• Update testing infrastructure [gforcada]

• Make layouts HTML valid [gforcada]

• Add Webpack based frontend development flow [datakurre]

1.0 (2016-04-11)

• Nothing changed.

1.0rc2 (2016-04-08)

• Fixed TypeError during editing when no layout resource directory was found. [maurits]

1.0rc1 (2016-04-07)

New:

• Allow users to save layouts they are creating [vangheem]

• If only one layout is available, auto-select it. [vangheem]

• Be able to show/hide content layouts. [vangheem]

• Add Mosaic layout into available views views when layout behavior is enabled and remove the view when layout behavior is disabled from a portal ype [datakurre]

• Ability to limit maximum amount of Mosaic columns by setting data-max-columns attribute on data-panel -element (default: 4). [neilferreira]

• Align rich text editor right if the tile is more on the right side of the page [vangheem]

Fixes:

• Do not remove data-pat-tinymce body attribute as this is not necessary with how tinymce is initialized anymore [vangheem]

• Fix use of rawhtml text tile [vangheem]

• Fix case where you could get an error on save because mosaic could not figure out the tile type correctly [vangheem]

• Do not allow hitting enter for editing non-rich text fields [vangheem]

• Disable clicking links of content inside tiles while in edit mode [vangheem]

• Fix TinyMCE widget in add-form which was broken due to a change how the settings are stored in Plone 5 vs 4. BBB compatible. [jensens]

• Fix tinymce toolbar scrolling out of view with large rich text tiles. TinyMCE toolbar will now being sticky as the user scrolls down. [vangheem]

• Fix tiles not rendering correctly if they contain JavaScript patterns when adding and moving them around. [vangheem]

• Fix do not add _layout multiple times to tile data [vangheem]

• Fix issue where spurious &nbsp; was getting saved to description [vangheem]

• Issue when registry configuration parsing would throw an error [vangheem]

• Fix issue where you would end up saving non-resolveuid urls to rawhtml tiles and also prevent write conflicts when the editor sends out multiple edits at the same time [vangheem]

• Fix to only show drag handlers if customizing layout [vangheem]

• fix issue where you would no longer be able to edit a rich text area after you clear the whole area out [vangheem]

• Fix weird Firefox bug with TinyMCE that prevented data from being saved. [vangheem]

• Fix properties overlay to be scrollable. [vangheem]

• Fix issue where tile field wouldn’t get saved back to form with some refactoring. [vangheem]

• Fix issue where first fieldset would not show on properties modal. [vangheem]

1.0b3 (2015-09-29)

• Add ploneimage action for richtext tiles’ toolbar [datakurre]

• Add transforms to set ‘layout-’ with active content layout name or ‘layout-custom’ into body class [datakurre]

1.0b2 (2015-09-16)

• Fix issue where mosaic-grid was enabled even a default grid system was set [datakurre]

• Fix issue where Plone body class was added twice [datakurre]

• Fix issue where contentLayout field was shown in tile menu [datakurre]

• Pin plone.app.standardtiles >= 1.0b3 [datakurre]

1.0b1 (2015-09-16)

• Change layout behavior default view from view to layout_view [datakurre]

• Change to enable Mosaic layout noly for Document, Event, Folder and News Item by default [datakurre]

• Change text formatting actions from top toolbar to inline TinyMCE toolbars [datakurre]

• Change remove tile icon from inline close icons to top toolbar button [datakurre]

• Change BS3 as default grid system on Plone 5 [vangheem]

• Change site layouts be disabled unless mosaic-sitelayouts feature is set [datakurre]

• Change displayemenu support be disabled unless mosaic-layoutmenu feature is set [datakurre]

• Change Custom layout menu item to be called Mosaic layout [datakurre]

• Change install to no longer to make Mosaic layout the default by default [datakurre]

• Add layout editor control panel for Plone 5 [vangheem]

• Add link and unlink actions [datakurre]

• Add table tile [datakurre]

• Remove grid system from example layouts (to use configured default grid) [vangheem]

• Remove previously provided TTW content layout examples [datakurre]

• Fixed to work with (and require) plone.app.blocks >= 3.0.0 [vangheem]

• Fix GenericSetup profile registration (removed “for”) [agitator]

• Fix issue where title field tile and content tile being use on same page would cause weird issues with saving title values [vangheem]

• Fix situation where layout editor broke with broken or missing tiles [vangheem]

• Fix issue where check could not add tile with requried selection field [datakurre]

1.0a3 (2015-06-10)

• Add “Bootstrap 3 Demo” example site layouts for Plone 5 [datakurre]

• Add support for plone.app.blocks’ generic data grid transform [datakurre]

• Change the default site layouts in Plone 5 to use 12 column deco grids [datakurre]

• Fix various site layout support related issues [datakurre]

• Upgrade to plone.app.drafts >= 1.0b3 and plone.app.blocks >= 2.1.2 [datakurre]

1.0a2 (2015-06-08)

• Add ‘Center tile content’ tile style to allow e.g. centering of image tiles [datakurre]

• Add site and page layout fields to be available on properties overlay [datakurre]

• Add HTML tag language transform to set correct langauge for HTML site layouts [datakurre]

• Add HTML body tag class transform to set body class for HTML site layouts [datakurre]

• Add HTTP headers transform to ensure that the response headers normally set by plone.httpheaders viewlet manager are also set for HTML site layouts [datakurre]

• Update example site and content layouts [datakurre]

• Fix to only cache site layout when it’s not the default main_template [datakurre]

• Upgrade to plone.app.drafts >= 1.0b2 and plone.app.standardtiles >= 1.0b1 [datakurre]

1.0a1 (2015-05-27)

• First technology preview release.