From c94f46330550973f26343f36a5beb5fdf08670b2 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 24 Apr 2024 09:02:20 -0500
Subject: [PATCH] Convert Media Inserter to Tabs Pattern (#60970)

Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 .../inserter/block-patterns-tab/index.js      |  75 +----
 .../inserter/category-tabs/index.js           |  74 +++++
 .../components/inserter/media-tab/index.js    |   2 +-
 .../inserter/media-tab/media-panel.js         |  22 --
 .../inserter/media-tab/media-tab.js           | 122 +++-----
 .../src/components/inserter/menu.js           |  39 ++-
 .../src/components/inserter/style.scss        | 260 ++++++------------
 test/e2e/specs/editor/blocks/image.spec.js    |   2 +-
 .../editor/various/inserting-blocks.spec.js   |  16 +-
 9 files changed, 243 insertions(+), 369 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/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 49601c9c8ad1bc..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
@@ -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';
 
@@ -16,26 +14,6 @@ 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>
-	);
-}
-
 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/media-tab/media-tab.js b/packages/block-editor/src/components/inserter/media-tab/media-tab.js
index b448ae2a406499..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,22 +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 {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalHStack as HStack,
-	FlexBlock,
-	Button,
-} from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
-import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -27,6 +15,7 @@ import MediaUpload from '../../media-upload';
 import { useMediaCategories } from './hooks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import MobileTabNavigation from '../mobile-tab-navigation';
+import CategoryTabs from '../category-tabs';
 
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];
 
@@ -35,6 +24,7 @@ function MediaTab( {
 	selectedCategory,
 	onSelectCategory,
 	onInsert,
+	children,
 } ) {
 	const mediaCategories = useMediaCategories( rootClientId );
 	const isMobile = useViewportMatch( 'medium', '<' );
@@ -49,7 +39,7 @@ function MediaTab( {
 		},
 		[ onInsert ]
 	);
-	const mobileMediaCategories = useMemo(
+	const categories = useMemo(
 		() =>
 			mediaCategories.map( ( mediaCategory ) => ( {
 				...mediaCategory,
@@ -57,82 +47,48 @@ function MediaTab( {
 			} ) ),
 		[ mediaCategories ]
 	);
+
 	return (
 		<>
 			{ ! isMobile && (
 				<div className={ `${ baseCssClass }-container` }>
-					<nav aria-label={ __( 'Media categories' ) }>
-						<ItemGroup role="list" className={ baseCssClass }>
-							{ mediaCategories.map( ( mediaCategory ) => (
-								<Item
-									role="listitem"
-									key={ mediaCategory.name }
-									onClick={ () =>
-										onSelectCategory( mediaCategory )
-									}
-									className={ classNames(
-										`${ baseCssClass }__media-category`,
-										{
-											'is-selected':
-												selectedCategory ===
-												mediaCategory,
-										}
-									) }
-									aria-label={ mediaCategory.labels.name }
-									aria-current={
-										mediaCategory === selectedCategory
-											? 'true'
-											: undefined
-									}
+					<CategoryTabs
+						categories={ categories }
+						selectedCategory={ selectedCategory }
+						onSelectCategory={ onSelectCategory }
+					>
+						{ children }
+					</CategoryTabs>
+					<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"
 								>
-									<HStack>
-										<FlexBlock>
-											{ mediaCategory.labels.name }
-										</FlexBlock>
-										<Icon
-											icon={
-												isRTL()
-													? chevronLeft
-													: chevronRight
-											}
-										/>
-									</HStack>
-								</Item>
-							) ) }
-							<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>
+									{ __( 'Open Media Library' ) }
+								</Button>
+							) }
+						/>
+					</MediaUploadCheck>
 				</div>
 			) }
 			{ isMobile && (
-				<MobileTabNavigation categories={ mobileMediaCategories }>
+				<MobileTabNavigation categories={ categories }>
 					{ ( category ) => (
 						<MediaCategoryPanel
 							onInsert={ onInsert }
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index f42a7f06019cc3..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';
@@ -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 && (
+					<MediaCategoryPanel
+						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"
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 87e9b04fddaf57..5e35180ae7c45c 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,17 +239,16 @@ $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;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 }
 
-.block-editor-inserter__block-patterns-tablist {
+.block-editor-inserter__category-tablist {
 	display: flex;
 	flex-direction: column;
 	border: none;
@@ -259,7 +258,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 +313,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 +331,21 @@ $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-inserter__media-list,
+.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 {
@@ -405,7 +405,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 +498,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,14 +510,9 @@ $block-inserter-tabs-height: 44px;
 	font-size: calc(1.25 * 13px);
 }
 
-.block-editor-inserter__media-tabs-container {
-	height: 100%;
-
-	nav {
-		height: 100%;
-	}
-
-	.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;
@@ -525,76 +520,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 {
-		// 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;
@@ -614,6 +539,7 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-inserter__media-panel-search {
+		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};
@@ -621,90 +547,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;
 	}
 }
 
@@ -790,8 +714,4 @@ $block-inserter-tabs-height: 44px;
 			height: 100%;
 		}
 	}
-
-	.block-editor-inserter__media-dialog {
-		position: static;
-	}
 }
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..6e19fd31a71b05 100644
--- a/test/e2e/specs/editor/various/inserting-blocks.spec.js
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -724,18 +724,10 @@ 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>