From 96cfa63459fc8ce0462e2289c43449feb2bbfc02 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Thu, 25 Apr 2024 12:18:59 -0500
Subject: [PATCH 01/24] Move search into inserter tabs

---
 .../src/components/inserter/menu.js           | 158 +++++++++++-------
 .../src/components/inserter/tabs.js           |   4 +-
 .../src/components/inserter-sidebar/index.js  |   3 +-
 .../editor/various/adding-patterns.spec.js    |   5 +-
 4 files changed, 106 insertions(+), 64 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 33737c16bcb50f..14f4d2ab057328 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -135,10 +135,16 @@ function InserterMenu(
 		! delayedFilterValue &&
 		selectedPatternCategory;
 
-	const showMediaPanel =
-		selectedTab === 'media' &&
-		! delayedFilterValue &&
-		selectedMediaCategory;
+	const showMediaPanel = selectedTab === 'media' && selectedMediaCategory;
+
+	const searchRef = useRef();
+	useImperativeHandle( ref, () => ( {
+		focusSearch: () => {
+			searchRef.current.focus();
+		},
+	} ) );
+
+	const showAsTabs = showPatterns || showMedia;
 
 	const blocksTab = useMemo(
 		() => (
@@ -227,24 +233,6 @@ function InserterMenu(
 		]
 	);
 
-	const inserterTabsContents = useMemo(
-		() => ( {
-			blocks: blocksTab,
-			patterns: patternsTab,
-			media: mediaTab,
-		} ),
-		[ blocksTab, mediaTab, patternsTab ]
-	);
-
-	const searchRef = useRef();
-	useImperativeHandle( ref, () => ( {
-		focusSearch: () => {
-			searchRef.current.focus();
-		},
-	} ) );
-
-	const showAsTabs = ! delayedFilterValue && ( showPatterns || showMedia );
-
 	// When the pattern panel is showing, we want to use zoom out mode
 	useZoomOut( showPatternPanel );
 
@@ -267,49 +255,103 @@ function InserterMenu(
 					'show-as-tabs': showAsTabs,
 				} ) }
 			>
-				<SearchControl
-					__nextHasNoMarginBottom
-					className="block-editor-inserter__search"
-					onChange={ ( value ) => {
-						if ( hoveredItem ) {
-							setHoveredItem( null );
-						}
-						setFilterValue( value );
-					} }
-					value={ filterValue }
-					label={ __( 'Search for blocks and patterns' ) }
-					placeholder={ __( 'Search' ) }
-					ref={ searchRef }
-				/>
-				{ !! delayedFilterValue && (
-					<div className="block-editor-inserter__no-tab-container">
-						<InserterSearchResults
-							filterValue={ delayedFilterValue }
-							onSelect={ onSelect }
-							onHover={ onHover }
-							onHoverPattern={ onHoverPattern }
-							rootClientId={ rootClientId }
-							clientId={ clientId }
-							isAppender={ isAppender }
-							__experimentalInsertionIndex={
-								__experimentalInsertionIndex
-							}
-							showBlockDirectory
-							shouldFocusBlock={ shouldFocusBlock }
-						/>
-					</div>
-				) }
 				{ showAsTabs && (
 					<InserterTabs
 						showPatterns={ showPatterns }
 						showMedia={ showMedia }
 						onSelect={ handleSetSelectedTab }
-						tabsContents={ inserterTabsContents }
-					/>
+					>
+						{ ( selectedTab === 'blocks' ||
+							selectedTab === 'patterns' ) && (
+							<>
+								{ /* TODO: Make this into a component */ }
+								<SearchControl
+									__nextHasNoMarginBottom
+									className="block-editor-inserter__search"
+									onChange={ ( value ) => {
+										if ( hoveredItem )
+											setHoveredItem( null );
+										setFilterValue( value );
+									} }
+									value={ filterValue }
+									label={ __(
+										'Search for blocks and patterns'
+									) }
+									placeholder={ __( 'Search' ) }
+									ref={ searchRef }
+								/>
+								{ !! delayedFilterValue && (
+									<div className="block-editor-inserter__no-tab-container">
+										<InserterSearchResults
+											filterValue={ delayedFilterValue }
+											onSelect={ onSelect }
+											onHover={ onHover }
+											onHoverPattern={ onHoverPattern }
+											rootClientId={ rootClientId }
+											clientId={ clientId }
+											isAppender={ isAppender }
+											__experimentalInsertionIndex={
+												__experimentalInsertionIndex
+											}
+											showBlockDirectory
+											shouldFocusBlock={
+												shouldFocusBlock
+											}
+											prioritizePatterns={
+												selectedTab === 'patterns'
+											}
+										/>
+									</div>
+								) }
+							</>
+						) }
+						{ selectedTab === 'blocks' &&
+							! delayedFilterValue &&
+							blocksTab }
+						{ selectedTab === 'patterns' &&
+							! delayedFilterValue &&
+							patternsTab }
+						{ selectedTab === 'media' && mediaTab }
+					</InserterTabs>
 				) }
-				{ ! delayedFilterValue && ! showAsTabs && (
+				{ ! showAsTabs && (
 					<div className="block-editor-inserter__no-tab-container">
-						{ blocksTab }
+						<>
+							<SearchControl
+								__nextHasNoMarginBottom
+								className="block-editor-inserter__search"
+								onChange={ ( value ) => {
+									if ( hoveredItem ) setHoveredItem( null );
+									setFilterValue( value );
+								} }
+								value={ filterValue }
+								label={ __( 'Search for blocks and patterns' ) }
+								placeholder={ __( 'Search' ) }
+								ref={ searchRef }
+							/>
+							{ !! delayedFilterValue && (
+								<div className="block-editor-inserter__no-tab-container">
+									<InserterSearchResults
+										filterValue={ delayedFilterValue }
+										onSelect={ onSelect }
+										onHover={ onHover }
+										onHoverPattern={ onHoverPattern }
+										rootClientId={ rootClientId }
+										clientId={ clientId }
+										isAppender={ isAppender }
+										__experimentalInsertionIndex={
+											__experimentalInsertionIndex
+										}
+										showBlockDirectory
+										shouldFocusBlock={ shouldFocusBlock }
+										prioritizePatterns={
+											selectedTab === 'patterns'
+										}
+									/>
+								</div>
+							) }
+						</>
+						{ ! delayedFilterValue && { blocksTab } }
 					</div>
 				) }
 			</div>
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index ad9cd4888bd947..8e7dfd8d7a7b15 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -32,7 +32,7 @@ function InserterTabs( {
 	showPatterns = false,
 	showMedia = false,
 	onSelect,
-	tabsContents,
+	children,
 } ) {
 	const tabs = [
 		blocksTab,
@@ -61,7 +61,7 @@ function InserterTabs( {
 						focusable={ false }
 						className="block-editor-inserter__tabpanel"
 					>
-						{ tabsContents[ tab.name ] }
+						{ children }
 					</Tabs.TabPanel>
 				) ) }
 			</Tabs>
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index e2e84c2f8185c4..664c72af7760bc 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -42,7 +42,8 @@ export default function InserterSidebar( {
 
 	const libraryRef = useRef();
 	useEffect( () => {
-		libraryRef.current.focusSearch();
+		// TODO: Fix focus search
+		// libraryRef.current.focusSearch();
 	}, [] );
 
 	return (
diff --git a/test/e2e/specs/editor/various/adding-patterns.spec.js b/test/e2e/specs/editor/various/adding-patterns.spec.js
index 94b9dbd2646e8b..2846c7adac271f 100644
--- a/test/e2e/specs/editor/various/adding-patterns.spec.js
+++ b/test/e2e/specs/editor/various/adding-patterns.spec.js
@@ -9,10 +9,9 @@ test.describe( 'adding patterns', () => {
 	} );
 
 	test( 'should insert a block pattern', async ( { page, editor } ) => {
-		await page.click(
-			'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
-		);
+		await page.getByLabel( 'Toggle block inserter' ).click();
 
+		await page.getByRole( 'tab', { name: 'Patterns' } ).click();
 		await page.fill(
 			'role=region[name="Block Library"i] >> role=searchbox[name="Search for blocks and patterns"i]',
 			'Social links with a shared background color'

From f485c1bc8e889ed76c2d5241292faf60806a8793 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Thu, 25 Apr 2024 16:04:51 -0500
Subject: [PATCH 02/24] Make inserterSearch component

---
 .../src/components/inserter/menu.js           | 154 +++++++-----------
 test/performance/specs/post-editor.spec.js    |   4 +-
 2 files changed, 63 insertions(+), 95 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 14f4d2ab057328..99d21168426a18 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -6,14 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	forwardRef,
-	useState,
-	useCallback,
-	useMemo,
-	useImperativeHandle,
-	useRef,
-} from '@wordpress/element';
+import { forwardRef, useState, useCallback, useMemo } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -36,6 +29,7 @@ import { store as blockEditorStore } from '../../store';
 import { useZoomOut } from '../../hooks/use-zoom-out';
 
 const NOOP = () => {};
+
 function InserterMenu(
 	{
 		rootClientId,
@@ -137,13 +131,6 @@ function InserterMenu(
 
 	const showMediaPanel = selectedTab === 'media' && selectedMediaCategory;
 
-	const searchRef = useRef();
-	useImperativeHandle( ref, () => ( {
-		focusSearch: () => {
-			searchRef.current.focus();
-		},
-	} ) );
-
 	const showAsTabs = showPatterns || showMedia;
 
 	const blocksTab = useMemo(
@@ -243,12 +230,66 @@ function InserterMenu(
 		}
 		setSelectedTab( value );
 	};
+	const inserterSearch = useMemo( () => {
+		if ( selectedTab === 'media' ) {
+			return null;
+		}
+
+		return (
+			<>
+				<SearchControl
+					__nextHasNoMarginBottom
+					className="block-editor-inserter__search"
+					onChange={ ( value ) => {
+						if ( hoveredItem ) setHoveredItem( null );
+						setFilterValue( value );
+					} }
+					value={ filterValue }
+					label={ __( 'Search for blocks and patterns' ) }
+					placeholder={ __( 'Search' ) }
+				/>
+				{ !! delayedFilterValue && (
+					<InserterSearchResults
+						filterValue={ delayedFilterValue }
+						onSelect={ onSelect }
+						onHover={ onHover }
+						onHoverPattern={ onHoverPattern }
+						rootClientId={ rootClientId }
+						clientId={ clientId }
+						isAppender={ isAppender }
+						__experimentalInsertionIndex={
+							__experimentalInsertionIndex
+						}
+						showBlockDirectory
+						shouldFocusBlock={ shouldFocusBlock }
+						prioritizePatterns={ selectedTab === 'patterns' }
+					/>
+				) }
+			</>
+		);
+	}, [
+		selectedTab,
+		hoveredItem,
+		setHoveredItem,
+		setFilterValue,
+		filterValue,
+		delayedFilterValue,
+		onSelect,
+		onHover,
+		onHoverPattern,
+		shouldFocusBlock,
+		clientId,
+		rootClientId,
+		__experimentalInsertionIndex,
+		isAppender,
+	] );
 
 	return (
 		<div
 			className={ classnames( 'block-editor-inserter__menu', {
 				'show-panel': showPatternPanel || showMediaPanel,
 			} ) }
+			ref={ ref }
 		>
 			<div
 				className={ classnames( 'block-editor-inserter__main-area', {
@@ -262,49 +303,8 @@ function InserterMenu(
 						onSelect={ handleSetSelectedTab }
 					>
 						{ ( selectedTab === 'blocks' ||
-							selectedTab === 'patterns' ) && (
-							<>
-								{ /* TODO: Make this into a component */ }
-								<SearchControl
-									__nextHasNoMarginBottom
-									className="block-editor-inserter__search"
-									onChange={ ( value ) => {
-										if ( hoveredItem )
-											setHoveredItem( null );
-										setFilterValue( value );
-									} }
-									value={ filterValue }
-									label={ __(
-										'Search for blocks and patterns'
-									) }
-									placeholder={ __( 'Search' ) }
-									ref={ searchRef }
-								/>
-								{ !! delayedFilterValue && (
-									<div className="block-editor-inserter__no-tab-container">
-										<InserterSearchResults
-											filterValue={ delayedFilterValue }
-											onSelect={ onSelect }
-											onHover={ onHover }
-											onHoverPattern={ onHoverPattern }
-											rootClientId={ rootClientId }
-											clientId={ clientId }
-											isAppender={ isAppender }
-											__experimentalInsertionIndex={
-												__experimentalInsertionIndex
-											}
-											showBlockDirectory
-											shouldFocusBlock={
-												shouldFocusBlock
-											}
-											prioritizePatterns={
-												selectedTab === 'patterns'
-											}
-										/>
-									</div>
-								) }
-							</>
-						) }
+							selectedTab === 'patterns' ) &&
+							inserterSearch }
 						{ selectedTab === 'blocks' &&
 							! delayedFilterValue &&
 							blocksTab }
@@ -316,42 +316,8 @@ function InserterMenu(
 				) }
 				{ ! showAsTabs && (
 					<div className="block-editor-inserter__no-tab-container">
-						<>
-							<SearchControl
-								__nextHasNoMarginBottom
-								className="block-editor-inserter__search"
-								onChange={ ( value ) => {
-									if ( hoveredItem ) setHoveredItem( null );
-									setFilterValue( value );
-								} }
-								value={ filterValue }
-								label={ __( 'Search for blocks and patterns' ) }
-								placeholder={ __( 'Search' ) }
-								ref={ searchRef }
-							/>
-							{ !! delayedFilterValue && (
-								<div className="block-editor-inserter__no-tab-container">
-									<InserterSearchResults
-										filterValue={ delayedFilterValue }
-										onSelect={ onSelect }
-										onHover={ onHover }
-										onHoverPattern={ onHoverPattern }
-										rootClientId={ rootClientId }
-										clientId={ clientId }
-										isAppender={ isAppender }
-										__experimentalInsertionIndex={
-											__experimentalInsertionIndex
-										}
-										showBlockDirectory
-										shouldFocusBlock={ shouldFocusBlock }
-										prioritizePatterns={
-											selectedTab === 'patterns'
-										}
-									/>
-								</div>
-							) }
-						</>
-						{ ! delayedFilterValue && { blocksTab } }
+						{ inserterSearch }
+						{ ! delayedFilterValue && blocksTab }
 					</div>
 				) }
 			</div>
diff --git a/test/performance/specs/post-editor.spec.js b/test/performance/specs/post-editor.spec.js
index c8010c79b15508..2a4cf56a45e065 100644
--- a/test/performance/specs/post-editor.spec.js
+++ b/test/performance/specs/post-editor.spec.js
@@ -418,9 +418,11 @@ test.describe( 'Post Editor Performance', () => {
 			const globalInserterToggle = page.getByRole( 'button', {
 				name: 'Toggle block inserter',
 			} );
-
 			// Open Inserter.
 			await globalInserterToggle.click();
+
+			await page.getByPlaceholder( 'Search' ).click();
+
 			await perfUtils.expectExpandedState( globalInserterToggle, 'true' );
 
 			const samples = 10;

From 94afb1ccdd486beb3929922fda4bafb86bcf3c63 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Fri, 26 Apr 2024 16:09:09 +0100
Subject: [PATCH 03/24] focus the search field using a useEffect

---
 .../src/components/inserter/menu.js           | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 99d21168426a18..fca94b6bd152d6 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -6,7 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { forwardRef, useState, useCallback, useMemo } from '@wordpress/element';
+import {
+	forwardRef,
+	useEffect,
+	useState,
+	useCallback,
+	useMemo,
+	useRef,
+} from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -230,6 +237,15 @@ function InserterMenu(
 		}
 		setSelectedTab( value );
 	};
+
+	const searchRef = useRef();
+	useEffect( () => {
+		const focusTimeout = setTimeout( () => {
+			searchRef?.current?.focus();
+		} );
+		return () => clearTimeout( focusTimeout );
+	}, [ selectedTab ] );
+
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
 			return null;
@@ -247,6 +263,7 @@ function InserterMenu(
 					value={ filterValue }
 					label={ __( 'Search for blocks and patterns' ) }
 					placeholder={ __( 'Search' ) }
+					ref={ searchRef }
 				/>
 				{ !! delayedFilterValue && (
 					<InserterSearchResults
@@ -282,6 +299,7 @@ function InserterMenu(
 		rootClientId,
 		__experimentalInsertionIndex,
 		isAppender,
+		searchRef,
 	] );
 
 	return (

From 93f8f860931e36a9935e976df8548695d2327420 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Fri, 26 Apr 2024 16:51:59 +0100
Subject: [PATCH 04/24] use request animation frame

---
 packages/block-editor/src/components/inserter/menu.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index fca94b6bd152d6..e62fd11ddcb318 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -240,10 +240,9 @@ function InserterMenu(
 
 	const searchRef = useRef();
 	useEffect( () => {
-		const focusTimeout = setTimeout( () => {
+		window.requestAnimationFrame( () => {
 			searchRef?.current?.focus();
 		} );
-		return () => clearTimeout( focusTimeout );
 	}, [ selectedTab ] );
 
 	const inserterSearch = useMemo( () => {

From d203d3ec4c62dd9ab4d4af5b9329884078952d4c Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Fri, 26 Apr 2024 16:53:13 +0100
Subject: [PATCH 05/24] add comment

---
 packages/block-editor/src/components/inserter/menu.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index e62fd11ddcb318..209756e338da56 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -240,6 +240,8 @@ function InserterMenu(
 
 	const searchRef = useRef();
 	useEffect( () => {
+		// We need to wait for the next frame to focus the search input
+		// becase the tabs component will try to focus the selected tab
 		window.requestAnimationFrame( () => {
 			searchRef?.current?.focus();
 		} );

From 8fda50f8ed83162baa6080961097e49dc1c23aec Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Fri, 26 Apr 2024 16:59:11 +0100
Subject: [PATCH 06/24] remove unused code

---
 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 664c72af7760bc..1e3868035060d8 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -10,7 +10,7 @@ import {
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -41,10 +41,6 @@ export default function InserterSidebar( {
 	} );
 
 	const libraryRef = useRef();
-	useEffect( () => {
-		// TODO: Fix focus search
-		// libraryRef.current.focusSearch();
-	}, [] );
 
 	return (
 		<div

From dcd15b7447674c4807c5e4f2c0629013a3d0455b Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Mon, 29 Apr 2024 16:15:39 +0100
Subject: [PATCH 07/24] change selector for search

---
 test/performance/specs/post-editor.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/performance/specs/post-editor.spec.js b/test/performance/specs/post-editor.spec.js
index 2a4cf56a45e065..b82d3a31d4cb69 100644
--- a/test/performance/specs/post-editor.spec.js
+++ b/test/performance/specs/post-editor.spec.js
@@ -421,7 +421,7 @@ test.describe( 'Post Editor Performance', () => {
 			// Open Inserter.
 			await globalInserterToggle.click();
 
-			await page.getByPlaceholder( 'Search' ).click();
+			await page.getByRole( 'searchbox' ).click();
 
 			await perfUtils.expectExpandedState( globalInserterToggle, 'true' );
 

From dab64f46ae24aaa8aea1c390751460392a34273c Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Mon, 29 Apr 2024 17:32:13 +0100
Subject: [PATCH 08/24] use useRefEffect instead of the requestAnimationFrame

---
 .../src/components/inserter/menu.js           | 24 ++++++-------------
 .../secondary-sidebar/inserter-sidebar.js     |  5 +---
 2 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 209756e338da56..7a379db583dffd 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -6,18 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	forwardRef,
-	useEffect,
-	useState,
-	useCallback,
-	useMemo,
-	useRef,
-} from '@wordpress/element';
+import { forwardRef, useState, useCallback, useMemo } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useDebouncedInput } from '@wordpress/compose';
+import { useDebouncedInput, useRefEffect } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -238,14 +231,11 @@ function InserterMenu(
 		setSelectedTab( value );
 	};
 
-	const searchRef = useRef();
-	useEffect( () => {
-		// We need to wait for the next frame to focus the search input
-		// becase the tabs component will try to focus the selected tab
-		window.requestAnimationFrame( () => {
-			searchRef?.current?.focus();
-		} );
-	}, [ selectedTab ] );
+	const searchRef = useRefEffect( ( element ) => {
+		if ( element ) {
+			element.focus();
+		}
+	} );
 
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
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 b01481748ee887..f9b5de3f7827d4 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -8,7 +8,7 @@ import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
-import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -35,9 +35,6 @@ export default function InserterSidebar() {
 	} );
 
 	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
 
 	return (
 		<div

From d6caacb7b9cc9b739892c8ecd05d7e8bb5109e45 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Tue, 30 Apr 2024 17:25:25 -0500
Subject: [PATCH 09/24] Only inserter on mount

---
 .../src/components/inserter/menu.js           | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 7a379db583dffd..b54b4610f9a8ea 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -6,7 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { forwardRef, useState, useCallback, useMemo } from '@wordpress/element';
+import {
+	forwardRef,
+	useState,
+	useCallback,
+	useMemo,
+	useRef,
+} from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -53,7 +59,7 @@ function InserterMenu(
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
-	const [ selectedTab, setSelectedTab ] = useState( null );
+	const [ selectedTab, setSelectedTab ] = useState( 'blocks' );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -231,17 +237,18 @@ function InserterMenu(
 		setSelectedTab( value );
 	};
 
+	const hasAutoFocused = useRef( false );
 	const searchRef = useRefEffect( ( element ) => {
-		if ( element ) {
-			element.focus();
+		if ( element && hasAutoFocused.current === false ) {
+			hasAutoFocused.current = true;
+			window.requestAnimationFrame( () => element.focus() );
 		}
-	} );
+	}, [] );
 
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
 			return null;
 		}
-
 		return (
 			<>
 				<SearchControl

From cf0e71c9f53c73082742668145fc748f7a9699bc Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 1 May 2024 13:10:31 +0300
Subject: [PATCH 10/24] keep the imperative ref and focus once the tabs are
 done

---
 .../block-editor/src/components/inserter/menu.js | 16 ++++++++--------
 .../secondary-sidebar/inserter-sidebar.js        |  5 ++++-
 .../src/components/inserter-sidebar/index.js     |  5 ++++-
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index b54b4610f9a8ea..2ebd0dc41f1bd0 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -12,11 +12,12 @@ import {
 	useCallback,
 	useMemo,
 	useRef,
+	useImperativeHandle,
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { useDebouncedInput, useRefEffect } from '@wordpress/compose';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -237,13 +238,12 @@ function InserterMenu(
 		setSelectedTab( value );
 	};
 
-	const hasAutoFocused = useRef( false );
-	const searchRef = useRefEffect( ( element ) => {
-		if ( element && hasAutoFocused.current === false ) {
-			hasAutoFocused.current = true;
-			window.requestAnimationFrame( () => element.focus() );
-		}
-	}, [] );
+	const searchRef = useRef();
+	useImperativeHandle( ref, () => ( {
+		focusSearch: () => {
+			window.requestAnimationFrame( () => searchRef.current.focus() );
+		},
+	} ) );
 
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
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 f9b5de3f7827d4..b01481748ee887 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -8,7 +8,7 @@ import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
-import { useCallback, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -35,6 +35,9 @@ export default function InserterSidebar() {
 	} );
 
 	const libraryRef = useRef();
+	useEffect( () => {
+		libraryRef.current.focusSearch();
+	}, [] );
 
 	return (
 		<div
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index 1e3868035060d8..e2e84c2f8185c4 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -10,7 +10,7 @@ import {
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -41,6 +41,9 @@ export default function InserterSidebar( {
 	} );
 
 	const libraryRef = useRef();
+	useEffect( () => {
+		libraryRef.current.focusSearch();
+	}, [] );
 
 	return (
 		<div

From 6e9b42f36f3e8ac201a85d0315828b623225398a Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 1 May 2024 13:27:33 +0300
Subject: [PATCH 11/24] revert changes to the inserter tabs and leave the tabs
 contents memoized

---
 .../src/components/inserter/menu.js           | 221 +++++++++---------
 .../src/components/inserter/tabs.js           |   4 +-
 2 files changed, 118 insertions(+), 107 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 2ebd0dc41f1bd0..43facef63b7c12 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -140,9 +140,74 @@ function InserterMenu(
 
 	const showAsTabs = showPatterns || showMedia;
 
+	const searchRef = useRef();
+	useImperativeHandle( ref, () => ( {
+		focusSearch: () => {
+			window.requestAnimationFrame( () => searchRef.current.focus() );
+		},
+	} ) );
+
+	const inserterSearch = useMemo( () => {
+		if ( selectedTab === 'media' ) {
+			return null;
+		}
+		return (
+			<>
+				<SearchControl
+					__nextHasNoMarginBottom
+					className="block-editor-inserter__search"
+					onChange={ ( value ) => {
+						if ( hoveredItem ) {
+							setHoveredItem( null );
+						}
+						setFilterValue( value );
+					} }
+					value={ filterValue }
+					label={ __( 'Search for blocks and patterns' ) }
+					placeholder={ __( 'Search' ) }
+					ref={ searchRef }
+				/>
+				{ !! delayedFilterValue && (
+					<InserterSearchResults
+						filterValue={ delayedFilterValue }
+						onSelect={ onSelect }
+						onHover={ onHover }
+						onHoverPattern={ onHoverPattern }
+						rootClientId={ rootClientId }
+						clientId={ clientId }
+						isAppender={ isAppender }
+						__experimentalInsertionIndex={
+							__experimentalInsertionIndex
+						}
+						showBlockDirectory
+						shouldFocusBlock={ shouldFocusBlock }
+						prioritizePatterns={ selectedTab === 'patterns' }
+					/>
+				) }
+			</>
+		);
+	}, [
+		selectedTab,
+		hoveredItem,
+		setHoveredItem,
+		setFilterValue,
+		filterValue,
+		delayedFilterValue,
+		onSelect,
+		onHover,
+		onHoverPattern,
+		shouldFocusBlock,
+		clientId,
+		rootClientId,
+		__experimentalInsertionIndex,
+		isAppender,
+		searchRef,
+	] );
+
 	const blocksTab = useMemo(
 		() => (
 			<>
+				{ inserterSearch }
 				<div className="block-editor-inserter__block-list">
 					<BlockTypesTab
 						rootClientId={ destinationRootClientId }
@@ -167,28 +232,32 @@ function InserterMenu(
 			onHover,
 			showMostUsedBlocks,
 			showInserterHelpPanel,
+			inserterSearch,
 		]
 	);
 
 	const patternsTab = useMemo(
 		() => (
-			<BlockPatternsTab
-				rootClientId={ destinationRootClientId }
-				onInsert={ onInsertPattern }
-				onSelectCategory={ onClickPatternCategory }
-				selectedCategory={ selectedPatternCategory }
-			>
-				{ showPatternPanel && (
-					<PatternCategoryPreviewPanel
-						rootClientId={ destinationRootClientId }
-						onInsert={ onInsertPattern }
-						onHover={ onHoverPattern }
-						category={ selectedPatternCategory }
-						patternFilter={ patternFilter }
-						showTitlesAsTooltip
-					/>
-				) }
-			</BlockPatternsTab>
+			<>
+				{ inserterSearch }
+				<BlockPatternsTab
+					rootClientId={ destinationRootClientId }
+					onInsert={ onInsertPattern }
+					onSelectCategory={ onClickPatternCategory }
+					selectedCategory={ selectedPatternCategory }
+				>
+					{ showPatternPanel && (
+						<PatternCategoryPreviewPanel
+							rootClientId={ destinationRootClientId }
+							onInsert={ onInsertPattern }
+							onHover={ onHoverPattern }
+							category={ selectedPatternCategory }
+							patternFilter={ patternFilter }
+							showTitlesAsTooltip
+						/>
+					) }
+				</BlockPatternsTab>
+			</>
 		),
 		[
 			destinationRootClientId,
@@ -198,25 +267,29 @@ function InserterMenu(
 			patternFilter,
 			selectedPatternCategory,
 			showPatternPanel,
+			inserterSearch,
 		]
 	);
 
 	const mediaTab = useMemo(
 		() => (
-			<MediaTab
-				rootClientId={ destinationRootClientId }
-				selectedCategory={ selectedMediaCategory }
-				onSelectCategory={ setSelectedMediaCategory }
-				onInsert={ onInsert }
-			>
-				{ showMediaPanel && (
-					<MediaCategoryPanel
-						rootClientId={ destinationRootClientId }
-						onInsert={ onInsert }
-						category={ selectedMediaCategory }
-					/>
-				) }
-			</MediaTab>
+			<>
+				{ inserterSearch }
+				<MediaTab
+					rootClientId={ destinationRootClientId }
+					selectedCategory={ selectedMediaCategory }
+					onSelectCategory={ setSelectedMediaCategory }
+					onInsert={ onInsert }
+				>
+					{ showMediaPanel && (
+						<MediaCategoryPanel
+							rootClientId={ destinationRootClientId }
+							onInsert={ onInsert }
+							category={ selectedMediaCategory }
+						/>
+					) }
+				</MediaTab>
+			</>
 		),
 		[
 			destinationRootClientId,
@@ -224,9 +297,19 @@ function InserterMenu(
 			selectedMediaCategory,
 			setSelectedMediaCategory,
 			showMediaPanel,
+			inserterSearch,
 		]
 	);
 
+	const inserterTabsContents = useMemo(
+		() => ( {
+			blocks: blocksTab,
+			patterns: patternsTab,
+			media: mediaTab,
+		} ),
+		[ blocksTab, mediaTab, patternsTab ]
+	);
+
 	// When the pattern panel is showing, we want to use zoom out mode
 	useZoomOut( showPatternPanel );
 
@@ -238,68 +321,6 @@ function InserterMenu(
 		setSelectedTab( value );
 	};
 
-	const searchRef = useRef();
-	useImperativeHandle( ref, () => ( {
-		focusSearch: () => {
-			window.requestAnimationFrame( () => searchRef.current.focus() );
-		},
-	} ) );
-
-	const inserterSearch = useMemo( () => {
-		if ( selectedTab === 'media' ) {
-			return null;
-		}
-		return (
-			<>
-				<SearchControl
-					__nextHasNoMarginBottom
-					className="block-editor-inserter__search"
-					onChange={ ( value ) => {
-						if ( hoveredItem ) setHoveredItem( null );
-						setFilterValue( value );
-					} }
-					value={ filterValue }
-					label={ __( 'Search for blocks and patterns' ) }
-					placeholder={ __( 'Search' ) }
-					ref={ searchRef }
-				/>
-				{ !! delayedFilterValue && (
-					<InserterSearchResults
-						filterValue={ delayedFilterValue }
-						onSelect={ onSelect }
-						onHover={ onHover }
-						onHoverPattern={ onHoverPattern }
-						rootClientId={ rootClientId }
-						clientId={ clientId }
-						isAppender={ isAppender }
-						__experimentalInsertionIndex={
-							__experimentalInsertionIndex
-						}
-						showBlockDirectory
-						shouldFocusBlock={ shouldFocusBlock }
-						prioritizePatterns={ selectedTab === 'patterns' }
-					/>
-				) }
-			</>
-		);
-	}, [
-		selectedTab,
-		hoveredItem,
-		setHoveredItem,
-		setFilterValue,
-		filterValue,
-		delayedFilterValue,
-		onSelect,
-		onHover,
-		onHoverPattern,
-		shouldFocusBlock,
-		clientId,
-		rootClientId,
-		__experimentalInsertionIndex,
-		isAppender,
-		searchRef,
-	] );
-
 	return (
 		<div
 			className={ classnames( 'block-editor-inserter__menu', {
@@ -317,18 +338,8 @@ function InserterMenu(
 						showPatterns={ showPatterns }
 						showMedia={ showMedia }
 						onSelect={ handleSetSelectedTab }
-					>
-						{ ( selectedTab === 'blocks' ||
-							selectedTab === 'patterns' ) &&
-							inserterSearch }
-						{ selectedTab === 'blocks' &&
-							! delayedFilterValue &&
-							blocksTab }
-						{ selectedTab === 'patterns' &&
-							! delayedFilterValue &&
-							patternsTab }
-						{ selectedTab === 'media' && mediaTab }
-					</InserterTabs>
+						tabsContents={ inserterTabsContents }
+					/>
 				) }
 				{ ! showAsTabs && (
 					<div className="block-editor-inserter__no-tab-container">
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index 8e7dfd8d7a7b15..ad9cd4888bd947 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -32,7 +32,7 @@ function InserterTabs( {
 	showPatterns = false,
 	showMedia = false,
 	onSelect,
-	children,
+	tabsContents,
 } ) {
 	const tabs = [
 		blocksTab,
@@ -61,7 +61,7 @@ function InserterTabs( {
 						focusable={ false }
 						className="block-editor-inserter__tabpanel"
 					>
-						{ children }
+						{ tabsContents[ tab.name ] }
 					</Tabs.TabPanel>
 				) ) }
 			</Tabs>

From 4b126ef091889fcbe54db3af7d21974809dd9ba4 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 1 May 2024 11:32:15 +0100
Subject: [PATCH 12/24] reset order

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

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 43facef63b7c12..58ebfa01bcc983 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -10,9 +10,9 @@ import {
 	forwardRef,
 	useState,
 	useCallback,
+	useImperativeHandle,
 	useMemo,
 	useRef,
-	useImperativeHandle,
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';

From 1de6dfd1d82d705c254b33ba053f2850c8441943 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 1 May 2024 11:32:44 +0100
Subject: [PATCH 13/24] remove unneeded change

---
 packages/block-editor/src/components/inserter/menu.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 58ebfa01bcc983..9564a5fe8529e5 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -36,7 +36,6 @@ import { store as blockEditorStore } from '../../store';
 import { useZoomOut } from '../../hooks/use-zoom-out';
 
 const NOOP = () => {};
-
 function InserterMenu(
 	{
 		rootClientId,

From 429a0d7414398bc8a3e05875773e6c247979ae12 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 1 May 2024 11:33:44 +0100
Subject: [PATCH 14/24] reset order

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

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 9564a5fe8529e5..91736f73383750 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -10,8 +10,8 @@ import {
 	forwardRef,
 	useState,
 	useCallback,
-	useImperativeHandle,
 	useMemo,
+	useImperativeHandle,
 	useRef,
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';

From eec879731e0c12457e8202937a83676d0bcdd8f7 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 1 May 2024 15:45:03 +0300
Subject: [PATCH 15/24] show message if no blocks and no patterns available, do
 not auto focus tabs or search

---
 .../inserter/block-patterns-tab/index.js      |   5 +
 .../components/inserter/block-types-tab.js    |   5 +
 .../inserter/media-tab/media-tab.js           |   5 +
 .../src/components/inserter/menu.js           | 153 +++++++-----------
 .../src/components/inserter/tabs.js           |  13 +-
 .../secondary-sidebar/inserter-sidebar.js     |   7 +-
 .../src/components/inserter-sidebar/index.js  |   7 +-
 7 files changed, 81 insertions(+), 114 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
index d2f302683ed2da..ebf816a9e2decb 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
@@ -14,6 +14,7 @@ import MobileTabNavigation from '../mobile-tab-navigation';
 import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
 import CategoryTabs from '../category-tabs';
+import InserterNoResults from '../no-results';
 
 function BlockPatternsTab( {
 	onSelectCategory,
@@ -28,6 +29,10 @@ function BlockPatternsTab( {
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 
+	if ( ! categories.length ) {
+		return <InserterNoResults />;
+	}
+
 	return (
 		<>
 			{ ! isMobile && (
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
index 60e1ff4beb6d54..fc742c3bf64897 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -13,6 +13,7 @@ import InserterPanel from './panel';
 import useBlockTypesState from './hooks/use-block-types-state';
 import InserterListbox from '../inserter-listbox';
 import { orderBy } from '../../utils/sorting';
+import InserterNoResults from './no-results';
 
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
@@ -102,6 +103,10 @@ export function BlockTypesTab( {
 		didRenderAllCategories ? collectionEntries : EMPTY_ARRAY
 	);
 
+	if ( ! items.length ) {
+		return <InserterNoResults />;
+	}
+
 	return (
 		<InserterListbox>
 			<div>
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-tab.js b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
index c5f462210fa4a4..2f3985aef569cb 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-tab.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
@@ -16,6 +16,7 @@ import { useMediaCategories } from './hooks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import CategoryTabs from '../category-tabs';
+import InserterNoResults from '../no-results';
 
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
 
@@ -48,6 +49,10 @@ function MediaTab( {
 		[ mediaCategories ]
 	);
 
+	if ( ! categories.length ) {
+		return <InserterNoResults />;
+	}
+
 	return (
 		<>
 			{ ! isMobile && (
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 91736f73383750..4ecb0358fe8c76 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -11,28 +11,24 @@ import {
 	useState,
 	useCallback,
 	useMemo,
-	useImperativeHandle,
 	useRef,
 } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
 import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
 import BlockPatternsTab from './block-patterns-tab';
 import { PatternCategoryPreviewPanel } from './block-patterns-tab/pattern-category-preview-panel';
-import { MediaTab, MediaCategoryPanel, useMediaCategories } from './media-tab';
+import { MediaTab, MediaCategoryPanel } from './media-tab';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
-import { store as blockEditorStore } from '../../store';
 import { useZoomOut } from '../../hooks/use-zoom-out';
 
 const NOOP = () => {};
@@ -69,18 +65,6 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
-	const { showPatterns } = useSelect(
-		( select ) => {
-			const { hasAllowedPatterns } = unlock( select( blockEditorStore ) );
-			return {
-				showPatterns: hasAllowedPatterns( destinationRootClientId ),
-			};
-		},
-		[ destinationRootClientId ]
-	);
-
-	const mediaCategories = useMediaCategories( destinationRootClientId );
-	const showMedia = mediaCategories.length > 0;
 
 	const onInsert = useCallback(
 		( blocks, meta, shouldForceFocusBlock ) => {
@@ -137,14 +121,7 @@ function InserterMenu(
 
 	const showMediaPanel = selectedTab === 'media' && selectedMediaCategory;
 
-	const showAsTabs = showPatterns || showMedia;
-
 	const searchRef = useRef();
-	useImperativeHandle( ref, () => ( {
-		focusSearch: () => {
-			window.requestAnimationFrame( () => searchRef.current.focus() );
-		},
-	} ) );
 
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
@@ -207,21 +184,25 @@ function InserterMenu(
 		() => (
 			<>
 				{ inserterSearch }
-				<div className="block-editor-inserter__block-list">
-					<BlockTypesTab
-						rootClientId={ destinationRootClientId }
-						onInsert={ onInsert }
-						onHover={ onHover }
-						showMostUsedBlocks={ showMostUsedBlocks }
-					/>
-				</div>
-				{ showInserterHelpPanel && (
-					<div className="block-editor-inserter__tips">
-						<VisuallyHidden as="h2">
-							{ __( 'A tip for using the block editor' ) }
-						</VisuallyHidden>
-						<Tips />
-					</div>
+				{ ! delayedFilterValue && (
+					<>
+						<div className="block-editor-inserter__block-list">
+							<BlockTypesTab
+								rootClientId={ destinationRootClientId }
+								onInsert={ onInsert }
+								onHover={ onHover }
+								showMostUsedBlocks={ showMostUsedBlocks }
+							/>
+						</div>
+						{ showInserterHelpPanel && (
+							<div className="block-editor-inserter__tips">
+								<VisuallyHidden as="h2">
+									{ __( 'A tip for using the block editor' ) }
+								</VisuallyHidden>
+								<Tips />
+							</div>
+						) }
+					</>
 				) }
 			</>
 		),
@@ -232,6 +213,7 @@ function InserterMenu(
 			showMostUsedBlocks,
 			showInserterHelpPanel,
 			inserterSearch,
+			delayedFilterValue,
 		]
 	);
 
@@ -239,23 +221,25 @@ function InserterMenu(
 		() => (
 			<>
 				{ inserterSearch }
-				<BlockPatternsTab
-					rootClientId={ destinationRootClientId }
-					onInsert={ onInsertPattern }
-					onSelectCategory={ onClickPatternCategory }
-					selectedCategory={ selectedPatternCategory }
-				>
-					{ showPatternPanel && (
-						<PatternCategoryPreviewPanel
-							rootClientId={ destinationRootClientId }
-							onInsert={ onInsertPattern }
-							onHover={ onHoverPattern }
-							category={ selectedPatternCategory }
-							patternFilter={ patternFilter }
-							showTitlesAsTooltip
-						/>
-					) }
-				</BlockPatternsTab>
+				{ ! delayedFilterValue && (
+					<BlockPatternsTab
+						rootClientId={ destinationRootClientId }
+						onInsert={ onInsertPattern }
+						onSelectCategory={ onClickPatternCategory }
+						selectedCategory={ selectedPatternCategory }
+					>
+						{ showPatternPanel && (
+							<PatternCategoryPreviewPanel
+								rootClientId={ destinationRootClientId }
+								onInsert={ onInsertPattern }
+								onHover={ onHoverPattern }
+								category={ selectedPatternCategory }
+								patternFilter={ patternFilter }
+								showTitlesAsTooltip
+							/>
+						) }
+					</BlockPatternsTab>
+				) }
 			</>
 		),
 		[
@@ -267,28 +251,26 @@ function InserterMenu(
 			selectedPatternCategory,
 			showPatternPanel,
 			inserterSearch,
+			delayedFilterValue,
 		]
 	);
 
 	const mediaTab = useMemo(
 		() => (
-			<>
-				{ inserterSearch }
-				<MediaTab
-					rootClientId={ destinationRootClientId }
-					selectedCategory={ selectedMediaCategory }
-					onSelectCategory={ setSelectedMediaCategory }
-					onInsert={ onInsert }
-				>
-					{ showMediaPanel && (
-						<MediaCategoryPanel
-							rootClientId={ destinationRootClientId }
-							onInsert={ onInsert }
-							category={ selectedMediaCategory }
-						/>
-					) }
-				</MediaTab>
-			</>
+			<MediaTab
+				rootClientId={ destinationRootClientId }
+				selectedCategory={ selectedMediaCategory }
+				onSelectCategory={ setSelectedMediaCategory }
+				onInsert={ onInsert }
+			>
+				{ showMediaPanel && (
+					<MediaCategoryPanel
+						rootClientId={ destinationRootClientId }
+						onInsert={ onInsert }
+						category={ selectedMediaCategory }
+					/>
+				) }
+			</MediaTab>
 		),
 		[
 			destinationRootClientId,
@@ -296,7 +278,6 @@ function InserterMenu(
 			selectedMediaCategory,
 			setSelectedMediaCategory,
 			showMediaPanel,
-			inserterSearch,
 		]
 	);
 
@@ -327,25 +308,11 @@ function InserterMenu(
 			} ) }
 			ref={ ref }
 		>
-			<div
-				className={ classnames( 'block-editor-inserter__main-area', {
-					'show-as-tabs': showAsTabs,
-				} ) }
-			>
-				{ showAsTabs && (
-					<InserterTabs
-						showPatterns={ showPatterns }
-						showMedia={ showMedia }
-						onSelect={ handleSetSelectedTab }
-						tabsContents={ inserterTabsContents }
-					/>
-				) }
-				{ ! showAsTabs && (
-					<div className="block-editor-inserter__no-tab-container">
-						{ inserterSearch }
-						{ ! delayedFilterValue && blocksTab }
-					</div>
-				) }
+			<div className="block-editor-inserter__main-area">
+				<InserterTabs
+					onSelect={ handleSetSelectedTab }
+					tabsContents={ inserterTabsContents }
+				/>
 			</div>
 			{ showInserterHelpPanel && hoveredItem && (
 				<Popover
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index ad9cd4888bd947..937d03b215f3f0 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -28,17 +28,8 @@ const mediaTab = {
 	title: __( 'Media' ),
 };
 
-function InserterTabs( {
-	showPatterns = false,
-	showMedia = false,
-	onSelect,
-	tabsContents,
-} ) {
-	const tabs = [
-		blocksTab,
-		showPatterns && patternsTab,
-		showMedia && mediaTab,
-	].filter( Boolean );
+function InserterTabs( { onSelect, tabsContents } ) {
+	const tabs = [ blocksTab, patternsTab, mediaTab ].filter( Boolean );
 
 	return (
 		<div className="block-editor-inserter__tabs">
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 b01481748ee887..7e9fb9793727ba 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -8,7 +8,7 @@ import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
-import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -31,13 +31,10 @@ export default function InserterSidebar() {
 	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: closeInserter,
-		focusOnMount: null,
+		focusOnMount: false,
 	} );
 
 	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
 
 	return (
 		<div
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index e2e84c2f8185c4..2c25b7058bb15a 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -10,7 +10,7 @@ import {
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -37,13 +37,10 @@ export default function InserterSidebar( {
 	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
-		focusOnMount: null,
+		focusOnMount: false,
 	} );
 
 	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
 
 	return (
 		<div

From affc8af052b343dc0bb46c94b9ad8c2f90bd5229 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 1 May 2024 14:32:35 +0100
Subject: [PATCH 16/24] fix test

---
 .../src/components/inserter/block-patterns-tab/index.js      | 5 -----
 .../block-editor/src/components/inserter/block-types-tab.js  | 5 -----
 .../src/components/inserter/media-tab/media-tab.js           | 5 -----
 test/e2e/specs/editor/various/inserting-blocks.spec.js       | 4 +++-
 4 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
index ebf816a9e2decb..d2f302683ed2da 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
@@ -14,7 +14,6 @@ import MobileTabNavigation from '../mobile-tab-navigation';
 import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
 import CategoryTabs from '../category-tabs';
-import InserterNoResults from '../no-results';
 
 function BlockPatternsTab( {
 	onSelectCategory,
@@ -29,10 +28,6 @@ function BlockPatternsTab( {
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 
-	if ( ! categories.length ) {
-		return <InserterNoResults />;
-	}
-
 	return (
 		<>
 			{ ! isMobile && (
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
index fc742c3bf64897..60e1ff4beb6d54 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -13,7 +13,6 @@ import InserterPanel from './panel';
 import useBlockTypesState from './hooks/use-block-types-state';
 import InserterListbox from '../inserter-listbox';
 import { orderBy } from '../../utils/sorting';
-import InserterNoResults from './no-results';
 
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
@@ -103,10 +102,6 @@ export function BlockTypesTab( {
 		didRenderAllCategories ? collectionEntries : EMPTY_ARRAY
 	);
 
-	if ( ! items.length ) {
-		return <InserterNoResults />;
-	}
-
 	return (
 		<InserterListbox>
 			<div>
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-tab.js b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
index 2f3985aef569cb..c5f462210fa4a4 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-tab.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
@@ -16,7 +16,6 @@ import { useMediaCategories } from './hooks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import CategoryTabs from '../category-tabs';
-import InserterNoResults from '../no-results';
 
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
 
@@ -49,10 +48,6 @@ function MediaTab( {
 		[ mediaCategories ]
 	);
 
-	if ( ! categories.length ) {
-		return <InserterNoResults />;
-	}
-
 	return (
 		<>
 			{ ! isMobile && (
diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js
index 6e19fd31a71b05..c277b056a323ce 100644
--- a/test/e2e/specs/editor/various/inserting-blocks.spec.js
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -598,6 +598,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 			.getByRole( 'searchbox', {
 				name: 'Search for blocks and patterns',
 			} )
+			.first()
 			.fill( 'Verse' );
 		await page.getByRole( 'button', { name: 'Browse All' } ).click();
 
@@ -607,9 +608,10 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
 				.getByRole( 'searchbox', {
 					name: 'Search for blocks and patterns',
 				} )
+				.first()
 		).toHaveValue( 'Verse' );
 		await expect(
-			page.getByRole( 'listbox', { name: 'Blocks' } )
+			page.getByRole( 'listbox', { name: 'Blocks' } ).first()
 		).toHaveCount( 1 );
 	} );
 

From 489d6a18a33fac90a262dead2537776573e0f6a6 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 1 May 2024 15:07:03 +0100
Subject: [PATCH 17/24] fix firefox bug

---
 .../src/components/secondary-sidebar/inserter-sidebar.js        | 2 +-
 packages/editor/src/components/inserter-sidebar/index.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 7e9fb9793727ba..a9e572b9d30593 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -31,7 +31,7 @@ export default function InserterSidebar() {
 	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: closeInserter,
-		focusOnMount: false,
+		focusOnMount: null, // Needs to be null not force for Firefox.
 	} );
 
 	const libraryRef = useRef();
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index 2c25b7058bb15a..cc168f820edc37 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -37,7 +37,7 @@ export default function InserterSidebar( {
 	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
-		focusOnMount: false,
+		focusOnMount: null, // Needs to be null not force for Firefox.
 	} );
 
 	const libraryRef = useRef();

From 5d7340ccdae7a913676ab1544668379389fb71c4 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 1 May 2024 17:18:16 +0300
Subject: [PATCH 18/24] auto focus the inserter when open so that we can tab
 into it

---
 .../src/components/secondary-sidebar/inserter-sidebar.js        | 2 +-
 packages/editor/src/components/inserter-sidebar/index.js        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 a9e572b9d30593..2374b35ad2d699 100644
--- a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
+++ b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -31,7 +31,7 @@ export default function InserterSidebar() {
 	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: closeInserter,
-		focusOnMount: null, // Needs to be null not force for Firefox.
+		focusOnMount: true,
 	} );
 
 	const libraryRef = useRef();
diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js
index cc168f820edc37..1611ea89096838 100644
--- a/packages/editor/src/components/inserter-sidebar/index.js
+++ b/packages/editor/src/components/inserter-sidebar/index.js
@@ -37,7 +37,7 @@ export default function InserterSidebar( {
 	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
-		focusOnMount: null, // Needs to be null not force for Firefox.
+		focusOnMount: true,
 	} );
 
 	const libraryRef = useRef();

From ca00872520505d1e2c4bf8d3dfaa8db787cfffc0 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 1 May 2024 09:24:57 -0500
Subject: [PATCH 19/24] Remove unused searchRef

---
 .../block-editor/src/components/inserter/menu.js     | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 4ecb0358fe8c76..3eab670e06db34 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -6,13 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	forwardRef,
-	useState,
-	useCallback,
-	useMemo,
-	useRef,
-} from '@wordpress/element';
+import { forwardRef, useState, useCallback, useMemo } from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput } from '@wordpress/compose';
@@ -121,8 +115,6 @@ function InserterMenu(
 
 	const showMediaPanel = selectedTab === 'media' && selectedMediaCategory;
 
-	const searchRef = useRef();
-
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
 			return null;
@@ -141,7 +133,6 @@ function InserterMenu(
 					value={ filterValue }
 					label={ __( 'Search for blocks and patterns' ) }
 					placeholder={ __( 'Search' ) }
-					ref={ searchRef }
 				/>
 				{ !! delayedFilterValue && (
 					<InserterSearchResults
@@ -177,7 +168,6 @@ function InserterMenu(
 		rootClientId,
 		__experimentalInsertionIndex,
 		isAppender,
-		searchRef,
 	] );
 
 	const blocksTab = useMemo(

From 0b1e2fb9bd486c93b8d12bc2e35a4d38c01a13a1 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 1 May 2024 09:37:10 -0500
Subject: [PATCH 20/24] Pin hint to bottom of block tab panel so it doesn't
 flash

---
 packages/block-editor/src/components/inserter/style.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 5e35180ae7c45c..088dd6b5cc083d 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -136,6 +136,11 @@ $block-inserter-tabs-height: 44px;
 		flex-direction: column;
 		overflow-y: auto;
 	}
+
+	// The first tab panel needs space-between to prevent a flash of the "hint" from appearing at the top then moving down.
+	.block-editor-inserter__tablist + .block-editor-inserter__tabpanel {
+		justify-content: space-between;
+	}
 }
 
 .block-editor-inserter__no-tab-container {

From 3044f5f51f46814d5d397debec66a6a689792a48 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 1 May 2024 09:51:27 -0500
Subject: [PATCH 21/24] Remove unnecessary tab filtering

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

diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index 937d03b215f3f0..90b02922dbe809 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -29,7 +29,7 @@ const mediaTab = {
 };
 
 function InserterTabs( { onSelect, tabsContents } ) {
-	const tabs = [ blocksTab, patternsTab, mediaTab ].filter( Boolean );
+	const tabs = [ blocksTab, patternsTab, mediaTab ];
 
 	return (
 		<div className="block-editor-inserter__tabs">

From 521b73209ddba848488f544cf3979a1597dc102d Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 1 May 2024 16:00:06 +0100
Subject: [PATCH 22/24] restore no results message

---
 .../src/components/inserter/block-patterns-tab/index.js      | 5 +++++
 .../block-editor/src/components/inserter/block-types-tab.js  | 5 +++++
 .../src/components/inserter/media-tab/media-tab.js           | 5 +++++
 3 files changed, 15 insertions(+)

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
index d2f302683ed2da..ebf816a9e2decb 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js
@@ -14,6 +14,7 @@ import MobileTabNavigation from '../mobile-tab-navigation';
 import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
 import CategoryTabs from '../category-tabs';
+import InserterNoResults from '../no-results';
 
 function BlockPatternsTab( {
 	onSelectCategory,
@@ -28,6 +29,10 @@ function BlockPatternsTab( {
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 
+	if ( ! categories.length ) {
+		return <InserterNoResults />;
+	}
+
 	return (
 		<>
 			{ ! isMobile && (
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
index 60e1ff4beb6d54..fc742c3bf64897 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -13,6 +13,7 @@ import InserterPanel from './panel';
 import useBlockTypesState from './hooks/use-block-types-state';
 import InserterListbox from '../inserter-listbox';
 import { orderBy } from '../../utils/sorting';
+import InserterNoResults from './no-results';
 
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
@@ -102,6 +103,10 @@ export function BlockTypesTab( {
 		didRenderAllCategories ? collectionEntries : EMPTY_ARRAY
 	);
 
+	if ( ! items.length ) {
+		return <InserterNoResults />;
+	}
+
 	return (
 		<InserterListbox>
 			<div>
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-tab.js b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
index c5f462210fa4a4..2f3985aef569cb 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-tab.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
@@ -16,6 +16,7 @@ import { useMediaCategories } from './hooks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import CategoryTabs from '../category-tabs';
+import InserterNoResults from '../no-results';
 
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
 
@@ -48,6 +49,10 @@ function MediaTab( {
 		[ mediaCategories ]
 	);
 
+	if ( ! categories.length ) {
+		return <InserterNoResults />;
+	}
+
 	return (
 		<>
 			{ ! isMobile && (

From fbd8901e441bc6840d8c1dc272a4e5a2c9340a8e Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 1 May 2024 10:10:26 -0500
Subject: [PATCH 23/24] Focus first active tab

---
 .../src/components/inserter/menu.js           | 22 ++++++++++++++++++-
 .../src/components/inserter/tabs.js           |  7 +++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 3eab670e06db34..672f625465117f 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -6,7 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { forwardRef, useState, useCallback, useMemo } from '@wordpress/element';
+import {
+	forwardRef,
+	useState,
+	useCallback,
+	useMemo,
+	useRef,
+	useLayoutEffect,
+} from '@wordpress/element';
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput } from '@wordpress/compose';
@@ -291,6 +298,18 @@ function InserterMenu(
 		setSelectedTab( value );
 	};
 
+	// Focus first active tab, if any
+	const tabsRef = useRef();
+	useLayoutEffect( () => {
+		if ( tabsRef.current ) {
+			window.requestAnimationFrame( () => {
+				tabsRef.current
+					.querySelector( '[role="tab"][aria-selected="true"]' )
+					?.focus();
+			} );
+		}
+	}, [] );
+
 	return (
 		<div
 			className={ classnames( 'block-editor-inserter__menu', {
@@ -300,6 +319,7 @@ function InserterMenu(
 		>
 			<div className="block-editor-inserter__main-area">
 				<InserterTabs
+					ref={ tabsRef }
 					onSelect={ handleSetSelectedTab }
 					tabsContents={ inserterTabsContents }
 				/>
diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
index 90b02922dbe809..9ba80c537b881b 100644
--- a/packages/block-editor/src/components/inserter/tabs.js
+++ b/packages/block-editor/src/components/inserter/tabs.js
@@ -3,6 +3,7 @@
  */
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,11 +29,11 @@ const mediaTab = {
 	title: __( 'Media' ),
 };
 
-function InserterTabs( { onSelect, tabsContents } ) {
+function InserterTabs( { onSelect, tabsContents }, ref ) {
 	const tabs = [ blocksTab, patternsTab, mediaTab ];
 
 	return (
-		<div className="block-editor-inserter__tabs">
+		<div className="block-editor-inserter__tabs" ref={ ref }>
 			<Tabs onSelect={ onSelect }>
 				<Tabs.TabList className="block-editor-inserter__tablist">
 					{ tabs.map( ( tab ) => (
@@ -60,4 +61,4 @@ function InserterTabs( { onSelect, tabsContents } ) {
 	);
 }
 
-export default InserterTabs;
+export default forwardRef( InserterTabs );

From 020277cce70a8c78732ebd0e285be4445c406ba8 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 1 May 2024 16:56:03 +0100
Subject: [PATCH 24/24] hide the inserter tabs on the widget editor

---
 packages/edit-widgets/src/components/layout/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/edit-widgets/src/components/layout/style.scss b/packages/edit-widgets/src/components/layout/style.scss
index 1aed3d3eefc86f..a10665f7cafe7d 100644
--- a/packages/edit-widgets/src/components/layout/style.scss
+++ b/packages/edit-widgets/src/components/layout/style.scss
@@ -18,6 +18,10 @@
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});
 
+	.block-editor-inserter__tab {
+		display: none;
+	}
+
 	@include break-medium() {
 		height: 100%;
 	}