GradientPicker: select by slug so two presets sharing a gradient keep their identity

[ramonjd]

What?

Follow up to #80497

Gradient counterpart to #80497, as noted in that PR's review. When a palette contains two gradient presets with the same gradient string:

1. Accepting an inherited gradient by clicking its preselected swatch committed the wrong preset. The gradient string was re-encoded by palette lookup, which returns the first entry with that string.
2. Once a local gradient preset was set, the picker matched selection by string, so both swatches rendered as selected.

How?

• GradientPicker gains an optional selectedSlug prop that selects strictly by slug when set, and passes the clicked preset's slug as a third onChange argument. Mirrors ColorPalette's selectedSlug API. Both changes are additive; consumers that do not opt in are unaffected.
• The Global Styles gradient tabs (background gradient, legacy color.gradient, element gradients) pass inherited and user slugs, and encodeGradientValue uses a provided slug instead of matching the gradient string.

Testing Instructions

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

{
	"settings": {
		"color": {
			"defaultGradients": false,
			"gradients": [
				{
					"slug": "dup-background",
					"gradient": "linear-gradient(135deg,#0693e3 0%,#9b51e0 100%)",
					"name": "Dup background"
				},
				{
					"slug": "dup-text",
					"gradient": "linear-gradient(135deg,#0693e3 0%,#9b51e0 100%)",
					"name": "Dup text"
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/paragraph": {
				"color": { "gradient": "var:preset|gradient|dup-text" }
			}
		}
	}
}

Accepting the inherited gradient commits the right preset

1. New post, add a Paragraph block. Confirm in the Code editor the Group has no gradient or style attribute.
2. Open the Paragraph's Background panel and its Gradient control. The "Dup text" swatch is checked (hover to confirm the name). Click it.
3. Check the Code editor: the committed reference must name dup-text. On trunk it names dup-background.

Selection follows the stored preset

4. Reopen the gradient popover. Only "Dup text" is checked. On trunk both swatches render as selected.

Custom gradients unchanged

5. Set a custom gradient via the gradient bar. Reopen: no preset swatch is checked, same as trunk.

Before

Kapture.2026-07-23.at.11.30.02.mp4

After

Kapture.2026-07-22.at.15.15.05.mp4

To confirm no regressions when the global inheritance styles are off:

IS_GUTENBERG_PLUGIN=false npm run dev See #80555

Kapture.2026-07-23.at.11.26.23.mp4

[github-actions]

Size Change: +92 B (0%)

Total Size: 7.75 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-editor/index.min.js	428 kB	+64 B (+0.01%)
build/scripts/components/index.min.js	273 kB	+28 B (+0.01%)

_{compressed-size-action}

[github-actions]

Flaky tests detected in 17de833.
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/29893369811
📝 Reported issues:

• [Flaky Test] persisted CRDT document matches content after save and reload #78873 in /test/e2e/specs/editor/collaboration/collaboration-persistence.spec.ts

[noruzzamans]

Tested! The fix works. Two gradient presets had the same gradient value. Before, clicking one preset would wrongly save the other one's name. Now each preset saves its own correct name.

One thing I noticed: on initial load, the "Dup text" swatch shows as pre-selected (inherited), but the Code editor shows no gradient attribute yet, it only gets saved once you actually click the swatch.

Screen.Recording.2026-07-22.at.12.00.23.PM.mov

[ramonjd]

but the Code editor shows no gradient attribute yet, it only gets saved once you actually click the swatch.

Thank you for testing!

This is expected because it's the default for paragraphs in theme.json:

	"styles": {
		"blocks": {
			"core/paragraph": {
				"color": { "gradient": "var:preset|gradient|dup-text" }
			}
		}
	}

So the style is compiled in global styles, something like this:

:root :where(p) {
    background: var(--wp--preset--gradient--dup-text);
}

[ramonjd]

Once #80555 lands I'll rebase and test in both envs.

[ramonjd]

Smoke tested story

Kapture.2026-07-23.at.11.44.41.mp4

I think I'll need to update the code examples too.

[ramonjd]

So we need selectedSlug coz the value is only the CSS gradient string.

Two presets can intentionally (or not) share that string while having different preset slugs. That means a selection can't be represented by value alone.

[ramonjd]

Passing slug as the 3rd argument is required so consumers can persist the selected preset identity directly, instead of reverse-matching by gradient string and accidentally choosing the first duplicate.

This mirrors the existing ColorPalette API shape, so it keeps color and gradient picker behavior consistent.

See: https://github.com/WordPress/gutenberg/blob/fix/duplicate-gradient-preset-slug/packages/components/src/color-palette/types.ts#L30

[ramonjd]

This state is here to illustrate tracking the selectedSlug.

Slug selection takes precedence over value matching to avoid the bug we're trying to fix in this PR.

Happy to roll it back.

[andrewserong]

I think updating the example to make sure it captures the added behaviour makes sense to me 👍

[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: noruzzamans <noruzzaman@git.wordpress.org>

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

[andrewserong]

This is testing great for me, nice fix! An optional additional param for the slug seems like the right way to go, and this feels clean and consistent with what we did for the color presets.

LGTM 🚀

[andrewserong]

(Oh, and just added the backport label, +1 to getting this in for 7.1)

[ramonjd]

I appreciate the testing @andrewserong 🙇🏻

[github-actions]

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