You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// 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 the Explore all patterns dialog.
Try selecting a Pattern from the Dialog.
Notice the snackbar got generated behind the Dialog.
Description
The
z-indexof thesnackbarcomponent currently matches that of themodal screen overlay:gutenberg/packages/base-styles/_z-index.scss
Lines 113 to 117 in 064b879
As a result, the
snackbaris rendered behind themodal overlay. Sincesnackbarsprovide critical feedback for user actions, they should ideally appear above themodal overlayto ensure their visibility.For example, when inserting a
Patternthrough theExplore all patternsmodal, selecting a pattern successfully adds it to the post content and triggers asnackbarnotification. However, because thesnackbaris hidden behind themodal 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
post editscreen.Block Inserter.Patternstab and open theExplore all patternsdialog.Patternfrom theDialog.snackbargot generated behind theDialog.Screenshots, screen recording, code snippet
issue.mov
Environment info
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.