Skip to content

Show Responsive viewport/state indicator in save confirmation dialog - #81027

Open
shail-mehta wants to merge 6 commits into
trunkfrom
add/save-confirm-viewport-indicator
Open

Show Responsive viewport/state indicator in save confirmation dialog#81027
shail-mehta wants to merge 6 commits into
trunkfrom
add/save-confirm-viewport-indicator

Conversation

@shail-mehta

@shail-mehta shail-mehta commented Jul 31, 2026

Copy link
Copy Markdown
Member

What?

Closes #80836

This PR updates the save confirmation modal to indicate which responsive state (e.g. Mobile, Tablet) a style change was made in, when the change comes from a responsive style variation set via Editor > Styles > Blocks > Title.

Why?

When a user edits block styles for a specific viewport (e.g. Mobile only), the save confirmation screen only shows the block style was changed - not which viewport it applies to. This ambiguity can lead users to think the change is global, risking unintended publishes. Making the viewport explicit improves clarity and confidence before saving.

How?

Surface the active viewport/state (Mobile/Tablet/Default) tied to a style edit in the change-tracking data used by the save panel, and append a viewport indicator to affected entries.

Testing Instructions

  • Go to Editor > Styles > Blocks > Title
  • Select the State from the drop-down
  • Make a color or Font change
  • Hit the save button to read the confirmation screen

Screenshots

Single Block Style Update Multiple Block Style Update
afte-patch after-patch

Use of AI Tools

  • Yes

@shail-mehta shail-mehta self-assigned this Jul 31, 2026
@shail-mehta shail-mehta added [Type] Enhancement A suggestion for improvement. [Feature] Saving Related to saving functionality [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Jul 31, 2026
@github-actions github-actions Bot added the [Package] Core data /packages/core-data label Jul 31, 2026
@github-actions

github-actions Bot commented Jul 31, 2026

Copy link
Copy Markdown

Size Change: +1.62 kB (+0.02%)

Total Size: 7.78 MB

📦 View Changed
Filename Size Change
build/scripts/core-data/index.min.js 37.1 kB +590 B (+1.61%)
build/scripts/editor/index.min.js 502 kB +619 B (+0.12%)
build/styles/core-data/style-rtl.css 885 B +107 B (+13.75%) ⚠️
build/styles/core-data/style-rtl.min.css 465 B +97 B (+26.36%) 🚨
build/styles/core-data/style.css 884 B +107 B (+13.77%) ⚠️
build/styles/core-data/style.min.css 464 B +97 B (+26.43%) 🚨

compressed-size-action

@shail-mehta shail-mehta changed the title WIP: Show Responsive viewport/state indicator in save confirmation dialog Show Responsive viewport/state indicator in save confirmation dialog Jul 31, 2026
@shail-mehta
shail-mehta marked this pull request as ready for review July 31, 2026 17:05
@shail-mehta
shail-mehta requested a review from nerrad as a code owner July 31, 2026 17:05
@github-actions

Copy link
Copy Markdown

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: shail-mehta <shailu25@git.wordpress.org>
Co-authored-by: bph <bph@git.wordpress.org>

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

@bph bph added the Needs Design Needs design efforts. label Aug 1, 2026
@github-actions

github-actions Bot commented Aug 1, 2026

Copy link
Copy Markdown

Flaky tests detected in 9a3002d.
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/30708342985
📝 Reported issues:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Feature] Saving Related to saving functionality Needs Design Needs design efforts. [Package] Core data /packages/core-data [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Save confirm screen with viewport indicator

2 participants