search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.21k forks source link

Color selector does not consider slug #55516

Open hanneslsm opened 1 year ago

hanneslsm commented 1 year ago

Description

I have a few sets of colors. Some of the sets share the same color. However, the slug is different. When selecting the color light-lighter that shares the same hex value with dark-contrast, the color component still displays dark-contrast.

It looks like the color component takes the color into account to display the name instead the slug.

Step-by-step reproduction instructions

  1. Create a theme with same colors
  2. Select one color

Screenshots, screen recording, code snippet

https://github.com/WordPress/gutenberg/assets/17861443/87e5f437-77c8-4db5-8120-59d638e74273

Block markup

``` "palette": [ { "color": "#F8FAFC", "name": "dark-contrast", "slug": "dark-contrast" }, { "color": "#0E121B", "name": "dark-darkest", "slug": "dark-darkest" }, { "color": "#141925", "name": "dark-darker", "slug": "dark-darker" }, { "color": "#384151", "name": "dark-default", "slug": "dark-default" }, { "color": "#4D5564", "name": "dark-lighter", "slug": "dark-lighter" }, { "color": "#6B7485", "name": "dark-lightest", "slug": "dark-lightest" }, { "color": "#222938", "name": "light-contrast", "slug": "light-contrast" }, { "color": "#FFFFFF", "name": "light-lightest", "slug": "light-lightest" }, { "color": "#F8FAFC", "name": "light-lighter", "slug": "light-lighter" }, ```

Environment info

No response

Please confirm that you have searched existing issues in the repo.

No

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

richtabor commented 1 year ago

It looks like the color component takes the color into account to display the name instead the slug.

That's right. The way it works now is if you have two colors with the same values, they will both be "selected" in a sense.

hanneslsm commented 1 year ago

The way it works now is if you have two colors with the same values, they will both be "selected" in a sense.

If I can remember correctly it was always that both were selected. But was it also that the displayed name was "overwritten" by the first one, even if the second one is selected? It either has changed or maybe I've just never noticed.

(I guess I'm just cautious because this similar bug was challenging me for some time: https://github.com/WordPress/gutenberg/issues/53558)

jeflopodev commented 1 year ago

Related issue #9357

ellenbauer commented 9 months ago

I wonder if we can make it happen that the slug is selected and not the color value. I'm working on a new block theme with light and dark patterns. To make this happen, I use a default and variant color palette in one color palette. This way uses can mix and match dark and light patterns on one page.

But as a result I have the same color values in one palette. It would be all solved when the actual slug would be used and not the current color value.