Duplicate menu items in multiple Navigation blocks on the same page retain unwanted shared state

[NerminPh]

Description

When using multiple instances of the default Gutenberg Navigation block on the same page, any menu items created in the first Navigation block are duplicated automatically in additional Navigation blocks. This behavior causes confusion and can lead to errors if menu items are intended to be unique to each block. This issue is especially noticeable when adding custom settings or options to the menu items, as these settings do not persist correctly across duplicated blocks.

Step-by-step reproduction instructions

1. Open the WordPress editor (Gutenberg) for a new or existing page or post.
2. Add a Navigation block and add a few menu items to it.
3. Without refreshing, add a second Navigation block on the same page.
4. Observe that the new Navigation block automatically includes the same menu items created in the first Navigation block, instead of starting with an empty state.
   Iam using the default twenty-four Block theme.

Screenshots, screen recording, code snippet

Expected Behavior:

Each instance of the Navigation block should start empty, with no menu items pre-populated from other Navigation blocks on the page. Each Navigation block should have a separate state so that menu items remain unique to the instance in which they are created.

Actual Behavior:

Newly added Navigation blocks on the same page automatically include menu items from previously created Navigation blocks, resulting in unintentional duplication of menu items across blocks. If custom settings (e.g., color, icons, etc.) are applied to the submenu items, these settings may also be lost or inconsistently applied due to the shared state.

Impact of Issue:

This issue can cause the following complications:

• Redundant Content: Duplicated menu items in new Navigation blocks lead to unintentional content duplication.
• Custom Option Conflicts: If custom options or controls are added to the menu items, they may not retain their intended values in duplicated blocks, causing further inconsistency and errors.

Environment info

WordPress Version: 6.6.2
Gutenberg Plugin Version: 19.6.0
Browser: Google IOS

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[NerminPh]

navigation.block.mov

Check the issue in video.

[benniledl]

Hello @NerminPh :) this is expected and intended behavior.
If you want to make a separate independent menu you need to create a new one as shown in following video.
https://github.com/user-attachments/assets/00a71839-5560-4927-bc51-dd64a0f7915f

[NerminPh]

Hello,

Thanks so much for the response and for sharing the video, it was helpful!

I wanted to suggest that each new Navigation block automatically starts with its own independent menu list. Right now, it takes quite a few steps to set up separate menus, which feels a bit cumbersome. For instance, when creating a header menu, it seems more intuitive if each instance of the block had its own unique menu items by default. This would be especially useful for cases where there’s a top menu in the header and a distinct main menu below.

Since each Navigation block already has a unique ID, having it generate an independent menu by default might be a natural fit.

Thank you for considering this feedback!

[Mamaduka]

@getdave, do you know if we already have an issue to improve the newly inserted navigation block state?

I wanted to suggest that each new Navigation block automatically starts with its own independent menu list.

Generating a new Navigation menu on insertion can quickly generate "orphaned" items, especially when building a new website or experimenting. The general rule for the editor is to avoid creating entries in DB without users' explicit permissions.

I'll close the issue since the initially reported "bug" is expected behavior with controlled blocks like Navigation and Synced Patterns.

@NerminPh, if you have suggestions for improvements besides auto-creating navigation menus, feel free to open a new issue.

[getdave]

an issue to improve the newly inserted navigation block state?

Thanks for the ping.

Not that I'm aware. This setup state has been iterated on many times and is fully intentional. Based on those iterations and past experience, creating a new menu automatically on each insertion of a Navigation block would be far worse than what we have today. Similarly starting with an empty block has historically caused users a lot of confusion.

On balance the 80% use case is that users will have a single Navigation Menu provided by their Theme in header. Based on feedback over many cycles, it's a much better experience if this is automatically populated with a pre-created Menu as a one-time operation. There is a dedicated fallback mechanic for this. I appreciate that might make it slightly more complex for the other 20% but based on feedback the trade off seems to strike a good balance.

Always open to feedback though.

The only Issue I can think that might help here would be #38278.