ColorGradientsControl dropdown shows incorrect label when the selected color value is using color-mix CSS function

[daviedR]

Description

I tried to create a color palette system that allows users to use 10% of current text color, 20% of current text color, and so on. To do this, I added a few colors in the settings.color.palette on theme.json file. The color values use the color-mix CSS function to create the opacity effect.

Here's the snippet:

{
	"settings": {
		"color": {
			"palette": [
				{
					"color": "color-mix( in srgb, currentColor 10%, transparent )",
					"name": "10% of Current Text",
					"slug": "currentcolor-10"
				},
				{
					"color": "color-mix( in srgb, currentColor 20%, transparent )",
					"name": "20% of Current Text",
					"slug": "currentcolor-20"
				},
				{
					"color": "color-mix( in srgb, currentColor 30%, transparent )",
					"name": "30% of Current Text",
					"slug": "currentcolor-30"
				},
				{
					"color": "color-mix( in srgb, currentColor 40%, transparent )",
					"name": "40% of Current Text",
					"slug": "currentcolor-40"
				},
				{
					"color": "color-mix( in srgb, currentColor 50%, transparent )",
					"name": "50% of Current Text",
					"slug": "currentcolor-50"
				}
			]
		}
	}
}

The snippet works well it shows the correct CSS value both in the frontend and the editor.

However, when selecting the color in the ColorGradientsControl dropdown, it shows the wrong color label. It ALWAYS shows the 10% of Current Text (currentcolor-10) label even when the selected color is the currentcolor-50. When currentcolor-50 color is selected, the correct label should be 50% of Current Text.

Please look at the screenshot below, or watch the recorded video for a clearer demonstration.

This might be a very rare use case in theme or plugin development. But I think this should be still considered as a bug.

Step-by-step reproduction instructions

1. Copy the color palette snippet to the theme.json.
2. Go to block editor (e.g. edit a page)
3. Select a block and try to change its color.
4. Try switching between the new colors and the selected label will always show 10% of Current Text.

Screenshots, screen recording, code snippet

Look at the screenshot below, I was selecting the 2nd box, which is the paragraph with 20% of Current Text background color. The ColorGradientsControl dropdown shows 10% of Current Text label even though the selected color palette is the 20% of Current Text.

Or, please watch the video below:

gutenberg-colorgradientscontrol-bug.webm

Environment info

• WordPress 6.6.1
• Gutenberg 18.9.0

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

• Yes

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

• Yes

[ciampo]

With #64224 merged, the main bug shared by this PR should be fixed — although, as noted in this comment, color-mix values won't work when opening the color picker.

[ciampo]

I'm going to close this issue and open a separate one for ColorPicker:

• Color components: support color-mix() and other color syntaxes #64638