This is an example of how to build a nested block including a live panel preview and output snippets for the website. In our example we are creating a FAQ block, which allows us to add nested question/answer blocks within it. The block is built as a standalone plugin and can be extended and modified to your own needs. The example is based on a blank Kirby installation (v.3.5+) and everything is explained step by step.
First we prepare our Kirby config file to enable custom blocks. We keep the Kirby default blocks grouped, and separate our new custom blocks for a better overview.
The blocks field can now be used without adding the new FAQ block type manually:
Now let's create the blueprint for the FAQ block itself, and the blueprint for the nested block with a question and answer field.
The name of the block (
faq in our example) must be unique and must not already be used by Kirby (e.g.
text, etc.). If the name is already in use, you can simply add a prefix or suffix to it (e.g.
The first blueprint defines our FAQ block. Besides our new nested block we use an additional
text field and a
writer field in our example.
The second blueprint defines the nested block with the
question and the
answer fields. Hereafter we call this block
Now we build the output snippets for the website. We need a snippet for the
faq block and a snippet for the
For completeness, we also show the
default template here, which can be used to render our newly created
The first output snippet is for the FAQ block. We show
text of this block as usual and we call the nested block(s) as follows.
The second snippet defines the output of the nested question/answer block.
Now let's create the plugin itself. The plugin needs only two files to work:
index.js. An optional file
index.css allows individual stylesheets for the preview.
index.php file we register our blueprints and output snippets, respectively for the FAQ block (
faq) and the question/answer block (
index.js file handles the previews inside the Panel. We define a template for
.css file is optional and can be used to style the preview for the block (and the nested blocks if needed).
That's it! Now you have a fully functional example of how nested blocks are working. Add your own fields and styles to your block as you like.
The following files are used in our example:
Feel free to download all needed files here: Nested blocks example.