GenerateBlocks Pro 2.8 completes our Styles Builder updates with the introduction of Design Tokens, any Selector global styling and a dedicated design workspace to preview your design system and build your own style book. Now there is no limit to what you can design with GenerateBlocks, and with these new tools you will have the confidence to build and manage designs of any complexity.
UI Facelift
The incredible pace of updates to the GenerateBlocks ecosystem over the last 18 months has introduced many new feature workspaces: Overlay Panels, Conditions, Forms and Editor Access. All of these have been built from the ground up with modern technology, and in doing so we’ve recognised a disconnect between the older and newer systems. So, in GenerateBlocks 2.5 and GenerateBlocks Pro 2.8, we aim to rectify that with a unified workspace design, whilst giving the whole toolset a minor touch-up.
We hope you like what you see, and we would love your feedback. GenerateBlocks Pro 2.8 is currently in alpha; use it in a test environment.
Getting Started
The new Global Styles & Design Tokens panel can be accessed from either the dedicated workspace in the dashboard or a panel from any editor view.
Design Workspace with Style Book and Live Preview
Navigate to the Dashboard > GenerateBlocks > Design and choose either Global Styles or Design Tokens to open the GenerateBlocks Design Workspace. This dedicated design workspace provides the styles panel alongside a site preview that can display any page for live visual reference, or a Style Book that displays a list of selectable theme elements for direct styling and preview.
Style Book
The Style Book is the modern home for all theme-level styling. It’s a live, curated list of common HTML elements: body, links, all headings, images, tables, forms and more. Select any element to load its selector into the Styles Builder and unlock the unprecedented styling control that GenerateBlocks is known for.
Editor Panel
Click the Design button in the editor top bar to open the sidebar panel to access Global Styles and Tokens from within the editor.
Global Styles
Global Styles is no longer limited to CSS classes. It can now directly target any supported selector, including:
- HTML tags; such as
body,p,h1throughh6,a,button,blockquote,tableand more. - Advanced selectors: for example
.woocommerce .buttonto style WooCommerce buttons or any other selector you require.
This ultimate addition to Global Styles brings the unlimited styling power of GenerateBlocks to any theme, third-party plugin, or custom HTML selector. With this feature, you can now style any part of your site without ever leaving the block editor. Pair it with the upcoming GeneratePress Premium Template Engine, and there’s no limit to what you can build.
This style Also Applies to
What do h2 and .looks-like-h2, or .button--primary and .woocommerce button, have in common? Each pair is a set of selectors that should share the same styles. With GenerateBlocks Pro 2.8, you can now create a single global style and choose the additional selectors it applies to. Define the style once, apply it to as many selectors as you like, and manage every one of them from a single place.
Categories, sorting, and selection
A top request in the recent community survey was tools to help manage large global style kits. Well, we heard you. Now you can search, sort, and categorise your Global Styles whilst still maintaining and controlling specificity order.
Design Tokens
Design tokens are at the heart of every good design system. They abstract style property values, such as a hex color or pixel dimension, into a clearly named, explainable token. A hex color like #44ff22, for example, can be declared as the variable --gb-color-primary and surfaced in the styles builder as a friendly Primary Color, ready to use in block properties, global styles, and even within other tokens.
By acting as a single source of truth for all critical design decisions, managed from one central location, Design Tokens help you build sites faster, maintain them more easily, and keep greater control over brand consistency.
Naming, Categorisation, and Controls
GenerateBlocks Design Tokens provides an optional abstraction layer to simplify token usage and maintenance. You can name and categorise tokens for better readability and easier navigation. You can also set each token’s control type (colour, unit, or text) and choose where it appears within the style builder controls. It is now easier to modify token values and ensure the right token is used in the right place.
This additive layer sits over your CSS variables as a clean, optional UI that doesn’t get in the way of writing plain CSS, while giving you control over how and where tokens appear. Let’s take a closer look at the control features on offer.
Name
Tokens are CSS Variables and are named as such eg. --gb-color-primary , for easier reading GenerateBlocks provides an editable Name such as Primary Color.
Category
Categories are organisational meta allowing you to group related tokens into expandable sets in the design tokens panel.
Apply To
Each Token can be applied to one or more style inspector control, so a color token might show for any color property whereas a gap token only appears in row and column gap.
Quick Edit Control
If you’re into building your own framework, then you can build your own WordPress Customizer experience and attach quick edit controls to the Design Token screen. For example, you could update a color with a color picker, while a spacing value could use 3 or 4 select options.
Responsive Design
Tokens have access to the same at-rule controls available in blocks and Global Styles, letting you alter a token’s value responsively, whether that’s for a breakpoint or prefers-color-scheme. Used correctly, responsive tokens don’t just create a truly responsive design system; they also cut down the overhead and maintenance of writing extra responsive styles.
Get to the :root of it with the CSS Editor
You can view, edit and paste CSS variables directly into the :root selector of your site. Simply switch on CSS Editor Mode and open the tokens panel. Here you’ll see all of the tokens declared in GenerateBlocks.
Export, Import and GenerateCloud Patterns
Design Tokens can be exported and imported independently of your Global Styles, or along with them; it’s your choice, making it easier than ever to deploy a design system across any site.
GenerateCloud users will be happy to hear that imported patterns handle tokens for you too. For example, if a pattern includes a Global Style, GenerateBlocks checks it for any new tokens and imports them automatically.
OKLCH and color-mix support
Managing colors is one of the most complicated parts of a design system, especially if the design requires gradients, shades, or varying opacities. This can result in many color values, some of which are hardcoded into style properties. With GenerateBlocks Pro 2.8, that is no longer a problem; with OKLCH color support and color-mix CSS, you can now adjust a tokenized color by shade and opacity directly from within the color picker.
Design Tokens is available now in GenerateBlocks Pro 2.8 alpha. Check out the full guide to get started in a test environment, and let us know what you think. Downloads are available in your account dashboard.
Amazing, that’s what we’ve been waiting for ❤️💪
That unified settings pages was much needed, I also like the new UI improvement, much cleaner than the previous one, very nice update.
“Pair it with the upcoming GeneratePress Premium Template Engine, and there’s no limit to what you can build.”
🤘🤘🤘🤘Yeahhh
Looks amazing 🙌
Awesome update, I was using my own style system in the style.css for years and this looks refreshing.
BUT please please please allow us to finally create AND USE variables/tokens in the transition timing function and shadow controls!
Variables never worked after the first save once you reload, the field breaks and displays “undefined.” Transition timings and box shadows are not edge cases. Custom motion and elevation are core parts of any design system, and nobody remembers exact cubic-bezier values or complex shadow syntax by heart.
Right now, having to hardcode these values on every single block defeats the entire purpose of having a global variable/token system in the first place. Please fix the editor so it properly saves and retains token strings in these specific input fields on reload.
Thanks,
Phil
Really exciting changes! Where’s the best place to give feedback or ideas on this alpha? Is it the support forums?
Yes, if you run into issues or if you need any assistance, please reach out to support! Thanks for giving it a test.