From d0bad74b1d2fbebd7c38033edc82d7804716fb07 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 10 May 2024 14:10:09 +0900
Subject: [PATCH 1/3] Add header title to list view sidebar

---
 .../src/components/list-view-sidebar/index.js |  5 ++++
 .../components/list-view-sidebar/style.scss   | 26 +++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/editor/src/components/list-view-sidebar/index.js b/packages/editor/src/components/list-view-sidebar/index.js
index 79a63ecdec4d9..214cf39bcb904 100644
--- a/packages/editor/src/components/list-view-sidebar/index.js
+++ b/packages/editor/src/components/list-view-sidebar/index.js
@@ -130,6 +130,9 @@ export default function ListViewSidebar() {
 				defaultTabId="list-view"
 			>
 				<div className="editor-list-view-sidebar__header">
+					<span className="editor-list-view-sidebar__header-title">
+						{ __( 'Document Overview' ) }
+					</span>
 					<Button
 						className="editor-list-view-sidebar__close-button"
 						icon={ closeSmall }
@@ -137,6 +140,8 @@ export default function ListViewSidebar() {
 						onClick={ closeListView }
 						size="small"
 					/>
+				</div>
+				<div className="editor-list-view-sidebar__tabs">
 					<Tabs.TabList
 						className="editor-list-view-sidebar__tabs-tablist"
 						ref={ tabsRef }
diff --git a/packages/editor/src/components/list-view-sidebar/style.scss b/packages/editor/src/components/list-view-sidebar/style.scss
index 18cd5014c9456..0c71eb4c8550e 100644
--- a/packages/editor/src/components/list-view-sidebar/style.scss
+++ b/packages/editor/src/components/list-view-sidebar/style.scss
@@ -10,13 +10,29 @@
 	}
 	.editor-list-view-sidebar__header {
 		display: flex;
-		border-bottom: $border-width solid $gray-300;
+		justify-content: space-between;
+		padding: $grid-unit-05 $grid-unit-05 0 $grid-unit-20;
+		background-color: $gray-100;
+	}
+
+	.editor-list-view-sidebar__header-title {
+		font-size: 12px;
+		font-weight: 500;
+		color: $gray-600;
+		text-transform: uppercase;
+		position: relative;
+		top: $grid-unit-10;
 	}
+
 	.editor-list-view-sidebar__close-button {
-		background: $white;
-		order: 1;
-		align-self: center;
-		margin-right: $grid-unit-15;
+		background: transparent;
+		color: $gray-600;
+	}
+
+	.editor-list-view-sidebar__tabs {
+		display: flex;
+		background-color: $gray-100;
+		border-bottom: $border-width solid $gray-300;
 	}
 }
 

From 5c2e7cb1a299f1ea3adde46bac431b245fffead9 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 10 May 2024 14:25:17 +0900
Subject: [PATCH 2/3] Add inserter header title

---
 .../src/components/inserter/library.js        |  2 -
 .../src/components/inserter/menu.js           |  2 -
 .../src/components/inserter/style.scss        |  2 +
 .../src/components/inserter/tabs.js           | 40 ++++++-------------
 .../src/components/inserter-sidebar/index.js  | 17 +++++++-
 .../components/inserter-sidebar/style.scss    | 23 ++++++++---
 .../components/list-view-sidebar/style.scss   |  2 +
 7 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js
index 6be31f49b5fbe..07aad9dde34b6 100644
--- a/packages/block-editor/src/components/inserter/library.js
+++ b/packages/block-editor/src/components/inserter/library.js
@@ -26,7 +26,6 @@ function InserterLibrary(
 		__experimentalOnPatternCategorySelection,
 		onSelect = noop,
 		shouldFocusBlock = false,
-		onClose,
 	},
 	ref
 ) {
@@ -59,7 +58,6 @@ function InserterLibrary(
 			__experimentalInitialCategory={ __experimentalInitialCategory }
 			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 ddaec9d15a34a..a9e596f3f26a3 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -47,7 +47,6 @@ function InserterMenu(
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
 		__experimentalOnPatternCategorySelection = NOOP,
-		onClose,
 		__experimentalInitialTab,
 		__experimentalInitialCategory,
 	},
@@ -302,7 +301,6 @@ function InserterMenu(
 				<InserterTabs
 					ref={ tabsRef }
 					onSelect={ handleSetSelectedTab }
-					onClose={ onClose }
 					selectedTab={ selectedTab }
 				>
 					{ inserterSearch }
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 604268fb1fe43..133563dce05df 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -117,6 +117,8 @@ $block-inserter-tabs-height: 44px;
 
 	.block-editor-inserter__tablist {
 		width: 100%;
+		background-color: $gray-100;
+		border-bottom: $border-width solid $gray-300;
 
 		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 d3ce5d80993d3..42054100d9daf 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -1,13 +1,9 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
-import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -33,33 +29,23 @@ const mediaTab = {
 	title: __( 'Media' ),
 };
 
-function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) {
+function InserterTabs( { onSelect, children, selectedTab }, ref ) {
 	const tabs = [ blocksTab, patternsTab, mediaTab ];
 
 	return (
 		<div className="block-editor-inserter__tabs" ref={ ref }>
 			<Tabs onSelect={ onSelect } selectedTabId={ selectedTab }>
-				<div className="block-editor-inserter-sidebar__header">
-					<Button
-						className="block-editor-inserter-sidebar__close-button"
-						icon={ closeSmall }
-						label={ __( 'Close block inserter' ) }
-						onClick={ () => onClose() }
-						size="small"
-					/>
-
-					<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.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>
 				{ 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 cd45d101f187a..c28b4562f1d78 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -10,7 +10,9 @@ import { useViewportMatch } from '@wordpress/compose';
 import { useCallback, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { ESCAPE } from '@wordpress/keycodes';
-
+import { __ } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -73,6 +75,18 @@ export default function InserterSidebar( {
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div onKeyDown={ closeOnEscape } className="editor-inserter-sidebar">
+			<div className="block-editor-inserter-sidebar__header">
+				<span className="block-editor-inserter-sidebar__header-title">
+					{ __( 'Insert' ) }
+				</span>
+				<Button
+					className="block-editor-inserter-sidebar__close-button"
+					icon={ closeSmall }
+					label={ __( 'Close block inserter' ) }
+					onClick={ () => setIsInserterOpened( false ) }
+					size="small"
+				/>
+			</div>
 			<div className="editor-inserter-sidebar__content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }
@@ -91,7 +105,6 @@ export default function InserterSidebar( {
 						isRightSidebarOpen ? closeGeneralSidebar : undefined
 					}
 					ref={ libraryRef }
-					onClose={ closeInserterSidebar }
 				/>
 			</div>
 		</div>
diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss
index e3564cbd03aaf..fbe0eef2a1f8b 100644
--- a/packages/editor/src/components/inserter-sidebar/style.scss
+++ b/packages/editor/src/components/inserter-sidebar/style.scss
@@ -7,15 +7,26 @@
 }
 
 .block-editor-inserter-sidebar__header {
-	border-bottom: $border-width solid $gray-300;
-	padding-right: $grid-unit-10;
 	display: flex;
 	justify-content: space-between;
+	padding: $grid-unit-05 $grid-unit-05 0 $grid-unit-20;
+	background-color: $gray-100;
+}
 
-	.block-editor-inserter-sidebar__close-button {
-		order: 1;
-		align-self: center;
-	}
+.block-editor-inserter-sidebar__header-title {
+	font-size: 12px;
+	font-weight: 500;
+	color: $gray-600;
+	text-transform: uppercase;
+	position: relative;
+	top: $grid-unit-10;
+}
+
+.block-editor-inserter-sidebar__close-button {
+	background: transparent;
+	color: $gray-600;
+	position: relative;
+	z-index: 2; // allow the close button focus ring to be visible
 }
 
 .editor-inserter-sidebar__content {
diff --git a/packages/editor/src/components/list-view-sidebar/style.scss b/packages/editor/src/components/list-view-sidebar/style.scss
index 0c71eb4c8550e..54b391b96f8ed 100644
--- a/packages/editor/src/components/list-view-sidebar/style.scss
+++ b/packages/editor/src/components/list-view-sidebar/style.scss
@@ -27,6 +27,8 @@
 	.editor-list-view-sidebar__close-button {
 		background: transparent;
 		color: $gray-600;
+		position: relative;
+		z-index: 2; // allow the close button focus ring to be visible
 	}
 
 	.editor-list-view-sidebar__tabs {

From 9e955343de4a94ec39d5d81b4df6aa1d5623f29d Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 10 May 2024 14:43:50 +0900
Subject: [PATCH 3/3] Increase title and close button colors to meet minimun
 color requirements

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

diff --git a/packages/editor/src/components/inserter-sidebar/style.scss b/packages/editor/src/components/inserter-sidebar/style.scss
index fbe0eef2a1f8b..cdf0e366956e1 100644
--- a/packages/editor/src/components/inserter-sidebar/style.scss
+++ b/packages/editor/src/components/inserter-sidebar/style.scss
@@ -16,7 +16,7 @@
 .block-editor-inserter-sidebar__header-title {
 	font-size: 12px;
 	font-weight: 500;
-	color: $gray-600;
+	color: #6b6b6b;
 	text-transform: uppercase;
 	position: relative;
 	top: $grid-unit-10;
@@ -24,7 +24,7 @@
 
 .block-editor-inserter-sidebar__close-button {
 	background: transparent;
-	color: $gray-600;
+	color: #6b6b6b;
 	position: relative;
 	z-index: 2; // allow the close button focus ring to be visible
 }
diff --git a/packages/editor/src/components/list-view-sidebar/style.scss b/packages/editor/src/components/list-view-sidebar/style.scss
index 54b391b96f8ed..d9c85592b9be1 100644
--- a/packages/editor/src/components/list-view-sidebar/style.scss
+++ b/packages/editor/src/components/list-view-sidebar/style.scss
@@ -18,7 +18,7 @@
 	.editor-list-view-sidebar__header-title {
 		font-size: 12px;
 		font-weight: 500;
-		color: $gray-600;
+		color: #6b6b6b;
 		text-transform: uppercase;
 		position: relative;
 		top: $grid-unit-10;
@@ -26,7 +26,7 @@
 
 	.editor-list-view-sidebar__close-button {
 		background: transparent;
-		color: $gray-600;
+		color: #6b6b6b;
 		position: relative;
 		z-index: 2; // allow the close button focus ring to be visible
 	}