The Magnolia Stories app, which is an implementation of the content editor, uses four predefined block types:
The Content editor provides predefined block types that you can use in your custom content editor app:
You can also define your own blocks.
text block implements a special
RichTextBlock class, which features basic text formatting functions:
All the other predefined block types implement the
Demo block types
The Magnolia demo decorates the default Stories app and provides two additional block types you can use:
Both block types implement the
To see these blocks you must have the Magnolia demo modules installed.
Defining a custom block
To define a custom block, use a YAML definition file and apply the
FieldSetBlockDefinition class of the Content editor submodule.
- Create a YAML file in the
blocksfolder of your module and add:
templateIdof your block.
The list of fields the content block consists of.
Provide a template definition file and a template script for your block in the
templates/blockssubfolder of your module.
Optionally, in the
i18nfolder of your module, provide a file with i18n keys for labels and descriptions of the block's fields.
Example: a quotation block
The following code samples are used to create a quotation block in a light module called
Rendering blocks in a FreeMarker script
This section explains how to render block content in a page or a component template.
The Content editor module provides
cms:block, a Magnolia FreeMarker directive for fetching and rendering block elements.
The directive expects a node of the type
mgnl:block as argument, identifies the template definition of the block and calls the associated template script.
Block-rendering scripts in the
article-editor submodule already contains the following predefined block-rendering scripts used by the Stories app:
articleDisplayArea.ftl– Displays a single story.
articleListArea.ftl– Displays a list of all story.
articleReferenceArea.ftl– Displays a referenced story through the
/templates/pages/article.inc.ftlpage template script.
Examples of block rendering
The examples show how to render blocks within a template script of a page or component template. Using the Magnolia directive
cms.block, the template script of the block is executed during the rendering of the page or component.
- Get story content:
[#assign articleContent = cmsfn.contentById(content.article, "") /]
- Get the blocks for that story:
[#assign blocks = cmsfn.children(articleContent, "mgnl:block") /]
Retrieve all blocks for a piece of content:
Line 4: The Magnolia directive
cms.blockensures that the template script associated to the passed block is called to render the block content.
Retrieve two blocks, for instance to display an excerpt of a story in a list:
Line 7: The Magnolia directive
cms.blockcalls the template script associated to the passed block content.