@wordpress/e2e-tests 5.6.0 → 6.0.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 6.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 5.6.0 (2022-11-16)
 
 ## 5.5.0 (2022-11-02)

package/config/setup-performance-test.js

@@ -34,6 +34,9 @@ beforeAll( async () => {
 	await trashAllPosts( 'wp_block' );
 	await setupBrowser();
 	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
+	await page.emulateMediaFeatures( [
+		{ name: 'prefers-reduced-motion', value: 'reduce' },
+	] );
 } );
 
 afterEach( async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "5.6.0",
+	"version": "6.0.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^8.6.0",
-		"@wordpress/jest-console": "^6.5.0",
-		"@wordpress/jest-puppeteer-axe": "^5.5.0",
-		"@wordpress/scripts": "^24.6.0",
-		"@wordpress/url": "^3.23.0",
+		"@wordpress/e2e-test-utils": "^9.0.0",
+		"@wordpress/jest-console": "^6.6.0",
+		"@wordpress/jest-puppeteer-axe": "^5.6.0",
+		"@wordpress/scripts": "^25.0.0",
+		"@wordpress/url": "^3.24.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -40,11 +40,11 @@
 	"peerDependencies": {
 		"jest": ">=27",
 		"puppeteer-core": ">=11",
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
+	"gitHead": "1eb65aabe6738097f4c062e78f69ae8f05879848"
 }

package/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,31 @@
 
 		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,
+
+			// Purposely do not save inner blocks so that it's possible to test template resolution.
+			save() {},
+		}
+	);
 } )();

package/specs/editor/blocks/__snapshots__/heading.test.js.snap

@@ -2,19 +2,19 @@
 
 exports[`Heading can be created by prefixing existing content with number signs and a space 1`] = `
 "<!-- wp:heading {\\"level\\":4} -->
-<h4>4</h4>
+<h4 class=\\"wp-block-heading\\">4</h4>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading can be created by prefixing number sign and a space 1`] = `
 "<!-- wp:heading {\\"level\\":3} -->
-<h3>3</h3>
+<h3 class=\\"wp-block-heading\\">3</h3>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should correctly apply named colors 1`] = `
 "<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
-<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
+<h2 class=\\"wp-block-heading has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -24,13 +24,13 @@ exports[`Heading should create a paragraph block above when pressing enter at th
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>a</h2>
+<h2 class=\\"wp-block-heading\\">a</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should create a paragraph block below when pressing enter at the end 1`] = `
 "<!-- wp:heading -->
-<h2>a</h2>
+<h2 class=\\"wp-block-heading\\">a</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -40,12 +40,12 @@ exports[`Heading should create a paragraph block below when pressing enter at th
 
 exports[`Heading should not work with the list input rule 1`] = `
 "<!-- wp:heading -->
-<h2>1. H</h2>
+<h2 class=\\"wp-block-heading\\">1. H</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Heading should work with the format input rules 1`] = `
 "<!-- wp:heading -->
-<h2><code>code</code></h2>
+<h2 class=\\"wp-block-heading\\"><code>code</code></h2>
 <!-- /wp:heading -->"
 `;

package/specs/editor/blocks/__snapshots__/quote.test.js.snap

@@ -45,7 +45,7 @@ exports[`Quote can be converted to paragraphs and renders only one paragraph for
 exports[`Quote can be created by converting a heading 1`] = `
 "<!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><!-- wp:heading -->
-<h2>test</h2>
+<h2 class=\\"wp-block-heading\\">test</h2>
 <!-- /wp:heading --></blockquote>
 <!-- /wp:quote -->"
 `;

package/specs/editor/blocks/heading.test.js

@@ -87,7 +87,7 @@ describe( 'Heading', () => {
 		await page.keyboard.press( 'Enter' );
 		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
 		"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#4b7f4d\\"}}} -->
-		<h3 class=\\"has-text-color\\" style=\\"color:#4b7f4d\\">Heading</h3>
+		<h3 class=\\"wp-block-heading has-text-color\\" style=\\"color:#4b7f4d\\">Heading</h3>
 		<!-- /wp:heading -->"
 	` );
 	} );

package/specs/editor/blocks/quote.test.js

@@ -191,9 +191,9 @@ describe( 'Quote', () => {
 		<p>1</p>
 		<!-- /wp:paragraph -->
 
-		<!-- wp:paragraph -->
-		<p>2</p>
-		<!-- /wp:paragraph -->"
+		<!-- wp:quote -->
+		<blockquote class=\\"wp-block-quote\\"><cite>2</cite></blockquote>
+		<!-- /wp:quote -->"
 	` );
 	} );
 } );

package/specs/editor/various/__snapshots__/block-grouping.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Block Grouping Group creation creates a group from multiple blocks of different types via block transforms 1`] = `
 "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 class=\\"wp-block-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -51,7 +51,7 @@ exports[`Block Grouping Group creation creates a group from multiple blocks of t
 exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 1`] = `
 "<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 class=\\"wp-block-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -66,7 +66,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 
 exports[`Block Grouping Group creation groups and ungroups multiple blocks of different types via options toolbar 2`] = `
 "<!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 class=\\"wp-block-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->
@@ -81,7 +81,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 exports[`Block Grouping Preserving selected blocks attributes preserves width alignment settings of selected blocks 1`] = `
 "<!-- wp:group {\\"align\\":\\"full\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group alignfull\\"><!-- wp:heading -->
-<h2>Group Heading</h2>
+<h2 class=\\"wp-block-heading\\">Group Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:image {\\"align\\":\\"full\\"} -->

package/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap

@@ -71,7 +71,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>Heading</h2>
+<h2 class=\\"wp-block-heading\\">Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -93,7 +93,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <!-- /wp:cover -->
 
 <!-- wp:heading -->
-<h2>Heading</h2>
+<h2 class=\\"wp-block-heading\\">Heading</h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->

package/specs/editor/various/__snapshots__/keep-styles-on-block-transforms.test.js.snap

@@ -8,15 +8,15 @@ exports[`Keep styles on block transforms Should keep colors during a transform 1
 
 exports[`Keep styles on block transforms Should keep the font size during a transform from multiple blocks into multiple blocks 1`] = `
 "<!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\">Line 1 to be made large</h2>
+<h2 class=\\"wp-block-heading has-large-font-size\\">Line 1 to be made large</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\">Line 2 to be made large</h2>
+<h2 class=\\"wp-block-heading has-large-font-size\\">Line 2 to be made large</h2>
 <!-- /wp:heading -->
 
 <!-- wp:heading {\\"fontSize\\":\\"large\\"} -->
-<h2 class=\\"has-large-font-size\\">Line 3 to be made large</h2>
+<h2 class=\\"wp-block-heading has-large-font-size\\">Line 3 to be made large</h2>
 <!-- /wp:heading -->"
 `;
 

package/specs/editor/various/__snapshots__/list-view.test.js.snap

@@ -6,7 +6,7 @@ exports[`List view allows a user to drag a block to a new sibling position 1`] =
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2></h2>
+<h2 class=\\"wp-block-heading\\"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:image -->

package/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap

@@ -84,13 +84,13 @@ exports[`Multi-block selection should forward delete across blocks 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>]2</h2>
+<h2 class=\\"wp-block-heading\\">]2</h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Multi-block selection should forward delete across blocks 2`] = `
 "<!-- wp:heading -->
-<h2>1&amp;2</h2>
+<h2 class=\\"wp-block-heading\\">1&amp;2</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -128,7 +128,7 @@ exports[`Multi-block selection should handle Enter across blocks 1`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>]2</h2>
+<h2 class=\\"wp-block-heading\\">]2</h2>
 <!-- /wp:heading -->"
 `;
 
@@ -142,7 +142,7 @@ exports[`Multi-block selection should handle Enter across blocks 2`] = `
 <!-- /wp:paragraph -->
 
 <!-- wp:heading -->
-<h2>2</h2>
+<h2 class=\\"wp-block-heading\\">2</h2>
 <!-- /wp:heading -->"
 `;
 

package/specs/editor/various/__snapshots__/rich-text.test.js.snap

@@ -32,7 +32,7 @@ exports[`RichText should handle Home and End keys 1`] = `
 
 exports[`RichText should handle change in tag name gracefully 1`] = `
 "<!-- wp:heading {\\"level\\":3} -->
-<h3></h3>
+<h3 class=\\"wp-block-heading\\"></h3>
 <!-- /wp:heading -->"
 `;
 

package/specs/editor/various/block-switcher.test.js

@@ -16,8 +16,8 @@ describe( 'Block Switcher', () => {
 
 	it( 'Should show the expected block transforms on the list block when the blocks are removed', async () => {
 		// Insert a list block.
-		await insertBlock( 'List' );
-		await page.keyboard.type( 'List content' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '- List content' );
 		await page.keyboard.press( 'ArrowUp' );
 		await pressKeyWithModifier( 'alt', 'F10' );
 
@@ -43,8 +43,8 @@ describe( 'Block Switcher', () => {
 		} );
 
 		// Insert a list block.
-		await insertBlock( 'List' );
-		await page.keyboard.type( 'List content' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '- List content' );
 		await page.keyboard.press( 'ArrowUp' );
 		await pressKeyWithModifier( 'alt', 'F10' );
 
@@ -63,6 +63,10 @@ describe( 'Block Switcher', () => {
 	} );
 
 	it( 'Should not show the block switcher if all the blocks the list block transforms into are removed', async () => {
+		// Insert a list block.
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '- List content' );
+
 		// Remove the paragraph and quote block from the list of registered blocks.
 		await page.evaluate( () => {
 			[
@@ -75,23 +79,20 @@ describe( 'Block Switcher', () => {
 			].map( ( block ) => wp.blocks.unregisterBlockType( block ) );
 		} );
 
-		// Insert a list block.
-		await insertBlock( 'List' );
-		await page.keyboard.type( 'List content' );
 		await page.keyboard.press( 'ArrowUp' );
 		await pressKeyWithModifier( 'alt', 'F10' );
 
 		// Verify the block switcher exists.
-		expect( await hasBlockSwitcher() ).toBeTruthy();
+		expect( await hasBlockSwitcher() ).toBeFalsy();
 		// Verify the correct block transforms appear.
-		expect( await getAvailableBlockTransforms() ).toHaveLength( 1 );
+		expect( await getAvailableBlockTransforms() ).toHaveLength( 0 );
 	} );
 
 	describe( 'Conditional tranformation options', () => {
 		describe( 'Columns tranforms', () => {
 			it( 'Should show Columns block only if selected blocks are between limits (1-6)', async () => {
-				await insertBlock( 'List' );
-				await page.keyboard.type( 'List content' );
+				await page.keyboard.press( 'Enter' );
+				await page.keyboard.type( '- List content' );
 				await page.keyboard.press( 'ArrowUp' );
 				await insertBlock( 'Heading' );
 				await page.keyboard.type( 'I am a header' );
@@ -103,8 +104,8 @@ describe( 'Block Switcher', () => {
 				);
 			} );
 			it( 'Should NOT show Columns transform only if selected blocks are more than max limit(6)', async () => {
-				await insertBlock( 'List' );
-				await page.keyboard.type( 'List content' );
+				await page.keyboard.press( 'Enter' );
+				await page.keyboard.type( '- List content' );
 				await page.keyboard.press( 'ArrowUp' );
 				await insertBlock( 'Heading' );
 				await page.keyboard.type( 'I am a header' );

package/specs/editor/various/multi-block-selection.test.js

@@ -70,7 +70,7 @@ async function testNativeSelection() {
 			return;
 		}
 
-		if ( ! selection.rangeCount === 1 ) {
+		if ( selection.rangeCount !== 1 ) {
 			throw 'expected one range';
 		}
 

package/specs/editor/various/reusable-blocks.test.js

@@ -108,7 +108,7 @@ describe( 'Reusable blocks', () => {
 		await insertReusableBlock( 'Surprised greeting block' );
 
 		// Convert block to a regular block.
-		await clickBlockToolbarButton( 'Convert to regular blocks' );
+		await clickBlockToolbarButton( 'Convert to regular block' );
 
 		// Check that we have a paragraph block on the page.
 		const paragraphBlock = await page.$(
@@ -343,7 +343,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert back to regular blocks.
 		await clickBlockToolbarButton( 'Select Reusable block' );
-		await clickBlockToolbarButton( 'Convert to regular blocks' );
+		await clickBlockToolbarButton( 'Convert to regular block' );
 		await page.waitForXPath( selector, {
 			hidden: true,
 		} );

package/specs/experiments/blocks/post-comments-form.test.js

@@ -6,8 +6,7 @@ import {
 	activateTheme,
 	setOption,
 	visitSiteEditor,
-	openSiteEditorNavigationPanel,
-	navigateSiteEditorBackToRoot,
+	enterEditMode,
 	deleteAllTemplates,
 	canvas,
 } from '@wordpress/e2e-test-utils';
@@ -24,15 +23,15 @@ describe( 'Post Comments Form', () => {
 
 			// Navigate to "Singular" post template
 			await visitSiteEditor();
-			await openSiteEditorNavigationPanel();
-			await navigateSiteEditorBackToRoot();
 			await expect( page ).toClick(
-				'.components-navigation__item-title',
+				'.edit-site-sidebar-navigation-item',
 				{ text: /templates/i }
 			);
-			await expect( page ).toClick( '.components-heading > a', {
-				text: /singular/i,
-			} );
+			await expect( page ).toClick(
+				'.edit-site-sidebar-navigation-item',
+				{ text: /singular/i }
+			);
+			await enterEditMode();
 
 			// Insert post comments form
 			await insertBlock( 'Post Comments Form' );

package/specs/performance/site-editor.test.js

@@ -15,6 +15,7 @@ import {
 	saveDraft,
 	insertBlock,
 	deleteAllTemplates,
+	enterEditMode,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -114,6 +115,7 @@ describe( 'Site Editor Performance', () => {
 		await canvas().waitForSelector(
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);
+		await enterEditMode();
 		await canvas().click(
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);

package/specs/site-editor/global-styles-sidebar.test.js

@@ -5,6 +5,7 @@ import {
 	deleteAllTemplates,
 	activateTheme,
 	visitSiteEditor,
+	enterEditMode,
 	toggleGlobalStyles,
 	openGlobalStylesPanel,
 } from '@wordpress/e2e-test-utils';
@@ -26,6 +27,7 @@ describe( 'Global styles sidebar', () => {
 	} );
 	beforeEach( async () => {
 		await visitSiteEditor();
+		await enterEditMode();
 	} );
 	describe( 'blocks list', () => {
 		it( 'should filter results properly', async () => {

package/specs/site-editor/multi-entity-saving.test.js

@@ -13,6 +13,7 @@ import {
 	clickButton,
 	createReusableBlock,
 	visitSiteEditor,
+	enterEditMode,
 	deleteAllTemplates,
 } from '@wordpress/e2e-test-utils';
 
@@ -265,6 +266,8 @@ describe( 'Multi-entity save flow', () => {
 				postType: 'wp_template',
 			} );
 
+			await enterEditMode();
+
 			// Select the header template part via list view.
 			await page.click( '.edit-site-header-edit-mode__list-view-toggle' );
 			const headerTemplatePartListViewButton = await page.waitForXPath(
@@ -302,6 +305,8 @@ describe( 'Multi-entity save flow', () => {
 				postType: 'wp_template',
 			} );
 
+			await enterEditMode();
+
 			// Insert a paragraph at the bottom.
 			await insertBlock( 'Paragraph' );
 

package/specs/site-editor/settings-sidebar.test.js

@@ -8,6 +8,7 @@ import {
 	selectBlockByClientId,
 	insertBlock,
 	visitSiteEditor,
+	enterEditMode,
 } from '@wordpress/e2e-test-utils';
 
 async function toggleSidebar() {
@@ -49,6 +50,7 @@ describe( 'Settings sidebar', () => {
 	} );
 	beforeEach( async () => {
 		await visitSiteEditor();
+		await enterEditMode();
 	} );
 
 	describe( 'Template tab', () => {
@@ -68,6 +70,7 @@ describe( 'Settings sidebar', () => {
 				postId: 'emptytheme//singular',
 				postType: 'wp_template',
 			} );
+			await enterEditMode();
 			const templateCardAfterNavigation = await getTemplateCard();
 
 			expect( templateCardBeforeNavigation ).toMatchObject( {

package/specs/site-editor/site-editor-export.test.js

@@ -12,6 +12,7 @@ import {
 	deleteAllTemplates,
 	activateTheme,
 	visitSiteEditor,
+	enterEditMode,
 	clickOnMoreMenuItem,
 } from '@wordpress/e2e-test-utils';
 
@@ -41,6 +42,7 @@ describe( 'Site Editor Templates Export', () => {
 
 	beforeEach( async () => {
 		await visitSiteEditor();
+		await enterEditMode();
 	} );
 
 	it( 'clicking export should download emptytheme.zip file', async () => {

package/specs/site-editor/multi-entity-editing.test.js

@@ -1,309 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	createNewPost,
-	publishPost,
-	deleteAllTemplates,
-	activateTheme,
-	canvas,
-	openDocumentSettingsSidebar,
-	pressKeyWithModifier,
-	selectBlockByClientId,
-	visitSiteEditor,
-	clickSiteEditorMenuItem,
-	navigateSiteEditorBackToRoot,
-	openSiteEditorNavigationPanel,
-	siteEditorNavigateSequence,
-} from '@wordpress/e2e-test-utils';
-
-const clickTemplateItem = async ( menus, itemName ) => {
-	await openSiteEditorNavigationPanel();
-	await navigateSiteEditorBackToRoot();
-	await siteEditorNavigateSequence( menus );
-	await clickSiteEditorMenuItem( itemName );
-};
-
-const createTemplatePart = async (
-	templatePartName = 'test-template-part',
-	isNested = false
-) => {
-	// Create new template part.
-	await insertBlock( 'Template Part' );
-	const [ createNewButton ] = await page.$x(
-		'//button[contains(text(), "New template part")]'
-	);
-	await createNewButton.click();
-	await page.waitForSelector(
-		isNested
-			? '.wp-block-template-part .wp-block-template-part.block-editor-block-list__layout'
-			: '.wp-block-template-part.block-editor-block-list__layout'
-	);
-	await openDocumentSettingsSidebar();
-
-	const advancedPanelXPath = `//div[contains(@class,"interface-interface-skeleton__sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"Advanced")]`;
-	const advancedPanel = await page.waitForXPath( advancedPanelXPath );
-	await advancedPanel.click();
-
-	const nameInputXPath = `${ advancedPanelXPath }/ancestor::div[contains(@class, "components-panel__body")]//div[contains(@class,"components-base-control__field")]//label[contains(text(), "Title")]/following-sibling::input`;
-	const nameInput = await page.waitForXPath( nameInputXPath );
-	await nameInput.click();
-
-	// Select all of the text in the title field.
-	await pressKeyWithModifier( 'primary', 'a' );
-
-	// Give the reusable block a title.
-	await page.keyboard.type( templatePartName );
-};
-
-const editTemplatePart = async ( textToAdd, isNested = false ) => {
-	await page.click(
-		`${
-			isNested
-				? '.wp-block-template-part .wp-block-template-part'
-				: '.wp-block-template-part'
-		} .block-editor-button-block-appender`
-	);
-	await page.click( '.editor-block-list-item-paragraph' );
-	for ( const text of textToAdd ) {
-		await page.keyboard.type( text );
-		await page.keyboard.press( 'Enter' );
-	}
-};
-
-const saveAllEntities = async () => {
-	if ( await openEntitySavePanel() ) {
-		await page.click( 'button.editor-entities-saved-states__save-button' );
-	}
-};
-
-const openEntitySavePanel = async () => {
-	// Open the entity save panel if it is not already open.
-	try {
-		await page.waitForSelector( '.entities-saved-states__panel', {
-			timeout: 500,
-		} );
-	} catch {
-		try {
-			await page.click(
-				'.edit-site-save-button__button[aria-disabled=false]',
-				{ timeout: 500 }
-			);
-		} catch {
-			try {
-				await page.click(
-					'.editor-post-publish-button__button.has-changes-dot',
-					{ timeout: 500 }
-				);
-			} catch {
-				return false; // Not dirty because the button is disabled.
-			}
-		}
-		await page.waitForSelector( '.entities-saved-states__panel' );
-	}
-	// If we made it this far, the panel is opened.
-
-	return true;
-};
-
-const isEntityDirty = async ( name ) => {
-	const isOpen = await openEntitySavePanel();
-	if ( ! isOpen ) {
-		return false;
-	}
-	try {
-		await page.waitForXPath(
-			`//label[@class="components-checkbox-control__label"]//strong[contains(text(),"${ name }")]`,
-			{ timeout: 1000 }
-		);
-		return true;
-	} catch {}
-	return false;
-};
-
-const removeErrorMocks = () => {
-	// TODO: Add back console mocks when
-	// https://github.com/WordPress/gutenberg/issues/17355 is fixed.
-	/* eslint-disable no-console */
-	console.warn.mockReset();
-	console.error.mockReset();
-	console.info.mockReset();
-	/* eslint-enable no-console */
-};
-
-describe( 'Multi-entity editor states', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-
-	afterAll( async () => {
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	it( 'should not display any dirty entities when loading the site editor', async () => {
-		await visitSiteEditor();
-		expect( await openEntitySavePanel() ).toBe( false );
-	} );
-
-	// Skip reason: This should be rewritten to use other methods to switching to different templates.
-	it.skip( 'should not dirty an entity by switching to it in the template dropdown', async () => {
-		await visitSiteEditor( {
-			postId: 'emptytheme//header',
-			postType: 'wp_template_part',
-		} );
-		await page.waitForFunction( () =>
-			Array.from( window.frames ).find(
-				( { name } ) => name === 'editor-canvas'
-			)
-		);
-
-		// Wait for blocks to load.
-		await canvas().waitForSelector( '.wp-block' );
-		expect( await isEntityDirty( 'header' ) ).toBe( false );
-		expect( await isEntityDirty( 'Index' ) ).toBe( false );
-
-		// Switch back and make sure it is still clean.
-		await clickTemplateItem( 'Templates', 'Index' );
-		await page.waitForFunction( () =>
-			Array.from( window.frames ).find(
-				( { name } ) => name === 'editor-canvas'
-			)
-		);
-		await canvas().waitForSelector( '.wp-block' );
-		expect( await isEntityDirty( 'header' ) ).toBe( false );
-		expect( await isEntityDirty( 'Index' ) ).toBe( false );
-
-		removeErrorMocks();
-	} );
-
-	describe( 'Multi-entity edit', () => {
-		const templatePartName = 'Test Template Part Name Edit';
-		const nestedTPName = 'Test Nested Template Part Name Edit';
-		const templateName = 'Custom Template';
-
-		beforeAll( async () => {
-			await deleteAllTemplates( 'wp_template' );
-			await deleteAllTemplates( 'wp_template_part' );
-			await createNewPost( {
-				postType: 'wp_template',
-				title: templateName,
-			} );
-			await publishPost();
-			await createTemplatePart( templatePartName );
-			await editTemplatePart( [
-				'Default template part test text.',
-				'Second paragraph test.',
-			] );
-			await createTemplatePart( nestedTPName, true );
-			await editTemplatePart(
-				[ 'Nested Template Part Text.', 'Second Nested test.' ],
-				true
-			);
-			await saveAllEntities();
-			await visitSiteEditor();
-
-			// Wait for site editor to load.
-			await canvas().waitForSelector(
-				'.wp-block-template-part.block-editor-block-list__layout'
-			);
-
-			// Our custom template shows up in the "Templates > General" menu; let's use it.
-			await clickTemplateItem(
-				[ 'Templates', 'General templates' ],
-				templateName
-			);
-			await page.waitForXPath(
-				`//h1[contains(@class, "edit-site-document-actions__title") and contains(text(), '${ templateName }')]`
-			);
-
-			removeErrorMocks();
-		} );
-
-		const saveAndWaitResponse = async () => {
-			await Promise.all( [
-				saveAllEntities(),
-
-				// Wait for the save request and the subsequent query to be
-				// fulfilled - both are requests made to /index.php route.
-				// Without that, clicked elements can lose focus sometimes
-				// when the response is received.
-				page.waitForResponse( ( response ) => {
-					return (
-						response.url().includes( 'index.php' ) &&
-						response.request().method() === 'POST'
-					);
-				} ),
-
-				page.waitForResponse( ( response ) => {
-					return (
-						response.url().includes( 'index.php' ) &&
-						response.request().method() === 'GET'
-					);
-				} ),
-			] );
-			removeErrorMocks();
-		};
-
-		it.skip( 'should only dirty the parent entity when editing the parent', async () => {
-			// Clear selection so that the block is not added to the template part.
-			await insertBlock( 'Paragraph' );
-
-			// Add changes to the main parent entity.
-			await page.keyboard.type( 'Test.' );
-
-			expect( await isEntityDirty( templateName ) ).toBe( true );
-			expect( await isEntityDirty( templatePartName ) ).toBe( false );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
-			await saveAndWaitResponse();
-		} );
-
-		it.skip( 'should only dirty the child when editing the child', async () => {
-			// Select parent TP to unlock selecting content.
-			await canvas().click( '.wp-block-template-part' );
-			await canvas().click(
-				'.wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-			await page.keyboard.type( 'Some more test words!' );
-
-			expect( await isEntityDirty( templateName ) ).toBe( false );
-			expect( await isEntityDirty( templatePartName ) ).toBe( true );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
-			await saveAndWaitResponse();
-		} );
-
-		it.skip( 'should only dirty the nested entity when editing the nested entity', async () => {
-			// Select parent TP to unlock selecting child.
-			await canvas().click( '.wp-block-template-part' );
-			// Select child TP to unlock selecting content.
-			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part'
-			);
-			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-			await page.keyboard.type( 'Nested test words!' );
-
-			expect( await isEntityDirty( templateName ) ).toBe( false );
-			expect( await isEntityDirty( templatePartName ) ).toBe( false );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( true );
-			await saveAndWaitResponse();
-		} );
-
-		it.skip( 'should not allow selecting template part content without parent selected', async () => {
-			// Unselect blocks.
-			await selectBlockByClientId();
-			// Try to select a child block of a template part.
-			await canvas().click(
-				'.wp-block-template-part .wp-block-template-part .wp-block[data-type="core/paragraph"]'
-			);
-
-			const selectedBlock = await page.evaluate( () => {
-				return wp.data.select( 'core/block-editor' ).getSelectedBlock();
-			} );
-			expect( selectedBlock?.name ).toBe( 'core/template-part' );
-		} );
-	} );
-} );