Global Styles panels: fix wrong preset committed and shown when two color presets share a hex

[ramonjd]

What?

Fixes two related bugs in the inspector color controls when a palette contains two presets with the same hex value:

1. Clicking the preselected swatch to accept an inherited color committed the wrong preset. The decoded hex was re-encoded by palette lookup, which returns the first entry with that hex.
2. Once any local preset was set, the picker matched selection by hex, so both same-hex swatches rendered as selected.

Follow-up to #77894, raised in #77894 (comment).

How?

• The accept-inherited interceptor now passes inheritedSlug to setValue, so the encoder keeps the reference the at-rest UI was showing.
• Each color tab now receives a localSlug extracted from the raw local value. The picker selects by localSlug once a value is set and by inheritedSlug at rest. A slug-less custom value keeps the existing hex fallback.

Testing Instructions

Add to test/emptytheme/theme.json and activate emptytheme:

{
	"settings": {
		"color": {
			"defaultPalette": false,
			"palette": [
				{
					"slug": "dark-background",
					"color": "#000000",
					"name": "Dark background"
				},
				{ "slug": "dark-text", "color": "#000000", "name": "Dark text" }
			]
		}
	},
	"styles": {
		"blocks": {
			"core/paragraph": {
				"color": { "text": "var:preset|color|dark-text" }
			}
		}
	}
}

Accepting the inherited color commits the right preset

1. New post, add a Paragraph. Confirm in the Code editor it has no textColor or style attribute.
2. Open Typography > Color. The "Dark text" swatch is checked (hover to confirm the name). Click it.
3. Check the Code editor: the block must have "textColor":"dark-text". On trunk it gets "dark-background".

Selection follows the stored preset

4. Reopen the color popover. Only "Dark text" is checked. On trunk both swatches render as selected.
5. In the Colors panel, set the Link color to "Dark text". Reopen: only "Dark text" is checked.

Custom colors unchanged

6. Set a custom color of #000000 via the custom picker. Reopen: selection falls back to hex matching, same as trunk.

Kapture.2026-07-21.at.15.20.06.mp4

[github-actions]

Size Change: +31 B (0%)

Total Size: 7.75 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-editor/index.min.js	427 kB	+31 B (+0.01%)

_{compressed-size-action}

[Copilot]

Pull request overview

Fixes Global Styles inspector color controls when multiple palette presets share the same hex value, ensuring the correct preset slug is committed and only the intended swatch renders as selected.

Changes:

• Commit the inherited preset by passing inheritedSlug through the “accept inherited” click path to preserve preset identity.
• Track selection by slug (localSlug when a local value exists, inheritedSlug at rest) to avoid same-hex presets both appearing selected.
• Add regression tests covering duplicate-hex palettes for Typography text color and Color panel link color.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/block-editor/src/components/global-styles/typography-panel.js	Adds localSlug and ensures inherited selection/commit uses the correct inherited slug.
packages/block-editor/src/components/global-styles/background-panel.js	Adds localSlug and fixes picker selection behavior for background color with duplicate-hex presets.
packages/block-editor/src/components/global-styles/color-panel.js	Adds localSlug to link/hover and element color tabs so selection follows stored slug instead of hex.
packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.js	Centralizes slug-based selection (displayedSlug) and ensures accepting inherited commits with inheritedSlug.
packages/block-editor/src/components/global-styles/test/typography-panel.js	Adds regression tests for committing the correct inherited preset and single-swatch selection with duplicate hex values.
packages/block-editor/src/components/global-styles/test/color-panel.js	Adds regression test verifying link color selection follows the stored slug with duplicate-hex presets.

[ramonjd]

A block saves a palette color by its name (slug), not its hex, e.g. dark-text. Like the example in the PR description, two presets can share one hex, so only the slug says which one you picked.

The picker marks the selected circle. It used to match by hex, so same-hex presets both lit up. Now it matches by slug: inheritedSlug when showing the inherited value, localSlug when showing the block's own value.

localSlug is the name read from the block's saved value. Custom colors have no name, so localSlug is empty and the picker falls back to hex matching.

[ramonjd]

Trunk

Kapture.2026-07-21.at.15.26.16.mp4

This PR

Kapture.2026-07-21.at.15.30.47.mp4

[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: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>

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

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated no new comments.

[andrewserong]

Nice work! I've only done the quickest of passes looking at this as I have to skip out for the day. A couple of questions:

• Re: naming, since we have userValue would it make sense to name this userSlug instead of localSlug to match the inheritedValue / inheritedSlug naming?
• Do we also need to handle this for gradient presets? (If so, doesn't have to be this PR to fix it, it could be a follow-up)

[ramonjd]

Re: naming, since we have userValue would it make sense to name this userSlug instead of localSlug to match the inheritedValue / inheritedSlug naming?

Much better. Done!

Do we also need to handle this for gradient presets? (If so, doesn't have to be this PR to fix it, it could be a follow-up)

It's the same bug, but it looks like it needs different handling in a follow up. Fixing it needs GradientPicker to expose the clicked preset's slug and accept a selected slug, which is very likely a change to the component API, so I can plan a follow up and check other supports while I'm at it.

Thanks for testing!

[talldan]

Fixes the issue for me, and the code looks pretty reasonable!

[talldan]

I expect it should be in 7.1 so I've added the label ☝️

[andrewserong]

Thanks for the updates, LGTM and it's still testing well:

2026-07-22.10.05.28.mp4

[ramonjd]

Thanks a lot for testing, folks! I'll have a look at the gradient follow up

[github-actions]

I just cherry-picked this PR to the wp/7.1 branch to get it included in the next release: 63bdeed