-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
Description
The z-index
of the snackbar
component currently matches that of the modal screen overlay
:
gutenberg/packages/base-styles/_z-index.scss
Lines 113 to 117 in 064b879
// Show snackbars above everything (similar to popovers) | |
".components-snackbar-list": 100000, | |
// Show modal under the wp-admin menus and the popover | |
".components-modal__screen-overlay": 100000, |
As a result, the snackbar
is rendered behind the modal overlay
. Since snackbars
provide critical feedback for user actions, they should ideally appear above the modal overlay
to ensure their visibility.
For example, when inserting a Pattern
through the Explore all patterns
modal, selecting a pattern successfully adds it to the post content and triggers a snackbar
notification. However, because the snackbar
is hidden behind the modal overlay
, users cannot see the feedback. This behavior does not provide proper feedback to the user and forces them to close the modal to confirm the action manually.
This behavior is demonstrated more clearly in the attached video.
Step-by-step reproduction instructions
- Navigate to the
post edit
screen. - Open the
Block Inserter
. - Navigate to the
Patterns
tab and open theExplore all patterns
dialog. - Try selecting a
Pattern
from theDialog
. - Notice the
snackbar
got generated behind theDialog
.
Screenshots, screen recording, code snippet
issue.mov
Environment info
- WordPress Version: 6.8-alpha-59361
- Gutenberg Version: Trunk (5688333)
- OS: macOS Sequoia
Please confirm that you have searched existing issues in the repo.
- Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- Yes
Please confirm which theme type you used for testing.
- Block
- Classic
- Hybrid (e.g. classic with theme.json)
- Not sure