Colors in Gutenberg not working correctly

sage
1

Colors in Gutenberg don’t work correctly when we define them in Tailwind config with <alpha-value> (as described in their documentation):

primary: 'rgb(var(--color-primary) / <alpha-value>)',
secondary: 'rgb(var(--color-secondary) / <alpha-value>)'

image
image602×540 39.7 KB

When we remove <alpha-value> everything works fine.

Is there any workaround for this? We use <alpha-value> across the whole project.

Many thanks for help.

2

Hi @igorlopasovsky,

Thanks for the post. I didn’t realise this was even a feature of Tailwind. :face_in_clouds:

So, it turns out Bud supports this and will replace the <alpha-value> placeholder with ‘1’ ie. 100% opaque. This feature was merged in June of this year, so make sure you’re running a recent version of Bud.

The reason why the colour swatches don’t appear to have any colour is because the CSS variables aren’t defined on the Gutenberg page. If you set a colour, then view the frontend, it’ll look fine.

To fix this, we need to include the CSS variables in the editor.

In Sage, there is an editor entrypoint set up for this purpose. We can include the CSS variables in ./resources/styles/editor.css and the swatches will then have the correct colour, providing that the bundle is enqueued on enqueue_block_editor_assets - like it is in Sage out of the box.

Hopefully that solves your issue.

Tom

3

Hi Tom, thank you very much for your help, I really appreciate it.

It makes perfect sense what you said. We added CSS variables to editor.css but unfortunately this is what I see in the DEV tools

image
image2582×444 119 KB

It looks like the <alpha-value> doesn’t compile to anything.

4

That’s strange. For me on Bud 6.16.1, the values are compiled to 1.

What version of Bud are you running?

5

These are my versions:

"@roots/bud": "6.12.2",
"@roots/bud-tailwindcss": "6.12.2",
"@roots/sage": "6.12.2",
6

I think that might be the reason. Try upgrading all to 6.16.1.

It looks like the fix for <alpha-value> came in Bud 6.14.3

1 Like
7

You were right, all colors are working now. Thank you very much for your help :wink:

Maybe just one more thing. We use .useTailwindColors() in bud config which causes that only Tailwind colors are visible in Gutenberg. Is it somehow possible to show custom color picker as well? I didn’t find anything in the documentation.

Many thanks again.

8

No problem. Yes, you can.

In bud.config.js, you can set the settings.colors.custom property for theme.json to true.

app.wpjson.settings((theme) => theme.set('color.custom', true))

You can also enable custom gradients this way.

.wpjson methods are chainable, so you can just tag .useTailwindColors() etc. on to that. Just remember to call .enable() at the end! Eg:

app.wpjson.settings((theme) => theme.set('color.custom', true))
.useTailwindColors()
.useTailwindFontFamily()
.useTailwindFontSize()
.enable();
9

Thank you very much Tom, working like a charm :wink:

1 Like