Fix error notice appearing underneath the modal screen overlay on the Navigation editor screen

[javierarce]

If you create a menu using the name of an already existing one, an error notice appears under the modal screen overlay, making it difficult to see and impossible to close independently.

The error notice also appears partially covered by the left sidebar.

Step-by-step reproduction instructions

1. Create a menu with the name you want
2. Create another one with the same name

Screenshots or screen recording (optional)

WordPress information

• WordPress version: 5.7.1
• Gutenberg version: 10.5.0-rc.1
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Browser: Chrome, Firefox & Safari

[javierarce]

A good fix for this issue could be to integrate the error message inside the "Create a new menu" modal screen.

[javierarce]

Also important to fix: in the mobile version is impossible to see the error message, because it's behind the modal.

[JustinyAhin]

Something we can start doing about this could be to move the notice div above the modal screen by increasing its z-index

[JustinyAhin]

Something we can start doing about this could be to move the notice div above the modal screen by increasing its z-index

Not really sure about this any more. This will likely close the form to add menu on click on the notice.

@aristath , when you're back, I'll be happy to tackle this with your help

[Mamaduka]

@javierarce, do you have mockups for the error inside the modal? Or should I use existing error notice styles?

[javierarce]

I'm trying to see how we have solved this problem in other places, but I haven't found anything.

My initial idea was to use the existing error notice and show it above the modal (which would also fix the problem we have in Desktop mode)… would that be possible?

[Mamaduka]

The only component I can remember is the MediaPlaceholder that displays errors locally.

My initial idea was to use the existing error notice and show it above the modal.

It can be problematic because of the stacking context. Currently, even Snackbar is covered by modals overlay.

[javierarce]

It can be problematic because of the stacking context. Currently, even Snackbar is covered by modals overlay.

Ok, the solution you mentioned works for me. We could have something like this:

Figma file