Hi Toddz.
Here is a detailed explanation for the plugin. Let me know if you found here what you looking for.
I’il change the link in the readme to this article.
I assume that you are familiar with templates and blocks.
Let’s say, you want a default template with a block field called main
:
site/blueprint/default.xml
main:
type: blocks
Now you have a template with a block field and the editors can add now any available blocks that Kirby provides. If you like, you can to decide, which blocks should be available.
For example only the text and the column block:
main:
type: blocks
fieldsets:
- text
- column
With that default settings, you can add now example content:
To output that block field, you just add this line to site/templates/default.php
:
<?= $page->main()->toBlocks() ?>
By default the example above delivers you following output:
<section class="grid">
<div class="column" style="--columns:6">
<div class="blocks">
<p>Left column</p>
</div>
</div>
<div class="column" style="--columns:6">
<div class="blocks">
<p>Right column</p>
</div>
</div>
</section>
The default output is made for the default kirby framework. If you don’t use any styling framework (Like: Bootstrap, UI-Kit, Tailwind…), you need to add some styling:
.grid {
--columns: 12;
display: grid;
grid-template-columns: 1fr;
}
@media screen and (min-width: 60rem) {
.grid {
grid-template-columns: repeat(12, 1fr);
}
.grid > .column {
grid-column: span var(--columns);
}
}
But if you use (for example bootstrap), you need to modify the way kirby outputs the column block:
site/snippets/blocks/columns.php
<?php /** @var \Kirby\Cms\Block $block */ ?>
<?php $layout = $block->layout()->toLayouts()->first() ?>
<section class="row" id="<?= $layout->id() ?>">
<?php foreach ($layout->columns() as $column): ?>
<div class="col-12 col-md-<?= $column->span() ?>">
<div class="blocks">
<?= $column->blocks() ?>
</div>
</div>
<?php endforeach ?>
</section>
</div>
Here is an example, how you get more options from the column blocks:
site/blueprint/default.xml
fields:
main:
type: blocks
fieldsets:
- text
columns:
extends: blocks/columns
fields:
layout:
layouts:
- "1/1"
- "1/2, 1/2"
- "1/4, 1/4, 1/4, 1/4"
fieldsets:
- heading
- text
Hope this helps you. If you have any further questions, let me know.
If you like the plugin I would be very happy about a small donation.