search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.32k stars 4.12k forks source link

Selecting a theme gradient doesn't update the gradient bar color #43715

Open mirka opened 2 years ago

mirka commented 2 years ago

Clicking on a theme gradient doesn't update the gradient bar UI:

Selecting a theme gradient for the Cover block

The isolated instances in Storybook for the GradientPicker component are working fine, so there is likely something wrong with the data flow in the block editor usage.

Reported by @jasmussen

luminuu commented 3 months ago

Upon searching for this behaviour I found this issue and can confirm it does happen when CSS variables are used. Twenty Twenty-Four uses hex codes in the gradients, while for example Twenty Twenty-Three in the Sherbet style variation, CSS variables are used. It is reproduceable there.

To reproduce, the use code like this in a gradient in theme.json: linear-gradient(135deg,var(--wp--preset--color--primary) 0%,var(--wp--preset--color--secondary) 100%)

luminuu commented 1 month ago

Related ticket: #28254

mirka commented 1 month ago

I have a potential solution in #63915, but I noticed that two of the Sherbet gradients have a fixed keyword at the end, and are invalid as gradient values. fixed is a background keyword and valid as part of a background value, but not necessarily in other contexts where a gradient value can be used, e.g. mask-image. So unfortunately that gradient string is invalid and cannot be parsed by a gradient parser. It's not impossible to implement a workaround, but ideally the theme value should be corrected.