Navigation Block Mobile Menu in FSE won't work until after all site content has loaded.

[KirkwallDay]

Quick summary

The mobile menu on an FSE site will not function until all of the site content is loaded. This is particularly a problem with ads as they generally take a little bit longer to load.

Steps to reproduce

1. Have an FSE site with Jetpack Ads enabled.
2. Make sure the site has a mobile menu.
3. View the site and try to use the mobile menu before the ads load, or even a little bit after the ads load.

What you expected to happen

The mobile menu should open.

What actually happened

The mobile menu is unresponsive and seems to stay that way for a few minutes after the ads load.

Context

5207111-zen

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

I think it's with FSE in general. We tested with Russel and Skatepark

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

No response

[Greatdane]

Some questions;

1. With Jetpack Ads, do you mean WordAds?
2. When you say 'Make sure the site has a mobile menu', are you using a classic menu? FSE menus are configured via wp-admin/edit.php?post_type=wp_navigation and as far as I know, you cannot configure a mobile-only? So are we talking about a 'classic menu' that was originally set as a mobile menu?

Thanks!

[KirkwallDay]

Hey @Greatdane,

With Jetpack Ads, do you mean WordAds?

Yes, that's right.

When you say 'Make sure the site has a mobile menu', are you using a classic menu? FSE menus are configured via wp-admin/edit.php?post_type=wp_navigation and as far as I know, you cannot configure a mobile-only? So are we talking about a 'classic menu' that was originally set as a mobile menu?

In the template editor, you'll need to add a navigation block into your header (although this probably happens anywhere the block is added) and then make sure that it's set to show the mobile menu. The setting is here. "Mobile" and "Always" should re-produce the issue, but with "Mobile" you'll need to view the site on a mobile view.

[joweber123]

This looks to be an issue with an ads file that is loading very slowly. I have reached out to see if this is something that we can speed up on our end at all as that is the file that is blocking the other resources from loading here.

pMyNb-5kb-p2_consent-request-loading-time/

[happychait]

Although ads file is taking time to load, the theme and its menu shouldn't wait for the 3rd party ad server or any other 3rd party request to complete, as discussed in pMyNb-5kb/#comment-16269

So this is nothing to do with ads, and back to the theme's purview.

[jordesign]

To my research - it's definitely the javascript for the menu being blocked until the page load is complete.

This might be theme related - but could also be something that the core Navigation block is doing by default.

[jordesign]

Confirmed this is a bug in Gutenberg itself - so we've not got an open issue for that.
WordPress/gutenberg#41149

[candy02058912]

Confirmed that this is still reproducible.
I am setting this issue's priority to Normal to follow the other issues with the status "Needs Core/3rd Party Fix."

Asked about how we can triage core fix issues here: p1720755406642149/1720683311.692079-slack-C01UW7SB411 @Automattic/dotcom-product-ambassadors

[mrfoxtalbot]

I got back to you in Slack. Apologies for the delay @candy02058912