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

Navigation block shows different menu in admin and different on frontend #50706

Open kubiqsk opened 1 year ago

kubiqsk commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

Hi, thanks, yes it works with activated Gutenberg,

That's good to know. It's likely the result of https://github.com/WordPress/gutenberg/pull/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:

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 4 months ago

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