-
Hi there.
I’ve been using the free version of GenerateBlocks for some time and finally decided to get the Pro version.
I’m using it with an FSE theme and would like to keep it that way. I understand it would be clearer to post one question/issue at a time, but I don’t want to flood the board with a lot of topics.
Maybe I can start by asking the questions here, and if it makes sense I can open a topic for each one.#1
The local and global classes indicator is very small, and being colorblind I find it really hard to distinguish between both. Is there a way to customize the colors?#2
Is there a way to reset the settings for a particular area on a block, like sizing, spacing, etc.?
In some cases I’d like to clear all the values on a particular area, keeping other areas untouched.#3
The GB color picker gets the colors defined on the theme.json. Would it be possible to do this for spacings? We can select different units, but we can’t pick a spacing defined in theme.json. I know I can copy/paste the spacing variable to the GB inputs, and it works, but having a theme variable selector would make my life a whole lot easier.
Also regarding the units, since every unit has a different first letter, it would be a nice improvement to change units when typing that first letter. Instead of typing px or rem, the user could type p or r to change the units.#4
Is there a way to set a default for each GB block? I’ve defined a primary-button class on my global classes, with the colors and spacings. However, each time I insert a new GB button, it comes with the default styles applied. I have to apply my global class and delete the button block local style.
It would be great if we could define defaults for each block. I think this is possible when using the GeneratePress theme, but I’m not using it.#5
It would be great if we could edit the global styles by hand. I can preview the generated CSS, but I can’t edit it.
I know this can lead to some problems, if there are some errors or invalid CSS. Maybe it could be parsed and validated before saving the style.
This would be a great improvement to my workflow.I’m sorry for the long text and for mixing different issues into one topic.
Looking forward for your feedback.
Keep up the good work and thanks for such a great product!
-
Hi there,
1. Try this PHP code to change the local style and global style tags’ color and font-size:
function my_gutenberg_sidebar_css() { // Only load in the block editor if ( ! is_admin() ) return; global $current_screen; if ( ! $current_screen || ! method_exists( $current_screen, 'is_block_editor' ) || ! $current_screen->is_block_editor() ) { return; } echo '<style> /*style for global style tags*/ .block-editor-page .global-classes__class,.global-classes__class * { background: black; color: white; font-size: 20px !important; height: auto !important; } /*style for local style tags*/ .block-editor-page .global-classes__class--local,.global-classes__class--local * { background: rebeccapurple; color: yellow; font-size: 20px !important; height: auto !important; } </style>'; } add_action( 'admin_footer', 'my_gutenberg_sidebar_css' );Adding PHP: https://docs.generatepress.com/article/adding-php/
2. No, there isn’t, unfortunately!
3. I don’t think so at this moment. You will still need to type in the variables.
4. As you said, it might create CSS errors, so it’s not an option currently.
If you have any other questions, please open a new topic! Thanks for your understanding 🙂
Let me know if there’s anything unclear!
-
Thanks for the feedback.
I tried your code snippet but the CSS targets the wrong elements. I’m talking about the small circles that indicate if a style is global, local or inherited.
Here’s a screenshot:

At this size I can distinguish the difference between the colors, but working at a 2560×1440 resolution it’s hard to tell them apart.
-
Hi there,
Try adding this snippet instead:
add_action('admin_footer', function () { // Only load in the block editor if (! is_admin()) return; global $current_screen; if (! $current_screen || ! method_exists($current_screen, 'is_block_editor') || ! $current_screen->is_block_editor()) { return; } echo '<style> .gb-inspector-controls .components-panel__body .ajwubiD07rRPGz83PVCF { width: 10px; height: 10px; } </style>'; }); -
Nice!!!
I’ve seen those classes on the inspector, but I thought they were dynamically generated.
This will definitely help.Thanks!
-
Alvind
You’re welcome, glad to be of help 🙂
- You must be logged in to reply to this topic.