ColorPalette: Use computed color when css variable is passed to ColorPicker

[t-hamano]

Closes #46492

What?

This PR passes the computed color to the ColorPicker component if the value of the ColorPalette component is a CSS variable. This will ensure that the correct color value is set in the input field when the custom color picker is opened.

Why?

The ColorPicker component doesn't know what actual color the CSS variable points to. Therefore, the color input field of the ColorPicker component displays #000000 as a fallback.

How?

I used the following approach to pass the computed value to the ColorPicker component:

• Set a ref in the custom color picker area and reference its DOM node.
• Use the new getComputedBackgroundColorValueFromRef() function to read the background-color from that DOM node. Therefore, ColorPalette itself doesn't directly reference CSS variables; it expects CSS variables to be correctly defined by the consumer or theme. I also created this function because it may help resolve the following issue:
  • ColorPalette: Contrast checking doesn't work with CSS variables #41459
  • ColorPalette: review colord support when using CSS variables #44904

Testing Instructions

In the block editor

Enable Empty Theme and update theme.json as follows:

/test/emptytheme/theme.json

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		},
		"color": {
			"palette": [
				{
					"name": "Normal Color",
					"slug": "normal",
					"color": "#378C60"
				},
				{
					"name": "Variable Color (Hex)",
					"slug": "hex",
					"color": "var(--wp--custom--hex)"
				},
				{
					"name": "Variable Color (RGB)",
					"slug": "rgb",
					"color": "var(--wp--custom--rgb)"
				},
				{
					"name": "Variable Color (RGBA)",
					"slug": "rgba",
					"color": "var(--wp--custom--rgba)"
				}
			]
		},
		"custom": {
			"hex": "#e42c64",
			"rgb": "rgb(45,36,138)",
			"rgba": "rgba(45,36,138, 0.5)"
		}
	}
}

The definition of the settings.custom property creates the following CSS variable, which is referenced as the value of the settings.color.palette:

--wp--custom--hex: #e42c64;
--wp--custom--rgb: rgb(45,36,138);
--wp--custom--rgba: rgba(45,36,138, 0.5);

• Inserts a block that supports the color.
• Open the Text Color or Background Color menu and click on one of the palettes in the THEME area.
• When you open the custom color palette, confirm that the input field is set to the value calculated from the CSS variable.

In the storybook

• Build Storybook and access "ColorPalette" > "CSS Variables".
• Select one of the palettes, open the color picker, and verify that the input field is set to the calculated value.

Screenshots or screencast

2b2ac6156dbe07a7e5974fcbedb596a8.mp4

[github-actions]

Flaky tests detected in 8302689.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3930044210
📝 Reported issues:

• [Flaky Test] should be able to create an hierarchical post without title support #36939 in specs/editor/plugins/custom-post-types.test.js
• [Flaky Test] should write over selection #39938 in specs/editor/various/multi-block-selection.test.js

[mirka]

Ooh, thank you for the fix!

I confirmed this is working in Chrome/Firefox/Safari, and it should stay that way given that the spec says it returns "resolved values" 🤞

Can we also fix the other issue (#41459) in this PR or are you planning to do it separately?

gutenberg/packages/components/src/color-palette/index.tsx

Lines 313 to 324 in 8e299b5

	style={
	showTransparentBackground( value )
	? { color: '#000' }
	: {
	background: value,
	color:
	colordColor.contrast() >
	colordColor.contrast( '#000' )
	? '#fff'
	: '#000',
	}
	}

[mirka]

Nit: The naming is kind of misleading to me. It only returns a "computed value from ref" when the value is a CSS var. Maybe something like normalizeColorValue() or getValueForColord()? And we can probably remove the let computedValue if we do an early return like:

if ( ! currentValueIsCssVariable ) {
  return value;
}

[t-hamano]

I have changed the function name.
Also, I think I could have simplified the function content without using let 👍

[mirka]

Awesome, I like how these small changes improve readability 😊

[t-hamano]

Can we also fix the other issue (#41459) in this PR or are you planning to do it separately?

Yes, I would like to try to see if #41459, #44904, can also be solved separately using this function or ref.

[mirka]

🚢

[ciampo]

Thank you @t-hamano for working on this 🙏 it looks like a little improvement but it fixes a really annoying bug!