Fix unable to close the block inserter when clicking on the toggle bu…

…tton

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 }

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', () => {