Custom Gradient Picker not working with CSS variables

thetwopct commented 3 years ago

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

2021-01-16-001749

(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 commented 3 years ago

If I understand this PR correctly, this seems to have been fixed if I use custom gradient css vars via theme.json? https://github.com/WordPress/gutenberg/pull/27119

Similar issue here with css vars - https://github.com/WordPress/gutenberg/issues/20508

thetwopct commented 3 years ago

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

gwwar commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

I mentioned on https://github.com/WordPress/gutenberg/issues/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 commented 3 years ago

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 commented 1 year ago

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 commented 9 months ago

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

WordPress / gutenberg