Layout

The optional layout section of a block schema defines how variables are organised and displayed to the creator in the site builder.

When a layout is defined, it replaces the default site builder tabs. Any group properties on variables will be ignored, and any variable not included in the layout will not be visible to the creator.

When using a layout, variables must be declared under attributes in the schema (rather than at the top level).

Layout types

Layouts are composed of nestable layout types that define the structure:

Example

---
attributes:
  heading:
    type: string
    label: Block Heading
  text:
    type: text
    default: Enter some nice copy about your experience
  image:
    type: image
    default:
      asset: images/sky.png
    label: Background Image
    hint: Recommended image size 1920px by 600px
  cta_enabled:
    type: boolean
    label: Display a button
    default: true
  button_text:
    type: string
    default: Click me
    label: Button text
  button_link:
    type: link
    label: Button link
layout:
  - type: tab
    label: Content
    elements:
      - type: accordion
        label: Text
        elements:
          - heading
          - text
      - type: accordion_toggle
        toggle_attribute: cta_enabled
        elements:
          - button_text
          - button_link
  - type: tab
    label: Design
    elements:
      - image
---

In this example:

• The Content tab contains a "Text" accordion (grouping the heading and text fields) and an accordion toggle controlled by cta_enabled (which shows or hides the button fields).
• The Design tab contains the image field.

Usage in header and footer

Layouts can also be used in the Header and Footer templates to specify the order that elements appear above navigation items.

When used in headers and footers:

• There can only be one layout section
• The label is required but will not be shown to the creator
• Only elements in the first section will be shown; any further sections are ignored