ColorPalette utils: do not normalize undefined color values

[ramonjd]

What?

Fixes a regression introduced by #64224

normalizeColorValue() was treating empty style values as non-simple values and therefore returning defaultView?.getComputedStyle

Adds tests

Why?

Empty values were being filled by an element's computed background color, which could be the site background color.

This is confusing and means that, by default, it's impossible to select a new color without adjusting the alpha value.

How?

Detecting false values and returning the value immediately.

Testing Instructions

1. Open the editor and insert a group block
2. Open the color picker for background or any other color style
3. Ensure that you can see your custom color preview immediately in the canvas
4. Check the test description of ColorPalette: partial support of color-mix() CSS colors #64224 and ensure that works

Before

The default alpha value is 0, which means, by default, any custom color cannot be seen in the canvas.

Kapture.2024-09-02.at.14.46.23.mp4

After

The alpha is 100 so, by default, my custom color changes are visible on the canvas.

Kapture.2024-09-02.at.14.44.36.mp4

Semi-related

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

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ramonjd]

There was a related conversation about how to handle null values here: #64224 (comment)

Not sure if I've grokked the outcome of that, so let me know if there's a better way to do this.

[ramonjd]

Check the test description of #64224 and ensure that works

Seems to work for me

2024-09-02.15.29.58.mp4

[github-actions]

Flaky tests detected in d0d336e.
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/10661442034
📝 Reported issues:

• [Flaky Test] Navigates the items list via UP/DOWN arrow keys #64334 in /test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js

[ciampo]

Good catch, the code works as intended. Thank you 🙏

[ciampo]

I'm not sure I entirely get the meaning of this test name

[ramonjd]

😄 bad copy pasta. I'll fix - thanks for noticing

[tyxla]

LGTM, thanks for the fix @ramonjd 🙌

[ramonjd]

I appreciate the quick reviews, folks 🙇🏻