ūüĆĪ The next big step: Kirby 4 Alpha Learn more
Skip to content

Block field improvements

Field Preview

New fields block type available for previews:

fieldsBlock:
  type: blocks
  fieldsets:
    - heading
    - text
    foo:
      wysiwyg: true
      preview: fields
      tabs:
        main:
          label: Main
          fields:
            title:
              type: text
              placeholder: Title
            blocky:
              type: blocks
            subtitle:
              type: text
              placeholder: Subtitle
            description:
              type: writer
              icon: text
              inline: true
              placeholder: Description
              marks:
                - bold
                - italic
        settings:
          label: Settings
          fields:
            controls:
              type: toggle
              text: Show controls?
              width: 1/2
              default: true
            autoplay:
              type: toggle
              text: autoplay
              width: 1/2
              default: false

Heading Block Improvements

Display and edit heading level inline 

Uses toggles field inside drawer for heading level:

New Keyboard shortcuts

Enhanced keyboard shorts to react on both Meta (Cmd) and Ctrl keys:

  • New shortcut to remove selected block: Meta + Backspace
  • New shortcut to move focus up/down: Meta + arrow up/down
  • Improved shortcut to move blocks up/down: Meta + Shift + arrow up/down
  • New shortcut to extend selection up/down:¬†Meta + Alt + arrow up/down
  • New shortcuts¬†Meta + Enter¬†to split,¬†Meta + J¬†to merge

Block Splitting

  • Splitting and merging of supported blocks (text, list and heading)
  • New option buttons to split or merge (only displayed when supported)
  • Enter in headline block appends new text block when cursor is at the end
  • Text block with¬†inline: true¬†for text field will split directly on Enter (Shift + Enter creates a hard line break)
  • Custom blocks can support splitting by implementing a¬†split()¬†method that emits¬†a split¬†event and passes an array of two content states (for each of the splitted blocks); and merging by implementing a¬†merge()¬†method that receives an array of blocks (which it then needs to use to update itself, all but the first block will automatically be removed afterwards)

Collapse blocks while dragging

Large blocks collapse when dragged for easier handling: