search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.34k stars 4.13k forks source link

Keep navigation block overlay open when focus in developer tools #60459

Closed gaambo closed 5 months ago

gaambo commented 5 months ago

Description

When wanting to style the responsive navigation overlay on the frontend, it's very hard to use developer tools (e.g. to see the HTML structure, see applied classes, apply styles in devtools for quick tests, ...), because as soon as the navigation loses its focus, the navigation is hidden again. That makes styling the nav block very hard, or at least it doesn't make quick prototyping/debugging easy.

It's probably because of data-wp-on--focusout="actions.handleMenuFocusout" interactivity API attribute of the wp-block-navigation__responsive-container. And I'm not quite sure how a solution for this, that keeps the menu accessible, should look. I know a lot of alpinejs examples use click.away click.outside - but focus is probably more accessible than just click handling.

Developer tools are just an example that set focus to another thing. There may be other things like screenreader utilities etc?

Step-by-step reproduction instructions

  1. Open a site with a block theme and navigation block used in header
  2. Navigation block must have set "overlay menu" to mobile
  3. Open the developer tools of the browser and switch to device preview mode for mobile devices
  4. Open the navigation menu
  5. Right click on any item inside the navigation block and click "inspect" to see the element in dev tools inspector
  6. The menu is closed again

You can use WordPress Playground and the default theme and header there to test this.

Screenshots, screen recording, code snippet

nav-block-issue-focus

Environment info

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

Mamaduka commented 5 months ago

This is probably a duplicate of #57603.

gaambo commented 5 months ago

Argh, really tried to search for an existing issue and looked through the navigation block and interactivity api issues, but I didn't find it. Sorry.

Mamaduka commented 5 months ago

No worries. The issue seemed familiar because I replied to a few similar ones :)