Color selector does not consider slug

[hanneslsm]

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

Screen.Recording.2023-10-20.at.17.38.20.mov

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]

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]

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: #53558)

[jeflopodev]

Related issue #9357

[ellenbauer]

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.