Custom Gradient Picker not working with CSS variables

[thetwopct]

Description

• I've added a custom gradient preset.
• It uses CSS variables.
• The circular color picker swatch displays the correct color CSS variable gradient. ✅
• When the color swatch is selected, the CSS gradient including CSS variables is applied to the block (in my theme I'm applying it to a Group). ✅
• The Gradient Picker Range Slider does not display the correct colors from the CSS variable.❌
• Testing with Hex, RGBA, or writing colors all work, just not CSS variables.

Step-by-step reproduction instructions

1. Register some custom gradient presets and add appropriate CSS

add_theme_support(
			'editor-gradient-presets',
			array(
				array(
					'name'     => __( 'Hex' ),
					'gradient' => 'linear-gradient(180deg, #00EE00 0%, #00EEDD 100%)',
					'slug'     => 'hex',
				),
				array(
					'name'     => __( 'RGBA' ),
					'gradient' => 'linear-gradient(180deg, rgba(255,0,0,1) 0%, rgba(255,90,0,1) 100%)',
					'slug'     => 'rgba',
				),
				array(
					'name'     => __( 'Words' ),
					'gradient' => 'linear-gradient(180deg, gold 0%, brown 100%)',
					'slug'     => 'words',
				),
				array(
					'name'     => __( 'CSS Var' ),
					'gradient' => 'linear-gradient(180deg, var(--wp-admin-theme-color) 0%, var(--wp-admin-theme-color-darker-10) 100%)',
					'slug'     => 'css-var',
				),
			)
		);

2. Open the editor, add a Group block and apply a gradient background to it

3. The color picker work with the Hex, RGBA and named colors, but the CSS variables are not being picked up by the color picker

Expected behaviour

CSS variables to get added to the gradient color picker as a range

Actual behaviour

CSS variables are not added to the gradient color picker as ranges

Screenshots or screen recording

(The 4th swatch contains the CSS variable gradient)

WordPress information

• WordPress version: 5.6
• Gutenberg version: Core
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? No

Device information

• Device: Mac
• Operating system: MacOS
• Browser: Safari

[thetwopct]

If I understand this PR correctly, this seems to have been fixed if I use custom gradient css vars via theme.json? #27119

Similar issue here with css vars - #20508

[thetwopct]

@gwwar Can you help me understand how this is a help request rather than an issue?

[gwwar]

Sorry, I miscategorized this one. Are you still seeing this behavior with Gutenberg enabled? I noticed the original report was core 5.6

If something was fixed in Gutenberg 9.5, it should be available in the 5.7 WP line. https://developer.wordpress.org/block-editor/handbook/versions-in-wordpress/

[thetwopct]

Theme.json is not recognised by WP 5.7 without Gutenberg plugin, so this is still an issue.

What more can I do to satisfy "Needs Testing" tag?

[talldan]

@thetwopct This issue was briefly discussed during a triage session in slack (https://wordpress.slack.com/archives/C02QB2JS7/p1623131409378900).

I mentioned on #20508 that I'm not sure what the level of support is for css variables. Up until recently this project had some support for IE11, so my understanding is that features like editor-gradient-presets when originally introduced might not have intentionally supported css variables because of that. It isn't something that's documented (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#block-color-palettes).

color is the hexadecimal code to specify the color.

The theme.json will now be introduced in WordPress 5.8, which is also the first version that won't support IE11.

edit: I realise the docs for gradients are a little more vague, and still don't shed any light on whether css vars should be supported:

gradient is a CSS value of a gradient applied to a background-image of the block

[carolinan]

I am seeing this problem with all gradients added in theme.json. It is not limited to gradients that use CSS custom properties.

The range slider does not update when a gradient is selected from the swatch. Clicking on the range slider or the type option reverts the gradient to a different one.

WordPress 5.8
Gutenberg 11.3.0.

[Olein-jp]

We hope this issue will be fixed at the end of Gutenberg phase 2 in WordPress 6.3.

We believe that the improvements in this issue will be very useful for designing useful block themes in theme.json and using them to build websites in the site editor.

[editandpost]

Still seeing this bug as of WP 6.4.1. Do we have any workaround or update as to timing of this fix?