Set snackbar position to center

[gigitux]

Warning

This PR is dependent by #74384

What?

Alternative to #74388

This PR focuses only on snackbar positioning: keep snackbars anchored to the viewport and center them at the bottom.

Why?

Snackbars can be difficult to distinguish when they appear against the dark sidebar area. Keeping them bottom-centered improves visibility while preserving viewport anchoring.

How?

• Updated snackbar positioning styles to render at the bottom-middle of the viewport.
• Kept snackbars fixed to the viewport so placement is stable across layouts.
• Adjusted consumer class usage so each editor surface applies the centered snackbar position consistently.

Testing Instructions

1. Open Post Editor and trigger a snackbar notice.
2. Confirm snackbar is anchored to viewport and appears bottom-middle.
3. Open Site Editor and repeat:
   • Confirm snackbar is centered and does not overlap sidebar-heavy regions.
4. Open Widgets/Boot contexts and repeat:
   • Confirm bottom-middle placement remains consistent.
5. Confirm snackbar dismiss/auto-dismiss behavior is unchanged.

Desktop

Post Editor	Widget Editor	Site Editor	Experimental Site Editor
CleanShot.2026-02-06.at.14.41.40.mp4	CleanShot.2026-02-06.at.14.43.39.mp4	CleanShot.2026-02-06.at.14.45.15.mp4	CleanShot.2026-02-06.at.14.46.57.mp4

Mobile

Post Editor	Widget Editor	Site Editor	Experimental Site Editor
CleanShot.2026-02-06.at.14.41.58.mp4	CleanShot.2026-02-06.at.14.43.54.mp4	CleanShot.2026-02-06.at.14.45.31.mp4	CleanShot.2026-02-06.at.14.47.23.mp4

[t-hamano]

Thank you everyone for your explanation. If centering the snackbar itself is an improvement from a design perspective, then let's definitely move forward with this PR. The issue of poor visibility when the snackbar background is black can be addressed in a follow-up.

---

We will also need to adjust the position of the snackbar for the new media modal.

gutenberg/packages/media-utils/src/components/media-upload-modal/style.scss

Lines 24 to 30 in 1878af3

	.media-upload-modal__snackbar {
	position: absolute;
	left: 0;
	bottom: 16px;
	padding-left: 16px;
	padding-right: 16px;
	}

To make this snackbar appear:

• Enable the Data Views: new media modal" experiment setting
• Open a new post
• Insert an Image block and click the Media Library button
• Upload media

[t-hamano]

It seems like there are no elements with this class anywhere, so if that's the case, we can remove this selector entirely. Perhaps this class was removed as part of the work to unify the editor packages.

[gigitux]

This class is present in this file:

gutenberg/packages/edit-post/src/components/layout/index.js

Lines 624 to 625 in 7f3782d

	<SnackbarNotices className="edit-post-layout__snackbar" />
	</Editor>

[t-hamano]

The code should not be in the trunk branch.

https://github.com/WordPress/gutenberg/blob/trunk/packages/edit-post/src/components/layout/index.js

[t-hamano]

In trunk, the selector here seems to be .boot-layout .components-editor-notices__snackbar. It may be good to check whether this selector exists.

[gigitux]

I updated it

[t-hamano]

After removing unnecessary selectors, we may only need to apply this mixin in one or two places. If that's the case, we can just hard-code the styles where needed without removing the mixin.

I also want to avoid exposing public mixins as much as possible.

[gigitux]

I may be misunderstanding, but the position of the SnackbarNotices component isn’t technically hardcoded. The consumer is responsible for defining the CSS container that determines where the snackbar appears. The mixin was introduced to avoid duplicating the same styling logic across multiple files.

[t-hamano]

@gigitux Could you rebase this branch using the trunk branch? This branch seems outdated compared to the trunk.

[gigitux]

@gigitux Could you rebase this branch using the trunk branch? This branch seems outdated compared to the trunk.

Sorry for the confusion, this branch is built on top of #74384. For this reason, you don't see some code that I updated in this PR on trunk. I hope that it makes sense.

[t-hamano]

Sorry, I misunderstood. I thought this PR was targeted to the trunk branch.

Do you plan to ship both this PR and #75294 at the same time? Or do you want this PR to ship to 7.0 first? If you want to ship this PR first, we can change the target of this PR to trunk. What do you think?

[t-hamano]

If we want to merge this PR into #74384 instead of trunk, I think we can ship this PR after adjusting the position of the snackbar in the media modal.

However, personally, it seems like the purposes of this PR and #74384 are completely different. It might be better to ship the snackbar repositioning to trunk first. #74384 looks like a more extensive task

[gigitux]

#74384 has been merged. With 6f7acf6, I fixed the snackbar for the media gallery:

Desktop	Mobile
CleanShot.2026-02-18.at.14.15.53.mp4	CleanShot.2026-02-18.at.14.16.22.mp4

[t-hamano]

Thanks for the update!

I'd like to approve this improvement since the Gutenberg RC release is just around the corner, but for some reason, the snackbar text in the new modal is distorted:

67e60976643497dadee4218535392862.mp4

This snackbar is only available when the experimental modal is enabled, so it doesn't cause any issues in core, but we need to submit a follow-up PR to fix this issue.

[gigitux]

It makes sense! Thanks!

This snackbar is only available when the experimental modal is enabled, so it doesn't cause any issues in core, but we need to submit a follow-up PR to fix this issue.

@andrewserong is it something that you can take care of?