Intro

Blocks help you create reusable pieces of content for your designs. Common use cases for Blocks include buttons, footers, navigation, or repeating blog thumbnails.

This article will cover

• Creating Blocks
• Block Variables
• Using Blocks

Creating Blocks

There are two ways to create blocks: create an empty Block from the worksheet or make an existing element into a Block.

From the Worksheet

Starting on the Worksheet, click the plus to create a new block and type in a name.

From an Element

You can also create a block from an element. That element, along with all of its children will be sent to a new Block.

To do this,

• Open the command palette with CMD/CTRL + K
• Type in "create block"
• Click or hit enter on the "Create Block From..." option

You can add and edit Elements to your Block in the same way you would add and edit Elements on a Page. The magic comes from defining what parts of your Blocks are variable.

Block Variables

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.

Setting Variables

In the Block editor, click the purple Set Variables button in the bottom right corner. This is where you can add and edit variable names and default values.

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

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

To add a Block to a page, search for it in the Elements Column.

To give the Block's variables a value, click on it in the Element column. You'll see that the style grid changes to show the Block's variables that you've set up.

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 each one individually.