SnackbarList: Render inside the overlay legacy slot#77760
Draft
ciampo wants to merge 1 commit intomigrate/ariakit-overlays-to-overlay-legacy-slotfrom
Draft
SnackbarList: Render inside the overlay legacy slot#77760ciampo wants to merge 1 commit intomigrate/ariakit-overlays-to-overlay-legacy-slotfrom
ciampo wants to merge 1 commit intomigrate/ariakit-overlays-to-overlay-legacy-slotfrom
Conversation
Wrap Gutenberg shells' \`<SnackbarNotices>\` calls (\`edit-post\`, \`edit-site\`, \`edit-widgets\`, \`boot\` root and single-page) in \`createPortal(..., getOverlayLegacySlot())\` so the snackbar list lives inside \`.wp-overlay-legacy\`. Bake the previously-mixin-only positioning (\`position: fixed; bottom; padding-inline; pointer-events: none;\`) into \`.components-snackbar-list\` directly so the list self-positions whether portaled or rendered inline. The \`snackbar-container()\` SCSS mixin in \`@wordpress/base-styles/mixins\` is removed, and the shell wrapper-class rules that did nothing but include it are removed too. \`media-editor\` and \`media-utils\` (which also called the mixin) have their wrapper rules trimmed but keep their elevated z-indexes for the in-modal case. The \`.components-snackbar-list\` z-index (100,000) is unchanged and now stacks relative to the legacy slot.
github-actions
Bot
added
[Package] Components
This was referenced Apr 28, 2026
|
Size Change: -921 B (-0.01%) Total Size: 7.82 MB 📦 View Changed
ℹ️ View Unchanged
|
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
1 participant
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?
Stacked on top of #77758.
Move Gutenberg's
<SnackbarNotices>calls into the overlay legacy slot viacreatePortal(..., getOverlayLegacySlot()), and consolidate the snackbar list's positioning styles onto.components-snackbar-listitself.The previously shared
snackbar-container()SCSS mixin in@wordpress/base-styles/mixinsis removed; its rules are now baked into.components-snackbar-list. Shells' wrapper-class declarations that did nothing but include the mixin are deleted.Why?
Continuation of the legacy-slot migration. With
<SnackbarNotices>portaled into the slot, snackbars share a stacking context with the rest of the legacy overlays. The list'sz-index(100,000) is unchanged and now stacks relative to the slot.Baking the positioning into
.components-snackbar-listmeans the list self-positions whether portaled or rendered inline — useful for in-modal cases (media-editor,media-utils) that don't portal.How?
packages/components/src/snackbar/style.scss:.components-snackbar-listnow has the full self-positioning rule (position: fixed; bottom: 24px; left: 0; right: 0; padding-inline; display: flex; flex-direction: column; pointer-events: none;plus the existingz-indexand the.components-snackbar { margin-inline: auto; }rule).packages/base-styles/_mixins.scss: remove thesnackbar-container()mixin.packages/edit-post/src/components/layout/{index.js,style.scss},packages/edit-site/src/components/layout/{index.js,style.scss},packages/edit-widgets/src/components/notices/index.js,packages/boot/src/components/root/{index.tsx,single-page.tsx},packages/boot/src/style.scss: remove@include snackbar-container()(and the empty wrapper-class rules); wrap each<SnackbarNotices>increatePortal(..., getOverlayLegacySlot()).packages/edit-widgets/src/components/notices/style.scss: deleted (only contained the empty wrapper rule).packages/media-editor/src/components/media-editor-modal/style.scss,packages/media-utils/src/components/media-upload-modal/style.scss: drop@include snackbar-container()(positioning is now baked in) but keep elevated z-index / transform overrides for the in-modal case. These call sites are intentionally not migrated to the slot — their snackbars render in the modal context with elevated z-index.packages/components/CHANGELOG.md: Internal entry plus a Breaking Changes entry for the mixin removal.Testing Instructions
Open the post editor. Trigger a snackbar (e.g. publish a post, or use any flow that creates a snackbar notice). The snackbar list should be inside
<div class="wp-overlay-legacy">.Repeat in the site editor and the widgets screen.
In media-editor / media-upload modal flows: trigger a snackbar inside the modal. The snackbar should render inside the modal's content area (not portaled away) and appear above the modal overlay.
Snackbar animations: verify enter / exit / layout-shift animations are unchanged (framer-motion).
Run unit tests:
Testing Instructions for Keyboard
Tab into a focusable snackbar action (e.g. an undo button when triggering an undoable action). Verify it is reachable, can be activated with
Enter, and that the snackbar dismisses.Use of AI Tools
This PR was authored with assistance from AI tooling (Claude). All code, copy, and structural decisions were reviewed by a human contributor.