Block editor color selector displays incorrect color information

[gerardreches]

I'm loading my own color palette to the theme.json.

The colors are dynamic and retrieved from the DB. These colors can have any valid CSS value for a color.

So a color value in the palette can actually take the value of another color from the same palette by using var(--wp--preset--color--another-color).

This creates a bug in the Block Editor. Although the color is displayed in the palette and it keeps its identifier, when you choose it the checked color will be the one it is making reference to, and the name and color displayed at the top will be those from the referenced color instead of the selected one.

Also, you cannot deselect the color by clicking again on it.

Let me set a simplified example of my code:

<?php
function filter_theme_json_theme( WP_Theme_JSON_Data $theme_json ): WP_Theme_JSON_Data {
        $palette = array(
                array(
                        'name'  => 'Greeen',
                        'slug'  => 'green',
                        'color' => '#55C42D',
                ),
                array(
                        'name'  => 'Pink',
                        'slug'  => 'pink',
                        'color' => 'var(--wp--preset--color--green)',
                ),
        );
        $new_data = array(
                'version'  => 2,
                'settings' => array(
                        'color' => array(
                                'defaultPalette' => false,
                                'palette'        => $palette
                        ),
                ),
        );

        return $theme_json->update_with( $new_data );
}
add_filter( 'wp_theme_json_data_theme', 'filter_theme_json_theme' );

With this we'll have two theme colors displayed in the color selector in the Block Editor (Gutenberg). Both color circles will be green as it is supposed to be.

Everything will work as expected for the first color (Green).

When you click on the second color, the selection border will appear on the second color, but the checkmark will appear on the first color.

The preview displayed on top will be:

[#55C42D background]
Green
#55C42D

But it should be:

[#55C42D background]
Pink
var(--wp--preset--color--green)

Clicking again on the second color will not deselect it either.

The tooltip when the cursor is on the second color displays 'Pink', as expected.

Saving the post will correctly store the pink. If you change now its value on the previous code to another color (without using var()) and reload the editor page, you will see how the color changes, so there is no problem with the association.

So what it needs a fix is:

1. Checkmark appearing on the wrong color.
2. Color preview information
3. Color not being able to be deselected by clicking again.

I understand that using var() instead of a color format wasn't an expected usage, however there are cases where this makes sense. I may have for example a primary, secondary, and accent color. And then I may have other colors such as 'Background', 'Button', 'Text', 'Link On Hover', etc. These are being used as utility colors and are meant to reference one of the already defined colors and not to have their own custom value.