Fix clicking on the toggle button not closing the block inserter

packages/e2e-test-utils-playwright/src/editor/get-blocks.ts

@@ -12,10 +12,19 @@ import type { Editor } from './index';
  */
 export async function getBlocks( this: Editor ) {
 	return await this.page.evaluate( () => {
+		const blocks = window.wp.data.select( 'core/block-editor' ).getBlocks();
+
 		// The editor might still contain an unmodified empty block even when it's technically "empty".
-		if ( window.wp.data.select( 'core/editor' ).isEditedPostEmpty() ) {
-			return [];
+		if ( blocks.length === 1 ) {
+			const blockName = blocks[ 0 ].name;
+			if (
+				blockName === window.wp.blocks.getDefaultBlockName() ||
+				blockName === window.wp.blocks.getFreeformContentHandlerName()
+			) {
+				return [];
+			}
 		}
-		return window.wp.data.select( 'core/block-editor' ).getBlocks();
+
+		return blocks;
 	} );
 }

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -91,10 +91,13 @@ function HeaderToolbar() {
 			/>
 		</>
 	);
-	const openInserter = useCallback( () => {
+	const toggleInserter = useCallback( () => {
 		if ( isInserterOpened ) {
-			// Focusing the inserter button closes the inserter popover.
+			// Focusing the inserter button should close the inserter popover.
+			// However, there are some cases it won't close when the focus is lost.
+			// See https://github.com/WordPress/gutenberg/issues/43090 for more details.
 			inserterButton.current.focus();
+			setIsInserterOpened( false );
 		} else {
 			setIsInserterOpened( true );
 		}
@@ -120,7 +123,7 @@ function HeaderToolbar() {
 					variant="primary"
 					isPressed={ isInserterOpened }
 					onMouseDown={ preventDefault }
-					onClick={ openInserter }
+					onClick={ toggleInserter }
 					disabled={ ! isInserterEnabled }
 					icon={ plus }
 					label={ showIconLabels ? shortLabel : longLabel }

packages/edit-site/src/components/header-edit-mode/index.js

@@ -100,10 +100,13 @@ export default function HeaderEditMode() {
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const openInserter = useCallback( () => {
+	const toggleInserter = useCallback( () => {
 		if ( isInserterOpen ) {
-			// Focusing the inserter button closes the inserter popover.
+			// Focusing the inserter button should close the inserter popover.
+			// However, there are some cases it won't close when the focus is lost.
+			// See https://github.com/WordPress/gutenberg/issues/43090 for more details.
 			inserterButton.current.focus();
+			setIsInserterOpened( false );
 		} else {
 			setIsInserterOpened( true );
 		}
@@ -148,7 +151,7 @@ export default function HeaderEditMode() {
 							variant="primary"
 							isPressed={ isInserterOpen }
 							onMouseDown={ preventDefault }
-							onClick={ openInserter }
+							onClick={ toggleInserter }
 							disabled={ ! isVisualMode }
 							icon={ plus }
 							label={ showIconLabels ? shortLabel : longLabel }

test/e2e/specs/editor/various/inserting-blocks.spec.js

@@ -289,6 +289,31 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 
 		await expect.poll( editor.getEditedPostContent ).toBe( beforeContent );
 	} );
+
+	// A test for https://github.com/WordPress/gutenberg/issues/43090.
+	test( 'should close the inserter when clicking on the toggle button', async ( {
+		page,
+		editor,
+	} ) => {
+		const inserterButton = page.getByRole( 'button', {
+			name: 'Toggle block inserter',
+		} );
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		await inserterButton.click();
+
+		await blockLibrary.getByRole( 'option', { name: 'Buttons' } ).click();
+
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [ { name: 'core/buttons' } ] );
+
+		await inserterButton.click();
+
+		await expect( blockLibrary ).toBeHidden();
+	} );
 } );
 
 test.describe( 'insert media from inserter', () => {

test/e2e/specs/site-editor/site-editor-inserter.spec.js

@@ -40,4 +40,31 @@ test.describe( 'Site Editor Inserter', () => {
 			)
 		).toBeHidden();
 	} );
+
+	// A test for https://github.com/WordPress/gutenberg/issues/43090.
+	test( 'should close the inserter when clicking on the toggle button', async ( {
+		page,
+		editor,
+	} ) => {
+		const inserterButton = page.getByRole( 'button', {
+			name: 'Toggle block inserter',
+		} );
+		const blockLibrary = page.getByRole( 'region', {
+			name: 'Block Library',
+		} );
+
+		const beforeBlocks = await editor.getBlocks();
+
+		await inserterButton.click();
+		await blockLibrary.getByRole( 'tab', { name: 'Blocks' } ).click();
+		await blockLibrary.getByRole( 'option', { name: 'Buttons' } ).click();
+
+		await expect
+			.poll( editor.getBlocks )
+			.toMatchObject( [ ...beforeBlocks, { name: 'core/buttons' } ] );
+
+		await inserterButton.click();
+
+		await expect( blockLibrary ).toBeHidden();
+	} );
 } );