Global Styles

Pro feature

Global Styles allow you to build your own custom CSS stylesheet and apply those styles to any GenerateBlock in your site.

You create and edit Global Styles in one of two ways, with the same Style Inspector Controls used for Block Styling

1. on a Block
2. in the GenerateBlocks Panel

On the block global styles

The recommended method is to build global styles on a block, as you can see the styles being applied to the block. This methods also provides additional onboarding methods including cloning and moving local styles. It is this method we document here.

GenerateBlocks Panel Global Styles

The GenerateBlocks Panel provides a shortcut to Global Styles. Here you can aalso create or edit any Global Style without having to find a block that the style is attached to. The actual method of building the styles is almost identical to On the block styles.

Creating a Global Style on the block

With a block selected in the editor you can create a Global Style in 4 simple steps.

1. Create a new style
2. Choose how to start your style
3. Begin setting the properties of your global styles
4. Save your global styles

Create the Style

Write the your global style name In the Block Settings > Global Style > Style Name field.
If the style name is valid and does not already exist in the global styles then you will have the option to Create the new style.

Valid Style Names

The Enter Style Name field validates a new style name. As some general guidance , the name should be limited to Alphanumeric characters ( A-Z 0-9 ), but should not start with a number, and can accept hyphens and underscores.

Choosing how to start your Global Style

When creating your Global Style you will be presented with up to 4 possible options:

• Blank style

  Start a new style that has no set properties.

  This is the default and constant option in the list

• Clone an existing style

  Start by choosing an existing style to copy

  If there are any Global Styles already on the site, you can choose to clone any of them

• Copy the local block styles

  Start by copying the the properties of the selected block.

  If the selected block has local styles you can start a new global style with a copy of these styles.

• Move the local block styles

  Start by cutting and pasting the properties of the selected block.

  If the selected block has local styles you can move them into a global style.

Setting the style properties

Now you have created your Global Style you need to set its style properties. You set style property values using the Styles Inspector that has identical options as you would find in the local block styles. The one difference is the fancy purple panel header, this is to make it really clear you’re editing a global style.

Any style property, selector option or responsive control found in the local block styles can be found here.

Once the styles have been applied you can exit the Global Style from the header Back button.

Advanced CSS selectors and Responsive controls

As a Global Styles is Pro feature, the Styles Inspector controls will also provide access to Advanced Selectors and Responsive controls.

Save the Style(s)

Global Styles are saved as a custom post type. Which means the style needs to be saved before you exit the editor.

To do this simply click the regular editor Save button in the editor top bar. If there are any Global Styles with unsaved changes you will be given the option to Save those changes.

Adding Global Styles to a Block

When you first create a Global Style using the on block method, the classname will get attached to the block.

To apply a Global Style to a block, first select the block, then choose a style from the Global Styles dropdown in the block settings, and click Add.

In place of the Global Style select box you will see the classname of the attached global style.

Adding more global styles

A block can support more than one Global Style. In fact there isn’t really a limit to how many you can add, but I would recommend keeping them to a minimum ( sorry Tailwind fans ).

To add additional global styles to a block click the + Create or Add New style button to display the Global Style input field.

Multiple Classnames and the Block style

Each Global Style attached to a block will be displayed as a tag. They look something like:

.my-new-style

Local block styles

If the block also has any Local Block style properties you it will be represented with the generic block tag:

block

You can clear the local block styles by clicking the X

Removing or Editing a Global Style on the block

clicking the 3 dot options button on any global style tag will present you with additional options to Edit or remove the tag. You can also just click on the tag to go straight to editing.

Editing

If you choose to edit the global style you will be taken to the Global Styles editor as used when creating the style.

Remove

Choosing to Remove the global style, only removes it from the selected block. It does not delete the global style.

Create and edit a Global Style from the settings panel

The alternative to creating or editing Global Styles on the block is to open the GenerateBlocks settings panel in the editor top bar.

In the panel you have the same Global Styles select box where you can choose to Create a new Style or Edit an Existing one.

Global Styles Admin

Global Styles can be managed from the Dashboard > GenerateBlocks > Global Styles.

Options

From the 3 dot options menu you can choose to:

1. Set to Draft
   This stops the selected style from being loaded in the editor or the front end.
2. Delete Style
   This deletes the style from the Global Styles. It does not remove the global style class from any blocks.
3. Get a Preview, and the option to copy, the styles CSS rules

Edit

You can edit the classname of any Global Style by hovering over the name and selected the Edit option.

Before doing so you must consider the consequences of changing a global style class name.

1. the classname only changes in the global styles list and in the CSS that is written
2. the classname DOES NOT change on any blocks it has been assigned to
3. the old classname and its styles no longer assist
4. blocks with the old classname will lose those styles

Re-order Global Styles

You can re-order Global Styles using the Drag handle to the side of each style.

CSS Loading Order

GenerateBlocks writes each Global Style ( CSS Rule ) into a single stylesheet, in the order in which they were published. This defines the CSS loading order.

The order in which CSS is loaded matters when a block ( element ) receives it styles from more than one CSS rule.

For example, we create 2 new styles; large-text and card that result in the following CSS:

.large-text {
    font-size: 2rem;
}
.card {
    color: #ff0000;
    font-family: my-font;
    font-size: 1rem;
}

Both of these styles contain a font-size property. Now if we wanted a card element with a large-text then it would not be possible. As the card style loads after large-text. To fix this you would re-order the styles so card comes before large-text