Block factory: Creating your own blocks collection
Custom block types for Kirby can be anything from very simple to rather complex. In this recipe, we will create a little collection of blocks that are not overly complicated.
All block types will live in a single plugin, and we will build them without using a build process.
Since the styling is very much up to you and your project, we'll keep styling very basic in these examples. You can find the
index.css file with all styles at the end of this recipe.
General plugin setup
Let's start with creating the plugin. In the
site/plugins folder, create a new folder called
block-factory, and inside that folder an
index.js, and an
index.css file. Additionally, we create the folder structure for the block snippets and blueprints..
Register blueprints and snippets
index.php file is the place where we register the blueprints and snippets for the custom blocks. The basic structure looks like this. We can add multiple blueprints and snippets for each block that we will create.
The preview templates for the blocks go into the
As you can see, a basic preview is no more than a simple Vue template.
With this general structure in place, our blocks factory is ready to produce any number of new blocks.
For each of the following examples, don't forget to register the snippets and blueprints in the
index.php file as outlined above. You can find the full
index.php at the end of this recipe.
Note that custom block types don't show up in your
layout fields automatically. You have to add them explicitly via the
Custom flavored boxes
For the editable plugin, we replace
<div v-html="content.text"></div>, with a
Our computed method
textField() returns the
text field, so that we can fetch the placeholder and marks information set for the field if available.
The editable version of the accordion preview is similar to the box block preview, with the difference that we now use to
k-writer components for the
FAQ block using structure field
In this simple preview, we loop through the structure field items using the
v-for directive and simply output each item.
For the editable preview, we need a custom method to update the items in the structure field, which we do with the
FAQ block using nested blocks
The single blocks we introduced above are already quite great, and blocks with structure fields give us the possibility to add items inside a block. But we can go one step further and nest blocks inside blocks. For our FAQ block example this means that we will replace the structure field with a blocks field.
This example requires the
accordion block from above.
The simple preview for our alternative version is not very different from the example with the structure field, but differs in the way we call the values of the individual items, i.e.
item.details in the previous example.
Let's see how we can build an editable version of this variant. If you look closely, the only difference here is the syntax how we fetch and update the block items.
Card type block
Cards are nice in multi-column layouts, and they can be "hand-made" or created from existing pages.
This time, we will only use a single preview option, because card content can come from two sources, so making it inline editable doesn't make that much sense.
However, the logic here is a bit more complicated, because we have to retrieve some content via the API.
The most notable thing here are the
watch methods which let us react on changes in the component. In this case, we watch for any changes to the
pageId values, and depending on these values change the
text property. Also, if the card type is of type
page, we fetch the content of the text field via Kirby's API.
Here is the complete
index.php with all registered blueprints and examples introduced in this recipe:
Since these blocks are just examples and styling is totally individual, here some quick & dirty Panel styles: