Navigation block: custom menu imported on a delay leading to confusing UX

[annezazu]

As part of the twentieth call for testing for the FSE Outreach Program, a few folks noted that their custom menu from a classic theme wasn't properly used when first loading the Site Editor until the editor was refreshed in some way.

“When I first opened the editor (showing the Home template) – I noticed that my custom menu didn’t display at all. But when I made the first switch to another template the loader showed and then was replaced with my custom menu.
It was like the import wasn’t prompted until I selected a different template to preview.”

That doesn’t always seem to work: On an already edited local WordPress instance it did not work. On a brand new local WordPress instance, the menu is imported, but without submenus.

When I first opened the Site Editor, at first the Header Navigation menu was not the menu that I had created before changing themes. The menu that showed was the All Pages menu, even though I didn’t have an All Pages menu before changing themes. When I left the Editor and came back, then my previously created “Main” menu appeared correctly.

I'm afraid I do not have replication steps beyond following the steps in the call for testing:

1. Open this link once to create a test site: https://app.instawp.io/launch?t=fse-call-for-testing-20
2. Explore your site and feel free to add in more personalized items, whether by adding or customizing menus under Appearance > Menus or more widgets under Appearance > Widgets.
3. When you’re ready, head to Appearance > Themes and select “Activate” next to the Twenty Twenty-Three theme.
4. Head to Appearance > Editor (beta) to be brought into the browse mode experiment in the Site Editor.
5. Click through the different templates and template parts to view the various parts of your site. Eventually, select your Home template and choose the option to “Edit”. Notice that your previously created menu was automatically imported.

Opening this in case others can help test and replicate since it does seem odd that a few folks could replicate this. I tried to find any related issues but couldn't identify any recently closed ones or opened ones for the navigation block. cc @getdave for the nav block side and @ironprogrammer for testing.

Of note, this call for testing was using Gutenberg 15.0 and it was the likely version when this bug was found. I cannot replicate it using Chrome, MacOS, and the steps above.

[ndiego]

I just tested on a fresh WP install. The menu was imported as expected using the steps in the call for testing. On an existing install that already had menus created in the Site Editor, the custom menu was not automatically imported as expected. It was available to import manually, though.

Let's leave this open for more testing and feedback.

[getdave]

Any more feedback/testing results here?

[annezazu]

Not that I'm aware of.

[helloarpitgshah]

I just tested on followed the same steps as per the descriptions. Menu, as that was added, are imported but not widgets into the footer. Please have a look at the screenshot for more.

[getdave]

Thanks for confirming the Menu side of this works 👍

...but not widgets into the footer.

As this issue refers to Menus I think we need to close it out and open a new one specifically about Widgets. Do you agree?

[helloarpitgshah]

Yes, Please

[getdave]

Closing this as resolved.

[annezazu]

While using WordPress 6.2-beta3-55428 and testing something separately, I noticed a random "Custom menu imported" notice after first landing into browse mode without any navigation fallback. Happy to share the full video if it's helpful (3-4 minutes) but here's the part where suddenly I am using the Browse Mode navigation section to edit a different template and I get a notice that confuses me:

custom.menu.import.mov

Going to reopen this. I'm not clear on replication steps but I did do this:

• Created a site with https://app.instawp.io/launch?t=betarc
• Used the beta testing plugin to switch to nightly and update
• Opened Appearance > Editor and just started playing around, noticing no navigation menu listed at first in browse mode.

[annezazu]

@getdave can you look into this?

[getdave]

I noticed a random "Custom menu imported"

I think it said "Classic menu imported". I'll take a look.

[getdave]

@annezazu I tried to replicate this with WordPress 6.2-beta4. I saw "Classic menu imported" but I could not see "Custom menu not imported" as suggested in the issue title.

To replicate what you have in your video the steps are:

• remove any existing Navigation Menus from wp-admin/edit.php?post_type=wp_navigation.
• switch to Classic Theme and create a Classic Menu. Name it something obvious like Classic Menu Test.
• switch back to TT3.
• Open Site Editor.
• Click into editor canvas.
• See notice saying that Classic Menu was imported.

Having discussed with @scruffian and others I believe this behaviour is expected. What's slightly unusual is that the notice doesn't appear until you are within the editor canvas. I think that's standard as we don't have a model for displaying notices outside of that right now so when notices are dispatched they are only displayed within the editor canvas.

I believe what is happening is:

• Site Editor loads
• Nav block loads
• Nav block detects it has no menu associated with it
• Nav block goes into it's fallback logic to determine what to display in the editor
• A Classic Menu is found
• The Classic menu is auto imported and converted into a Navigation menu
• A "Notice" is triggered by the Nav block.
• The Nav menu is displayed in the Browse Mode sidebar
• When you click into the editor the notice is still displayed from when it was dispatched earlier.

You'll notice that the items in the Navigation Browser mode are the same as those in the canvas. Those items in turn will correspond with any Classic Menu you have on your site.

So I believe this is all expected.

noticing no navigation menu listed at first in browse mode.

No menu will display there until a menu is available. It won't be available until the import is complete. It's a limitation of requiring a network request to determine the fallback. In the future (6.3???) we may be able to solve this by always having a Navigation post created server side.

[annezazu]

Ah let me clarify. The "Classic menu imported" happens on a delay. I can share the full video with you to show more of what I mean. Essentially, you have classic menus in place, open the site editor, and the navigation block doesn't use any fallback. From there, randomly while editing a different template after creating a new menu, I get a notice of the import.

Edit to add:

No menu will display there until a menu is available. It won't be available until the import is complete. It's a limitation of requiring a network request to determine the fallback.

This might be the root problem 😅 I'd like to leave this issue open in any case but understand if we can't make progress for 6.2.

[getdave]

If it's possible to isolate the exact steps I'd need to take to replicate this issue then we can take a look. I'm finding it a little hard to follow even with the updated description. Sorry!

[annezazu]

I basically think the issue is the delay in the import since a request is made server side. This delay is causing a strange UX -- you open the site editor to see no menu set then, some time later, it suddenly gives a notice of "classic menu imported". Part of why this has been so hard to replicate is that request can take different amounts of time! So sometimes it would happen while editing another template and sometimes it would happen in the same template itself and sometimes I couldn't replicate at all. Does that make more sense? I'm not quite sure what to do here to solve as the delay in the fallback is pretty confusing.

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[getdave]

@annezazu I'm working on a solution over here whereby determining the correct "fallback" and converting that into a Navigation Menu (i.e. wp_navigation Post) is all handled sever side. This can be dispatched as a single API request from the editor which has several benefits and may help solve the Issue here.

More eyes on that PR and testing would really help. I'm currently seeking input from folks experienced with the REST API to confidence check the approach I'm suggesting.

[annezazu]

@spacedmonkey might you be able to take a look at the above? You come to mind when it comes to performance and REST API : )

[draganescu]

I think the new endpoint in #48698 solved this issue so I'll close it hoping it won't reappear.