Global/Block Classes

This feature allows you to have an overview of all the classes available on your installation (global classes) or those available on a specific page (block classes).

The information is accessible in an instant from the Classes Modal.

Click the "+" Icon under the Classes field in the Block Inspector to open the Classes Modal.

Searchbar

You can find the class you require by inputting part or all of the required class name into the search-bar.

This will show the class as either Global or Block-specific.

Open the Classes Modal by clicking the "+" sign under the Classes field.
Input part or all of the class you are searching for.

Styles Preview

If you hover over a particular class, you will be able to visualise the styles that will be applied to your block. This will be Global or Block specific depending on whether the class is Global or Block specific.

Open the Classes modal.
Hover over a Global or Block class to visualise the styles that could be applied.

Select a Class

When you click on a class, the styles will be automatically added to your block and the the class name will be added next to Modal opening icon ("+").

Select a block.
Click "+" icon to open the Classes modal.
Find required class and click to add it to your block.
Visualise class name next to "+" icon.

Global classes will be shown in green.

Block classes will be shown in purple.

To make it easier to know which classes have been applied to a block, both Global and Block-specific, applied classes are highlighted in the Classes modal in green (global) or purple (block).

Open Classes Modal by clicking "+" icon.
Scroll through Global and Block classes to see which ones are applied to the selected block.
Added classes will appear in alphabetical order under the current block class for easy reference.

The current block class is identified by a "dot" icon to the right of the class name.

Create a Global Class

The Create property allows you to add a new Global class to your block that can be styled as required.

Created classes are always global.

To create a new class, input a unique name into the search field of the Classes modal and click "Create".

So that you know when a class is selected, the border becomes darker.

Create a Block Class

It is possible to create a block specific class and not one that will be applied globally.

Input required block name into the Class field in the Classes modal.
Press Shift/Enter to create a block class.

Remove a Class

Classes can be removed in two ways, directly from the block inspector or from the classes modal.

Remove from the Block Inspector

Hover over the class to be removed.
A "X" icon will appear.
Click "X" to remove.

When you hover over a class in the Classes modal, a "X" icon appears. When clicked, it removes the class from the current block.

With a Global class, this will remove the class from the current block alone but will not delete the class permanently.

Hover over class to be removed in the Classes modal.
Click "X" icon to remove class.

Delete a class permanently

If you wish to delete a Global class from your installation and not just from the current block, you can do so from the Classes modal.

Hover over the class to be deleted and click the "trash" icon.
This will remove the class permanently from your installation.

Copy a Class

This allows you to copy a class directly from the Classes modal to save time and improve your workflow.

Hover over class to be copied in the Classes modal.
Click "copy" icon to copy class.

Paste Styles

This allows you to paste copied styles wherever you require.

Hover over the class to which you wish to add copied style.
Click "Paste Styles" icon.

PasteStyles using keyboard shortcuts.

Stay Open

The "Stay Open" toggle allows you to keep the classes modal open for as long as you require. Otherwise, by default, the classes modal will close as soon as you perform another action.