Create custom Page block¶
In addition to existing blocks which you can use in a Page, you can also create custom blocks.
To do this, add block configuration in a YAML file, under the
for example in
The following example shows how to create a block that showcases an event.
First, add the following YAML configuration:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
event is the internal name for the block, and
name indicates the name under which the block is available in the interface.
You also set up the category in the Elements panel that the block appears in.
In this case, it doesn't show with the rest of the built-in blocks, but in a separate "Custom" category.
The thumbnail for the block can be one of the pre-existing icons, like in the example above,
or you can use a custom SVG file.
A block can have multiple attributes that you edit when adding it to a Page. In this example, you configure three attributes: name of the event, category it belongs to, and an event Content item that you select and embed.
For a list of all available attribute types, see Page block attributes.
Each attribute can have validators. The
not_blank validators in the example ensure that the user fills in the two block fields.
Add block templates¶
A block can have different templates that you select when adding it to a Page.
To configure block templates, add them to block configuration:
1 2 3 4 5 6 7 8 9 10 11 12
Provide the templates in the indicated folder, in this case in
For example the
featured_template.html.twig file can look like this:
1 2 3 4 5 6
The templates have access to all block attributes, as you can see above in the
Priority of templates indicates the order in which they are presented in Page Builder. The template with the greatest priority is used as the default one.
Add edit templates¶
You can also customize the template for the block settings modal.
Do this under the
1 2 3 4 5 6 7
Place the edit template in
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18