Duplicating a template part makes the site editor freeze

[talldan]

Description

Duplicating a template part seems to make the site editor hang.

There's no visible error, but I think duplicating triggers an infinite recursion and the UI hangs.

Step-by-step reproduction instructions

1. Open the site editor
2. Select the header or footer
3. From the block toolbar open the options dropdown and select Duplicate
4. Continue editing in the site editor

Expected: It's possible to continue editing
Actual: After a while the site editor freezes and is unusable

Screenshots, screen recording, code snippet

No response

Environment info

Mac OS / Brave
Tested using latest Gutenberg trunk (at 2de4197)

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

[rku4er]

I have a similar issue when trying to insert a template part that already exists. So it's not possible to have two same template parts in a page template. Interesting that in some cases the editor just replaces the existing template part with the message "This block has encountered an error and cannot be previewed." without freezing.

[annezazu]

I tried to replicate in Chrome using 14.0.2 and couldn't. cc @ironprogrammer and @ndiego in case ya'll have time to replicate/test more.

testing.mov

[annezazu]

I can replicate this with Safari. The above is with Chrome. Seems browser specific!

[ciampo]

I definitely encountered this problem in the site editor while testing the Popover component, on latest Chrome on MacOS.

[spencerfinnell]

I have seen this as well, in Chrome. Sometimes the tab completely crashes, other times there is a lot of lag. Chrome 105.0.5195.102 (Official Build) (arm64)

[talldan]

Don't ask me how I figured it out, but the problem seems to go away if I comment out this setAttributes call in the group block's code:

gutenberg/packages/block-library/src/group/edit.js

Lines 76 to 81 in 7a6d952

	useEffect( () => {
	if ( layoutType ) {
	__unstableMarkNextChangeAsNotPersistent();
	setAttributes( { layout: { ...layout, type: layoutType } } );
	}
	}, [ layoutType ] );

So I think this is actually a group block bug. That's probably why it couldn't be consistently reproduced.

To test this I duplicated the Twenty Twenty Two theme's 'Header (Dark, small)' template part in the home template. When duplicating and logging the value of layoutType this is what's logged:

[talldan]

TBH, I don't really understand what that code does. It seems to set the attribute to the value it already has.

That was observed in the PR review here - https://github.com/WordPress/gutenberg/pull/42763/files#r947365766, but I think we need a deeper understanding of why the effect was added.

cc @tellthemachines , @glendaviesnz.

edit: took a deeper dive and left some advice on the comment thread there - https://github.com/WordPress/gutenberg/pull/42763/files#r968097246

[talldan]

Fix in #44103