Navigation Block: improve page jump experience in responsive modal

[cometgrrl]

Description

When using a navigation block with a page jump, the page jumps aren't working on mobile.

Step-by-step reproduction instructions

1. Create a navigation block menu
2. Add a page jump to the menu
3. Open the site on a mobile device
4. Open the menu, tap on the page jump item in the menu

On the example site, this menu item is #after-image.

Expected: tapping the menu item for the page jump goes to the anchor
Actual: nothing happens

Screenshots, screen recording, code snippet

RPReplay_Final1639532064.mov

Environment info

https://dwtest-jetpackwf.mystagingwebsite.com/testing-navi-block/

Gutenberg plugin version: 12.1.0

Mobile: iOS 15.2, iPhone 12 Pro, Chrome 96.0.4664.94

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

[annezazu]

I can replicate this with 5.9 Beta 3. Thanks so much for your report!

[jasmussen]

Thanks for reporting the issue! As I understand, when you're linking to an HTML anchor (for example a link to #after-image), you'd like the menu to close and navigate you to the particular item? Here's a GIF showing 3 types of links to an anchor:

I don't know that this one is a trivial one to solve, there are a few things going on:

• Scrolling of the content below the modal is intentionally locked in place, so that the modal itself can scroll without scrolling the content underneath. This is what's preventing the jump from happening.
• Closing the modal on click is likely going to affect the accessibility of the modal behavior, given that it's a dialog meant to close on Escape or when clicking the close button.

For single page applications, I would love to see the ability to have the modal menu jump to various page sections in an elegant way. I imagine it's non trivial to implement, though.

There's also an argument to be made that it's not a bug either: longer term, the contents of the modal will be editable, with the possibility to add subheadings with anchors directly inside the modal. In that context, you would be able to create anchor links that scrolled the contents of the modal, which would make sense for a modal FAQ for example.

[cometgrrl]

I can see your point about having anchors within the modal. However, it seems broken to have a menu item that appears to do nothing.

[Mamaduka]

I'm removing this issue from WP 5.9 project board since we're already in the RC phase.

Let's try to fix this for the next release.

[Mamaduka]

It was fixed via #39625.