When duplicating a Navigation or Template Part block, it's not clear why changing one changes the other

[carolinan]

Description

It seems that when you duplicate a template part, it does not automatically receive a unique identifier?

In the site editor, when I duplicate a template part:

1. The title of the copy remains the same as the original
2. When I add blocks to the copy, the original template part is also updated. -Hence I can not edit the copy without also changing the original.

-I can not change the title of the copy without using "Update design." #29844
-After changing the title of the template part and updating, the template parts are separate.

Step-by-step reproduction instructions

Please list the steps needed to reproduce the bug. For example:

1. Activate a theme with support for full site editing.
2. Open the site editor. Create and duplicate a template part.
3. change the contents of either template part.
4. confirm that both template parts are updated when you edit one of them.

Expected behaviour

I expected the copied template part to be its own unique copy with a new, random slug/title

Actual behaviour

The template part is not "unique" until the title has been updated by the user and the changes saved.

Screenshots or screen recording (optional)

template-part.mp4

WordPress information

• WordPress version: 5.7
• Gutenberg version: current trunk at f1d9a0b
• Are all plugins except Gutenberg deactivated? yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Empty theme

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Chrome Version 89.0.4389.90

[nikola-wd]

I have a similar bug with the framework I wrote. Here's what happens.

If I have a block "A", that doesn't have repeater fields inside it. And if I then duplicate that block, and edit the new block (that's a copy of the main block), I don't have any bugs. Each updates for itself. But.

In the case of block "B", which has a repeater field inside it, this is what happens.

1. I create one instance of the block "B" -> everything works
2. I then duplicate that block. Once I start editing the copy of that block -> It also overwrites and updates the fields in the first block.
3. If I duplicate the block "B", and then hit Save. -> This also occurs.
4. Only in the case where I do these steps: 1. Duplicate the block, 2. Hit Save, 3. Refresh the page, 4. Edit the new block's fields -> Only then it works as expected and only updates its fields. Original block "B" preserves its state.

I hope I am making sense here.
I haven't delved too much into clientID, and withInstanceID, but, from all that I've been able to research, I might think that this, in some way, might be causing this bug.

Here's the video of the bug:
https://www.loom.com/share/849afc4cbb5444f5a3f350184e06dca1

[carolinan]

I am updating this issue because I am experiencing the same with the navigation block.
If I select a navigation block, duplicate it, and make changes to the new duplicate, the original block changes as well.
I get the same results when duplicating as when I use "Copy" from the toolbar menu.

[draganescu]

I tested this with the navigation block and can confirm. Ideally on duplication, an independent copy of blocks should be created.

[kafleg]

I have the same issue.

• Windows 11
• Laragon Localhost
• PHP 7.4.19
• TT2 theme
• RC 1 - 5.9
• No Gutenberg plugin was installed or activated.

When the template part named Header and Footer is added, it both has a Site title block. And when we change in one block, it will change in all other blocks too.

[nikola-wd]

Any news about whether this bug is on the roadmap for being fixed? It's a pretty major bug.

[annezazu]

Noting that this has come up as a piece of feedback with the FSE Outreach Program's latest All Things Media exploration as a point of confusion (twice):

If I insert 2 headers, applying changes to one affects both the header. Don’t know why it is happening.

[gwwar]

So what's happening here is that a navigation block may be represented by content in a wp_navigation post.

When we copy the block, we're copying the ref attribute, so edits on child blocks will be reflected in both instances.

<!-- wp:navigation {"ref":695} /-->

One way of solving this is adding an action like a deepCopy, where if we see a ref attribute, we can create a new block container and copy its children. Note that in this scenario block children are not available as part of innerBlocks, but can still be queried:

@annezazu was there a similar issue for Reusable Blocks? They're represented in a similar way, with the block looking like:

<!-- wp:block {"ref":634} /-->

[annezazu]

@annezazu was there a similar issue for Reusable Blocks? They're represented in a similar way, with the block looking like.

I don't see a similar issue open for reusable blocks but can replicate the problem.