Intro

Variables let you customize certain pieces of a Block's content or style. You set up and then assign variables to the cells you want to make customizable. Variables can be used to control text, images, style property values, and scripts!

A simple example of this is if you have a Block for a button that you want to always have the same style but different text. In this case, you would design the Block in the editor and create a variable to control the text whenever you use that Block on a page.

Each Block can have up to 64 variables.

Setting Variables

In the Block editor, click the purple Set Variables button on the right end of the toolbar. This is where you can add and edit variable names and default values.

Variable Names

When you add a variable, it needs a name. Variable names can be whatever you like, except they cannot contain special characters, including spaces.

Default Values

Variables don't need a default value. However, when building with variables, it is helpful to see the text, image, or style that variable is associated with. The default value will only be shown if the Block is not given a value for that variable when used on a page.

Click Back To Edit to close the variable editor.

Assigning Variables

After setting up variables, you need to connect them to the appropriate cells.

Go to the cell you want to connect a variable to. Start typing a variable name and you will see suggested variables in purple. Select the variable from the suggestions or click to create a new variable (if you create a new variable, it won't have a default value).

For the examples above, we have set up a link with variables to control the text, URL, and background color.

Using Blocks with Variables

To add a Block to a page, search for it in the Elements Column like you would any other Element.

To give the Block's variables a value, open the Block's corner menu and click Attributes. You'll see the variables you set up for that block and can type in these cells to set a value.

When you use a Block on a page and edit its variable values, those values are only applied to that instance of the Block. So, you can use the same Block multiple times and customize each one individually.