# Blocks A visual editor for long-form text and modular pages **** - Read more: - Source: **** The Blocks field is the perfect solution for complex single-column layouts and long-form text.

However, you can fully customize the selector for new block types with sorted block types and groups. To change the order of available blocks, list them manually with the `fieldsets` option: ```yaml fields: text: type: blocks fieldsets: - heading - text - list - image - gallery - video - code - markdown ```

### Groups You can group block types in the block selector for a better overview of the available options. This is particularly useful when your blocks lists gets longer once your start creating your own custom blocks. To create such groups, use the Blocks field's generic "group" block type: ```yaml fields: text: type: blocks fieldsets: text: label: Text type: group fieldsets: - heading - text - list media: label: Media type: group fieldsets: - image - video code: label: Code type: group fieldsets: - code - markdown ```

### Closed groups By default, all groups are open. With very long list, you might want to close groups of blocks that are used less frequently with the `open: false` option: ```yaml fields: text: type: blocks fieldsets: text: label: Text type: group fieldsets: - heading - text - list media: label: Media type: group fieldsets: - image - video code: label: Code type: group open: false fieldsets: - code - markdown ```

## Default values You can set default blocks/values for blocks fields which will prepopulate the field using the `default` prop. The `type` property is required, but default blocks can be empty or filled with example content. ### Empty default block ```yaml fields: text: type: blocks default: - type: text ``` ### Default block with content ```yaml fields: text: type: blocks default: - type: text content: text: Write something great… ``` ### Multiple block types You can also set multiple default block entries: ```yaml fields: text: type: blocks default: - type: heading content: level: h2 text: A heading - type: text content: text: Write something great… ``` ## Block types ## Custom block types Kirby's built-in blocktypes are not enough? Create your own! Check out our extensive documentation on custom block types, from basic to advanced: - Custom blocks - Custom block types - Audio block with preview - Block factory: Creating your own blocks collection - Nested blocks ## Block preview type `fields` Instead of manually creating previews for blocks types, you can use the `fields` preview type to display the fields together with their content. ```yaml fields: blocks: type: blocks fieldsets: demo: wysiwyg: true preview: fields tabs: main: fields: title: type: text subtitle: type: text description: type: writer settings: label: Settings fields: # ... ``` ## Extending core blocks From modifying the output to how they are previewed in the Panel, you can also overwrite Kirby's built-in block types: - Extending core blocks - Block types

Blocks in your templates

If you don't want to care about the HTML for each individual block, you can echo the entire blocks collection to render all blocks.

<?= $page->myBlocksField()->toBlocks() ?>

Looping through blocks

Looping through blocks to control their HTML can be very powerful. You can assign custom CSS classes, IDs for links and more.

You don't need to render the HTML for each individual block in the loop though. You can wrap the block with your custom HTML and then echo the $block object to render the matching block snippet.

<?php foreach ($page->myBlocksField()->toBlocks() as $block): ?>
<div id="<?= $block->id() ?>" class="block block-type-<?= $block->type() ?>">
  <?= $block ?>
</div>
<?php endforeach ?>

Manually loading snippets

Sometimes you might wish to customize the way block snippets are loaded. Maybe you want to inject more snippet variables.

<?php foreach ($page->myBlocksField()->toBlocks() as $block): ?>
<div id="<?= $block->id() ?>" class="block block-type-<?= $block->type() ?>">
  <?php snippet('blocks/' . $block->type(), [
    'block' => $block,
    'theme' => 'dark'
  ]) ?>
</div>
<?php endforeach ?>

… or load snippets from a different location …

<?php foreach ($page->myBlocksField()->toBlocks() as $block): ?>
<div id="<?= $block->id() ?>" class="block block-type-<?= $block->type() ?>">
  <?php snippet('blocks/custom/' . $block->type(), [
    'block' => $block,
    'theme' => 'dark'
  ]) ?>
</div>
<?php endforeach ?>

Since 5.5.0

Debugging

Bugs in your blog snippets will throw an exception in debug mode, but will otherwise be swallowed.

## Configuration You can configure the default setup of your Blocks field in your config.php ```php "/site/config/config.php" [ 'fieldsets' => [ 'text' => [ 'label' => 'Text', 'type' => 'group', 'fieldsets' => [ 'text', 'heading' ] ], 'media' => [ 'label' => 'Media', 'type' => 'group', 'fieldsets' => [ 'image', 'video' ] ] ] ] ]; ``` ## Further reading - Block types - Block methods - Blocks collection methods