Refine snackbar positioning based on the screen#74388
Closed
gigitux wants to merge 8 commits intoadd/migrate-snackbar-notice-packagefrom
Closed
Refine snackbar positioning based on the screen#74388gigitux wants to merge 8 commits intoadd/migrate-snackbar-notice-packagefrom
gigitux wants to merge 8 commits intoadd/migrate-snackbar-notice-packagefrom
Conversation
|
Size Change: -1.58 kB (-0.05%) Total Size: 3.05 MB
ℹ️ View Unchanged
|
…Press/gutenberg into improve/snackbar-position
gigitux
changed the title
|
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. |
gigitux
changed the title
gigitux
changed the title
gigitux
force-pushed
the
improve/snackbar-position
branch
from
9e8887b to
59efcd8
Compare
gigitux
force-pushed
the
improve/snackbar-position
branch
from
59efcd8 to
523bfc6
Compare
github-actions
bot
added
[Package] Element
github-actions
bot
removed
[Package] Lazy import
Contributor
Author
|
@jameskoster can I get your approval to move forward with this design solution? |
…Press/gutenberg into improve/snackbar-position
github-actions
bot
removed
[Package] Date
Contributor
|
I'm struggling to endorse this change to be honest, it feels wrong to me. Snackbars are layout-independent elements (similar to modals) for providing non-disruptive feedback about the result of user actions. From that perspective I feel they should be consistently positioned and anchored to the viewport rather than moving around as they do in this PR. I'd welcome thoughts from @WordPress/gutenberg-design and @WordPress/gutenberg-components though. |
Contributor
Author
|
cc @verofasulo |
Member
|
FWIW we worked on something similar in the past, and then it was decided to keep them in the same position. |
Contributor
Author
|
Thanks for the context! I'm going to close the PR! 🙇 |
Contributor
|
@gigitux I don't necessarily think we need to close the PR. It solves an issue where snackbars can be tricky to distinguish from the dark sidebar. Another possible option is keeping them anchored to the viewport but positioned so they do not overlap the sidebar. Bottom-middle might be worth a try? |
Contributor
Author
|
@jameskoster @verofasulo Thanks for your suggestion! I created another PR: #75294 |
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
3 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?
Improves snackbar positioning in the Site Editor and Boot package by dynamically rendering snackbars in different containers based on the current view context. When the canvas is visible (full-screen edit mode), snackbars are positioned fixed relative to the viewport. When in view mode with layout areas, snackbars are positioned absolutely within their respective area containers.
Why?
Previously, snackbars were always positioned fixed relative to the viewport, which could cause them to appear disconnected from the content they relate to, especially when viewing layout areas in the Site Editor. This PR ensures snackbars appear contextually within the relevant layout area, making it clearer which action they relate to and improving the overall visual hierarchy.
How?
The solution uses React's
createPortalAPI to dynamically render snackbars in different DOM containers based on the current view state:position: fixedand rendered in the main layout container (layoutReforcontentRef)position: absoluteand rendered within their respective area containers (edit-site-layout__area,boot-layout__surfaces, etc.)The target container is determined using
useLayoutEffectwhich runs synchronously after DOM mutations, ensuring the correct container is selected before rendering.Testing Instructions
/wp-admin/site-editor.php)Testing Instructions for Keyboard
Screenshots or screencast
CleanShot.2026-01-06.at.15.11.41.mp4