From 18640d251fd8decebc667d0d5388594090521504 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 7 May 2024 14:45:56 +0900
Subject: [PATCH 1/4] Inserter: Add close button

---
 .../src/components/inserter/library.js        |  2 +
 .../src/components/inserter/menu.js           |  7 +++-
 .../src/components/inserter/style.scss        |  2 +-
 .../src/components/inserter/tabs.js           | 39 ++++++++++++-------
 .../src/components/inserter-sidebar/index.js  | 18 +++------
 .../components/inserter-sidebar/style.scss    |  9 ++++-
 6 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index a3a4e7feb42b32..7e9b366e5e3a74 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(
 		__experimentalOnPatternCategorySelection,
 		onSelect = noop,
 		shouldFocusBlock = false,
+		onClose,
 	},
 	ref
 ) {
@@ -54,6 +55,7 @@ function InserterLibrary(
 			}
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
+			onClose={ onClose }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 7e3ae9c7a85f7e..979a3b8199f0b0 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -47,6 +47,7 @@ function InserterMenu(
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
 		__experimentalOnPatternCategorySelection = NOOP,
+		onClose,
 	},
 	ref
 ) {
@@ -301,7 +302,11 @@ function InserterMenu(
 			ref={ ref }
 		>
 			<div className="block-editor-inserter__main-area">
-				<InserterTabs ref={ tabsRef } onSelect={ handleSetSelectedTab }>
+				<InserterTabs
+					ref={ tabsRef }
+					onSelect={ handleSetSelectedTab }
+					onClose={ onClose }
+				>
 					{ inserterSearch }
 					{ selectedTab === 'blocks' &&
 						! delayedFilterValue &&
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index bf9d184b81843f..1258fe01b285d6 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -116,7 +116,7 @@ $block-inserter-tabs-height: 44px;
 	overflow: hidden;
 
 	.block-editor-inserter__tablist {
-		border-bottom: $border-width solid $gray-300;
+		width: 100%;
 
 		button[role="tab"] {
 			flex-grow: 1;
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index 5506e3c315cbdf..c1aada62c6b611 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -1,9 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -29,23 +33,32 @@ const mediaTab = {
 	title: __( 'Media' ),
 };
 
-function InserterTabs( { onSelect, children }, ref ) {
+function InserterTabs( { onSelect, children, onClose }, ref ) {
 	const tabs = [ blocksTab, patternsTab, mediaTab ];
 
 	return (
 		<div className="block-editor-inserter__tabs" ref={ ref }>
 			<Tabs onSelect={ onSelect }>
-				<Tabs.TabList className="block-editor-inserter__tablist">
-					{ tabs.map( ( tab ) => (
-						<Tabs.Tab
-							key={ tab.name }
-							tabId={ tab.name }
-							className="block-editor-inserter__tab"
-						>
-							{ tab.title }
-						</Tabs.Tab>
-					) ) }
-				</Tabs.TabList>
+				<div className="editor-inserter-sidebar__header">
+					<Button
+						className="editor-inserter-sidebar__close-button"
+						icon={ closeSmall }
+						label={ __( 'Close block inserter' ) }
+						onClick={ () => onClose() }
+					/>
+
+					<Tabs.TabList className="block-editor-inserter__tablist">
+						{ tabs.map( ( tab ) => (
+							<Tabs.Tab
+								key={ tab.name }
+								tabId={ tab.name }
+								className="block-editor-inserter__tab"
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+				</div>
 				{ tabs.map( ( tab ) => (
 					<Tabs.TabPanel
 						key={ tab.name }
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index 7135742b214681..2b48ee16d0a9a1 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -2,14 +2,11 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { close } from '@wordpress/icons';
 import {
 	__experimentalLibrary as Library,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useViewportMatch } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 import { useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -50,18 +47,14 @@ export default function InserterSidebar( {
 	const { setIsInserterOpened } = useDispatch( editorStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const libraryRef = useRef();
 
 	return (
-		<div className="editor-inserter-sidebar">
-			<TagName className="editor-inserter-sidebar__header">
-				<Button
-					icon={ close }
-					label={ __( 'Close block inserter' ) }
-					onClick={ () => setIsInserterOpened( false ) }
-				/>
-			</TagName>
+		<div
+			ref={ inserterDialogRef }
+			{ ...inserterDialogProps }
+			className="editor-inserter-sidebar"
+		>
 			<div className="editor-inserter-sidebar__content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }
@@ -78,6 +71,7 @@ export default function InserterSidebar( {
 						isRightSidebarOpen ? closeGeneralSidebar : undefined
 					}
 					ref={ libraryRef }
+					onClose={ () => setIsInserterOpened( false ) }
 				/>
 			</div>
 		</div>
diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss
index 6077db9c9feff1..454a04851292c0 100644
--- a/packages/editor/src/components/inserter-sidebar/style.scss
+++ b/packages/editor/src/components/inserter-sidebar/style.scss
@@ -7,10 +7,15 @@
 }
 
 .editor-inserter-sidebar__header {
-	padding-top: $grid-unit-10;
+	border-bottom: $border-width solid $gray-300;
 	padding-right: $grid-unit-10;
 	display: flex;
-	justify-content: flex-end;
+	justify-content: space-between;
+
+	.editor-inserter-sidebar__close-button {
+		order: 1;
+		align-self: center;
+	}
 }
 
 .editor-inserter-sidebar__content {

From fbdf3e67937088fd81b87addafd951c3bfd9bee6 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Tue, 7 May 2024 14:52:40 +0900
Subject: [PATCH 2/4] make button smaller

---
 packages/block-editor/src/components/inserter/tabs.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index c1aada62c6b611..7e3b2a1b9a28dd 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -45,6 +45,7 @@ function InserterTabs( { onSelect, children, onClose }, ref ) {
 						icon={ closeSmall }
 						label={ __( 'Close block inserter' ) }
 						onClick={ () => onClose() }
+						size="small"
 					/>
 
 					<Tabs.TabList className="block-editor-inserter__tablist">

From 098b270ed9b96f19960a0df587903b85de6b4d88 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 8 May 2024 12:39:46 +0900
Subject: [PATCH 3/4] remove dialogRefs

---
 packages/editor/src/components/inserter-sidebar/index.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index 2b48ee16d0a9a1..2863ef5e1eb22e 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -50,11 +50,7 @@ export default function InserterSidebar( {
 	const libraryRef = useRef();
 
 	return (
-		<div
-			ref={ inserterDialogRef }
-			{ ...inserterDialogProps }
-			className="editor-inserter-sidebar"
-		>
+		<div className="editor-inserter-sidebar">
 			<div className="editor-inserter-sidebar__content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }

From 7ea9ac2139877ee1b60d202cd32bde434847660c Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 8 May 2024 12:45:49 +0900
Subject: [PATCH 4/4] update classnames

---
 packages/block-editor/src/components/inserter/tabs.js      | 4 ++--
 packages/editor/src/components/inserter-sidebar/style.scss | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index 7e3b2a1b9a28dd..c1486dda6dbf27 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -39,9 +39,9 @@ function InserterTabs( { onSelect, children, onClose }, ref ) {
 	return (
 		<div className="block-editor-inserter__tabs" ref={ ref }>
 			<Tabs onSelect={ onSelect }>
-				<div className="editor-inserter-sidebar__header">
+				<div className="block-editor-inserter-sidebar__header">
 					<Button
-						className="editor-inserter-sidebar__close-button"
+						className="block-editor-inserter-sidebar__close-button"
 						icon={ closeSmall }
 						label={ __( 'Close block inserter' ) }
 						onClick={ () => onClose() }
diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss
index 454a04851292c0..e3564cbd03aafe 100644
--- a/packages/editor/src/components/inserter-sidebar/style.scss
+++ b/packages/editor/src/components/inserter-sidebar/style.scss
@@ -6,13 +6,13 @@
 	flex-direction: column;
 }
 
-.editor-inserter-sidebar__header {
+.block-editor-inserter-sidebar__header {
 	border-bottom: $border-width solid $gray-300;
 	padding-right: $grid-unit-10;
 	display: flex;
 	justify-content: space-between;
 
-	.editor-inserter-sidebar__close-button {
+	.block-editor-inserter-sidebar__close-button {
 		order: 1;
 		align-self: center;
 	}