Snackbar: Fix scaling issue with snackbars that update their content via a common id#75709
Merged
andrewserong merged 4 commits intotrunkfrom Feb 19, 2026
Merged
Conversation
andrewserong
added
the
[Type] Bug
github-actions
bot
added
[Package] Components
|
Size Change: -142 B (0%) Total Size: 6.84 MB
ℹ️ View Unchanged
|
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
andrewserong
requested review from
aaronrobertshaw,
ciampo,
fcoveram,
gigitux,
ramonjd,
t-hamano,
talldan and
tellthemachines
|
Flaky tests detected in 4f7bd27. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22168534864
|
tellthemachines
approved these changes
Feb 19, 2026
Contributor
tellthemachines
left a comment
tellthemachines
left a comment
There was a problem hiding this comment.
Thanks for fixing this! LGTM
andrewserong
added
the
Backport to Gutenberg RC
t-hamano
approved these changes
Feb 19, 2026
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
I realized that this issue has actually been present for some time. Pushing a snackbar with the same ID causes vertical text transformation.
b6153d2ee7be15375a63c8f7bd112973.mp4
The snackbar's centered positioning seems to have made this issue more apparent.
This PR fixes both the vertical and horizontal issues, and I think it's the right approach 👍
| // `layout="position"` only ever detects vertical | ||
| // shifts, preventing horizontal animation when | ||
| // notice text changes in place. | ||
| style={ { width: '100%' } } |
Contributor
There was a problem hiding this comment.
Nit: I didn't see any visible change when I removed this width, but is this necessary?
Contributor
Author
There was a problem hiding this comment.
In my testing, it was a bit unreliable without this inline style present. I'll leave it in for now, but we can remove in a follow-up if it turns out it's not necessary.
ciampo
reviewed
Feb 19, 2026
Contributor
ciampo
left a comment
ciampo
left a comment
There was a problem hiding this comment.
Setting layout to "position" seems like the right fix, although I wonder if we can do without the rest of changes (ie no 100% width and no changes to the SASS mixin)
| return ( | ||
| <motion.div | ||
| layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations | ||
| layout={ isReducedMotion ? false : 'position' } // See https://www.framer.com/docs/animation/#layout-animations |
Contributor
There was a problem hiding this comment.
Let's also add a quick explanation of why we're using position (ie. it causes framer motion to only animate position-related values, ignoring size-related aspects)
Contributor
Author
There was a problem hiding this comment.
The explanation is in the comment directly beneath this line, or do you think it needs further clarification?
Contributor
Author
No, it took a little while to land on the changes here, but the reason we need the I'm sure we can continue to improve how this works, but the additional rules are to ensure that when content changes within the snackbar, it "snaps" to the new size of the snackbar instead of either scaling (what's happening on trunk) or shifting left and right. Thanks so much for the speedy reviews, everyone! I'll land this now, but happy to help out with follow-ups (and expand on the comments) if it's not quite right, we encounter issues, or if things need further clarification. |
andrewserong
added
the
Backport to WP 7.0 Beta/RC
github-actions
bot
removed
the
Backport to WP 7.0 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Feb 20, 2026
…via a common id (#75709) * Snackbar: Fix scaling issue with snackbars that update their content via a common id * Move margin rule to mixin for centering * Add comment explaining the inline style * Update changelog Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
github-actions
bot
added
the
Backported to WP Core
|
I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: a48139a |
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Feb 20, 2026
CI run: #10988. See #64595. --- I've included a log of the Gutenberg changes with the following command: ``` git log --reverse --format="- %s" b441348bb7e05af351c250b74283f253acaf9138..23b566c72e9c4a36219ef5d6e62890f05551f6cb | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy ``` - Remove experimental property from Icon block (WordPress/gutenberg#75742) - Real-time collab editing: Fix undo E2E test (WordPress/gutenberg#75740) - Snackbar: Fix scaling issue with snackbars that update their content via a common id (WordPress/gutenberg#75709) - Vips and worker-threads packages: remove private flag so that packages can be published to npm (WordPress/gutenberg#75752) - Update wordpress/vips in root package.json to use a relative path (WordPress/gutenberg#75758) - Fix change-detection and new-post E2E tests after RTC enabled by default (WordPress/gutenberg#75751) - Query: Remove content role from block (WordPress/gutenberg#75760) - `ToggleGroupControl`: Make unselected item color consistent across all variants (WordPress/gutenberg#75737) - Icon-block: fix global-styles selectors (WordPress/gutenberg#75724) - RTC: Add cap check for single taxonomy term entities (WordPress/gutenberg#75708) - Core Data: Create icons entity (WordPress/gutenberg#75773) git-svn-id: https://develop.svn.wordpress.org/trunk@61705 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Feb 20, 2026
CI run: WordPress/wordpress-develop#10988. See #64595. --- I've included a log of the Gutenberg changes with the following command: ``` git log --reverse --format="- %s" b441348bb7e05af351c250b74283f253acaf9138..23b566c72e9c4a36219ef5d6e62890f05551f6cb | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy ``` - Remove experimental property from Icon block (WordPress/gutenberg#75742) - Real-time collab editing: Fix undo E2E test (WordPress/gutenberg#75740) - Snackbar: Fix scaling issue with snackbars that update their content via a common id (WordPress/gutenberg#75709) - Vips and worker-threads packages: remove private flag so that packages can be published to npm (WordPress/gutenberg#75752) - Update wordpress/vips in root package.json to use a relative path (WordPress/gutenberg#75758) - Fix change-detection and new-post E2E tests after RTC enabled by default (WordPress/gutenberg#75751) - Query: Remove content role from block (WordPress/gutenberg#75760) - `ToggleGroupControl`: Make unselected item color consistent across all variants (WordPress/gutenberg#75737) - Icon-block: fix global-styles selectors (WordPress/gutenberg#75724) - RTC: Add cap check for single taxonomy term entities (WordPress/gutenberg#75708) - Core Data: Create icons entity (WordPress/gutenberg#75773) Built from https://develop.svn.wordpress.org/trunk@61705 git-svn-id: http://core.svn.wordpress.org/trunk@61013 1a063a9b-81f0-0310-95a4-ce76da25c4cd
ockham
pushed a commit
that referenced
this pull request
Feb 23, 2026
…via a common id (#75709) * Snackbar: Fix scaling issue with snackbars that update their content via a common id * Move margin rule to mixin for centering * Add comment explaining the inline style * Update changelog Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
Contributor
|
I just cherry-picked this PR to the release/22.6 branch to get it included in the next release: e71d441 |
ockham
removed
the
Backport to Gutenberg RC
scruffian
pushed a commit
that referenced
this pull request
Feb 23, 2026
…via a common id (#75709) * Snackbar: Fix scaling issue with snackbars that update their content via a common id * Move margin rule to mixin for centering * Add comment explaining the inline style * Update changelog Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Fixes a snackbar scaling issue introduced in #75294, which updated the snackbar positioning to be centered.
Note: I'm not 100% across how the snackbar is meant to work, so this PR might not necessarily be the right approach.
Why?
For snackbars that use an id and then update their content, #75294 resulted in a scaling issue caused by Framer Motion. As far as I can tell, setting the transforms conflicted with how Motion calculates the size / bounding box and resulted in an animation being applied where previously there was none.
How?
The goal in this change is to try to ensure that the snackbar gets animated vertically but not horizontally and not to apply scaling. This is suggested in the Motions docs here: https://motion.dev/docs/react-layout-animations#the-content-stretches-undesirably
position100%width so that Motion only detects vertical changes (as it'll always consider the snackbar full width)autoso that it's centeredThe result should hopefully be much the same as in #75294, but without applying scaling for snackbars that update their content via a common id. Examples are the snackbars used in the media modal experiment and in the template activation experiment.
Testing Instructions
Re-testing #75294
Steps copied from that PR:
Testing this change fixes the media modal
Also, in the above cases, test the snackbar notices on mobile to make sure they still look okay (full width, with a little padding around the edges horizontally)
Alternate testing
If you'd like to test this simply using the browser dev console, that's possible, too. You can try this script in your browser console with the post editor open:
Script to try out snackbars that update their content
And for regression testing, here's a similar script that was shared on the original PR:
Script to try out snackbars that fire sequentially
Screenshots or screencast
These screengrabs are from running the artificial script above.
Before
2026-02-19.13.55.22.mp4
After
2026-02-19.13.40.47.mp4