Fix losing overrides after detaching patterns (#58164)

* Fix detaching pattern with overrides

* Migrate tests to playwright

* Fix and restore original tests

* Remove obsolete snapshots

packages/e2e-tests/specs/editor/various/__snapshots__/pattern-blocks.test.js.snap

@@ -1,11 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Pattern blocks allows conversion back to blocks when the reusable block has unsaved edits 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->"
-`;
-
 exports[`Pattern blocks can be created from multiselection and converted back to regular blocks 1`] = `
 "<!-- wp:paragraph -->
 <p>Hello there!</p>

packages/e2e-tests/specs/editor/various/pattern-blocks.test.js

@@ -252,34 +252,6 @@ describe( 'Pattern blocks', () => {
 		);
 	} );
 
-	// Check for regressions of https://github.com/WordPress/gutenberg/issues/26421.
-	// Skip reason: This is broken at the time with Pattern Overrides.
-	// See https://github.com/WordPress/gutenberg/issues/58122
-	it.skip( 'allows conversion back to blocks when the reusable block has unsaved edits', async () => {
-		await createReusableBlock( '1', 'Edited block' );
-
-		// Make an edit to the reusable block and assert that there's only a
-		// paragraph in a reusable block.
-		await canvas().waitForSelector( 'p[aria-label="Block: Paragraph"]' );
-		await canvas().click( 'p[aria-label="Block: Paragraph"]' );
-		await page.keyboard.type( '2' );
-		const selector =
-			'//div[@aria-label="Block: Pattern"]//p[@aria-label="Block: Paragraph"][.="12"]';
-		const reusableBlockWithParagraph = await page.$x( selector );
-		expect( reusableBlockWithParagraph ).toBeTruthy();
-
-		// Convert back to regular blocks.
-		await clickBlockToolbarButton( 'Select parent block: Edited block' );
-		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Detach' );
-		await page.waitForXPath( selector, {
-			hidden: true,
-		} );
-
-		// Check that there's only a paragraph.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
 	// Test for regressions of https://github.com/WordPress/gutenberg/issues/27243.
 	it( 'should allow a block with styles to be converted to a reusable block', async () => {
 		// Insert a quote and reload the page.

packages/patterns/src/store/actions.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 
-import { parse } from '@wordpress/blocks';
+import { cloneBlock } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
@@ -90,25 +90,37 @@ export const createPatternFromFile =
 export const convertSyncedPatternToStatic =
 	( clientId ) =>
 	( { registry } ) => {
-		const oldBlock = registry
+		const patternBlock = registry
 			.select( blockEditorStore )
 			.getBlock( clientId );
-		const pattern = registry
-			.select( 'core' )
-			.getEditedEntityRecord(
-				'postType',
-				'wp_block',
-				oldBlock.attributes.ref
-			);
 
-		const newBlocks = parse(
-			typeof pattern.content === 'function'
-				? pattern.content( pattern )
-				: pattern.content
-		);
+		function cloneBlocksAndRemoveBindings( blocks ) {
+			return blocks.map( ( block ) => {
+				let metadata = block.attributes.metadata;
+				if ( metadata ) {
+					metadata = { ...metadata };
+					delete metadata.id;
+					delete metadata.bindings;
+				}
+				return cloneBlock(
+					block,
+					{
+						metadata:
+							metadata && Object.keys( metadata ).length > 0
+								? metadata
+								: undefined,
+					},
+					cloneBlocksAndRemoveBindings( block.innerBlocks )
+				);
+			} );
+		}
+
 		registry
 			.dispatch( blockEditorStore )
-			.replaceBlocks( oldBlock.clientId, newBlocks );
+			.replaceBlocks(
+				patternBlock.clientId,
+				cloneBlocksAndRemoveBindings( patternBlock.innerBlocks )
+			);
 	};
 
 /**

test/e2e/specs/editor/various/pattern-overrides.spec.js

@@ -216,4 +216,51 @@ test.describe( 'Pattern Overrides', () => {
 			] );
 		} );
 	} );
+
+	test( 'retains override values when converting a pattern block to regular blocks', async ( {
+		page,
+		admin,
+		requestUtils,
+		editor,
+	} ) => {
+		const paragraphId = 'paragraph-id';
+		const { id } = await requestUtils.createBlock( {
+			title: 'Pattern',
+			content: `<!-- wp:paragraph {"metadata":{"id":"${ paragraphId }","bindings":{"content":{"source":{"name":"pattern_attributes"}}}}} -->
+<p>Editable</p>
+<!-- /wp:paragraph -->`,
+			status: 'publish',
+		} );
+
+		await admin.createNewPost();
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		// Make an edit to the pattern.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.focus();
+		await page.keyboard.type( 'edited ' );
+
+		// Convert back to regular blocks.
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		);
+		await editor.showBlockToolbar();
+		await editor.clickBlockOptionsMenuItem( 'Detach' );
+
+		// Check that the overrides remain.
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'edited Editable',
+					metadata: undefined,
+				},
+			},
+		] );
+	} );
 } );

test/e2e/specs/editor/various/patterns.spec.js

@@ -252,4 +252,73 @@ test.describe( 'Synced pattern', () => {
 			},
 		] );
 	} );
+
+	// Check for regressions of https://github.com/WordPress/gutenberg/issues/26421.
+	test( 'allows conversion back to blocks when the reusable block has unsaved edits', async ( {
+		page,
+		requestUtils,
+		editor,
+	} ) => {
+		const { id } = await requestUtils.createBlock( {
+			title: 'Synced pattern',
+			content:
+				'<!-- wp:paragraph -->\n<p>Before Edit</p>\n<!-- /wp:paragraph -->',
+			status: 'publish',
+		} );
+
+		await editor.insertBlock( {
+			name: 'core/block',
+			attributes: { ref: id },
+		} );
+
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		);
+		await page
+			.getByRole( 'toolbar', { name: 'Block tools' } )
+			.getByRole( 'link', { name: 'Edit original' } )
+			.click();
+
+		const editorTopBar = page.getByRole( 'region', {
+			name: 'Editor top bar',
+		} );
+
+		// Navigate to the pattern focus mode.
+		await expect(
+			editorTopBar.getByRole( 'heading', {
+				name: 'Synced pattern',
+				level: 1,
+			} )
+		).toBeVisible();
+
+		// Make an edit to the source pattern.
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Paragraph' } )
+			.fill( 'After Edit' );
+
+		// Go back to the post.
+		await editorTopBar.getByRole( 'button', { name: 'Back' } ).click();
+
+		const expectedParagraphBlock = {
+			name: 'core/paragraph',
+			attributes: { content: 'After Edit' },
+		};
+
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/block',
+				attributes: { ref: id },
+				innerBlocks: [ expectedParagraphBlock ],
+			},
+		] );
+
+		await editor.selectBlocks(
+			editor.canvas.getByRole( 'document', { name: 'Block: Pattern' } )
+		);
+		await editor.clickBlockOptionsMenuItem( 'Detach' );
+
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [ expectedParagraphBlock ] );
+	} );
 } );