Editor: allow selecting which block styles to apply globally

[aaronrobertshaw]

What?

Alternative to: #79719

Adds a review step to the block inspector's Apply globally action. Instead of immediately pushing every changed style to Global Styles, the button now opens a modal listing each modified style with its current and new value, and only the styles you keep selected are applied.

Why?

Today the button is all-or-nothing: a single click writes every detected change into Global Styles for that block type, with no chance to see what will change or leave some of it behind. Surfacing the changes as a pre-selected checklist makes the action reviewable and lets you push just the styles you mean to.

How?

• Reworks useChangesToPush to return grouped rows rather than a flat list of paths, so border shorthand, its per-side values, and solid fallbacks collapse into a single "Border color" row that pushes together.
• Adds a useReviewRows hook that decorates each row with a readable label, the effective current Global Styles value for the block type, and formatted current/new values.
• Makes pushChanges accept a selected subset and clears preset attributes (textColor, backgroundColor, borderColor, etc.) conditionally, so a deselected preset style is neither pushed nor wiped from the block. Early-returns on an empty subset; the existing Undo snackbar is untouched.
• Adds a style-labels map (with a capitalCase fallback) and a format-style-value util that resolves preset tokens to readable slugs and collapses spacing/border/radius objects to CSS shorthand.
• Adds an ApplyGloballyModal (using DataViewsPicker) with a selection checkbox, style name, current value, a subdued arrow, and the new value. All rows selected by default; Apply is disabled with nothing selected; Cancel/close/Escape do nothing.

Note: The tricky bits — row grouping and the conditional preset clearing — are pulled out into pure getChangesToPush()/getStylesUpdate() helpers and unit tested directly.

Note: The "current" value shown is the merged/effective Global Styles value for the block type, i.e. what the block currently resolves to.

Testing Instructions

1. Add a Paragraph to a post and open Advanced in the block inspector.
2. Change a few styles on the block, e.g. uppercase text, a text colour, some padding, and a border colour.
3. Click Apply globally and confirm the modal lists one row per style with current → new values, all checked.
4. Deselect a row and click Apply. Confirm only the checked styles are pushed, the snackbar appears, and Undo restores the prior state. The deselected style stays as a local override.
5. Reopen the modal and confirm the still-unpushed style is the only row listed.
6. Deselect every row and confirm Apply is disabled.
7. Reopen and dismiss with Cancel/close/Escape, and confirm nothing changes on the block or in Global Styles.
8. Confirm the Apply globally button is disabled when there are no changes to push.

Screenshots or screencast

Screen.Recording.2026-07-02.at.7.04.34.pm.mp4

[github-actions]

Size Change: +2.63 kB (+0.03%)

Total Size: 7.72 MB

📦 View Changed

Filename	Size	Change
build/scripts/editor/index.min.js	499 kB	+2.32 kB (+0.47%)
build/styles/editor/style-rtl.css	31.1 kB	+80 B (+0.26%)
build/styles/editor/style-rtl.min.css	26.4 kB	+75 B (+0.28%)
build/styles/editor/style.css	31.1 kB	+80 B (+0.26%)
build/styles/editor/style.min.css	26.4 kB	+76 B (+0.29%)

_{compressed-size-action}

[aaronrobertshaw]

I've left this one in a draft state for the moment as it is more on the proof of concept stage for now until we confirm design direction etc.

@WordPress/gutenberg-design would you have a moment to share a few thoughts here?

[github-actions]

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

• [Flaky Test] should update the HTML only for the latest navigation #78835 in /test/e2e/specs/interactivity/router-navigate.spec.ts

[annezazu]

Just gave this a spin! I really like being able to see "current" to "new" and the way the granularity is presented. It makes me want to change our multi-entity saving flow. I think this works really well. I did run into a weird situation at the end though where I was getting blank pages when navigating to a template part:

failed.mov

I could replicate it after going in and out of the editor so not sure what's going on. There's a chance it's playground. Finally, I noticed that after pushing styles globally, the styling is reset aka it shows as empty options rather than as inherited styles:

globaly.chnges.mov

[aaronrobertshaw]

Thanks for the early testing @annezazu 🙇

I did run into a weird situation at the end though where I was getting blank pages when navigating to a template part:

I haven't come across this one yet using my local env so I'll have to do some digging.

Finally, I noticed that after pushing styles globally, the styling is reset aka it shows as empty options rather than as inherited

If I follow what you are saying correctly, this is because this PR is a standalone feature and completely separate to #77894 which is attempting to display inherited global styles within the block inspector.

So if the styles that were pushed to global styles are still being applied correctly on the canvas then it would appear this feature is working correctly.

[annezazu]

So if the styles that were pushed to global styles are still being applied correctly on the canvas then it would appear this feature is working correctly.

Ah ha! You are correct.

I haven't come across this one yet using my local env so I'll have to do some digging.

This might be some Playground weirdness as a heads up. Overall though, I like how this is coming together.

[jasmussen]

This is pretty cool, and works well. It uses DataViews yes? Arguably this is such an improveent over trunk, and a step in the right direction, that I don't know it needs too much design feedback. I will share some in a minute, but as-is, it solve a fundamental problem with the "Apply styles globally" being a very dangerous action, that I think it can land almost as-is.

The feedback to consider is minimal: I'm not sure what the chevron-right icon means. There could be a good reason, does it expand anything? But absent that, I'd remove it.

The larger picture is: while this decides which styles to propogate elsewhere, the interface is touching on one we need for to be generic across a few similar actions:

• Switching from one block theme to the next
• Copying styles, or patterns, or otherwise, from a block theme you have installed but isn't active
• Copying just the templates but nothing else from a block theme

... and anything else in that matrix. There's some older artwork for this by our friend Channing which puts it in the pre-publish sidebar, but with other changes it should today live in a modal. But there are instincts and concepts there still absorbing.

[aaronrobertshaw]

Thanks for weighing in @jasmussen, appreciate it 👍

The feedback to consider is minimal: I'm not sure what the chevron-right icon means. There could be a good reason, does it expand anything? But absent that, I'd remove it.

The chevron was meant as a placeholder for what was in the design mockup shared over on another PR. I did mean to clean it up but straight up removal might be the better option.

I think it can land almost as-is.

I'll get the chevron removed, polish up a couple of things and flag this for review with a view to merge. It would be nice to sneak into 7.1 if possible.

[annezazu]

Yay! Thank you for reviewing, Joen. I would love to see this land and agree this is a big improvement over what's there now, adding nice "good friction".

[t-hamano]

This feature is a great UX improvement built on top of existing APIs, and it does not expose any new APIs or affect backward compatibility. It might not make it in time for Beta 1, but how about we aim to ship it for Beta 2?

[aaronrobertshaw]

I've given this a quick rebase and dropped the chevron from the data views table in the modal.

I'm out of time today but I'll flag this for review proactively, then circle back to polish it further tomorrow.

[aaronrobertshaw]

Given the approvals and all feedback received being resolved. I'll get this one merged once the tests pass.

Additionally, I've added the Backport to WP 7.1 Beta/RC label given #79839 (comment) and #79839 (comment)

[github-actions]

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