Skip to content

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

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

shail-mehta wants to merge 20 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
@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:

@aduth

aduth commented Aug 26, 2026

Copy link
Copy Markdown
Member

Hey 👋 I wanted to give you a heads-up since this pull request adds new files containing JSX.

#80123 enables an ESLint rule that requires that files containing JSX must use the .tsx file extension. This is in line with coding guidelines expecting new code to be written as TypeScript.

What you'll need to do: You'll need to rename any new files containing JSX to use the .tsx file extension. This may also require you to address type errors that were not previously caught due to the use of the .js file extension.

This comment is automated, based on pull requests with recent activity that contain affected .js or .jsx files. But if you have any questions or if I can help with the migration in any way, please let me know and I'll do my best to help!

@coderabbitai

coderabbitai Bot commented Sep 6, 2026 •

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. To trigger a review, include @coderabbitai review in the PR description. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 32f0d1dc-742b-44fc-9b81-a1e915b93dc5

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Sep 6, 2026 •

Copy link
Copy Markdown

🤖 PR meta 🤖

🎉 Props

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @shailu25@git.wordpress.org.

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: shailu25@git.wordpress.org.

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

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: +6.23 kB (+0.08%)

Total Size: 8.3 MB

📦 View Changed
Filename Size Change
build/scripts/core-data/index.min.js 84.2 kB +5.21 kB (+6.6%) 🔍
build/scripts/edit-post/index.min.js 53 kB +1 B (0%)
build/scripts/editor/index.min.js 623 kB +609 B (+0.1%)
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%) 🚨

894a68a Run

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric 9cef0c6 trunk % Change
timeToFirstByte 56.65 ms +11.65% -1.77% 56.45 ms +5.85% -2.83% 0.35%
largestContentfulPaint 94 ms +10.64% -6.38% 92 ms +10.87% -4.35% 2.17%
lcpMinusTtfb 34.95 ms +22.6% -7.3% 34.2 ms +24.27% -3.07% 2.19%
wpBeforeTemplate 28.28 ms +17.4% -1.7% 27.92 ms +6.16% -1.79% 1.29%
wpTemplate 24.69 ms +2.19% -2.63% 23.99 ms +4.96% -1.83% 2.92%
wpTotal 53.17 ms +10.76% -2.03% 52.8 ms +6% -2.88% 0.7%
wpMemoryUsage 7.66 MB +0% -0% 7.63 MB +0% -0% 0.45%
wpDbQueries 17 +0% -0% 17 +0% -0% 0%

front-end-classic-theme

Metric 9cef0c6 trunk % Change
timeToFirstByte 41.95 ms +11.92% -1.19% 48.05 ms +6.66% -2.91% -12.7%
largestContentfulPaint 92 ms +4.35% -4.35% 104 ms +1.92% -1.92% -11.54%
lcpMinusTtfb 47.95 ms +4.38% -2.29% 54.35 ms +3.5% -1.66% -11.78%
wpBeforeTemplate 25.71 ms +14.16% -1.79% 26.21 ms +8.66% -1.83% -1.91%
wpTemplate 13.58 ms +7.58% -1.4% 18.24 ms +7.18% -2.69% -25.55%
wpTotal 39.37 ms +11.4% -1.8% 44.76 ms +6.93% -2.73% -12.04%
wpMemoryUsage 6.15 MB +0% -0% 6.24 MB +0% -0% -1.56%
wpDbQueries 10 +0% -0% 14 +0% -0% -28.57%

media-processing

Metric 9cef0c6 trunk % Change
mediaProcessingJpeg 405.41 ms +0.34% -0.21% 405.47 ms +0.95% -3.3% -0.01%
mediaProcessingAvif 6053.53 ms +0.24% -0.22% 6045.58 ms +0.31% -0.08% 0.13%
mediaProcessingJpegToAvif 4193.06 ms +0.11% -0.03% 4176.09 ms +0.05% -0.11% 0.41%

media-upload

Metric 9cef0c6 trunk % Change
jpegUploadProcessing 1418.76 ms +2.4% -0.75% 1428.68 ms +0.73% -0.86% -0.69%
pngUploadProcessing 185.08 ms +18.96% -7.86% 191.86 ms +17.27% -10.26% -3.53%
largeJpegUploadProcessing 1410.71 ms +0.65% -0.76% 1418.66 ms +1.13% -0.71% -0.56%
multipleImageUploadProcessing 1551.54 ms +1.99% -2.01% 1557.98 ms +1.86% -0.67% -0.41%

post-editor

Metric 9cef0c6 trunk % Change
serverResponse 491.48 ms +4.39% -1.99% 505.52 ms +2.34% -2.31% -2.78%
firstPaint 269.93 ms +14.89% -16.85% 241.85 ms +40.26% -16.03% 11.61%
domContentLoaded 1095.65 ms +1.63% -1.44% 1100.35 ms +1.92% -2.51% -0.43%
loaded 1096.95 ms +1.64% -1.46% 1101.63 ms +1.93% -2.49% -0.42%
firstContentfulPaint 448.49 ms +4% -4.58% 463.31 ms +1.71% -1.83% -3.2%
firstBlock 3325.26 ms +0.55% -1.16% 3332.57 ms +0.81% -0.66% -0.22%
type 18.45 ms +4.07% -9.27% 16.9 ms +8.4% -4.2% 9.17%
typeWithoutInspector 17.64 ms +4.48% -5.61% 17.74 ms +2.93% -3.61% -0.56%
typeWithTopToolbar 23.8 ms +1.64% -5.63% 22.24 ms +8.5% -4.81% 7.01%
typeContainer 8.96 ms +6.7% -8.04% 8.61 ms +13.24% -4.65% 4.07%
focus 111.02 ms +11.19% -10.38% 112.49 ms +4.86% -2.74% -1.31%
firstFocus 215.72 ms +0% -0% 231.64 ms +0% -0% -6.87%
selectAll 571.01 ms +2.75% -3.13% 558.7 ms +2.74% -1.72% 2.2%
listViewOpen 76.67 ms +14.95% -5.09% 76.8 ms +6.25% -3.22% -0.17%
inserterOpen 38.27 ms +8.75% -7.87% 36.31 ms +6.66% -3.47% 5.4%
inserterHover 11.26 ms +10.83% -4.44% 12.16 ms +6% -14.39% -7.4%
inserterSearch 8.72 ms +7.11% -11.12% 8.46 ms +7.33% -7.57% 3.07%
loadPatterns 624.03 ms +5.98% -9.13% 592.39 ms +4.72% -0.46% 5.34%
wpTotal 480.94 ms +4.5% -1.91% 495.37 ms +2.44% -2.35% -2.91%
wpMemoryUsage 13.22 MB +0% -0% 13.18 MB +0% -0% 0.25%
wpDbQueries 54 +0% -1.85% 54 +0% -1.85% 0%

site-editor

Metric 9cef0c6 trunk % Change
serverResponse 489.48 ms +5.98% -4.45% 490.44 ms +10.21% -2.84% -0.2%
firstPaint 311.07 ms +10.53% -14.04% 271.13 ms +9.27% -11.3% 14.73%
domContentLoaded 1192.03 ms +2.03% -1.11% 1191.83 ms +3.84% -0.68% 0.02%
loaded 1193.26 ms +2.04% -1.11% 1193.11 ms +3.83% -0.63% 0.01%
firstContentfulPaint 484.27 ms +4.46% -4.67% 472.51 ms +7.21% -0.52% 2.49%
firstBlock 4413.11 ms +1.14% -0.76% 4430.35 ms +5.66% -0.33% -0.39%
type 18.55 ms +8.36% -4.96% 19.94 ms +3.76% -2.96% -6.97%
navigate 121.81 ms +6.17% -2.82% 119.08 ms +4.85% -4.13% 2.29%
loadPatterns 1315.51 ms +5.43% -1.9% 1379.59 ms +6.54% -6.79% -4.64%
loadPages 1053.25 ms +5.58% -4.3% 1003.11 ms +6.56% -0.82% 5%
wpTotal 479.31 ms +6.04% -4.49% 480.43 ms +10.41% -2.75% -0.23%
wpMemoryUsage 12.26 MB +0% -0% 12.22 MB +0% -0% 0.3%
wpDbQueries 43 +2.33% -0% 43 +2.33% -0% 0%

894a68a Run

🏁 Flaky tests

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.

applies the filtered form to the Quick Edit DataForm (Site Editor v2) in /test/e2e/specs/site-editor/view-config-extensibility.spec.js, passed after 1 failed attempt.
Error: apiRequestContext.fetch: socket hang up
Call log:
  - → PUT http://localhost:8889/wp-json/wp/v2/users/me
    - user-agent: Playwright/1.63.0 (x64; ubuntu 24.04) node/24.20 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - X-WP-Nonce: 5e7bf9a795
    - content-type: application/json
    - content-length: 37
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1791528184%7C67wDxx1OwKfEwqVaUjcRUt872SbKLtHjm5PdvUayFYj%7C0c7d3fda520e15a0463d246811b7e4a2d22297e4c74e5764b95996b520df98b5; wp-settings-time-1=1791356050

    at RequestUtils.rest (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/rest.ts:112:39)
    at RequestUtils.resetPreferences (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/preferences.ts:9:13)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/view-config-extensibility.spec.js:59:17
should update the URL from the last navigation if only varies in the URL fragment in /test/e2e/specs/interactivity/router-navigate.spec.ts, passed after 1 failed attempt.
Error: expect(locator).toHaveText(expected) failed

Locator:  getByTestId('title')
Expected: "Link 1"
Received: "Main"
Timeout:  5000ms

Call log:
  - Expect "toHaveText" getByTestId('title') with timeout 5000ms
  - waiting for getByTestId('title')
    14 × locator resolved to <h2 data-testid="title">Main</h2>
       - unexpected value "Main"

    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/router-navigate.spec.ts:160:25

894a68a Run

This branch has not been deployed

No deployments
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

3 participants