4.1 RC

Developer and Designer Notes

New events

This release adds several events.

Modules can add elements to BlockLayoutDataForm using its form.add_elements event. Due to this being a dynamic form, they can opt-in to automatically populate and apply the values by adding a "data-key" attribute containing the corresponding block layout data key. Elements that need more complex handling must attach to the following JS events on the document:

• o:prepare-block-layout-data: Allow special handling of block layout data after a configure block layout click.
• o:apply-block-layout-data: Allow special handling of block layout data after a configure block layout apply changes click.

Modules can add elements to PageLayoutDataForm using its form.add_elements event. Element names should be in the form o:layout_data[my_element_name] to automatically populate and apply the values.

To apply styles to the public page that were introduced by new form elements, modules can add classes and inline styles via these PHP events:

• block_layout.classes: Add classes for styling the block layout. Use $event->getTarget() to get the SitePageBlockRepresentation. Use $event->getParams() and $event->setParams() to set classes to the "classes" key. Classes will apply to divs that wrap around block markup.
• block_layout.inline_styles: Add inline styles for styling the block layout. Use $event->getTarget() to get the SitePageBlockRepresentation. Use $event->getParams() and $event->setParams() to set inline styles to the "inline_styles" key. Inline styles will apply to divs that wrap around block markup.
• page_layout.classes: Add classes for styling the page layout. Use $event->getTarget() to get the SitePageRepresentation. Use $event->getParams() and $event->setParams() to set classes to the "classes" key. Classes will apply to a div that wraps around every block.
• page_layout.inline_styles: Add inline styles for styling the page layout. Use $event->getTarget() to get the SitePageRepresentation. Use $event->getParams() and $event->setParams() to set inline styles to the "inline_styles" key. Inline styles will apply to a div that wraps around every block.

Page & block templates

This release adds page layout and block layout templates. Page builders can now select templates to use for displaying pages and blocks. Themes provide their own templates by adding them to their theme.ini file and providing a corresponding template file in their common directory..

For example, a page template labeled "My page template" with a corresponding template file in /view/common/page-template/my-template-name.phtml will have the following format in the INI file:

page_templates.my-template-name = "My page template"

And a HTML block template labeled "My HTML block template" with a corresponding template file in /view/common/block-template/my-template-name.phtml will have the following format in the INI file:

block_templates.html.my-template-name = "My HTML block template"

Note that in both INI examples my-template-name is the name of the corresponding .phtml file in either common/page-template or common/block-template. Note that the block template configuration includes the name of the block (in this case .html.). Because there could be more than one block type in common/block-template, it is best practice to prepend the block name onto the template name.

Core Blocks

This is a list of the available core blocks and how they should be written in the ini file:

• Asset - asset
• Browse preview - browsePreview
• HTML - html
• Item showcase - itemShowcase
• Item with metadata - itemWithMetadata
• Line break - lineBreak
• List of pages - listOfPages
• List of sites - listOfSites
• Media Embed - media
• Page date/time- pageDateTime
• Page Title - pageTitle
• Table of contents - tableOfContents