Topic: GB 2.0 bug: variables values not shown on mobile editor

ErnestW
December 30, 2024 at 12:32 am

Hello,

I am trying gb and gb pro 2.0 (beta6).

Far all the spacings and typography I am using variables. I have “inserted” the variables in the desktop breakpoint (default in the editor).

Everything works well and responsively on the frontend, but in the editor the tablet and mobile “versions” look completely unstyled, as if the variables didn’t affect the tablet/mobile editor at all.

How can I fix this?

Thanks!
ErnestW
December 30, 2024 at 9:46 am

UPDATE: after a bit more troubleshooting and online research, I think I found a possible cause:

Quoting from here (https://discourse.roots.io/t/gutenberg-editor-error-on-tablet-mobile-view-css-and-js-not-loading/27728) “In the Gutenberg block editor, the tablet and mobile view are rendered as iframes which blocks your editor CSS from being inherited. The desktop view is an inline div so your editor css works in that view.”

So maybe it is not a problem with variables and with GB, but a broader one.

Do you know if there is a way I can preview the custom css also on tablet and mobile view? It is impossible to work with GenerateBlocks in the editor otherwise…

(For variables and custom css I use WpCodebox and Core Framework)

Thanks!
Ying
December 30, 2024 at 10:55 am
Hi there,

You can give WP’s wp_add_inline_style function a try, here’s an example:
https://developer.wordpress.org/reference/functions/wp_add_inline_style/
```
wp_add_inline_style( 'wp-block-library', 
'
:root {
--mobile-padding:18px;
}' 
);
```
ErnestW
December 30, 2024 at 11:18 am

Hey Ying,

Thanks for your reply!

One question: do you think it is better to use this function or to use a child theme and enqueue the style? In this second case, what is the snippet to enqueue the stylesheet from the child theme (I use GP pro).

I am going to update the custom css and the variables quite often (using core framework), so I am looking to find the best solution.

Thanks again!

Ying

December 30, 2024 at 12:50 pm

Try this:

//let block editor load child theme CSS
add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'style.css';

    return $editor_styles;
} );

But I’m not sure it will work in the preview iframe.

ErnestW
December 31, 2024 at 1:14 am

Dear Ying, thanks for your support. I have tried your first snippet (wp_add_inline_style) but it works only partially: now the variables are active in the tablet and mobile preview too, but some of them don’t work as intended. More specifically, all the clamp values used for fluid spacing keep the max value and don’t “adapt”. As a consequence, all paddings and margins (that should be fluid), are stuck with the desktop size, even on tablet and mobile. Everything works well on the frontend, so it is a problem of the editor.

I understand this problem is out of the scope of this support. However, if you have any idea it would be great to find a solution. This could be useful for other users and for the future of GenerateBlocks in general, since it is becoming more and more professional, and it now allows the use of variables.

Thanks again
ErnestW
December 31, 2024 at 8:18 am
I found a solution!

I have created a child theme and put the variables in the style sheet. Then I have used this snippet:
```
/* Enqueue styles to editor iframe */
add_filter( 'generate_editor_styles', 'tct_editor_iframe_styles', 50);
function tct_editor_iframe_styles($editor_styles ) {
    $editor_styles[] = '/style.css';

    return $editor_styles;
};
```
Lastly, I had to convert my clamp functions because they used calc, which apparently doesn’t work in the editor.
Ying
December 31, 2024 at 10:26 am

Glad to hear that 🙂

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

GB 2.0 bug: variables values not shown on mobile editor