With the latest GenerateBlocks update, a new styles indicator system was introduced. This three-dot, color-coded system gives you visual cues to differentiate how styles are applied to your blocks.
Here’s a breakdown of what the colors mean:
- Orange = Local styles
- Yellow = Inherited styles
- Purple = Global styles
It can be a little confusing at first, so let me walk you through exactly how it works.
Viewing Global Styles on a Block (Purple)
On a sample page, let’s start by looking at a button block that uses a global style. On the right-hand side, you’ll see purple dots next to style settings.
That purple color indicates that those specific styles are coming from the global style class attached to the block.
Adding Local Styles (Orange)
Let’s say we want to add some top margin to that button—something specific to this page layout. We add 2rem of top margin.
Now you’ll see an orange dot appear next to the margin setting. This tells us the style is local, not part of the global style. It’s only affecting this block on this page.
Inheriting Desktop Styles on Mobile (Yellow)
Switch over to mobile view and look at the spacing settings again. You’ll now see a yellow dot next to margin. That means the block is inheriting the 2rem top margin from the desktop setting.
To override it, you can change the value (e.g. set it to 1rem), and the dot will turn orange again, showing that a local mobile-specific style is now applied.
This allows you to easily track what’s being inherited and what’s been overridden on each device size.
Viewing Styles Inside a Global Class
If you jump into the global style editor, the same color-coding system applies:
- Orange: A style is set within this global class.
- Yellow: A style is inheriting from a different breakpoint (e.g., desktop to mobile).
So even within a global style, these indicators help you track how styles cascade across device sizes.
Clicking Dots to See and Edit Styles
You can click any of the indicator dots for more detail:
- It shows which class the style belongs to
- It lets you edit the value right from that dot
For example, if you see a purple dot next to padding and want to change it:
- Click the dot
- You’ll jump directly to that value in the global style editor
- Make your adjustment, and it saves instantly
This is super handy when you’re working across multiple styles and classes.
Quick Recap of Style Dot Colors
Here’s a summary of what the color indicators mean:
- Orange: Local style — specific to that block on the current page
- Yellow: Inherited style — coming from another breakpoint or source
- Purple: Global style — controlled by a class attached to the block
If you have multiple global classes on a block, clicking the dot will tell you exactly which class it’s pulling from.
Final Thoughts
The new styles indicator system in GenerateBlocks is a great UI improvement. It makes editing and debugging styles much easier—especially since you can jump straight into global style settings by clicking the indicator.
Thanks for reading! Be sure to subscribe to my channel if you want more walkthroughs like this on GenerateBlocks and WordPress.
