Description

When there is a spacer block below a navigation block, it's z-index being higher causes a confusing user experience when trying to navigation between sub-menu items. cc @tellthemachines

This was discovered as part of the ninth call for testing for the FSE Outreach program:

0:43:12 :: Nope, it looks like the “spacer” block has a higher z-index and is preventing click events on those above elements.
0:44:11 :: Yep — bug: spacer element below sub-menu items messes with z-index?
Thinking through this more, it makes sense for why that’s happening — the spacer is farther down in the DOM so it will naturally have a higher context. From a UX perspective, this isn’t great though, because I can’t have a spacer below a hovering sub-menu.
0:48:25 :: I think that something about this spacer block is affecting keyboard navigation. Maybe? I can’t “move up or down” past certain elements using just the keyboard.

Step-by-step reproduction instructions

1. Head to the Site Editor.
2. Add a Navigation block.
3. Add a spacer block beneath it.
4. Begin adding various items to the Navigation block, including a few sub-menu items.
5. Using your keyboard, try to navigate between the sub-menu items and see that the spacer block gets selected at a certain point due to the z-index issue.

Screenshots, screen recording, code snippet

You can find a lengthier video here where you can see the issue from around 40 min to the 45 min marker:

Environment info

• WordPress 5.8.1, Gutenberg 11.2.1, TT1 Blocks
• Chrome
• Desktop

Pre-checks

• I have searched the existing issues.
• I have tested with all plugins deactivated except Gutenberg.