Navigation block shows different menu in admin and different on frontend

[kubiqsk]

Description

I have clean WP install and default 2023 theme active and no plugins active.
I did just one change - I created functions.php with add_theme_support('menus'); - that's all.
Then I'm trying to create footer layout with 4 menus and I want to import these menus from old WP /wp-admin/nav-menus.php and the behaviour is unpredictable.

Step-by-step reproduction instructions

1. create 2-3 menus in old WP /wp-admin/nav-menus.php
2. Open Site Editor and edit footer template part
3. add row and put inside a Navigation block
4. duplicate it 3-4 times
5. change (import) menu in other columns
6. save it and check frontend
7. you can also try to change something (add letter in any menu item) in duplicated column and save and check the frontend again

Screenshots, screen recording, code snippet

https://share.kubiq.sk/2023-05-17_17-18-42.mp4

Environment info

No response

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

[getdave]

@kubiqsk We've been working on improving the mechanics around this in the Gutenberg Plugin. Would you be able to test the same steps with the latest Gutenberg Plugin active and advise if the issue is still present? I will test also.

[kubiqsk]

@getdave Hi, thanks, yes it works with activated Gutenberg, but I've tried to use it on production website in last years a few times and it often broke the web after update... So ss it safe now to use it on production websites? Because currently this Navigation block is not working in WordPress, so I have 2 options - use Gutenberg plugin or use some custom block for menus.
Anyway, is there any plan to sync these block menus with old style menus in WP? So when I change something in here, then it will change also in wp-admin/nav-menus.php ? Most of my clients are much more comfortable with old menu editing experience

[getdave]

Hi, thanks, yes it works with activated Gutenberg,

That's good to know. It's likely the result of #48698.

I think it's going to be extremely difficult to backport any fixes to WP 6.2 for this feature. I assume you are making heavy use of it because your work flow is "make changes in the classic menus screen and then import into a Nav block"?

...but I've tried to use it on production website in last years a few times and it often broke the web after update

Unfortunately due to gradual accummulation of unrelated changes we did see some regressions. We are very conscious of that so that's why we've tried to resolve it by:

• investing time in consolidating the system (as per above)
• improving the automated test coverage in the form of unit, integration tests (PHP side) and e2e tests (editor side and front of site).

As a result we have greater confidence in the stability of the feature for WP 6.3.

So it safe now to use it on production websites?

That's a difficult question to answer definitively. In general yes. However, there can always edge cases and thus bugs we've not considered or which are not currently covered by tests.

However, our approach to this block is that each time we find a regression/bug we add test coverage alongside the fix. So we can only commit to the fact that the block will becoming increasingly stable.

Anyway, is there any plan to sync these block menus with old style menus in WP? So when I change something in here, then it will change also in wp-admin/nav-menus.php ? Most of my clients are much more comfortable with old menu editing experience

There is no plan for this. The experience is designed as a one way import only. This is why we've been at pains to label it as such within the UI (e.g. Import Classic Menus).

Most of my clients are much more comfortable with old menu editing experience

That's understandable. I would say two things:

1. We hope that the List View editing added in 6.2 will help to make managing the menu items easier. We continue to add improvements here.
2. We are planning to expose Navigation in the Browse Mode sidebar of the Site Editor in WP 6.3 which should add a further dimension to allow you manage menus globally within the editor.

I appreciate the old menus screen had many features users enjoyed. If there's anything specific you'd like to highlight, we're always grateful to receive specific Issues about those features.

[kubiqsk]

Thank you for detailed answer.

I'll try to use Gutenberg plugin on new website I'm creating right now and let's see... :)

About that classic menu - On many websites we're using plugins that allow you to list terms or posts in menu dynamically, so when they change in WP the will automatically change also in menus. That requires also special fields for menu items. Take a look eg. here https://www.youtube.com/watch?v=U7gQ4HmcUTs&t=207s
Do you think it's possible to extend this Navigation block to allow similar "magic" things? I don't mean you to do that, it's more like a question if there are similar hooks or ways how to achieve something like this.

[getdave]

that allow you to list terms or posts in menu dynamically, so when they change in WP the will automatically change also in menus

You can do something similar by inserting a Page List block within a Submenu. That said it only handles Pages and we'd need it to handle all types of Posts.

Currently the answer is no but it is functionality we need to add 🙏

[getdave]

Actually @kubiqsk I'd greatly value any additional context and information you have around your requirement for auto menus. Can you provide some specific examples of what you're trying to achieve? Which types of content are you trying to list out...etc? The more specific the better so we can better understand the requirement. Would be much appreciated.

[kubiqsk]

When I activate Gutenberg plugin, then fonts are not loading in admin editor and it's also throwing console error Store "core/reusable-blocks" is already registered.

Eg. I have many clients that want to list all top-level WooCommerce categories in the menu, then maybe in footer they have another menu called Special discounts and there they want to list first 6 products from this category... or there are many other usecases, like some most read blog categories, or even with that plugin you can easily create login/logout and profile menu items that will disappear when they are not needed and that's needed on almost every eshop or other web with login access and many other situations

[kubiqsk]

After many months and many new WP versions I gave another try to this Navigation block and it's simply not working...
I've created some menu items in there save it and there is just an empty div rendered on the frontend
<nav class="items-justified-center is-vertical wp-block-navigation is-content-justification-center is-layout-flex wp-container-core-navigation-is-layout-1 wp-block-navigation-is-layout-flex" aria-label="Navigation"></nav>
So after a year I still need to keep using my custom block for rendering from old WP menus - that's sad

[getdave]

I've re-tested this and I cannot replicate the Issue being described. Process to replicate:

• Create blank WP site (I used https://developer.wordpress.com/studio/)
• Activate Classic Theme
• Create a Classic Menu
• Switch to Block theme
• Add Nav block
• Select the Classic Menu under Import Classic Menu
• See the conversion process run and the menu imported.
• Save the changes in the Editor.
• View the front of the Site.
• See the classic menu that was converted to a block based menu.

Screen.Capture.on.2024-11-18.at.16-15-04.mp4

The only thing I can think of that might cause the Navigation to be empty would be if all the Classic Menu items linked to draft Pages. That's hard to do but not impossible. I tested this on my local machine and it does indeed render an empty <nav>. That would be expected behaviour.

I'd be happy to debug this further if it's possible to share steps to replicate the issue describe. For now however, I'm going to close this out.