From 36d5f9b4055c4d8990224c02100fcb12572a3078 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Mon, 22 Apr 2024 12:43:39 -0500
Subject: [PATCH 1/8] Start on converting media to tabs pattern

---
 .../inserter/media-tab/media-tab.js           | 113 ++++++++++--------
 .../src/components/inserter/menu.js           |  37 +++---
 2 files changed, 89 insertions(+), 61 deletions(-)

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 b448ae2a406499..0bea662e166c31 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
@@ -9,11 +9,10 @@ import classNames from 'classnames';
 import { __, isRTL } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
 	__experimentalHStack as HStack,
 	FlexBlock,
 	Button,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
@@ -27,14 +26,18 @@ import MediaUpload from '../../media-upload';
 import { useMediaCategories } from './hooks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import MobileTabNavigation from '../mobile-tab-navigation';
+import { unlock } from '../../../lock-unlock';
 
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
 
+const { Tabs } = unlock( componentsPrivateApis );
+
 function MediaTab( {
 	rootClientId,
 	selectedCategory,
 	onSelectCategory,
 	onInsert,
+	children,
 } ) {
 	const mediaCategories = useMediaCategories( rootClientId );
 	const isMobile = useViewportMatch( 'medium', '<' );
@@ -57,28 +60,36 @@ function MediaTab( {
 			} ) ),
 		[ mediaCategories ]
 	);
+
 	return (
 		<>
 			{ ! isMobile && (
 				<div className={ `${ baseCssClass }-container` }>
-					<nav aria-label={ __( 'Media categories' ) }>
-						<ItemGroup role="list" className={ baseCssClass }>
+					<Tabs
+						selectOnMove={ false }
+						selectedTabId={
+							selectedCategory ? selectedCategory.name : null
+						}
+						orientation={ 'vertical' }
+						onSelect={ ( mediaCategoryId ) => {
+							// Pass the full category object
+							onSelectCategory(
+								mediaCategories.find(
+									( mediaCategory ) =>
+										mediaCategory.name === mediaCategoryId
+								)
+							);
+						} }
+					>
+						<Tabs.TabList className={ `${ baseCssClass }-tablist` }>
 							{ mediaCategories.map( ( mediaCategory ) => (
-								<Item
-									role="listitem"
+								<Tabs.Tab
 									key={ mediaCategory.name }
-									onClick={ () =>
-										onSelectCategory( mediaCategory )
-									}
+									tabId={ mediaCategory.name }
 									className={ classNames(
-										`${ baseCssClass }__media-category`,
-										{
-											'is-selected':
-												selectedCategory ===
-												mediaCategory,
-										}
+										`${ baseCssClass }__media-category-tab`
 									) }
-									aria-label={ mediaCategory.labels.name }
+									aria-label={ mediaCategory.name }
 									aria-current={
 										mediaCategory === selectedCategory
 											? 'true'
@@ -97,38 +108,46 @@ function MediaTab( {
 											}
 										/>
 									</HStack>
-								</Item>
+								</Tabs.Tab>
 							) ) }
-							<div role="listitem">
-								<MediaUploadCheck>
-									<MediaUpload
-										multiple={ false }
-										onSelect={ onSelectMedia }
-										allowedTypes={ ALLOWED_MEDIA_TYPES }
-										render={ ( { open } ) => (
-											<Button
-												onClick={ ( event ) => {
-													// Safari doesn't emit a focus event on button elements when
-													// clicked and we need to manually focus the button here.
-													// The reason is that core's Media Library modal explicitly triggers a
-													// focus event and therefore a `blur` event is triggered on a different
-													// element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`
-													// attribute making the Inserter dialog to close.
-													event.target.focus();
-													open();
-												} }
-												className="block-editor-inserter__media-library-button"
-												variant="secondary"
-												data-unstable-ignore-focus-outside-for-relatedtarget=".media-modal"
-											>
-												{ __( 'Open Media Library' ) }
-											</Button>
-										) }
-									/>
-								</MediaUploadCheck>
-							</div>
-						</ItemGroup>
-					</nav>
+						</Tabs.TabList>
+						{ mediaCategories.map( ( mediaCategory ) => (
+							<Tabs.TabPanel
+								key={ mediaCategory.name }
+								tabId={ mediaCategory.name }
+								focusable={ false }
+								className={ `${ baseCssClass }__category-panel` }
+							>
+								{ children }
+							</Tabs.TabPanel>
+						) ) }
+					</Tabs>
+					<MediaUploadCheck>
+						<MediaUpload
+							multiple={ false }
+							onSelect={ onSelectMedia }
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							render={ ( { open } ) => (
+								<Button
+									onClick={ ( event ) => {
+										// Safari doesn't emit a focus event on button elements when
+										// clicked and we need to manually focus the button here.
+										// The reason is that core's Media Library modal explicitly triggers a
+										// focus event and therefore a `blur` event is triggered on a different
+										// element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`
+										// attribute making the Inserter dialog to close.
+										event.target.focus();
+										open();
+									} }
+									className="block-editor-inserter__media-library-button"
+									variant="secondary"
+									data-unstable-ignore-focus-outside-for-relatedtarget=".media-modal"
+								>
+									{ __( 'Open Media Library' ) }
+								</Button>
+							) }
+						/>
+					</MediaUploadCheck>
 				</div>
 			) }
 			{ isMobile && (
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index f42a7f06019cc3..ad1f6f856f182e 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -123,7 +123,11 @@ function InserterMenu(
 				__experimentalOnPatternCategorySelection();
 			}
 		},
-		[ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ]
+		[
+			setSelectedPatternCategory,
+			__experimentalOnPatternCategorySelection,
+			isZoomedOutViewExperimentEnabled,
+		]
 	);
 
 	const showPatternPanel =
@@ -131,6 +135,11 @@ function InserterMenu(
 		! delayedFilterValue &&
 		selectedPatternCategory;
 
+	const showMediaPanel =
+		selectedTab === 'media' &&
+		! delayedFilterValue &&
+		selectedMediaCategory;
+
 	const blocksTab = useMemo(
 		() => (
 			<>
@@ -183,8 +192,10 @@ function InserterMenu(
 		),
 		[
 			destinationRootClientId,
+			onHoverPattern,
 			onInsertPattern,
 			onClickPatternCategory,
+			patternFilter,
 			selectedPatternCategory,
 			showPatternPanel,
 		]
@@ -197,13 +208,22 @@ function InserterMenu(
 				selectedCategory={ selectedMediaCategory }
 				onSelectCategory={ setSelectedMediaCategory }
 				onInsert={ onInsert }
-			/>
+			>
+				{ showMediaPanel && (
+					<MediaCategoryDialog
+						rootClientId={ destinationRootClientId }
+						onInsert={ onInsert }
+						category={ selectedMediaCategory }
+					/>
+				) }
+			</MediaTab>
 		),
 		[
 			destinationRootClientId,
 			onInsert,
 			selectedMediaCategory,
 			setSelectedMediaCategory,
+			showMediaPanel,
 		]
 	);
 
@@ -224,10 +244,6 @@ function InserterMenu(
 	} ) );
 
 	const showAsTabs = ! delayedFilterValue && ( showPatterns || showMedia );
-	const showMediaPanel =
-		selectedTab === 'media' &&
-		! delayedFilterValue &&
-		selectedMediaCategory;
 
 	// When the pattern panel is showing, we want to use zoom out mode
 	useZoomOut( showPatternPanel );
@@ -243,7 +259,7 @@ function InserterMenu(
 	return (
 		<div
 			className={ classnames( 'block-editor-inserter__menu', {
-				'show-panel': showPatternPanel,
+				'show-panel': showPatternPanel || showMediaPanel,
 			} ) }
 		>
 			<div
@@ -295,13 +311,6 @@ function InserterMenu(
 					</div>
 				) }
 			</div>
-			{ showMediaPanel && (
-				<MediaCategoryDialog
-					rootClientId={ destinationRootClientId }
-					onInsert={ onInsert }
-					category={ selectedMediaCategory }
-				/>
-			) }
 			{ showInserterHelpPanel && hoveredItem && (
 				<Popover
 					className="block-editor-inserter__preview-container__popover"

From e1a980e66ef50f90845e2151f40a6aa536910424 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Mon, 22 Apr 2024 14:28:13 -0500
Subject: [PATCH 2/8] Convert block patterns tablist into catebory tabs
 component

---
 .../inserter/block-patterns-tab/index.js      | 75 +++----------------
 .../inserter/category-tabs/index.js           | 74 ++++++++++++++++++
 .../src/components/inserter/style.scss        | 37 ++++-----
 3 files changed, 100 insertions(+), 86 deletions(-)
 create mode 100644 packages/block-editor/src/components/inserter/category-tabs/index.js

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 34993fc6db87fa..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
@@ -2,15 +2,9 @@
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { __, isRTL } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import {
-	__experimentalHStack as HStack,
-	FlexBlock,
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -19,9 +13,7 @@ import PatternsExplorerModal from '../block-patterns-explorer';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
-import { unlock } from '../../../lock-unlock';
-
-const { Tabs } = unlock( componentsPrivateApis );
+import CategoryTabs from '../category-tabs';
 
 function BlockPatternsTab( {
 	onSelectCategory,
@@ -40,60 +32,13 @@ function BlockPatternsTab( {
 		<>
 			{ ! isMobile && (
 				<div className="block-editor-inserter__block-patterns-tabs-container">
-					<Tabs
-						selectOnMove={ false }
-						selectedTabId={
-							selectedCategory ? selectedCategory.name : null
-						}
-						orientation={ 'vertical' }
-						onSelect={ ( categoryId ) => {
-							// Pass the full category object
-							onSelectCategory(
-								categories.find(
-									( category ) => category.name === categoryId
-								)
-							);
-						} }
+					<CategoryTabs
+						categories={ categories }
+						selectedCategory={ selectedCategory }
+						onSelectCategory={ onSelectCategory }
 					>
-						<Tabs.TabList className="block-editor-inserter__block-patterns-tablist">
-							{ categories.map( ( category ) => (
-								<Tabs.Tab
-									key={ category.name }
-									tabId={ category.name }
-									className="block-editor-inserter__patterns-tab"
-									aria-label={ category.label }
-									aria-current={
-										category === selectedCategory
-											? 'true'
-											: undefined
-									}
-								>
-									<HStack>
-										<FlexBlock>
-											{ category.label }
-										</FlexBlock>
-										<Icon
-											icon={
-												isRTL()
-													? chevronLeft
-													: chevronRight
-											}
-										/>
-									</HStack>
-								</Tabs.Tab>
-							) ) }
-						</Tabs.TabList>
-						{ categories.map( ( category ) => (
-							<Tabs.TabPanel
-								key={ category.name }
-								tabId={ category.name }
-								focusable={ false }
-								className="block-editor-inserter__patterns-category-panel"
-							>
-								{ children }
-							</Tabs.TabPanel>
-						) ) }
-					</Tabs>
+						{ children }
+					</CategoryTabs>
 					<Button
 						className="block-editor-inserter__patterns-explore-button"
 						onClick={ () => setShowPatternsExplorer( true ) }
@@ -106,7 +51,7 @@ function BlockPatternsTab( {
 			{ isMobile && (
 				<MobileTabNavigation categories={ categories }>
 					{ ( category ) => (
-						<div className="block-editor-inserter__patterns-category-panel">
+						<div className="block-editor-inserter__category-panel">
 							<PatternCategoryPreviews
 								key={ category.name }
 								onInsert={ onInsert }
diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js
new file mode 100644
index 00000000000000..47c9f0e051a66e
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/category-tabs/index.js
@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+import {
+	__experimentalHStack as HStack,
+	FlexBlock,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+function CategoryTabs( {
+	categories,
+	selectedCategory,
+	onSelectCategory,
+	children,
+} ) {
+	return (
+		<Tabs
+			className="block-editor-inserter__category-tabs"
+			selectOnMove={ false }
+			selectedTabId={ selectedCategory ? selectedCategory.name : null }
+			orientation={ 'vertical' }
+			onSelect={ ( categoryId ) => {
+				// Pass the full category object
+				onSelectCategory(
+					categories.find(
+						( category ) => category.name === categoryId
+					)
+				);
+			} }
+		>
+			<Tabs.TabList className="block-editor-inserter__category-tablist">
+				{ categories.map( ( category ) => (
+					<Tabs.Tab
+						key={ category.name }
+						tabId={ category.name }
+						className="block-editor-inserter__category-tab"
+						aria-label={ category.label }
+						aria-current={
+							category === selectedCategory ? 'true' : undefined
+						}
+					>
+						<HStack>
+							<FlexBlock>{ category.label }</FlexBlock>
+							<Icon
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
+						</HStack>
+					</Tabs.Tab>
+				) ) }
+			</Tabs.TabList>
+			{ categories.map( ( category ) => (
+				<Tabs.TabPanel
+					key={ category.name }
+					tabId={ category.name }
+					focusable={ false }
+					className="block-editor-inserter__category-panel"
+				>
+					{ children }
+				</Tabs.TabPanel>
+			) ) }
+		</Tabs>
+	);
+}
+
+export default CategoryTabs;
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 87e9b04fddaf57..67b2ba80f34390 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -249,7 +249,7 @@ $block-inserter-tabs-height: 44px;
 	padding: $grid-unit-20;
 }
 
-.block-editor-inserter__block-patterns-tablist {
+.block-editor-inserter__category-tablist {
 	display: flex;
 	flex-direction: column;
 	border: none;
@@ -259,7 +259,7 @@ $block-inserter-tabs-height: 44px;
 		margin-top: auto;
 	}
 
-	.block-editor-inserter__patterns-tab {
+	.block-editor-inserter__category-tab {
 		// Account for the icon on the right so that it's visually balanced.
 		padding: $grid-unit-10 $grid-unit-05 $grid-unit-10 $grid-unit-15;
 		text-align: left;
@@ -314,7 +314,7 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__patterns-category-panel {
+.block-editor-inserter__category-panel {
 	background: $gray-100;
 	border-left: $border-width solid $gray-200;
 	border-right: $border-width solid $gray-200;
@@ -332,20 +332,20 @@ $block-inserter-tabs-height: 44px;
 		left: 100%;
 		width: 300px;
 	}
+}
 
-	.block-editor-inserter__patterns-category-panel-header {
-		padding: 16px $grid-unit-30;
-	}
-	.block-editor-inserter__patterns-category-no-results {
-		margin-top: $grid-unit-30;
-	}
+.block-editor-inserter__patterns-category-panel-header {
+	padding: 16px $grid-unit-30;
+}
+.block-editor-inserter__patterns-category-no-results {
+	margin-top: $grid-unit-30;
+}
 
-	.block-editor-block-patterns-list {
-		overflow-y: auto;
-		flex-grow: 1;
-		height: 100%;
-		padding: $grid-unit-20 $grid-unit-30;
-	}
+.block-editor-block-patterns-list {
+	overflow-y: auto;
+	flex-grow: 1;
+	height: 100%;
+	padding: $grid-unit-20 $grid-unit-30;
 }
 
 .block-editor-inserter__preview-content {
@@ -511,11 +511,6 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__media-tabs-container {
-	height: 100%;
-
-	nav {
-		height: 100%;
-	}
 
 	.block-editor-inserter__media-library-button {
 		padding: $grid-unit-20;
@@ -537,7 +532,7 @@ $block-inserter-tabs-height: 44px;
 		margin-top: auto;
 	}
 
-	.block-editor-inserter__media-tabs__media-category {
+	.block-editor-inserter__media-tabs__media-category-tab {
 		// Account for the icon on the right so that it's visually balanced.
 		padding-right: $grid-unit-05;
 

From 9a7692ad340a5c0e738ebf5731fdb970c1c71b5f Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Mon, 22 Apr 2024 15:12:57 -0500
Subject: [PATCH 3/8] Implement CategoryTabs for media tab and tab panel

This includes a lot of refactoring/removing CSS. Also removes auto-focus to search input when tab panel is mounted, since it's not a normal interaction for auto-focus with tabpanel implementation.
---
 .../inserter/media-tab/media-panel.js         |  22 +-
 .../inserter/media-tab/media-tab.js           |  85 +------
 .../src/components/inserter/style.scss        | 221 ++++++------------
 3 files changed, 87 insertions(+), 241 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/media-tab/media-panel.js b/packages/block-editor/src/components/inserter/media-tab/media-panel.js
index 49601c9c8ad1bc..3c4285a261e486 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-panel.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-panel.js
@@ -1,9 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect } from '@wordpress/element';
 import { Spinner, SearchControl } from '@wordpress/components';
-import { focus } from '@wordpress/dom';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput } from '@wordpress/compose';
 
@@ -17,22 +15,12 @@ import InserterNoResults from '../no-results';
 const INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
 
 export function MediaCategoryDialog( { rootClientId, onInsert, category } ) {
-	const container = useRef();
-	useEffect( () => {
-		const timeout = setTimeout( () => {
-			const [ firstTabbable ] = focus.tabbable.find( container.current );
-			firstTabbable?.focus();
-		} );
-		return () => clearTimeout( timeout );
-	}, [ category ] );
 	return (
-		<div ref={ container } className="block-editor-inserter__media-dialog">
-			<MediaCategoryPanel
-				rootClientId={ rootClientId }
-				onInsert={ onInsert }
-				category={ category }
-			/>
-		</div>
+		<MediaCategoryPanel
+			rootClientId={ rootClientId }
+			onInsert={ onInsert }
+			category={ category }
+		/>
 	);
 }
 
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 0bea662e166c31..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
@@ -1,21 +1,10 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { __, isRTL } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
-import {
-	__experimentalHStack as HStack,
-	FlexBlock,
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -26,12 +15,10 @@ import MediaUpload from '../../media-upload';
 import { useMediaCategories } from './hooks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import MobileTabNavigation from '../mobile-tab-navigation';
-import { unlock } from '../../../lock-unlock';
+import CategoryTabs from '../category-tabs';
 
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
 
-const { Tabs } = unlock( componentsPrivateApis );
-
 function MediaTab( {
 	rootClientId,
 	selectedCategory,
@@ -52,7 +39,7 @@ function MediaTab( {
 		},
 		[ onInsert ]
 	);
-	const mobileMediaCategories = useMemo(
+	const categories = useMemo(
 		() =>
 			mediaCategories.map( ( mediaCategory ) => ( {
 				...mediaCategory,
@@ -65,63 +52,13 @@ function MediaTab( {
 		<>
 			{ ! isMobile && (
 				<div className={ `${ baseCssClass }-container` }>
-					<Tabs
-						selectOnMove={ false }
-						selectedTabId={
-							selectedCategory ? selectedCategory.name : null
-						}
-						orientation={ 'vertical' }
-						onSelect={ ( mediaCategoryId ) => {
-							// Pass the full category object
-							onSelectCategory(
-								mediaCategories.find(
-									( mediaCategory ) =>
-										mediaCategory.name === mediaCategoryId
-								)
-							);
-						} }
+					<CategoryTabs
+						categories={ categories }
+						selectedCategory={ selectedCategory }
+						onSelectCategory={ onSelectCategory }
 					>
-						<Tabs.TabList className={ `${ baseCssClass }-tablist` }>
-							{ mediaCategories.map( ( mediaCategory ) => (
-								<Tabs.Tab
-									key={ mediaCategory.name }
-									tabId={ mediaCategory.name }
-									className={ classNames(
-										`${ baseCssClass }__media-category-tab`
-									) }
-									aria-label={ mediaCategory.name }
-									aria-current={
-										mediaCategory === selectedCategory
-											? 'true'
-											: undefined
-									}
-								>
-									<HStack>
-										<FlexBlock>
-											{ mediaCategory.labels.name }
-										</FlexBlock>
-										<Icon
-											icon={
-												isRTL()
-													? chevronLeft
-													: chevronRight
-											}
-										/>
-									</HStack>
-								</Tabs.Tab>
-							) ) }
-						</Tabs.TabList>
-						{ mediaCategories.map( ( mediaCategory ) => (
-							<Tabs.TabPanel
-								key={ mediaCategory.name }
-								tabId={ mediaCategory.name }
-								focusable={ false }
-								className={ `${ baseCssClass }__category-panel` }
-							>
-								{ children }
-							</Tabs.TabPanel>
-						) ) }
-					</Tabs>
+						{ children }
+					</CategoryTabs>
 					<MediaUploadCheck>
 						<MediaUpload
 							multiple={ false }
@@ -151,7 +88,7 @@ function MediaTab( {
 				</div>
 			) }
 			{ isMobile && (
-				<MobileTabNavigation categories={ mobileMediaCategories }>
+				<MobileTabNavigation categories={ categories }>
 					{ ( category ) => (
 						<MediaCategoryPanel
 							onInsert={ onInsert }
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 67b2ba80f34390..cc2a43d6d7d82a 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -228,7 +228,7 @@ $block-inserter-tabs-height: 44px;
 		display: block;
 	}
 
-	.block-editor-block-preview__container {
+	.block-editor-inserter__media-list__list-item {
 		height: 100%;
 	}
 
@@ -239,12 +239,7 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__patterns-explore-button.components-button {
-	padding: $grid-unit-20;
-	justify-content: center;
-	width: 100%;
-}
-
+.block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
 	padding: $grid-unit-20;
 }
@@ -341,6 +336,7 @@ $block-inserter-tabs-height: 44px;
 	margin-top: $grid-unit-30;
 }
 
+.block-editor-inserter__media-list,
 .block-editor-block-patterns-list {
 	overflow-y: auto;
 	flex-grow: 1;
@@ -405,7 +401,7 @@ $block-inserter-tabs-height: 44px;
 		.block-editor-block-patterns-list__list-item {
 			margin-bottom: 0;
 		}
-		.block-editor-block-preview__container {
+		.block-editor-inserter__media-list__list-item {
 			min-height: 100px;
 		}
 	}
@@ -498,7 +494,7 @@ $block-inserter-tabs-height: 44px;
 			min-height: 240px;
 		}
 
-		.block-editor-block-preview__container {
+		.block-editor-inserter__media-list__list-item {
 			height: inherit;
 			min-height: 100px;
 			max-height: 800px;
@@ -510,9 +506,9 @@ $block-inserter-tabs-height: 44px;
 	font-size: calc(1.25 * 13px);
 }
 
-.block-editor-inserter__media-tabs-container {
-
-	.block-editor-inserter__media-library-button {
+.block-editor-inserter__patterns-explore-button,
+.block-editor-inserter__media-library-button {
+	&.components-button {
 		padding: $grid-unit-20;
 		justify-content: center;
 		margin-top: $grid-unit-20;
@@ -520,76 +516,6 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__media-tabs {
-	display: flex;
-	flex-direction: column;
-	padding: $grid-unit-20;
-	overflow-y: auto;
-	height: 100%;
-
-	// Push the listitem wrapping the "open media library" button to the bottom of the panel.
-	div[role="listitem"]:last-child {
-		margin-top: auto;
-	}
-
-	.block-editor-inserter__media-tabs__media-category-tab {
-		// Account for the icon on the right so that it's visually balanced.
-		padding-right: $grid-unit-05;
-
-		&.is-selected {
-			color: var(--wp-admin-theme-color);
-			position: relative;
-
-			.components-flex-item {
-				filter: brightness(0.95);
-			}
-
-			svg {
-				fill: var(--wp-admin-theme-color);
-			}
-
-			&::after {
-				content: "";
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				border-radius: $radius-block-ui;
-				opacity: 0.04;
-				background: var(--wp-admin-theme-color);
-			}
-		}
-	}
-}
-
-.block-editor-inserter__media-dialog {
-	background: $gray-100;
-	border-left: $border-width solid $gray-200;
-	border-right: $border-width solid $gray-200;
-	position: absolute;
-	padding: $grid-unit-20 $grid-unit-30;
-	top: 0;
-	left: 0;
-	height: 100%;
-	width: 100%;
-	overflow-y: auto;
-	scrollbar-gutter: stable both-edges;
-
-	@include break-medium {
-		left: 100%;
-		display: block;
-		width: 300px;
-	}
-
-	.block-editor-block-preview__container {
-		box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
-		&:hover {
-			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
-		}
-	}
-}
-
 .block-editor-inserter__media-panel {
 	min-height: 100%;
 	padding: 0 $grid-unit-20;
@@ -609,6 +535,7 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-inserter__media-panel-search {
+		padding: $grid-unit-20 $grid-unit-30;
 		// TODO: Consider using the Theme component to automatically adapt to a gray background.
 		&:not(:focus-within) {
 			--wp-components-color-background: #{$white};
@@ -616,90 +543,88 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__media-list {
-	margin-top: $grid-unit-20;
-	.block-editor-inserter__media-list__list-item {
-		position: relative;
-		cursor: pointer;
-		margin-bottom: $grid-unit-30;
+.block-editor-inserter__media-list__list-item {
+	position: relative;
+	cursor: pointer;
+	margin-bottom: $grid-unit-30;
+	box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
 
-		&.is-placeholder {
-			min-height: 100px;
-		}
+	&.is-placeholder {
+		min-height: 100px;
+	}
 
-		&[draggable="true"] .block-editor-block-preview__container {
-			cursor: grab;
-		}
+	&[draggable="true"] .block-editor-inserter__media-list__list-item {
+		cursor: grab;
+	}
 
-		&.is-hovered {
-			.block-editor-inserter__media-list__item-preview {
-				box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
-			}
+	&.is-hovered {
+		.block-editor-inserter__media-list__item-preview {
+			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
+		}
 
-			.block-editor-inserter__media-list__item-preview-options > button {
-				display: block;
-			}
+		.block-editor-inserter__media-list__item-preview-options > button {
+			display: block;
 		}
+	}
 
-		.block-editor-inserter__media-list__item-preview-options {
-			position: absolute;
-			right: $grid-unit-10;
-			top: $grid-unit-10;
+	.block-editor-inserter__media-list__item-preview-options {
+		position: absolute;
+		right: $grid-unit-10;
+		top: $grid-unit-10;
 
-			> button {
-				background: $white;
-				border-radius: $radius-block-ui;
-				display: none;
+		> button {
+			background: $white;
+			border-radius: $radius-block-ui;
+			display: none;
 
-				// These styles are important so as focus isn't lost
-				// when the button is focused and we hover away.
-				&.is-opened,
-				&:focus {
-					display: block;
-				}
+			// These styles are important so as focus isn't lost
+			// when the button is focused and we hover away.
+			&.is-opened,
+			&:focus {
+				display: block;
+			}
 
-				&:hover {
-					box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			&:hover {
+				box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 
-					// Windows High Contrast mode will show this outline, but not the box-shadow.
-					outline: 2px solid transparent;
-				}
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 2px solid transparent;
 			}
 		}
 	}
+}
 
-	.block-editor-inserter__media-list__item {
-		height: 100%;
+.block-editor-inserter__media-list__item {
+	height: 100%;
 
-		.block-editor-inserter__media-list__item-preview {
-			display: flex;
-			align-items: center;
-			overflow: hidden;
-			border-radius: 2px;
+	.block-editor-inserter__media-list__item-preview {
+		display: flex;
+		align-items: center;
+		overflow: hidden;
+		border-radius: 2px;
 
-			> * {
-				margin: 0 auto;
-				max-width: 100%;
-			}
+		> * {
+			margin: 0 auto;
+			max-width: 100%;
+		}
 
-			.block-editor-inserter__media-list__item-preview-spinner {
-				display: flex;
-				height: 100%;
-				width: 100%;
-				position: absolute;
-				justify-content: center;
-				background: rgba($white, 0.7);
-				align-items: center;
-				pointer-events: none;
-			}
+		.block-editor-inserter__media-list__item-preview-spinner {
+			display: flex;
+			height: 100%;
+			width: 100%;
+			position: absolute;
+			justify-content: center;
+			background: rgba($white, 0.7);
+			align-items: center;
+			pointer-events: none;
 		}
+	}
 
-		&:focus .block-editor-inserter__media-list__item-preview {
-			box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	&:focus .block-editor-inserter__media-list__item-preview {
+		box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 2px solid transparent;
-		}
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
 	}
 }
 
@@ -785,8 +710,4 @@ $block-inserter-tabs-height: 44px;
 			height: 100%;
 		}
 	}
-
-	.block-editor-inserter__media-dialog {
-		position: static;
-	}
 }

From e8317a577fdca654f5696d7cc964aa7b6c826cc5 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Mon, 22 Apr 2024 15:19:00 -0500
Subject: [PATCH 4/8] Remove MediaCategoryDialog

---
 .../src/components/inserter/media-tab/index.js         |  2 +-
 .../src/components/inserter/media-tab/media-panel.js   | 10 ----------
 packages/block-editor/src/components/inserter/menu.js  |  4 ++--
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/media-tab/index.js b/packages/block-editor/src/components/inserter/media-tab/index.js
index 6e4c518ff63b5e..2a44fd922f5239 100644
--- a/packages/block-editor/src/components/inserter/media-tab/index.js
+++ b/packages/block-editor/src/components/inserter/media-tab/index.js
@@ -1,3 +1,3 @@
 export { default as MediaTab } from './media-tab';
-export { MediaCategoryDialog } from './media-panel';
+export { MediaCategoryPanel } from './media-panel';
 export { useMediaCategories } from './hooks';
diff --git a/packages/block-editor/src/components/inserter/media-tab/media-panel.js b/packages/block-editor/src/components/inserter/media-tab/media-panel.js
index 3c4285a261e486..9a55bd5ef99cef 100644
--- a/packages/block-editor/src/components/inserter/media-tab/media-panel.js
+++ b/packages/block-editor/src/components/inserter/media-tab/media-panel.js
@@ -14,16 +14,6 @@ import InserterNoResults from '../no-results';
 
 const INITIAL_MEDIA_ITEMS_PER_PAGE = 10;
 
-export function MediaCategoryDialog( { rootClientId, onInsert, category } ) {
-	return (
-		<MediaCategoryPanel
-			rootClientId={ rootClientId }
-			onInsert={ onInsert }
-			category={ category }
-		/>
-	);
-}
-
 export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
 	const { mediaList, isLoading } = useMediaResults( category, {
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index ad1f6f856f182e..e150a96187e045 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -28,7 +28,7 @@ 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, MediaCategoryDialog, useMediaCategories } from './media-tab';
+import { MediaTab, MediaCategoryPanel, useMediaCategories } from './media-tab';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
@@ -210,7 +210,7 @@ function InserterMenu(
 				onInsert={ onInsert }
 			>
 				{ showMediaPanel && (
-					<MediaCategoryDialog
+					<MediaCategoryPanel
 						rootClientId={ destinationRootClientId }
 						onInsert={ onInsert }
 						category={ selectedMediaCategory }

From 0ba3121072f39d2181c606cb6a354e6e6e42cee4 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Mon, 22 Apr 2024 15:31:25 -0500
Subject: [PATCH 5/8] Fix e2e test selectors for tab element

---
 test/e2e/specs/editor/blocks/image.spec.js    |  2 +-
 .../editor/various/inserting-blocks.spec.js   | 20 ++++++-------------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index 940e4b0d47b034..24fff3e579f682 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -448,7 +448,7 @@ test.describe( 'Image', () => {
 
 			await blockLibrary
 				.getByRole( 'tabpanel', { name: 'Media' } )
-				.getByRole( 'button', { name: 'Openverse' } )
+				.getByRole( 'tab', { name: 'Openverse' } )
 				.click();
 		}
 
diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js
index b3da80c12ab099..811c4d6ebb89eb 100644
--- a/test/e2e/specs/editor/various/inserting-blocks.spec.js
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -724,22 +724,14 @@ test.describe( 'insert media from inserter', () => {
 	} ) => {
 		await admin.createNewPost();
 
-		await page.click(
-			'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
-		);
-		await page.click(
-			'role=region[name="Block Library"i] >> role=tab[name="Media"i]'
-		);
-		await page.click(
-			'[aria-label="Media categories"i] >> role=button[name="Images"i]'
-		);
-		await page.click(
-			`role=listbox[name="Media List"i] >> role=option[name="${ uploadedMedia.title.raw }"]`
-		);
+		await page.getByLabel( 'Toggle block inserter' ).click();
+		await page.getByRole( 'tab', { name: 'Media' } ).click();
+		await page.getByRole( 'tab', { name: 'Images' } ).click();
+		await page.getByLabel( uploadedMedia.title.raw ).click();
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:image {"id":${ uploadedMedia.id }} -->
-<figure class="wp-block-image"><img src="${ uploadedMedia.source_url }" alt="${ uploadedMedia.alt_text }" class="wp-image-${ uploadedMedia.id }"/></figure>
-<!-- /wp:image -->`
+		<figure class="wp-block-image"><img src="${ uploadedMedia.source_url }" alt="${ uploadedMedia.alt_text }" class="wp-image-${ uploadedMedia.id }"/></figure>
+		<!-- /wp:image -->`
 		);
 	} );
 } );

From 5c028eb614deba99d8d822655b5518226917521e Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Mon, 22 Apr 2024 15:54:22 -0500
Subject: [PATCH 6/8] Fix formatting of failing e2e test

---
 test/e2e/specs/editor/various/inserting-blocks.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js
index 811c4d6ebb89eb..6e19fd31a71b05 100644
--- a/test/e2e/specs/editor/various/inserting-blocks.spec.js
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -730,8 +730,8 @@ test.describe( 'insert media from inserter', () => {
 		await page.getByLabel( uploadedMedia.title.raw ).click();
 		await expect.poll( editor.getEditedPostContent ).toBe(
 			`<!-- wp:image {"id":${ uploadedMedia.id }} -->
-		<figure class="wp-block-image"><img src="${ uploadedMedia.source_url }" alt="${ uploadedMedia.alt_text }" class="wp-image-${ uploadedMedia.id }"/></figure>
-		<!-- /wp:image -->`
+<figure class="wp-block-image"><img src="${ uploadedMedia.source_url }" alt="${ uploadedMedia.alt_text }" class="wp-image-${ uploadedMedia.id }"/></figure>
+<!-- /wp:image -->`
 		);
 	} );
 } );

From 6873975781eb11018b9e5f3ce27b334e98624d2b Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Tue, 23 Apr 2024 10:11:01 -0500
Subject: [PATCH 7/8] Remove bottom margin from media panel search

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
---
 packages/block-editor/src/components/inserter/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index cc2a43d6d7d82a..c18fd82e3b3741 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -535,7 +535,7 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-inserter__media-panel-search {
-		padding: $grid-unit-20 $grid-unit-30;
+		padding: $grid-unit-20 $grid-unit-30 0;
 		// TODO: Consider using the Theme component to automatically adapt to a gray background.
 		&:not(:focus-within) {
 			--wp-components-color-background: #{$white};

From bda3f2073c1911cfc7c34cdb7e153bd6fa2ae22c Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Tue, 23 Apr 2024 10:37:54 -0500
Subject: [PATCH 8/8] Stick all pattern all media buttons to bottom of inserter
 sidebar

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

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index c18fd82e3b3741..5e35180ae7c45c 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -242,6 +242,10 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
 	padding: $grid-unit-20;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
 
 .block-editor-inserter__category-tablist {