Global Styles

GenerateBlocks Pro

Global Styles let you build a shared stylesheet and apply it to any GenerateBlocks block, or to any HTML element on your site. You write each style once, with the same Styles Builder controls you use for block styling, and every place that uses it updates together.

A Global Style is a single CSS rule with a selector and a set of styles. The selector decides what it applies to:

• Class (.card): assigned to blocks from the editor. This is the most common kind.
• Element (h1, a, body): applies automatically to every matching element on the site, with no assigning needed.
• Other selector (.woocommerce .button, a:hover): applies automatically wherever the selector matches.

Note: :root is reserved for Design Tokens and can’t be used as a Global Style selector.

Where to work on Global Styles

You can create and edit Global Styles in three places. They all save to the same set of styles.

Where	Best for
On a block (Block Settings → Global Styles)	Building a style while you can see it applied to a real block. Also lets you clone, copy or move a block’s local styles.
The Design panel in the editor	Quick edits to any style, without hunting for a block that uses it.
The Design dashboard (GenerateBlocks → Global Styles)	Site-wide management, with a Style Book and Live Preview. See the Design workspace.

What changed in 2.8: the GenerateBlocks Panel shortcut and the old Global Styles list are replaced by the Design panel and Design dashboard. Styles you made before 2.8 appear there unchanged.

The recommended way to build a class style is on a block. That is the method this guide covers first. Element and selector styles are covered under Styling elements and other selectors.

Creating a Global Style on a block

With a block selected in the editor:

1. In Block Settings → Global Styles, enter a style name.
2. Choose how to start the style.
3. Set the style properties.
4. Save.

Name the style

Type the name into the Enter style name field. If the name is valid and doesn’t already exist, you can create it.

Valid names: use letters and numbers (A-Z 0-9) plus hyphens and underscores. A name can’t start with a number. The name becomes the class, so my-card creates the class .my-card.

Choose how to start

You can see up to four options:

• Blank style: start with no properties. Always available.
• Clone an existing style: copy any Global Style already on the site.
• Copy the local block styles: start from a copy of the selected block’s own styles. The block keeps its local styles.
• Move the local block styles: cut the block’s local styles into the new Global Style. The block’s local styles are cleared.

The last two only appear when the selected block has local styles.

Set the style properties

You set properties with the Styles Builder, which has the same controls as local block styles, including pseudo elements, interactions, advanced selectors and responsive controls. The purple panel header tells you you’re editing a Global Style. Use the Back button in the header to return to the block.

Anything that accepts a value can use a Design Token. Look for the token button beside the control.

Responsive and at-rule values

Use the at-rule controls to set a different value for a media query, container query or other at-rule, the same as on a block.

New in 2.8: the at-rule presets the Styles Builder offers can now be changed with the generateblocks_default_at_rules PHP filter.

Save the style

Global Styles are saved separately from the post you’re editing. Click the editor’s Save button, and when there are Global Style changes, choose to save them too. Unsaved Global Style changes are lost if you leave the editor.

Adding Global Styles to a block

Select the block, choose a style in Block Settings → Global Styles, and click Add. The style appears as a tag in place of the select box.

A block can have more than one Global Style. There’s no hard limit, but keep them to a minimum, because the order styles load in decides which one wins (see Style order and the cascade).

To add another, click + Create or Add New style.

Aliases: if a style has Also applies to selectors that are a single class (for example .h2), each one appears in the picker as its own row with an Alias badge, listed under the style’s category. Choosing an alias adds that class to the block.

Reading the tags

• A Global Style tag looks like .my-new-style.
• A block with its own local styles also shows a generic block tag. Click the X to clear the local styles.

Editing or removing a style from a block

Click a tag to edit that style, or use its three-dot menu to Edit or Remove.

• Edit opens the Global Style editor.
• Remove only takes the class off the selected block. It doesn’t delete the style.

Also applies to: extra selectors

New in Pro 2.8

One style can apply its whole recipe, including pseudo elements, interactions and responsive rules, to extra selectors. This saves duplicating a style just to cover a second selector.

Use the Also applies to icon beside the style’s selector in the editor.

Examples:

• A .button style that also styles button, .wp-element-button
• A .card style that also styles .woocommerce .product

How it works:

• The style’s own selector stays its identity. The additional selectors get exactly the same rules.
• Type several selectors separated by commas to add them in one go.
• Changes are staged. They only take effect after you Save, and Discard drops them.
• A selector can only belong to one Global Style. If it already belongs to another, you’ll be told which.
• :root can’t be added. It’s managed by Design Tokens.
• Selectors keep their normal CSS specificity and are never rewritten. Use :where() if you want low-specificity defaults.

Aliases in the block picker. A saved additional selector that is a single class, such as .h2, becomes assignable in the block picker as an Alias. Selectors that are elements, IDs, descendants (.woocommerce .button), compounds (.button.active), pseudo selectors (.button:hover) or lists are applied automatically instead and can’t be assigned to blocks.

Removing an additional selector stops the shared styles applying to it after you Save, but blocks that already have the class keep it. Deleting, drafting or reordering a style affects all of its additional selectors.

Styling elements and other selectors

New in Pro 2.8

You are no longer limited to classes. In the Design dashboard or Design panel, create a style for any selector:

• an HTML element: body, a, h1
• a group of elements: :is(h1,h2,h3,h4,h5,h6)
• any other CSS selector: .woocommerce .button

These apply across the site automatically. You don’t assign them to blocks.

The quickest way to start is the Style Book in the Design dashboard: click any element to open its style in the panel. The Base band at the top covers Body, Links and Headings.

To create one by hand, choose New style, enter a Selector (for example .card, h1 or a:hover), and optionally pick a Category.

The Design dashboard

Go to Dashboard → GenerateBlocks → Global Styles. This opens the Design workspace: the styles list and editor on one side, and a Style Book or Site Preview on the other. Edits show in the preview before you save.

[IMG 15 · NEW] design-dashboard-global-styles.png
Replaces: the old admin list screenshot (Global Styles Admin panel)
Alt: Design dashboard with the Global Styles list on the left and the Style Book preview on the right
Caption: The Global Styles Design dashboard
Capture: GenerateBlocks → Global Styles, Style Book showing, list grouped into Classes, Elements, Other selectors, one draft dot visible.

The styles list

Styles are grouped by what they target: Classes, Elements and Other selectors, or by your own categories. Each row shows the selector and a dot for drafts.

Search and filter. Use Search styles to find a style (matches on additional selectors are labelled “matches …”). Use View options to filter by Style Type (All, Class, Element, Other) and to choose the Order: Groups, Cascade or A → Z.

Select several styles to act on them together: set as draft, publish, move to a category or delete.

[IMG 16 · NEW] global-styles-view-options.png
Alt: View options menu with Style Type and Order choices
Caption: Filter by style type and choose the list order
Capture: View options menu open showing Style Type (All, Class, Element, Other) and Order (Groups, Cascade, A → Z).

Categories

New in Pro 2.8

Categories help you organize a long list, for example Layout, Buttons, Typography.

• Create one from New Category, from the Category field when creating a style, or from the Move to category menu.
• Drag a category to reorder the groups.
• Use Remove from category or Ungroup to take styles out.
• Use the category actions menu to rename or delete a category.

Categories only organize the list. They never change the CSS order. Styles that belong together keep their position in the cascade.

Row options

From a row’s three-dot menu you can:

• Edit the style.
• Rename the selector.
• Set as Draft or Publish. A draft isn’t loaded in the editor or on the front end.
• Check Usage to see where the style is used.
• Move to category.
• Delete Style.
• Copy the CSS, from the CSS preview option.

Drafting vs deleting: a drafted style stops applying everywhere but is easy to bring back. Deleting removes the style, but it doesn’t remove the class from blocks that use it.

Check Usage

New in Pro 2.5

Check Usage opens a list of every location that uses the style, so you can see what a change will affect before you make it. It counts a style’s primary class and any saved class aliases together.

• For a site with a lot of content, the check may be limited to the most recent content. If so, it says so, so a short result isn’t mistaken for “unused”.
• Element and other automatic selectors can’t be counted. The list notes that other affected locations may exist.
• If a style isn’t used anywhere you’ll see “This style is not currently being used anywhere on your site.”

Run Check Usage before renaming or deleting.

[IMG 19 · NEW] global-style-check-usage.png
Alt: Check Usage modal listing the places a Global Style is used
Caption: Check Usage lists where a style is used
Capture: .card used on 2-3 posts or pages so the “Known affected locations” list is populated.

Rename

Renaming only changes the selector. It does not update anything that uses it:

1. the selector changes in the list and the generated CSS
2. the class does not change on blocks it’s assigned to
3. the old class and its styles no longer apply
4. blocks with the old class lose those styles

Additional selectors aren’t renamed. Run Check Usage first, and the rename dialog will warn you if usage was incomplete.

[IMG 20 · NEW] global-style-rename.png
Alt: Rename Global Style dialog with a warning about places the selector is used
Caption: Renaming doesn’t update blocks that use the class
Capture: Rename dialog on .card with the warning notice showing.

Style order and the cascade

All styles are written into one stylesheet, in the order shown in the Cascade view. When two rules set the same property on the same element, the later one in the cascade wins.

For example, these two styles both set font-size:

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

Because .card loads after .large-text, a card with both classes gets 1rem. To let large-text win, move card above large-text.

To reorder:

1. Switch View options → Order to Cascade.
2. Drag a row by its handle, or use Reorder style.
3. Click Save order.

The root style order is fixed. Grouped and A → Z views are for finding styles and don’t change the CSS order.

Tip: you can often avoid order problems by keeping each style focused on one job, instead of stacking several styles that set the same properties.

Import and export

The dashboard’s options menu lets you export and import Global Styles. Exporting Global Styles includes the Design Tokens they use, and each style’s additional selectors travel with it. See the Design workspace.

Patterns from the Pattern Library also carry the Global Styles and Design Tokens they use, including additional selectors. If you already have a style with the same selector, yours is kept.

Who can manage Global Styles

Creating, editing, ordering and deleting Global Styles needs the manage-styles permission. By default this is Administrators (manage_options). Users without it won’t see the Design screens. The same permission controls Design Tokens.

Large sites

Pro 2.5 increased the number of Global Styles the editor and front end can handle, with fewer requests in the editor. Pro 2.8 also made category changes and saving faster, and category-only changes no longer rebuild the CSS.

Upgrading and legacy Global Styles

Styles created with the original GenerateBlocks Global Styles system (pre-2.0 blocks) are kept separately. If your site has any, a Legacy Global Styles section in the Design panel links to them so you can still manage them.