add an option to check/select blocks tab in insertBlock/searchForBlock

packages/e2e-test-utils/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+-   Add an optional `options` param to `insertBlock` and `searchForBlocks` which can contain the `checkSelectedTab` property that defaults to `false`. If we set this to `true` there will be a check if the block types tab is selected, and if not it will select it. This is useful in cases where the block types tab is not the first tab in the global inserter ([#45203](https://github.com/WordPress/gutenberg/pull/45203)).
+
 ## 8.4.0 (2022-10-19)
 
 ## 8.3.0 (2022-10-05)

packages/e2e-test-utils/README.md

@@ -481,6 +481,8 @@ result that appears. It then waits briefly for the block list to update.
 _Parameters_
 
 -   _searchTerm_ `string`: The text to search the inserter for.
+-   _options_ `[Object]`: Options for the searchForBlock function.
+-   _options.checkSelectedTab_ `[boolean]`: Whether to check and/or select the blocks tab in the inserter.
 
 ### insertBlockDirectoryBlock
 
@@ -715,6 +717,8 @@ Search for block in the global inserter
 _Parameters_
 
 -   _searchTerm_ `string`: The text to search the inserter for.
+-   _options_ `[Object]`: Options for the searchForBlock function.
+-   _options.checkSelectedTab_ `[boolean]`: Whether to check and/or select the blocks tab in the inserter.
 
 ### searchForPattern
 

packages/e2e-test-utils/src/inserter.js

@@ -101,8 +101,8 @@ async function waitForInserterCloseAndContentFocus() {
 
 async function selectInserterTab( tabName ) {
 	try {
-		// There are cases that the inserter has no tabs, but we always show the block types tab.
-		// In these cases, we can skip the tab selection.
+		// There are cases that the inserter has no tabs, where
+		// usually the block types tab is the main content.
 		const tab = await page.waitForXPath(
 			`//div[contains(@class, "block-editor-inserter__tabs")]//button[.="${ tabName }"]`,
 			{ timeout: 3000 }
@@ -119,11 +119,18 @@ async function selectInserterTab( tabName ) {
 /**
  * Search for block in the global inserter
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string}  searchTerm                       The text to search the inserter for.
+ * @param {Object}  [options={}]                     Options for the searchForBlock function.
+ * @param {boolean} [options.checkSelectedTab=false] Whether to check and/or select the blocks tab in the inserter.
  */
-export async function searchForBlock( searchTerm ) {
+export async function searchForBlock(
+	searchTerm,
+	{ checkSelectedTab = false } = {}
+) {
 	await openGlobalBlockInserter();
-	await selectInserterTab( 'Blocks' );
+	if ( checkSelectedTab ) {
+		await selectInserterTab( 'Blocks' );
+	}
 	await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
 	await page.focus( INSERTER_SEARCH_SELECTOR );
 	await pressKeyWithModifier( 'primary', 'a' );
@@ -162,10 +169,15 @@ export async function searchForReusableBlock( searchTerm ) {
  * Opens the inserter, searches for the given term, then selects the first
  * result that appears. It then waits briefly for the block list to update.
  *
- * @param {string} searchTerm The text to search the inserter for.
+ * @param {string}  searchTerm                       The text to search the inserter for.
+ * @param {Object}  [options={}]                     Options for the searchForBlock function.
+ * @param {boolean} [options.checkSelectedTab=false] Whether to check and/or select the blocks tab in the inserter.
  */
-export async function insertBlock( searchTerm ) {
-	await searchForBlock( searchTerm );
+export async function insertBlock(
+	searchTerm,
+	{ checkSelectedTab = false } = {}
+) {
+	await searchForBlock( searchTerm, { checkSelectedTab } );
 	const insertButton = await page.waitForXPath(
 		`//button//span[contains(text(), '${ searchTerm }')]`
 	);

packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js

@@ -274,7 +274,7 @@ describe( 'Multi-entity save flow', () => {
 			await page.click( 'button[aria-label="Close List View Sidebar"]' );
 
 			// Insert something to dirty the editor.
-			await insertBlock( 'Paragraph' );
+			await insertBlock( 'Paragraph', { checkSelectedTab: true } );
 
 			const enabledButton = await page.waitForSelector(
 				activeSaveSiteSelector
@@ -303,7 +303,7 @@ describe( 'Multi-entity save flow', () => {
 			} );
 
 			// Insert a paragraph at the bottom.
-			await insertBlock( 'Paragraph' );
+			await insertBlock( 'Paragraph', { checkSelectedTab: true } );
 
 			// Open the block settings.
 			await page.click( 'button[aria-label="Settings"]' );

packages/e2e-tests/specs/site-editor/settings-sidebar.test.js

@@ -99,11 +99,11 @@ describe( 'Settings sidebar', () => {
 				'Template (selected)'
 			);
 			// By inserting the block is also selected.
-			await insertBlock( 'Heading' );
+			await insertBlock( 'Heading', { checkSelectedTab: true } );
 			expect( await getActiveTabLabel() ).toEqual( 'Block (selected)' );
 		} );
 		it( 'should switch to Template tab when a block was selected and we select the Template', async () => {
-			await insertBlock( 'Heading' );
+			await insertBlock( 'Heading', { checkSelectedTab: true } );
 			await toggleSidebar();
 			expect( await getActiveTabLabel() ).toEqual( 'Block (selected)' );
 			await page.evaluate( () => {