Mark applying block templates not persistent

packages/e2e-tests/plugins/inner-blocks-templates/index.js

@@ -3,6 +3,8 @@
 	const createBlock = wp.blocks.createBlock;
 	const el = wp.element.createElement;
 	const InnerBlocks = wp.blockEditor.InnerBlocks;
+	const useState = window.wp.element.useState;
+
 	const TEMPLATE = [
 		[
 			'core/paragraph',
@@ -171,4 +173,32 @@
 
 		save,
 	} );
+
+
+	function InnerBlocksAsyncTemplateEdit() {
+		const [ template, setTemplate ] = useState( [] );
+
+		setInterval( () => {
+			setTemplate( TEMPLATE_TWO_PARAGRAPHS );
+		}, 1000 );
+
+		return el( InnerBlocks, {
+			template,
+		} );
+	}
+
+	registerBlockType(
+		'test/test-inner-blocks-async-template',
+		{
+			title: 'Test Inner Blocks Async Template',
+			icon: 'cart',
+			category: 'text',
+
+			edit: InnerBlocksAsyncTemplateEdit,
+
+			save() {
+				return el( InnerBlocks.Content );
+			},
+		}
+	);
 } )();

test/e2e/specs/editor/plugins/templates.spec.js → test/e2e/specs/editor/plugins/post-type-templates.spec.js

@@ -3,7 +3,7 @@
  */
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
-test.describe( 'templates', () => {
+test.describe( 'Post type templates', () => {
 	test.describe( 'Using a CPT with a predefined template', () => {
 		test.beforeAll( async ( { requestUtils } ) => {
 			await requestUtils.activatePlugin(

test/e2e/specs/editor/various/block-locking.spec.js

@@ -82,75 +82,5 @@ test.describe( 'Block Locking', () => {
 <p>Some paragraph</p>
 <!-- /wp:paragraph -->` );
 		} );
-
-		test( 'Applying block templates does not create a persistent change in the editor', async ( { editor, page, pageUtils } ) => {
-			// Create a new block template for the test.
-			// Should this live in a different file?
-			await page.evaluate( () => {
-				const el = window.wp.element.createElement;
-				const useState = window.wp.element.useState;
-				const InnerBlocks = window.wp.blockEditor.InnerBlocks;
-				const TEMPLATE_TWO_PARAGRAPHS = [
-					[
-						'core/paragraph',
-						{
-							fontSize: 'large',
-							content: 'One',
-						},
-					],
-					[
-						'core/paragraph',
-						{
-							fontSize: 'large',
-							content: 'Two',
-						},
-					],
-				];
-
-				window.wp.blocks.registerBlockType( 'test/test-inner-blocks-async-template', {
-					title: 'Test Inner Blocks no locking',
-					icon: 'cart',
-					category: 'text',
-
-					edit() {
-
-						const [ template, setTemplate ] = useState([]);
-
-						setInterval( () => {
-							setTemplate( TEMPLATE_TWO_PARAGRAPHS );
-						}, 1000 );
-
-						return el( InnerBlocks, {
-							template: template,
-						} );
-					},
-
-					save() {
-						return el( InnerBlocks.Content );
-					},
-				} );
-
-			} );
-			await editor.insertBlock( { name: 'test/test-inner-blocks-async-template' } );
-
-			await expect( await editor.getEditedPostContent() )
-				.toBe( `<!-- wp:test/test-inner-blocks-async-template /-->` );
-
-			const undoButton = await page.locator( '.editor-history__undo' );
-
-			// Check is that the undo button is enabled.
-			// Unfortunately the button does not have a disabled attribute.
-			await expect( undoButton ).toHaveAttribute( 'aria-disabled', 'false' );
-
-			// Undo the change.
-			await pageUtils.pressKeyWithModifier( 'primary', 'z' );
-
-			await expect( await editor.getEditedPostContent() )
-				.toBe( `` );
-
-			// There should be no more undo history.
-			// Unfortunately the button does not have a disabled attribute.
-			await expect( undoButton ).toHaveAttribute( 'aria-disabled', 'true' );
-		} );
 	} );
 } );

test/e2e/specs/editor/various/inner-blocks-templates.spec.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Inner blocks templates', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'gutenberg-test-inner-blocks-templates'
+		);
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'gutenberg-test-inner-blocks-templates'
+		);
+	} );
+
+	test( 'applying block templates asynchronously does not create a persistent change in the editor', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'test/test-inner-blocks-async-template',
+		} );
+
+		// Publish the post, then reload.
+		await editor.publishPost();
+		await page.reload();
+
+		// Wait for the block that was inserted to appear with its templated content.
+		await page
+			.locator(
+				'role=document[name="Block: Test Inner Blocks Async Template"i] >> text=OneTwo'
+			)
+			.waitFor();
+
+		// The template resolution shouldn't cause the post to be dirty.
+		const editorTopBar = page.locator(
+			'role=region[name="Editor top bar"i]'
+		);
+		const undoButton = editorTopBar.locator( 'role=button[name="Undo"i]' );
+		const updateButton = editorTopBar.locator(
+			'role=button[name="Update"i]'
+		);
+		await expect( undoButton ).toHaveAttribute( 'aria-disabled', 'true' );
+		await expect( updateButton ).toHaveAttribute( 'aria-disabled', 'true' );
+	} );
+} );