A block preview that directly displays the block fields, including tabs.

Last update: May 10, 2023

Overview

Kirby Block Preview Fields

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

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

Installation

Download

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

Git submodule

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

Composer

composer require junohamburg/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

DatoCMS plugin: Translate fields

DatoCMS plugin: Translate fields This DatoCMS plugin gives you the ability to translate structured-text, string and text fields. This plugin is an add

Nov 8, 2022

Functions and objects that make it easier to add fields to Portable Text editors for accessibility meta information, like language changes or abbreviations.

Porta11y Porta11y is a collection of accessibility-focused annotations, decorators and validators for Sanity’s Portable Text editor. Portable Text is

Aug 25, 2022

A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses

MeiMei - Multiple Email Input MeiMei: A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses.

Apr 13, 2022

Gthub action for Project (beta) management. Allows to update fields

titoportas/update-project-fields Use this action to automatically update GitHub project (beta) item fields. Note that this action does not support Git

Nov 3, 2022

Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.

tail.select.js - Beautify Select Fields (formerly tail.select) Replace and Improve your HTML select fields with style and without jQuery! The tail.s

Dec 30, 2022

Incredible resources (with links) to help up-skill yourselves on various fields. Resources like programming, designing, engineering and much more and completely Open Source.

Shiryoku Incredible resources (with links) to help up-skill yourselves on various fields. Resources like programming, designing, engineering and much

Dec 15, 2022

⚡Chrome extension allows you to create lists of Google and Github dork to open multiple tabs with one click, import "scope/out of scope" from #HackerOne #Bugcrowd #Intigriti ...

FastDork v0.1 This chrome extension allows you to create lists of Google and Github dork to open multiple tabs with one click, import "scope/out of sc

Dec 31, 2022

A jQuery tabs module for todays web!

tabulous.js A jQuery tabs module for todays web! Documentation Tabulous.js can be used with any contents you choose in the tabs and it couldn't be mor

Dec 4, 2022

jQuery tabs plugin

English description | Описание на русском jQuery tabs plugin. Easy and well done tabs with many options and skin support Version: 1.0.2 Project page a

Nov 27, 2022

Comments

Hide tabs or open tab when block is closed

Current behavior

When a block is closed via the chevron, tabs are persisted and clicking them does nothing except changing the selected state.

Expected/Suggested behaviour

a. Tabs should not be visible when the block is closed or b. Clicking a tab should open the block again, with the correct tab selected. The "selected tab" state should be disabled when the accordion is closed.

opened by tobimori 1