Variables
Declaring the values a block lets each injectable change, the kinds of value, where each may be used, and what saving checks.
A variable is a value the block leaves open, so that each injectable using the block can fill it in. Only HTML & CSS and Template blocks can declare variables.
Declaring a variable
In the Variables card press + Add variable. Each variable has:
| Field | Meaning |
|---|---|
| Name | Used in the content as {{name}}. Letters, numbers and underscores, starting with a letter or underscore. |
| Kind | What sort of value it is; see below. |
| Label | The friendly name shown to whoever fills it in. Up to 200 characters. |
| Default | The value used when an injectable does not set its own. |
| Help | A hint shown next to the field. Up to 500 characters. |
| Required | Whether an injectable must give it a value. |
Each row also has Insert, which drops {{name}} into the content at the cursor, Move up, Move down and Remove. A block can declare up to 50 variables.
Renaming a variable rewrites its placeholders in the content for you and carries over any values injectables had set.
Kinds
| Kind | Extra fields | Where it may be used in the content |
|---|---|---|
| Text | Ordinary text, or a plain attribute. | |
| Long text | Ordinary text, or a plain attribute. | |
| Number | Least and Most | Text, a plain attribute, or a CSS custom property. |
| Colour | A CSS custom property only. | |
| Image | An image source (src or srcset). | |
| Link | A link (href). | |
| On/off | Ordinary text, or a plain attribute. | |
| Choice | Choices (one per line), up to 50 | Ordinary text, or a plain attribute. |
The Default field changes with the kind: a colour swatch, a number box with the limits, a link box, an on/off switch, a dropdown of the choices, or an image address box.
Placing a variable anywhere else is refused when you save: inside a <script> or <style> element, in an on… event attribute, in a raw CSS value, on the CSS tab, inside an HTML comment, in an unquoted attribute, in an attribute that could run code, or as only part of a web address. The message says which rule was broken and where.
What saving checks
Saving scans the content against the declared variables. Some findings block the save and show in red; others are warnings in amber and let the save through.
Blocking:
- A name that is not a valid variable name.
- Two variables with the same name.
- A
{{placeholder}}in the content that is neither a declared variable nor one of the visitor details (the placeholders listed under Content types). - A default that is not safe for its kind: a bad link or image address, a colour that is not a colour, a number outside its limits, a choice that is not in the list.
- A required variable with no default while injectables already use the block. Give it a default so those injectables keep a value.
- A variable placed somewhere its kind does not allow.
Warnings:
- A variable that is declared but never used in the content.
- A variable named the same as a visitor detail. The block's own value hides that detail.
Older blocks
A block created before typed variables existed shows its old defaults as Text variables automatically.