Blocks are basically like Lego® bricks, but for text and layout. Combine them in whatever way you like to create unique long form content and even complete page layouts without ever leaving the Panel.
While Markdown is great for writing long form text like articles with nothing but a text editor, it doesn't provide a very visual experience, particularly when it comes to integrating rich content elements.
This is where Kirby's blocks and layout fields shine brightly: Blocks are the perfect solution for complex single-column layouts and long-form text with images, galleries, code, embedded media and more. With the layout field, you take this one step further to arrange blocks in multiple columns to build complex page layouts.
Together, Kirby's blocks and layout fields combine a great WYSIWYG editing experience with fully customizable, flexible blocks. And you can easily extend the default blocks collection with your own or blocks from community plugins. And the best thing is: The HTML output is totally under your control, so it works nicely with your favorite CSS framework, e.g. Tailwind CSS and others.
Kirby comes with the following block types built-in:
layout fields to your blueprints like any other field type. Check out our detailed reference for each field type with all the available configuration options:
You can paste content from documents and websites into a blocks field, and Kirby will try to convert them into blocks automatically. You can also select and copy multiple blocks between pages.
A block type is made up of three components:
- A PHP code snippet to render the block content in the frontend
- A block blueprint which tells Kirby which fields should be available in the block
- An (optional) Panel preview for the WYSIWYG experience
You can find the source files for the existing block types in the documentation for each block type.
With this knowledge, we can go ahead and either modify existing block types or create new ones.
You can customize all existing block types to your needs in one or all of the following ways:
- Change how the block renders in the frontend by overwriting the snippet for the block
- Add or replace fields in a block type by overwriting the Blueprint file for the block type. This will often go hand in hand with modifying the output as in point 1.
- Change how the block looks in the Panel by overwriting its preview.
To modify a block, you can use the standard blueprints, snippets, and previews of each block type as a basis for your changes. Read more…
You create custom block types from the same three components. If you don't need a visual preview, you even make do with only a blueprint and a snippet. Learn how to create your own custom block types with our extensive documentation:
- Modifying blocks types and custom blocks
- Block factory: Creating your own blocks collection
- Creating a custom block type from scratch
- Nested blocks
Our community of Kirby developers have created cool blocks field plugins, so make sure to check them out:
- Map-Suite: A geolocation field & map block
- Form block: Create forms easily from building blocks
- Grid block: Use layouts right within any blocks field
- Fields block: Kirby block preview plugin to directly render block fields, allowing for inline editing
- FeedReader: Integrate a feed using a block
- Highlighter: Syntax highlighting for code
Don't hesitate to share them with the world.