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