From 2b02e30ffc5f085eca69e39d785f85a86b86b725 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 1 May 2024 13:46:34 -0500
Subject: [PATCH 1/3] Refactor InserterTabs to use children and remove
 re-memoizing

---
 .../src/components/inserter/menu.js           | 179 +++++++++---------
 .../src/components/inserter/tabs.js           |   4 +-
 2 files changed, 89 insertions(+), 94 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 672f625465117f..2832a80a219918 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -126,6 +126,7 @@ function InserterMenu(
 		if ( selectedTab === 'media' ) {
 			return null;
 		}
+
 		return (
 			<>
 				<SearchControl
@@ -177,83 +178,81 @@ function InserterMenu(
 		isAppender,
 	] );
 
-	const blocksTab = useMemo(
-		() => (
+	const blocksTab = useMemo( () => {
+		if ( selectedTab !== 'blocks' ) {
+			return null;
+		}
+
+		return (
 			<>
-				{ inserterSearch }
-				{ ! 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>
-						) }
-					</>
+				<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>
 				) }
 			</>
-		),
-		[
-			destinationRootClientId,
-			onInsert,
-			onHover,
-			showMostUsedBlocks,
-			showInserterHelpPanel,
-			inserterSearch,
-			delayedFilterValue,
-		]
-	);
+		);
+	}, [
+		destinationRootClientId,
+		onInsert,
+		onHover,
+		showMostUsedBlocks,
+		showInserterHelpPanel,
+		selectedTab,
+	] );
 
-	const patternsTab = useMemo(
-		() => (
-			<>
-				{ inserterSearch }
-				{ ! delayedFilterValue && (
-					<BlockPatternsTab
+	const patternsTab = useMemo( () => {
+		if ( selectedTab !== 'patterns' ) {
+			return null;
+		}
+
+		return (
+			<BlockPatternsTab
+				rootClientId={ destinationRootClientId }
+				onInsert={ onInsertPattern }
+				onSelectCategory={ onClickPatternCategory }
+				selectedCategory={ selectedPatternCategory }
+			>
+				{ showPatternPanel && (
+					<PatternCategoryPreviewPanel
 						rootClientId={ destinationRootClientId }
 						onInsert={ onInsertPattern }
-						onSelectCategory={ onClickPatternCategory }
-						selectedCategory={ selectedPatternCategory }
-					>
-						{ showPatternPanel && (
-							<PatternCategoryPreviewPanel
-								rootClientId={ destinationRootClientId }
-								onInsert={ onInsertPattern }
-								onHover={ onHoverPattern }
-								category={ selectedPatternCategory }
-								patternFilter={ patternFilter }
-								showTitlesAsTooltip
-							/>
-						) }
-					</BlockPatternsTab>
+						onHover={ onHoverPattern }
+						category={ selectedPatternCategory }
+						patternFilter={ patternFilter }
+						showTitlesAsTooltip
+					/>
 				) }
-			</>
-		),
-		[
-			destinationRootClientId,
-			onHoverPattern,
-			onInsertPattern,
-			onClickPatternCategory,
-			patternFilter,
-			selectedPatternCategory,
-			showPatternPanel,
-			inserterSearch,
-			delayedFilterValue,
-		]
-	);
+			</BlockPatternsTab>
+		);
+	}, [
+		destinationRootClientId,
+		onHoverPattern,
+		onInsertPattern,
+		onClickPatternCategory,
+		patternFilter,
+		selectedPatternCategory,
+		showPatternPanel,
+		selectedTab,
+	] );
 
-	const mediaTab = useMemo(
-		() => (
+	const mediaTab = useMemo( () => {
+		if ( selectedTab !== 'media' ) {
+			return null;
+		}
+
+		return (
 			<MediaTab
 				rootClientId={ destinationRootClientId }
 				selectedCategory={ selectedMediaCategory }
@@ -268,24 +267,15 @@ function InserterMenu(
 					/>
 				) }
 			</MediaTab>
-		),
-		[
-			destinationRootClientId,
-			onInsert,
-			selectedMediaCategory,
-			setSelectedMediaCategory,
-			showMediaPanel,
-		]
-	);
-
-	const inserterTabsContents = useMemo(
-		() => ( {
-			blocks: blocksTab,
-			patterns: patternsTab,
-			media: mediaTab,
-		} ),
-		[ blocksTab, mediaTab, patternsTab ]
-	);
+		);
+	}, [
+		destinationRootClientId,
+		onInsert,
+		selectedMediaCategory,
+		setSelectedMediaCategory,
+		showMediaPanel,
+		selectedTab,
+	] );
 
 	// When the pattern panel is showing, we want to use zoom out mode
 	useZoomOut( showPatternPanel );
@@ -318,11 +308,16 @@ function InserterMenu(
 			ref={ ref }
 		>
 			<div className="block-editor-inserter__main-area">
-				<InserterTabs
-					ref={ tabsRef }
-					onSelect={ handleSetSelectedTab }
-					tabsContents={ inserterTabsContents }
-				/>
+				<InserterTabs ref={ tabsRef } onSelect={ handleSetSelectedTab }>
+					{ inserterSearch }
+					{ selectedTab === 'blocks' &&
+						! delayedFilterValue &&
+						blocksTab }
+					{ selectedTab === 'patterns' &&
+						! delayedFilterValue &&
+						patternsTab }
+					{ selectedTab === 'media' && mediaTab }
+				</InserterTabs>
 			</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 9ba80c537b881b..5506e3c315cbdf 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 = {
 	title: __( 'Media' ),
 };
 
-function InserterTabs( { onSelect, tabsContents }, ref ) {
+function InserterTabs( { onSelect, children }, ref ) {
 	const tabs = [ blocksTab, patternsTab, mediaTab ];
 
 	return (
@@ -53,7 +53,7 @@ function InserterTabs( { onSelect, tabsContents }, ref ) {
 						focusable={ false }
 						className="block-editor-inserter__tabpanel"
 					>
-						{ tabsContents[ tab.name ] }
+						{ children }
 					</Tabs.TabPanel>
 				) ) }
 			</Tabs>

From 4483d6a8220470546ed76d7e6cf7908aed2f2cc4 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Thu, 2 May 2024 11:27:55 +0100
Subject: [PATCH 2/3] don't make selectedTab a dependency of each tab

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

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 2832a80a219918..5ae8f2cb88e7a0 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -179,10 +179,6 @@ function InserterMenu(
 	] );
 
 	const blocksTab = useMemo( () => {
-		if ( selectedTab !== 'blocks' ) {
-			return null;
-		}
-
 		return (
 			<>
 				<div className="block-editor-inserter__block-list">
@@ -209,14 +205,9 @@ function InserterMenu(
 		onHover,
 		showMostUsedBlocks,
 		showInserterHelpPanel,
-		selectedTab,
 	] );
 
 	const patternsTab = useMemo( () => {
-		if ( selectedTab !== 'patterns' ) {
-			return null;
-		}
-
 		return (
 			<BlockPatternsTab
 				rootClientId={ destinationRootClientId }
@@ -244,14 +235,9 @@ function InserterMenu(
 		patternFilter,
 		selectedPatternCategory,
 		showPatternPanel,
-		selectedTab,
 	] );
 
 	const mediaTab = useMemo( () => {
-		if ( selectedTab !== 'media' ) {
-			return null;
-		}
-
 		return (
 			<MediaTab
 				rootClientId={ destinationRootClientId }
@@ -274,7 +260,6 @@ function InserterMenu(
 		selectedMediaCategory,
 		setSelectedMediaCategory,
 		showMediaPanel,
-		selectedTab,
 	] );
 
 	// When the pattern panel is showing, we want to use zoom out mode

From dffc184321a7c67969c5513e28561814a53eb0ec Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Thu, 2 May 2024 17:54:12 +0100
Subject: [PATCH 3/3] cast the categories to a bool

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

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 5ae8f2cb88e7a0..b79a44f6ea9428 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -118,9 +118,9 @@ function InserterMenu(
 	const showPatternPanel =
 		selectedTab === 'patterns' &&
 		! delayedFilterValue &&
-		selectedPatternCategory;
+		!! selectedPatternCategory;
 
-	const showMediaPanel = selectedTab === 'media' && selectedMediaCategory;
+	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
 
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {