Skip to content

Snackbar: Display Snackbar on top of Modal Screen Overlay #68728

@yogeshbhutkar

Description

@yogeshbhutkar

Description

The z-index of the snackbar component currently matches that of the modal screen overlay:

// 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

  1. Navigate to the post edit screen.
  2. Open the Block Inserter.
  3. Navigate to the Patterns tab and open the Explore all patterns dialog.
  4. Try selecting a Pattern from the Dialog.
  5. Notice the snackbar got generated behind the Dialog.

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

Metadata

Metadata

Assignees

Labels

[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] RegressionRelated to a regression in the latest release

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions