Block Editor: Integrate slug-based color selection in color panel by USERSATOSHI · Pull Request #78048 · WordPress/gutenberg

USERSATOSHI · 2026-05-07T06:33:06Z

What?

Follow up PR for #78004

Integrate slug-based color selection from the ColorPalette component into the Global Styles color panel. This is a follow-up PR to the components package fix that enables proper handling of palette entries with identical color values.

The original PR was splitted into 2 PRs based on the review provided.

Why?

The ColorPalette component now supports slug-based selection (see PR #78004) to correctly distinguish palette entries that share the same color value. This PR completes the integration by connecting that improvement to the WordPress editor's global styles system, enabling:

End-to-end slug tracking from theme settings → block attribute → ColorPalette → back to theme.json
Correct slug persistence instead of ambiguous color-value lookups
Proper selection of duplicate colors without UI glitches or React warnings

How?

Added extractColorSlug() helper to parse slug from CSS variable format (var:preset|color|slug)
Updated encodeColorValue() to accept optional slug parameter and return the CSS variable directly when provided
Extended all color setter functions to accept and propagate the slug parameter
Threaded inheritedSlug through ColorPanelTab → ColorGradientControl → ColorPalette
Updated all color indicator sections (text, background, link, elements) to extract and pass slugs

Testing Instructions

Create a test theme with duplicate palette colors (e.g., two entries both set to #000000 with different semantic names)
Open a post/page in the WordPress editor and open global styles
Switch between text, background, and link color selections
Verify each duplicate color can be selected independently
Inspect theme.json to confirm the correct slug is saved (not a raw color value)
Verify no React console warnings about duplicate keys

Dependencies

This PR builds on #78004 (ColorPalette component changes). The components package establishes the slug-based selection mechanism; this PR integrates it end-to-end into the block editor's global styles workflow.

github-actions · 2026-05-07T07:54:10Z

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @DesignerThan95, @metasaman, @timelsass.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: DesignerThan95, metasaman, timelsass.

Co-authored-by: USERSATOSHI <tusharbharti@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: designsimply <designsimply@git.wordpress.org>
Co-authored-by: JiveDig <jivedig@git.wordpress.org>
Co-authored-by: timnicholson <timnicholson@git.wordpress.org>
Co-authored-by: nathanrodrigues2111 <nathanrbsf@git.wordpress.org>
Co-authored-by: acketon <acketon@git.wordpress.org>
Co-authored-by: SirLouen <sirlouen@git.wordpress.org>
Co-authored-by: ritoban23 <devrito@git.wordpress.org>
Co-authored-by: catthetech <catthetech@git.wordpress.org>

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

ciampo · 2026-05-11T14:40:21Z

With #78004 merged, I will review this PR once it gets rebased to include the ColorPalette fix

ciampo · 2026-05-11T15:33:14Z

cc @timelsass in case you want to confirm the fix, since you opened the original issue

Copilot

Pull request overview

Integrates slug-based color selection into the Global Styles ColorPanel so preset colors with identical color values can be selected and persisted unambiguously (building on the ColorPalette slug-selection work).

Changes:

Thread preset color slugs through Global Styles color panel controls and setters (encode by slug when available).
Update ColorGradientControl to pass selectedSlug to ColorPalette and propagate the selected slug through onColorChange.
Add a Block Editor changelog entry documenting the duplicate-palette bug fix.

Reviewed changes

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

File	Description
packages/block-editor/src/components/global-styles/color-panel.js	Extracts/passes color slugs through Global Styles color tabs and encodes preset colors by slug.
packages/block-editor/src/components/colors-gradients/control.js	Forwards `selectedSlug` to `ColorPalette` and propagates slugs in `onColorChange`.
packages/block-editor/CHANGELOG.md	Notes the Global Styles duplicate-palette slug-selection fix under Unreleased bug fixes.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+	const colorPaletteOnChange = canChooseAGradient
+		? ( newColor, _index, newSlug ) => {
+				onColorChange( newColor, newSlug );
+				onGradientChange();
+		  }
+		: ( newColor, _index, newSlug ) => onColorChange( newColor, newSlug );
+
 	const tabPanels = {
 		[ TAB_IDS.color ]: (
 			<ColorPalette
 				value={ colorValue }
-				onChange={
-					canChooseAGradient
-						? ( newColor ) => {
-								onColorChange( newColor );
-								onGradientChange();
-						  }
-						: onColorChange
-				}
+				selectedSlug={ colorSlug }
+				onChange={ colorPaletteOnChange }
 				{ ...{ colors, disableCustomColors } }


ciampo

Mostly looking good! Left a few smaller comments.

Will do a final round of review + smoke tests once those are addressed 🙏

ciampo · 2026-05-13T11:17:45Z

+			onColorChange={
+				isGradient
+					? undefined
+					: ( newColor, newSlug ) => setValue( newColor, newSlug )
+			}


Could this be simplified to onColorChange={ isGradient ? undefined : setValue } to avoid re-creating a new function every re-render?

ciampo · 2026-05-13T11:21:30Z

+	const extractColorSlug = ( rawValue ) => {
+		if ( typeof rawValue !== 'string' ) {
+			return undefined;
+		}
+		if ( rawValue.startsWith( 'var:preset|color|' ) ) {
+			return rawValue.slice( 'var:preset|color|'.length );
+		}
+		const themeFormatMatch = rawValue.match(
+			/^var\(--wp--preset--color--([^)]+)\)$/
+		);
+		return themeFormatMatch?.[ 1 ];
+	};


Could we move this function outside of the component render, and hoist it alongside DEFAULT_CONTROLS and popoverProps ? It would avoid re-creating it on every re-render.

Potentially even better, we could move it to a shared util. I can see some partial overlap in packages/block-editor/src/hooks/color.js. Very optional for this PR, but we could de-deuplicate the logic and update hooks/color.js to also accept the theme format (I think the logic from this PR is more correct)

ciampo · 2026-05-13T11:26:43Z

+		// Compare raw encoded references, not decoded color values: two palette
+		// entries can share the same hex value but carry different slugs
+		// (e.g. var:preset|color|dark-text vs var:preset|color|dark-background).
+		// Comparing decoded values would incorrectly conflate them, forcing the
+		// link preset to follow the text preset even though the user chose
+		// independent palette slots.
+		if (
+			inheritedValue?.color?.text ===
+			inheritedValue?.elements?.link?.color?.text
+		) {


Just highlight a small semantic change between the new check and the old textColor === linkColor that was flagged during a round of AI-assisted review.

Previously, text and link would sync when their resolved colors matched; now they sync only when their raw stored references are identical strings. Edge case: if text was stored as var:preset|color|primary and link as the resolved #0000ff, the old behavior would sync them; the new behavior won't. In practice this is unlikely, and the new behaviour is more correct for the duplicate slug problem, but we may want to call it out in the PR description (and potentially CHANGELOG?)

ciampo · 2026-05-13T11:27:56Z

Maybe we could add some tests to check the new behaviour? Something like a small smoke test asserting that setTextColor('#000', 'dark-text') writes var:preset|color|dark-text (not a value lookup result), and maybe that the text↔link sync no longer triggers when raw refs differ even if decoded values match?

…ality with tests

USERSATOSHI · 2026-05-13T13:37:02Z

There is this warning that we can fix in a follow up PR or in this PR ( I think follow up since the size of changes are already big enough now )

github-actions Bot added [Package] Components /packages/components [Package] Block editor /packages/block-editor labels May 7, 2026

USERSATOSHI closed this May 7, 2026

USERSATOSHI force-pushed the try/fix-duplicate-colors-block-editor branch from 135da60 to 7134bc2 Compare May 7, 2026 06:48

fix: integrate slug-based color selection in block editor

1d94ca2

USERSATOSHI reopened this May 7, 2026

github-actions Bot removed the [Package] Components /packages/components label May 7, 2026

chore: update changelog

8363f59

USERSATOSHI marked this pull request as ready for review May 7, 2026 07:53

USERSATOSHI requested a review from ellatrix as a code owner May 7, 2026 07:53

Merge branch 'trunk' into try/fix-duplicate-colors-block-editor

0dd9476

Merge branch 'trunk' into try/fix-duplicate-colors-block-editor

ecb7a94

ciampo requested review from ciampo and Copilot May 11, 2026 15:31

ciampo assigned USERSATOSHI May 11, 2026

ciampo added the [Type] Enhancement A suggestion for improvement. label May 11, 2026

Copilot started reviewing on behalf of ciampo May 11, 2026 15:32 View session

ciampo mentioned this pull request May 11, 2026

Duplicate colors in palette causes issues #9357

Open

Copilot AI reviewed May 11, 2026

View reviewed changes

USERSATOSHI added 2 commits May 12, 2026 12:21

fix: update changes based on the review and missing tests

470db67

Merge branch 'trunk' into try/fix-duplicate-colors-block-editor

ca4b1ee

ciampo reviewed May 13, 2026

View reviewed changes

feat: implement color slug extraction and enhance ColorPanel function…

d37f821

…ality with tests

USERSATOSHI requested a review from tellthemachines as a code owner May 13, 2026 13:27

chore: better comments and changelog detailing this new checker

d5b5e26

USERSATOSHI requested a review from ciampo May 13, 2026 15:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Block Editor: Integrate slug-based color selection in color panel#78048

Block Editor: Integrate slug-based color selection in color panel#78048
USERSATOSHI wants to merge 8 commits into
WordPress:trunkfrom
USERSATOSHI:try/fix-duplicate-colors-block-editor

USERSATOSHI commented May 7, 2026

Uh oh!

github-actions Bot commented May 7, 2026 •

edited

Loading

Uh oh!

ciampo commented May 11, 2026 •

edited

Loading

Uh oh!

ciampo commented May 11, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

ciampo left a comment

Uh oh!

ciampo May 13, 2026

Uh oh!

ciampo May 13, 2026

Uh oh!

ciampo May 13, 2026

Uh oh!

ciampo May 13, 2026

Uh oh!

USERSATOSHI commented May 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

USERSATOSHI commented May 7, 2026

What?

Why?

How?

Testing Instructions

Dependencies

Uh oh!

github-actions Bot commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlinked Accounts

Uh oh!

ciampo commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ciampo commented May 11, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

ciampo left a comment

Choose a reason for hiding this comment

Uh oh!

ciampo May 13, 2026

Choose a reason for hiding this comment

Uh oh!

ciampo May 13, 2026

Choose a reason for hiding this comment

Uh oh!

ciampo May 13, 2026

Choose a reason for hiding this comment

Uh oh!

ciampo May 13, 2026

Choose a reason for hiding this comment

Uh oh!

USERSATOSHI commented May 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented May 7, 2026 •

edited

Loading

ciampo commented May 11, 2026 •

edited

Loading