[wp-trac] [WordPress Trac] #61018: Block editor color selector displays incorrect color information

[WordPress Trac]

#61018: Block editor color selector displays incorrect color information
--------------------------+-----------------------------
 Reporter:  gerardreches  |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:  6.5
 Severity:  minor         |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 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
 <?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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/61018>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform