Using color variables in CSS: Color not shown in Gutenberg Blocks

Pinegrow WP WordPress
1

CleanShot 2023-05-11 at 13.34.01@2x
CleanShot 2023-05-11 at 13.34.01@2x754×682 29.3 KB

CleanShot 2023-05-11 at 13.12.34@2x
CleanShot 2023-05-11 at 13.12.34@2x1920×1121 181 KB

In this case i use --green_4 as a var() for background-color of a CSS Class.
While --wp--preset--color--green-4 is generated for the use in Gutenberg, the “unprocessed” Variable --green_4 does not exist in the context of the Block Editor.

As a workaround i would have to redeclare the colors form Design Panel as vars like this in a an editor stylesheet:

.editor-styles-wrapper {
    --beige_1: #F6F5EB;
    --green_0: #5E7158;
    --green_1: #839D80;
    --green_2: #9BBD9B;
    --green_3: #C9D8C3;
    --green_4: #e5eee6;
    --grey_0: #151515;
    --grey_1: #404040;
    --white: #fff;
    --black: #000;
}
2

They won’t show in Gutenberg by default since they are just CSS variables. The new theme.json export feature should put them in Gutenberg, though. Give it a try if you haven’t already.

1 Like
3

Thanks @adamslowe for the reply.

The json file is generated as soon as I enable it in theme settings and use the style panel - right? In GB I can use the defined colors for text and background already, but they have special prefixed var names (as can be seen in my post).

Problem is if the vars are used in it’s original form in CSS classes applied to an element.