Variables
Variables define the fields a creator can use to customise the content and layout of a block.
Variables define the fields a creator can use to customise the content and layout of a block. They are defined in the attributes section of the block schema using YAML front matter.
Each variable has a key (used to access its value in Liquid) and a set of properties that define how it appears and behaves in the site builder.
Syntax
---
attributes:
heading:
type: string
label: Block Heading
default: Welcome
hint: The main heading displayed at the top of the block
---
{{ heading }}Common properties
All variable types accept the following properties:
| Property | Description | Required |
|---|---|---|
type | The variable type, which determines the input field shown in the site builder and the value returned to your Liquid code. | Yes |
label | The label shown to the creator in the site builder. If no label is defined, the variable key is used. | No |
default | A default value prefilled when a creator adds the block to a page. Accepted values depend on the variable type. | No |
hint | Additional guidance shown to the creator below the field. Accepts markdown text. | No |
group | Which default tab the variable appears in (content, layout, design, mobile). Ignored if a layout is defined. Defaults to content. | No |
array | When set to true, allows the creator to add multiple instances of the variable. | No |
Accessing variables in Liquid
Variables are accessed directly by their key within the block's Liquid code:
---
attributes:
heading:
type: string
text_color:
type: color
---
<h1 style="color: {{ text_color.rgba }}">{{ heading }}</h1>Some variable types return objects with multiple properties (e.g. color returns an object with .rgba and .hex). See each variable type for details on returned values.
Array variables
Setting array: true on a variable allows creators to add multiple instances. Use a for loop in Liquid to iterate over array values:
---
attributes:
gallery:
type: image
array: true
default:
- asset: images/sky.png
- asset: images/sky.png
---{% for image in gallery %}
<img src="{{ image.url }}">
{% endfor %}The length of an array can be checked using the size filter:
{% if gallery.size > 0 %}
<!-- render gallery -->
{% endif %}