Creating a Global Style

There are two places where you can create a Global Style (listed below).

The style name will be converted to a valid CSS class name. You can prepend your style name with a . if you like. If you don’t, we will add it for you.

As you type a style name, the button will say “Create” if the style name does not exist. Once you’re happy with the name, click the “Create” button.

Block

When editing a block, you can create a Global Style using the Add or Create Style dropdown.

Creating a Global Style within the block like this will automatically add the new style to the selected block.

Editor Sidebar

You can also create a new Global Style by clicking on the “GenerateBlocks” logo at the top right.

Creating the Global Style within the sidebar like this will not affect any selected blocks. You will need to manually add the newly created style to any blocks that require it.

Onboarding

Once you’ve clicked the “Create” button, you will be presented with some choices on how to create this new style.

If you do not have a block selected, or the block you do have selected has no local styles, you will be presented with two options.

The Blank style option will create a fresh style for you that contains no CSS by default.

Clone an existing style allows you to choose from an existing style you’ve created. This will populate your new style with any CSS applied to the selected existing style.

If you have a block selected that has existing local block styles, you’ll see two additional options.

Copy the local block styles will take any local block styles and apply them to your new Global Style. Those existing local block styles will be left alone on the local block.

Move the local block styles will take any local block styles and apply them to your new Global Style. Those existing local block styles will be cleared from the local block.