From 38868d577bb7f6f17aea63203a3f87eb3c8aed18 Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Tue, 14 Dec 2021 04:07:40 -0500
Subject: [PATCH 01/16] Add Close button to Block Inserter. Adjust the
 useFocusOnMount hook to be able to focus second element.

---
 packages/compose/README.md                          |  2 +-
 .../compose/src/hooks/use-focus-on-mount/index.js   | 13 +++++++------
 .../secondary-sidebar/inserter-sidebar.js           | 10 +++++++++-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/compose/README.md b/packages/compose/README.md
index 32c8abb4e3bd0..78ef158c9b1d1 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -240,7 +240,7 @@ const WithFocusOnMount = () => {
 
 _Parameters_
 
--   _focusOnMount_ `boolean | 'firstElement'`: Focus on mount mode.
+-   _focusOnMount_ `boolean | 'firstElement' | 'secondElement'`: Focus on mount mode.
 
 _Returns_
 
diff --git a/packages/compose/src/hooks/use-focus-on-mount/index.js b/packages/compose/src/hooks/use-focus-on-mount/index.js
index a971c3dac54a1..cde275975500a 100644
--- a/packages/compose/src/hooks/use-focus-on-mount/index.js
+++ b/packages/compose/src/hooks/use-focus-on-mount/index.js
@@ -7,7 +7,7 @@ import { focus } from '@wordpress/dom';
 /**
  * Hook used to focus the first tabbable element on mount.
  *
- * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.
+ * @param {boolean | 'firstElement' | 'secondElement'} focusOnMount Focus on mount mode.
  * @return {import('react').RefCallback<HTMLElement>} Ref callback.
  *
  * @example
@@ -42,12 +42,13 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 
 		let target = node;
 
-		if ( focusOnMountRef.current === 'firstElement' ) {
-			const firstTabbable = focus.tabbable.find( node )[ 0 ];
+		let firstTabbable = focus.tabbable.find( node )[ 0 ];
+		if ( focusOnMountRef.current === 'secondElement' ) {
+			firstTabbable = focus.tabbable.find( node )[ 1 ];
+		}
 
-			if ( firstTabbable ) {
-				target = /** @type {HTMLElement} */ ( firstTabbable );
-			}
+		if ( firstTabbable ) {
+			target = /** @type {HTMLElement} */ ( firstTabbable );
 		}
 
 		target.focus();
diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
index c0f4e79dffddf..9e7c65d08d9e8 100644
--- a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
@@ -2,13 +2,14 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
 import { close } from '@wordpress/icons';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -30,6 +31,7 @@ export default function InserterSidebar() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
+		focusOnMount: 'secondElement',
 	} );
 
 	return (
@@ -44,6 +46,12 @@ export default function InserterSidebar() {
 					onClick={ () => setIsInserterOpened( false ) }
 				/>
 			</div>
+			<VisuallyHidden as="div">
+				<Button
+					label={ __( 'Close block inserter' ) }
+					onClick={ () => setIsInserterOpened( false ) }
+				/>
+			</VisuallyHidden>
 			<div className="edit-post-editor__inserter-panel-content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }

From 83fb9e06caacac0205decf7044d7034badf96654 Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Tue, 14 Dec 2021 05:28:34 -0500
Subject: [PATCH 02/16] Make tests stable.

---
 packages/compose/src/hooks/use-focus-on-mount/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/compose/src/hooks/use-focus-on-mount/index.js b/packages/compose/src/hooks/use-focus-on-mount/index.js
index cde275975500a..5c39101393e34 100644
--- a/packages/compose/src/hooks/use-focus-on-mount/index.js
+++ b/packages/compose/src/hooks/use-focus-on-mount/index.js
@@ -42,7 +42,10 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 
 		let target = node;
 
-		let firstTabbable = focus.tabbable.find( node )[ 0 ];
+		let firstTabbable = null;
+		if ( focusOnMountRef.current === 'firstElement' ) {
+			firstTabbable = focus.tabbable.find( node )[ 0 ];
+		}
 		if ( focusOnMountRef.current === 'secondElement' ) {
 			firstTabbable = focus.tabbable.find( node )[ 1 ];
 		}

From ab9bd8d0c3ec752d16b5262702346c58137375fd Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Tue, 14 Dec 2021 05:52:15 -0500
Subject: [PATCH 03/16] Remove CSS and use the viewport hook to toggle between
 visual button and visually hidden button.

---
 .../secondary-sidebar/inserter-sidebar.js     | 31 ++++++++++++-------
 .../components/secondary-sidebar/style.scss   |  4 ---
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
index 9e7c65d08d9e8..69111c83edab1 100644
--- a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
@@ -40,18 +40,25 @@ export default function InserterSidebar() {
 			{ ...inserterDialogProps }
 			className="edit-post-editor__inserter-panel"
 		>
-			<div className="edit-post-editor__inserter-panel-header">
-				<Button
-					icon={ close }
-					onClick={ () => setIsInserterOpened( false ) }
-				/>
-			</div>
-			<VisuallyHidden as="div">
-				<Button
-					label={ __( 'Close block inserter' ) }
-					onClick={ () => setIsInserterOpened( false ) }
-				/>
-			</VisuallyHidden>
+			{ isMobileViewport ?
+				<VisuallyHidden as="div">
+					<div className="edit-post-editor__inserter-panel-header">
+						<Button
+							icon={ close }
+							label={ __( 'Close block inserter' ) }
+							onClick={ () => setIsInserterOpened( false ) }
+						/>
+					</div>
+				</VisuallyHidden>
+			:
+				<div className="edit-post-editor__inserter-panel-header">
+					<Button
+						icon={ close }
+						label={ __( 'Close block inserter' ) }
+						onClick={ () => setIsInserterOpened( false ) }
+					/>
+				</div>
+			}
 			<div className="edit-post-editor__inserter-panel-content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }
diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss
index 710319654a357..1b350148038d5 100644
--- a/packages/edit-post/src/components/secondary-sidebar/style.scss
+++ b/packages/edit-post/src/components/secondary-sidebar/style.scss
@@ -16,10 +16,6 @@
 	padding-right: $grid-unit-10;
 	display: flex;
 	justify-content: flex-end;
-
-	@include break-medium() {
-		display: none;
-	}
 }
 
 .edit-post-editor__inserter-panel-content,

From 563734613094c4d324d9987fe50cda33da9f2787 Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Tue, 14 Dec 2021 06:04:46 -0500
Subject: [PATCH 04/16] Fix tests.

---
 .../src/components/secondary-sidebar/inserter-sidebar.js    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
index 69111c83edab1..4e46ad6a6223f 100644
--- a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
@@ -40,7 +40,7 @@ export default function InserterSidebar() {
 			{ ...inserterDialogProps }
 			className="edit-post-editor__inserter-panel"
 		>
-			{ isMobileViewport ?
+			{ isMobileViewport ? (
 				<VisuallyHidden as="div">
 					<div className="edit-post-editor__inserter-panel-header">
 						<Button
@@ -50,7 +50,7 @@ export default function InserterSidebar() {
 						/>
 					</div>
 				</VisuallyHidden>
-			:
+			) : (
 				<div className="edit-post-editor__inserter-panel-header">
 					<Button
 						icon={ close }
@@ -58,7 +58,7 @@ export default function InserterSidebar() {
 						onClick={ () => setIsInserterOpened( false ) }
 					/>
 				</div>
-			}
+			) }
 			<div className="edit-post-editor__inserter-panel-content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }

From cc51c957ce35abb65b68a9551bd46208a5840027 Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Tue, 14 Dec 2021 13:36:47 -0500
Subject: [PATCH 05/16] Toggle the tag type and save some code room.

---
 .../secondary-sidebar/inserter-sidebar.js     | 27 ++++++-------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
index 4e46ad6a6223f..4c56f75cbb994 100644
--- a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
@@ -29,6 +29,7 @@ export default function InserterSidebar() {
 	const { setIsInserterOpened } = useDispatch( editPostStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const TagName = isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
 		focusOnMount: 'secondElement',
@@ -40,25 +41,13 @@ export default function InserterSidebar() {
 			{ ...inserterDialogProps }
 			className="edit-post-editor__inserter-panel"
 		>
-			{ isMobileViewport ? (
-				<VisuallyHidden as="div">
-					<div className="edit-post-editor__inserter-panel-header">
-						<Button
-							icon={ close }
-							label={ __( 'Close block inserter' ) }
-							onClick={ () => setIsInserterOpened( false ) }
-						/>
-					</div>
-				</VisuallyHidden>
-			) : (
-				<div className="edit-post-editor__inserter-panel-header">
-					<Button
-						icon={ close }
-						label={ __( 'Close block inserter' ) }
-						onClick={ () => setIsInserterOpened( false ) }
-					/>
-				</div>
-			) }
+		<TagName className="edit-post-editor__inserter-panel-header">
+			<Button
+				icon={ close }
+				label={ __( 'Close block inserter' ) }
+				onClick={ () => setIsInserterOpened( false ) }
+			/>
+		</TagName>
 			<div className="edit-post-editor__inserter-panel-content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }

From 1dbdad098c946005e760ab078c683f14b03af58b Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Tue, 14 Dec 2021 14:13:37 -0500
Subject: [PATCH 06/16] Focus block inserter search form.

---
 .../src/components/inserter/menu.js           | 20 ++++++++++++++++++-
 packages/compose/README.md                    |  2 +-
 .../src/hooks/use-focus-on-mount/index.js     | 14 +++++--------
 .../secondary-sidebar/inserter-sidebar.js     | 16 +++++++--------
 4 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 0e691f8e4a195..891801b17bd79 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -1,7 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { useState, useCallback, useMemo } from '@wordpress/element';
+import {
+	useState,
+	useRef,
+	useEffect,
+	useCallback,
+	useMemo,
+} from '@wordpress/element';
 import { VisuallyHidden, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -168,6 +174,17 @@ function InserterMenu( {
 		[ blocksTab, patternsTab, reusableBlocksTab ]
 	);
 
+	const searchControlRef = useRef();
+	const focusOnceRef = useRef( false );
+	useEffect( () => {
+		// Make sure focus only occurs once
+		if ( focusOnceRef.current ) {
+			return;
+		}
+		searchControlRef.current.focus();
+		focusOnceRef.current = true;
+	} );
+
 	return (
 		<div className="block-editor-inserter__menu">
 			<div className="block-editor-inserter__main-area">
@@ -175,6 +192,7 @@ function InserterMenu( {
 				<div className="block-editor-inserter__content">
 					<SearchControl
 						className="block-editor-inserter__search"
+						ref={ searchControlRef }
 						onChange={ ( value ) => {
 							if ( hoveredItem ) setHoveredItem( null );
 							setFilterValue( value );
diff --git a/packages/compose/README.md b/packages/compose/README.md
index 78ef158c9b1d1..32c8abb4e3bd0 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -240,7 +240,7 @@ const WithFocusOnMount = () => {
 
 _Parameters_
 
--   _focusOnMount_ `boolean | 'firstElement' | 'secondElement'`: Focus on mount mode.
+-   _focusOnMount_ `boolean | 'firstElement'`: Focus on mount mode.
 
 _Returns_
 
diff --git a/packages/compose/src/hooks/use-focus-on-mount/index.js b/packages/compose/src/hooks/use-focus-on-mount/index.js
index 5c39101393e34..a971c3dac54a1 100644
--- a/packages/compose/src/hooks/use-focus-on-mount/index.js
+++ b/packages/compose/src/hooks/use-focus-on-mount/index.js
@@ -7,7 +7,7 @@ import { focus } from '@wordpress/dom';
 /**
  * Hook used to focus the first tabbable element on mount.
  *
- * @param {boolean | 'firstElement' | 'secondElement'} focusOnMount Focus on mount mode.
+ * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.
  * @return {import('react').RefCallback<HTMLElement>} Ref callback.
  *
  * @example
@@ -42,16 +42,12 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 
 		let target = node;
 
-		let firstTabbable = null;
 		if ( focusOnMountRef.current === 'firstElement' ) {
-			firstTabbable = focus.tabbable.find( node )[ 0 ];
-		}
-		if ( focusOnMountRef.current === 'secondElement' ) {
-			firstTabbable = focus.tabbable.find( node )[ 1 ];
-		}
+			const firstTabbable = focus.tabbable.find( node )[ 0 ];
 
-		if ( firstTabbable ) {
-			target = /** @type {HTMLElement} */ ( firstTabbable );
+			if ( firstTabbable ) {
+				target = /** @type {HTMLElement} */ ( firstTabbable );
+			}
 		}
 
 		target.focus();
diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
index 4c56f75cbb994..7a3f2a3dc99b6 100644
--- a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
@@ -32,7 +32,7 @@ export default function InserterSidebar() {
 	const TagName = isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
-		focusOnMount: 'secondElement',
+		focusOnMount: null,
 	} );
 
 	return (
@@ -41,13 +41,13 @@ export default function InserterSidebar() {
 			{ ...inserterDialogProps }
 			className="edit-post-editor__inserter-panel"
 		>
-		<TagName className="edit-post-editor__inserter-panel-header">
-			<Button
-				icon={ close }
-				label={ __( 'Close block inserter' ) }
-				onClick={ () => setIsInserterOpened( false ) }
-			/>
-		</TagName>
+			<TagName className="edit-post-editor__inserter-panel-header">
+				<Button
+					icon={ close }
+					label={ __( 'Close block inserter' ) }
+					onClick={ () => setIsInserterOpened( false ) }
+				/>
+			</TagName>
 			<div className="edit-post-editor__inserter-panel-content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }

From 7975ec1157b9eed177ed8e63aa21ca8abd8483b5 Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Tue, 14 Dec 2021 14:39:26 -0500
Subject: [PATCH 07/16] Pass the open state to useEffect.

---
 packages/block-editor/src/components/inserter/library.js | 2 ++
 packages/block-editor/src/components/inserter/menu.js    | 9 ++++-----
 packages/edit-post/src/components/layout/index.js        | 2 +-
 .../src/components/secondary-sidebar/inserter-sidebar.js | 3 ++-
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index b0262756488db..4be5138916180 100644
--- a/packages/block-editor/src/components/inserter/library.js
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -24,6 +24,7 @@ function InserterLibrary( {
 	__experimentalFilterValue,
 	onSelect = noop,
 	shouldFocusBlock = false,
+	isOpen = false,
 } ) {
 	const destinationRootClientId = useSelect(
 		( select ) => {
@@ -38,6 +39,7 @@ function InserterLibrary( {
 
 	return (
 		<InserterMenu
+			isOpen={ isOpen }
 			onSelect={ onSelect }
 			rootClientId={ destinationRootClientId }
 			clientId={ clientId }
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 891801b17bd79..2d6b90f17be86 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -35,6 +35,7 @@ function InserterMenu( {
 	showMostUsedBlocks,
 	__experimentalFilterValue = '',
 	shouldFocusBlock = true,
+	isOpen = false,
 } ) {
 	const [ filterValue, setFilterValue ] = useState(
 		__experimentalFilterValue
@@ -175,15 +176,13 @@ function InserterMenu( {
 	);
 
 	const searchControlRef = useRef();
-	const focusOnceRef = useRef( false );
 	useEffect( () => {
-		// Make sure focus only occurs once
-		if ( focusOnceRef.current ) {
+		// Make sure focus only occurs if open
+		if ( ! isOpen ) {
 			return;
 		}
 		searchControlRef.current.focus();
-		focusOnceRef.current = true;
-	} );
+	}, [ isOpen ] );
 
 	return (
 		<div className="block-editor-inserter__menu">
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 61e87067947cd..cc39a4e0a7437 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -170,7 +170,7 @@ function Layout( { styles } ) {
 
 	const secondarySidebar = () => {
 		if ( mode === 'visual' && isInserterOpened ) {
-			return <InserterSidebar />;
+			return <InserterSidebar isOpen={ isInserterOpened } />;
 		}
 		if ( mode === 'visual' && isListViewOpened ) {
 			return <ListViewSidebar />;
diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
index 7a3f2a3dc99b6..9021d54846ff2 100644
--- a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
@@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { store as editPostStore } from '../../store';
 
-export default function InserterSidebar() {
+export default function InserterSidebar( isOpen = false ) {
 	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
 		const { isFeatureActive, __experimentalGetInsertionPoint } = select(
 			editPostStore
@@ -50,6 +50,7 @@ export default function InserterSidebar() {
 			</TagName>
 			<div className="edit-post-editor__inserter-panel-content">
 				<Library
+					isOpen={ isOpen }
 					showMostUsedBlocks={ showMostUsedBlocks }
 					showInserterHelpPanel
 					shouldFocusBlock={ isMobileViewport }

From 76962cbb35ade48a1392a8ee3dc6fba32a98abdf Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Thu, 16 Dec 2021 17:31:11 -0500
Subject: [PATCH 08/16] Use ref forwarding.

---
 .../src/components/inserter/library.js        |  8 ++++----
 .../src/components/inserter/menu.js           | 19 ++++---------------
 .../secondary-sidebar/inserter-sidebar.js     | 11 ++++++++++-
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index 4be5138916180..aeec923cbbd25 100644
--- a/packages/block-editor/src/components/inserter/library.js
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -7,6 +7,7 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -24,8 +25,7 @@ function InserterLibrary( {
 	__experimentalFilterValue,
 	onSelect = noop,
 	shouldFocusBlock = false,
-	isOpen = false,
-} ) {
+}, ref ) {
 	const destinationRootClientId = useSelect(
 		( select ) => {
 			const { getBlockRootClientId } = select( blockEditorStore );
@@ -39,7 +39,7 @@ function InserterLibrary( {
 
 	return (
 		<InserterMenu
-			isOpen={ isOpen }
+			ref={ ref }
 			onSelect={ onSelect }
 			rootClientId={ destinationRootClientId }
 			clientId={ clientId }
@@ -53,4 +53,4 @@ function InserterLibrary( {
 	);
 }
 
-export default InserterLibrary;
+export default forwardRef( InserterLibrary );
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 2d6b90f17be86..ea9d5630cfc13 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -3,8 +3,7 @@
  */
 import {
 	useState,
-	useRef,
-	useEffect,
+	forwardRef,
 	useCallback,
 	useMemo,
 } from '@wordpress/element';
@@ -35,8 +34,7 @@ function InserterMenu( {
 	showMostUsedBlocks,
 	__experimentalFilterValue = '',
 	shouldFocusBlock = true,
-	isOpen = false,
-} ) {
+}, ref ) {
 	const [ filterValue, setFilterValue ] = useState(
 		__experimentalFilterValue
 	);
@@ -175,23 +173,14 @@ function InserterMenu( {
 		[ blocksTab, patternsTab, reusableBlocksTab ]
 	);
 
-	const searchControlRef = useRef();
-	useEffect( () => {
-		// Make sure focus only occurs if open
-		if ( ! isOpen ) {
-			return;
-		}
-		searchControlRef.current.focus();
-	}, [ isOpen ] );
-
 	return (
 		<div className="block-editor-inserter__menu">
 			<div className="block-editor-inserter__main-area">
 				{ /* the following div is necessary to fix the sticky position of the search form */ }
 				<div className="block-editor-inserter__content">
 					<SearchControl
+						ref={ ref }
 						className="block-editor-inserter__search"
-						ref={ searchControlRef }
 						onChange={ ( value ) => {
 							if ( hoveredItem ) setHoveredItem( null );
 							setFilterValue( value );
@@ -236,4 +225,4 @@ function InserterMenu( {
 	);
 }
 
-export default InserterMenu;
+export default forwardRef( InserterMenu );
diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
index 9021d54846ff2..669323445d8c7 100644
--- a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
@@ -10,6 +10,7 @@ import {
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -35,6 +36,14 @@ export default function InserterSidebar( isOpen = false ) {
 		focusOnMount: null,
 	} );
 
+	const inserterRef = useRef();
+
+	useEffect( () => {
+		if ( isOpen ) {
+			inserterRef.current.focus();
+		}
+		}, [ isOpen ] );
+
 	return (
 		<div
 			ref={ inserterDialogRef }
@@ -50,7 +59,7 @@ export default function InserterSidebar( isOpen = false ) {
 			</TagName>
 			<div className="edit-post-editor__inserter-panel-content">
 				<Library
-					isOpen={ isOpen }
+					ref={ inserterRef }
 					showMostUsedBlocks={ showMostUsedBlocks }
 					showInserterHelpPanel
 					shouldFocusBlock={ isMobileViewport }

From 1afc148892a618eac3d15c84cfeb86afd0b9e72c Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Thu, 16 Dec 2021 18:42:31 -0500
Subject: [PATCH 09/16] Try to fix tests.

---
 package-lock.json | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b339d41213653..b56e59cbf6704 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18840,16 +18840,6 @@
 						"yauzl": "^2.7.0"
 					},
 					"dependencies": {
-						"are-we-there-yet": {
-							"version": "2.0.0",
-							"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
-							"integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
-							"dev": true,
-							"requires": {
-								"delegates": "^1.0.0",
-								"readable-stream": "^3.6.0"
-							}
-						},
 						"gauge": {
 							"version": "3.0.1",
 							"resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.1.tgz",

From 9764c59c6a4cd5de6548188c8437584ffb7ba9e0 Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Thu, 16 Dec 2021 18:55:45 -0500
Subject: [PATCH 10/16] Revert package-lock.json changes.

---
 package-lock.json | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index b56e59cbf6704..b339d41213653 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18840,6 +18840,16 @@
 						"yauzl": "^2.7.0"
 					},
 					"dependencies": {
+						"are-we-there-yet": {
+							"version": "2.0.0",
+							"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+							"integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+							"dev": true,
+							"requires": {
+								"delegates": "^1.0.0",
+								"readable-stream": "^3.6.0"
+							}
+						},
 						"gauge": {
 							"version": "3.0.1",
 							"resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.1.tgz",

From 0d9fdf2cdb511b192c678bf3e500e89ef8d457f7 Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Thu, 16 Dec 2021 19:03:49 -0500
Subject: [PATCH 11/16] Fix tests.

---
 .../src/components/secondary-sidebar/inserter-sidebar.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
index 669323445d8c7..887ac8cdcf006 100644
--- a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
@@ -42,7 +42,7 @@ export default function InserterSidebar( isOpen = false ) {
 		if ( isOpen ) {
 			inserterRef.current.focus();
 		}
-		}, [ isOpen ] );
+	}, [ isOpen ] );
 
 	return (
 		<div

From 2a97df2264989431282cb7b474a032b2f620e028 Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Thu, 16 Dec 2021 19:26:04 -0500
Subject: [PATCH 12/16] Fix tests.

---
 .../src/components/inserter/library.js        | 25 ++++++++-------
 .../src/components/inserter/menu.js           | 32 +++++++++----------
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index aeec923cbbd25..cbc2a9e8923b6 100644
--- a/packages/block-editor/src/components/inserter/library.js
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -15,17 +15,20 @@ import { forwardRef } from '@wordpress/element';
 import InserterMenu from './menu';
 import { store as blockEditorStore } from '../../store';
 
-function InserterLibrary( {
-	rootClientId,
-	clientId,
-	isAppender,
-	showInserterHelpPanel,
-	showMostUsedBlocks = false,
-	__experimentalInsertionIndex,
-	__experimentalFilterValue,
-	onSelect = noop,
-	shouldFocusBlock = false,
-}, ref ) {
+function InserterLibrary(
+	{
+		rootClientId,
+		clientId,
+		isAppender,
+		showInserterHelpPanel,
+		showMostUsedBlocks = false,
+		__experimentalInsertionIndex,
+		__experimentalFilterValue,
+		onSelect = noop,
+		shouldFocusBlock = false,
+	},
+	ref
+) {
 	const destinationRootClientId = useSelect(
 		( select ) => {
 			const { getBlockRootClientId } = select( blockEditorStore );
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index ea9d5630cfc13..a15252809b3e1 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -1,12 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	useState,
-	forwardRef,
-	useCallback,
-	useMemo,
-} from '@wordpress/element';
+import { useState, forwardRef, useCallback, useMemo } from '@wordpress/element';
 import { VisuallyHidden, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -24,17 +19,20 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
 
-function InserterMenu( {
-	rootClientId,
-	clientId,
-	isAppender,
-	__experimentalInsertionIndex,
-	onSelect,
-	showInserterHelpPanel,
-	showMostUsedBlocks,
-	__experimentalFilterValue = '',
-	shouldFocusBlock = true,
-}, ref ) {
+function InserterMenu(
+	{
+		rootClientId,
+		clientId,
+		isAppender,
+		__experimentalInsertionIndex,
+		onSelect,
+		showInserterHelpPanel,
+		showMostUsedBlocks,
+		__experimentalFilterValue = '',
+		shouldFocusBlock = true,
+	},
+	ref
+) {
 	const [ filterValue, setFilterValue ] = useState(
 		__experimentalFilterValue
 	);

From 64f0b8f6cfed330ec9150a104972e7f876f7358a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 17 Dec 2021 12:11:21 +0100
Subject: [PATCH 13/16] Fix inserter input focus

---
 .../src/components/inserter/library.js        | 29 ++++++++----------
 .../src/components/inserter/menu.js           | 30 ++++++++-----------
 .../edit-post/src/components/layout/index.js  |  2 +-
 .../secondary-sidebar/inserter-sidebar.js     | 21 ++++++-------
 4 files changed, 37 insertions(+), 45 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index cbc2a9e8923b6..b0262756488db 100644
--- a/packages/block-editor/src/components/inserter/library.js
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -7,7 +7,6 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,20 +14,17 @@ import { forwardRef } from '@wordpress/element';
 import InserterMenu from './menu';
 import { store as blockEditorStore } from '../../store';
 
-function InserterLibrary(
-	{
-		rootClientId,
-		clientId,
-		isAppender,
-		showInserterHelpPanel,
-		showMostUsedBlocks = false,
-		__experimentalInsertionIndex,
-		__experimentalFilterValue,
-		onSelect = noop,
-		shouldFocusBlock = false,
-	},
-	ref
-) {
+function InserterLibrary( {
+	rootClientId,
+	clientId,
+	isAppender,
+	showInserterHelpPanel,
+	showMostUsedBlocks = false,
+	__experimentalInsertionIndex,
+	__experimentalFilterValue,
+	onSelect = noop,
+	shouldFocusBlock = false,
+} ) {
 	const destinationRootClientId = useSelect(
 		( select ) => {
 			const { getBlockRootClientId } = select( blockEditorStore );
@@ -42,7 +38,6 @@ function InserterLibrary(
 
 	return (
 		<InserterMenu
-			ref={ ref }
 			onSelect={ onSelect }
 			rootClientId={ destinationRootClientId }
 			clientId={ clientId }
@@ -56,4 +51,4 @@ function InserterLibrary(
 	);
 }
 
-export default forwardRef( InserterLibrary );
+export default InserterLibrary;
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index a15252809b3e1..0e691f8e4a195 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, forwardRef, useCallback, useMemo } from '@wordpress/element';
+import { useState, useCallback, useMemo } from '@wordpress/element';
 import { VisuallyHidden, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -19,20 +19,17 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
 
-function InserterMenu(
-	{
-		rootClientId,
-		clientId,
-		isAppender,
-		__experimentalInsertionIndex,
-		onSelect,
-		showInserterHelpPanel,
-		showMostUsedBlocks,
-		__experimentalFilterValue = '',
-		shouldFocusBlock = true,
-	},
-	ref
-) {
+function InserterMenu( {
+	rootClientId,
+	clientId,
+	isAppender,
+	__experimentalInsertionIndex,
+	onSelect,
+	showInserterHelpPanel,
+	showMostUsedBlocks,
+	__experimentalFilterValue = '',
+	shouldFocusBlock = true,
+} ) {
 	const [ filterValue, setFilterValue ] = useState(
 		__experimentalFilterValue
 	);
@@ -177,7 +174,6 @@ function InserterMenu(
 				{ /* the following div is necessary to fix the sticky position of the search form */ }
 				<div className="block-editor-inserter__content">
 					<SearchControl
-						ref={ ref }
 						className="block-editor-inserter__search"
 						onChange={ ( value ) => {
 							if ( hoveredItem ) setHoveredItem( null );
@@ -223,4 +219,4 @@ function InserterMenu(
 	);
 }
 
-export default forwardRef( InserterMenu );
+export default InserterMenu;
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index cc39a4e0a7437..61e87067947cd 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -170,7 +170,7 @@ function Layout( { styles } ) {
 
 	const secondarySidebar = () => {
 		if ( mode === 'visual' && isInserterOpened ) {
-			return <InserterSidebar isOpen={ isInserterOpened } />;
+			return <InserterSidebar />;
 		}
 		if ( mode === 'visual' && isListViewOpened ) {
 			return <ListViewSidebar />;
diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
index 887ac8cdcf006..30698c838bf83 100644
--- a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
@@ -17,7 +17,7 @@ import { useEffect, useRef } from '@wordpress/element';
  */
 import { store as editPostStore } from '../../store';
 
-export default function InserterSidebar( isOpen = false ) {
+export default function InserterSidebar() {
 	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
 		const { isFeatureActive, __experimentalGetInsertionPoint } = select(
 			editPostStore
@@ -30,19 +30,18 @@ export default function InserterSidebar( isOpen = false ) {
 	const { setIsInserterOpened } = useDispatch( editPostStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const TagName = isMobileViewport ? VisuallyHidden : 'div';
+	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
 		focusOnMount: null,
 	} );
 
-	const inserterRef = useRef();
-
+	const inserterContentRef = useRef();
 	useEffect( () => {
-		if ( isOpen ) {
-			inserterRef.current.focus();
-		}
-	}, [ isOpen ] );
+		inserterContentRef.current
+			.querySelector( '.block-editor-inserter__search input' )
+			.focus();
+	}, [] );
 
 	return (
 		<div
@@ -57,9 +56,11 @@ export default function InserterSidebar( isOpen = false ) {
 					onClick={ () => setIsInserterOpened( false ) }
 				/>
 			</TagName>
-			<div className="edit-post-editor__inserter-panel-content">
+			<div
+				className="edit-post-editor__inserter-panel-content"
+				ref={ inserterContentRef }
+			>
 				<Library
-					ref={ inserterRef }
 					showMostUsedBlocks={ showMostUsedBlocks }
 					showInserterHelpPanel
 					shouldFocusBlock={ isMobileViewport }

From b975b40506c161e717ddf8bed5dc14d7ee6ba177 Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Sun, 19 Dec 2021 21:39:20 -0500
Subject: [PATCH 14/16] Apply changes to edit-site/edit-widgets.

---
 .../secondary-sidebar/inserter-sidebar.js     | 23 ++++++++++++++---
 .../components/secondary-sidebar/style.scss   |  4 ---
 .../src/components/layout/style.scss          |  4 ---
 .../secondary-sidebar/inserter-sidebar.js     | 25 ++++++++++++++-----
 4 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
index 591eb6d05c149..5718c7e7af216 100644
--- a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
@@ -2,13 +2,15 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
 import { close } from '@wordpress/icons';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,23 +25,36 @@ export default function InserterSidebar() {
 	);
 
 	const isMobile = useViewportMatch( 'medium', '<' );
+	const TagName = ! isMobile ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
+		focusOnMount: null,
 	} );
 
+	const inserterContentRef = useRef();
+	useEffect( () => {
+		inserterContentRef.current
+			.querySelector( '.block-editor-inserter__search input' )
+			.focus();
+		}, [] );
+
 	return (
 		<div
 			ref={ inserterDialogRef }
 			{ ...inserterDialogProps }
 			className="edit-site-editor__inserter-panel"
 		>
-			<div className="edit-site-editor__inserter-panel-header">
+			<TagName className="edit-post-editor__inserter-panel-header">
 				<Button
 					icon={ close }
+					label={ __( 'Close block inserter' ) }
 					onClick={ () => setIsInserterOpened( false ) }
 				/>
-			</div>
-			<div className="edit-site-editor__inserter-panel-content">
+			</TagName>
+			<div
+				className="edit-post-editor__inserter-panel-content"
+				ref={ inserterContentRef }
+			>
 				<Library
 					showInserterHelpPanel
 					shouldFocusBlock={ isMobile }
diff --git a/packages/edit-site/src/components/secondary-sidebar/style.scss b/packages/edit-site/src/components/secondary-sidebar/style.scss
index d7623ffe2bc93..6dd1a0d9c4961 100644
--- a/packages/edit-site/src/components/secondary-sidebar/style.scss
+++ b/packages/edit-site/src/components/secondary-sidebar/style.scss
@@ -16,10 +16,6 @@
 	padding-right: $grid-unit-10;
 	display: flex;
 	justify-content: flex-end;
-
-	@include break-medium() {
-		display: none;
-	}
 }
 
 .edit-site-editor__inserter-panel-content,
diff --git a/packages/edit-widgets/src/components/layout/style.scss b/packages/edit-widgets/src/components/layout/style.scss
index b42fc1a39aad4..1aed3d3eefc86 100644
--- a/packages/edit-widgets/src/components/layout/style.scss
+++ b/packages/edit-widgets/src/components/layout/style.scss
@@ -12,10 +12,6 @@
 	padding-right: $grid-unit-10;
 	display: flex;
 	justify-content: flex-end;
-
-	@include break-medium() {
-		display: none;
-	}
 }
 
 .edit-widgets-layout__inserter-panel-content {
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
index 5c60ef401ca5a..752e833a66cd0 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { close } from '@wordpress/icons';
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -27,20 +28,32 @@ export default function InserterSidebar() {
 		return () => setIsInserterOpened( false );
 	}, [ setIsInserterOpened ] );
 
+	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: closeInserter,
+		focusOnMount: null,
 	} );
 
+	const inserterContentRef = useRef();
+	useEffect( () => {
+		inserterContentRef.current
+			.querySelector( '.block-editor-inserter__search input' )
+			.focus();
+		}, [] );
+
 	return (
 		<div
 			ref={ inserterDialogRef }
 			{ ...inserterDialogProps }
 			className="edit-widgets-layout__inserter-panel"
 		>
-			<div className="edit-widgets-layout__inserter-panel-header">
-				<Button icon={ close } onClick={ closeInserter } />
-			</div>
-			<div className="edit-widgets-layout__inserter-panel-content">
+			<TagName className="edit-widgets-layout__inserter-panel-header">
+				<Button icon={ close } onClick={ closeInserter } label={ __( 'Close block inserter' ) } />
+			</TagName>
+			<div
+				className="edit-widgets-layout__inserter-panel-content"
+				ref={ inserterContentRef }
+			>
 				<Library
 					showInserterHelpPanel
 					shouldFocusBlock={ isMobileViewport }

From c4715a1f87243784971f0a44041fb9a9b57c680f Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Sun, 19 Dec 2021 21:39:41 -0500
Subject: [PATCH 15/16] Formatting fixes.

---
 .../src/components/secondary-sidebar/inserter-sidebar.js  | 2 +-
 .../src/components/secondary-sidebar/inserter-sidebar.js  | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
index 5718c7e7af216..9ad1fba89c231 100644
--- a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
@@ -36,7 +36,7 @@ export default function InserterSidebar() {
 		inserterContentRef.current
 			.querySelector( '.block-editor-inserter__search input' )
 			.focus();
-		}, [] );
+	}, [] );
 
 	return (
 		<div
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
index 752e833a66cd0..0a7f251761a85 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -39,7 +39,7 @@ export default function InserterSidebar() {
 		inserterContentRef.current
 			.querySelector( '.block-editor-inserter__search input' )
 			.focus();
-		}, [] );
+	}, [] );
 
 	return (
 		<div
@@ -48,7 +48,11 @@ export default function InserterSidebar() {
 			className="edit-widgets-layout__inserter-panel"
 		>
 			<TagName className="edit-widgets-layout__inserter-panel-header">
-				<Button icon={ close } onClick={ closeInserter } label={ __( 'Close block inserter' ) } />
+				<Button
+					icon={ close }
+					onClick={ closeInserter }
+					label={ __( 'Close block inserter' ) }
+				/>
 			</TagName>
 			<div
 				className="edit-widgets-layout__inserter-panel-content"

From ea055f1ac2a4979c5f298549d9a90aeb4662ec15 Mon Sep 17 00:00:00 2001
From: Alex Stine <alex.stine@yourtechadvisors.com>
Date: Sun, 19 Dec 2021 21:50:18 -0500
Subject: [PATCH 16/16] Fix: Unable to close block inserter in Widgets view.

---
 .../src/components/secondary-sidebar/inserter-sidebar.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
index 0a7f251761a85..a7da78aa3e62c 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -25,7 +25,7 @@ export default function InserterSidebar() {
 	const { setIsInserterOpened } = useDispatch( editWidgetsStore );
 
 	const closeInserter = useCallback( () => {
-		return () => setIsInserterOpened( false );
+		return setIsInserterOpened( false );
 	}, [ setIsInserterOpened ] );
 
 	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';