Kirby Block Preview Fields

This plugin for Kirby 3 displays the block fields directly in the block preview, including tabs.

Block Preview Fields

Inspired by the Kirby Fields Block, but this block preview supports tabs and the design aligns more closely with the Kirby UI.

Please note: In Kirby 4, there is now a native implementation of preview: fields, see https://getkirby.com/releases/4.0#block-field-improvements.

Installation

Download

Download and copy this repository to /site/plugins/kirby-block-preview-fields.

Composer

composer require junohamburg/kirby-block-preview-fields

Git submodule

git submodule add https://github.com/junohamburg/kirby-block-preview-fields.git site/plugins/kirby-block-preview-fields

Setup

In your custom block blueprint:

Add preview: fields to display the block fields.
Add wysiwyg: true to prevent the drawer from opening automatically after creating a new block.

Example: site/blueprints/blocks/custom-block.yml

name: Block Name
preview: fields
wysiwyg: true
tabs:
  content:
    label: Content
    fields:
      ...
  settings:
    label: Settings
    fields:
      ...

Available options

Hide block icons. This is helpful if you are using our Kirby Visual Block Selector.
Disable equal height tabs. By default, the largest tab sets the overall height, so there are no jumps when switching between tabs.

site/config/config.php

<?php

return [
  'junohamburg.block-preview-fields' => [
    'icon' => false, // default: true
    'equalHeightTabs' => false // default: true
  ],
];

Please note: These options apply to all block previews. It is currently not possible / very difficult to add custom options to block previews.

Known issues

This block preview uses the angle-down icon to expand a collapsed block preview. The Kirby layout field uses the angle-down icon to open a dropdown with options.

License

MIT

Credits

JUNO

junohamburg / kirby-block-preview-fields

readme