Block definition - 5 UI

This page describes definition properties and template definition properties of a block, a component-like content element provided by the Content editor module.

This page has been created for the Magnolia 5 UI framework. For the 6 UI framework page, see Block definition instead.

Overview

A block is the smallest piece of content in an implementation of the Content editor, such as the Stories app. A block definition gives a block a name and specifies the content allowed to form a single block. A block template definition specifies which template should be used to render a block in an area or a page.

The mgnl:block nodetype

Block content is stored using the mgnl:block node type in the JCR. mgnl:block is similar to the custom node type mgnl:content, but it cannot be versioned on its own. Block content is usually grouped into block compositions (mgnl:composition), which are versionable.

Files required

You define blocks to add or modify content in the Stories app or in an implementation of the Content editor. To render the block content, you must then define a template definition and a script for the block. You can define them both using YAML configuration files or JCR nodes.

If you want to define field labels and other i18n descriptors for the elements of your block, you can create the i18n file for the block(s) included in your module.

Definition Location

Block definition

/<module-name>/blocks/<block-name>.yaml *

Template definition

/<module-name>/templates/<path>/<block-name>.yaml **

Template script

/<module-name>/templates/<path>/<block-name>.ftl> **

i18n file (optional)

/<module-name>/i18n/

* <block-name> gives the block its name in the JCR.

** The <path> is arbitrary but would typically be blocks for block template files.

Example

my-module
├── blocks
│ └── quotation.yaml
├── i18n
│ └── my-module_en.properties
└── templates
    └── blocks
        ├── quotation.ftl
        └── quotation.yaml

Properties

Block definition

Property Description

class

required

The fully-qualified class name for the Java bean representing the definition of the block. Needs to be a subtype of info.magnolia.block.BlockDefinition.

The default implementation of info.magnolia.block.BlockDefinition can be extended for convenience.

For blocks wrapping one or multiple form fields, there is a built-in info.magnolia.editor.block.stock.FieldSetBlockDefinition which expects an additional fields property listing the form fields.

blockClass

optional

A default value is already a part of the definition, so there’s in fact no need to specify it in the definition YAML file.

The fully-qualified class name for the Java bean representing the block. Needs to be a subtype of info.magnolia.block.Block.

templateId

required

The ID of the template definition in <module name>:<path to block definition> format, for example my-module:blocks/quotation.

fields

required only for the FieldSetBlockDefinition class, unavailable for the default and other definitions

Defines what field types are available in the block.

icon

optional, default is icon-help-mark

Defines the icon used by the Block chooser toolbar.

name

optional

A custom i18n base name used by the BlockDefinitionKeyGenerator to generate a key for the block, for example the name singleTextRow in the i18n key blocks.singleTextRow.label.

By default the block’s name in the JCR is used.

label

optional

An i18n label for the block, for example the value A text row block in the key-value pair blocks.textRow.label=A text row block.

Example

/my-module/blocks/quotation.yaml

class: info.magnolia.editor.block.stock.FieldSetBlockDefinition
templateId: my-module:blocks/quotation.ftl
fields:
  textRow:
    class: info.magnolia.ui.form.field.definition.TextFieldDefinition

Block template definition

You can use the following properties in a block template definition:

Property Description

renderType

required

The renderer to be used.

templateScript

required

Path to the template script in the following format:

/<module-name>/templates/<path>/<filename>.<ext>

See Resources for more information about script storage locations.

No dialog definition is required in the block template definition. Everything that is related to the content and the form of a block is defined in the block definition.

Block definitions provided

Magnolia provides the following definitions out-of-the-box.

FieldSetBlockDefinition

Use this definition to configure the list of fields depending on your needs as explained in the properties table above.

RichTextBlock

This is a block definition with a single text field and simple text formatting capabilities.

Example definition:

content-editor/blocks/text.yaml

blockClass: info.magnolia.editor.block.stock.RichTextBlock
templateId: content-editor:blocks/text
icon: edit
Related topics
Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the DX Core docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules