Fix reusable block crash when converting a just created reusable bloc…

…k to blocks. (#29292)

* Fix reusable block crash when content is a function

* Fix incorrect arg to content function

* Add an e2e test

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

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Reusable blocks allows conversion back to blocks when the reusable block has unsaved edits 1`] = `
+"<!-- wp:paragraph -->
+<p>12</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`Reusable 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/reusable-blocks.test.js

@@ -323,4 +323,29 @@ describe( 'Reusable blocks', () => {
 			expect( content ).toEqual( 'Awesome Paragraph modified' );
 		} );
 	} );
+
+	// Check for regressions of https://github.com/WordPress/gutenberg/issues/26421.
+	it( '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 page.waitForSelector( 'p[aria-label="Paragraph block"]' );
+		await page.click( 'p[aria-label="Paragraph block"]' );
+		await page.keyboard.type( '2' );
+		const selector =
+			'//div[@aria-label="Block: Reusable block"]//p[@aria-label="Paragraph block"][.="12"]';
+		const reusableBlockWithParagraph = await page.$x( selector );
+		expect( reusableBlockWithParagraph ).toBeTruthy();
+
+		// Convert back to regular blocks.
+		await clickBlockToolbarButton( 'Select Reusable block' );
+		await clickBlockToolbarButton( 'Convert to regular blocks' );
+		await page.waitForXPath( selector, {
+			hidden: true,
+		} );
+
+		// Check that there's only a paragraph.
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );

packages/reusable-blocks/src/store/controls.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { isFunction } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -68,7 +73,11 @@ const controls = {
 					oldBlock.attributes.ref
 				);
 
-			const newBlocks = parse( reusableBlock.content );
+			const newBlocks = parse(
+				isFunction( reusableBlock.content )
+					? reusableBlock.content( reusableBlock )
+					: reusableBlock.content
+			);
 			registry
 				.dispatch( 'core/block-editor' )
 				.replaceBlocks( oldBlock.clientId, newBlocks );