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

[mirka]

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

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]

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]

Related ticket: #28254

[mirka]

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.