Add inserter header title

WordPress · May 10, 2024 · cd4e0c2 · cd4e0c2
1 parent c3f69dd
commit cd4e0c2
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -9,7 +9,9 @@ import {
 import { useViewportMatch } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
-
+import { __ } from '@wordpress/i18n';
+import { closeSmall } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -51,6 +53,18 @@ export default function InserterSidebar( {
 
 	return (
 		<div 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 }
@@ -69,7 +83,6 @@ 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
@@ -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
@@ -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 {