Try drill down for pattern inserter

packages/block-editor/src/components/inserter/block-patterns-tab/index.js

@@ -11,21 +11,14 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import PatternsExplorerModal from '../block-patterns-explorer';
-import MobileTabNavigation from '../mobile-tab-navigation';
+import InserterContentNavigator from '../inserter-content-navigator';
 import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
-import CategoryTabs from '../category-tabs';
 import InserterNoResults from '../no-results';
 import { store as blockEditorStore } from '../../../store';
 import { unlock } from '../../../lock-unlock';
 
-function BlockPatternsTab( {
-	onSelectCategory,
-	selectedCategory,
-	onInsert,
-	rootClientId,
-	children,
-} ) {
+function BlockPatternsTab( { selectedCategory, onInsert, rootClientId } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
 
 	const categories = usePatternCategories( rootClientId );
@@ -51,38 +44,27 @@ function BlockPatternsTab( {
 
 	return (
 		<>
+			<InserterContentNavigator categories={ categories }>
+				{ ( category ) => (
+					<div className="block-editor-inserter__category-panel">
+						<PatternCategoryPreviews
+							key={ category.name }
+							onInsert={ onInsert }
+							rootClientId={ rootClientId }
+							category={ category }
+							showTitlesAsTooltip={ false }
+						/>
+					</div>
+				) }
+			</InserterContentNavigator>
 			{ ! isMobile && (
-				<div className="block-editor-inserter__block-patterns-tabs-container">
-					<CategoryTabs
-						categories={ categories }
-						selectedCategory={ selectedCategory }
-						onSelectCategory={ onSelectCategory }
-					>
-						{ children }
-					</CategoryTabs>
-					<Button
-						className="block-editor-inserter__patterns-explore-button"
-						onClick={ () => setShowPatternsExplorer( true ) }
-						variant="secondary"
-					>
-						{ __( 'Explore all patterns' ) }
-					</Button>
-				</div>
-			) }
-			{ isMobile && (
-				<MobileTabNavigation categories={ categories }>
-					{ ( category ) => (
-						<div className="block-editor-inserter__category-panel">
-							<PatternCategoryPreviews
-								key={ category.name }
-								onInsert={ onInsert }
-								rootClientId={ rootClientId }
-								category={ category }
-								showTitlesAsTooltip={ false }
-							/>
-						</div>
-					) }
-				</MobileTabNavigation>
+				<Button
+					className="block-editor-inserter__patterns-explore-button"
+					onClick={ () => setShowPatternsExplorer( true ) }
+					variant="secondary"
+				>
+					{ __( 'Explore all patterns' ) }
+				</Button>
 			) }
 			{ showPatternsExplorer && (
 				<PatternsExplorerModal

packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -8,15 +8,17 @@ import {
 	useRef,
 	useEffect,
 } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	FlexBlock,
 } from '@wordpress/components';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -32,10 +34,11 @@ import {
 	myPatternsCategory,
 	INSERTER_PATTERN_TYPES,
 } from './utils';
+import { useZoomOut } from '../../../hooks/use-zoom-out';
 
 const noop = () => {};
 
-export function PatternCategoryPreviews( {
+function PatternCategoryPreviewsContent( {
 	rootClientId,
 	onInsert,
 	onHover = noop,
@@ -130,11 +133,13 @@ export function PatternCategoryPreviews( {
 
 	return (
 		<>
-			<VStack
-				spacing={ 2 }
-				className="block-editor-inserter__patterns-category-panel-header"
-			>
+			<VStack className="block-editor-inserter__patterns-category-panel-header">
 				<HStack>
+					<NavigatorBackButton
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						size="small"
+						label={ __( 'Back' ) }
+					/>
 					<FlexBlock>
 						<Heading
 							className="block-editor-inserter__patterns-category-panel-title"
@@ -163,7 +168,6 @@ export function PatternCategoryPreviews( {
 					</Text>
 				) }
 			</VStack>
-
 			{ currentCategoryPatterns.length > 0 && (
 				<BlockPatternsList
 					ref={ scrollContainerRef }
@@ -183,3 +187,17 @@ export function PatternCategoryPreviews( {
 		</>
 	);
 }
+
+function PatternCategoryPreviewsContentWithZoomOut( props ) {
+	useZoomOut();
+	return <PatternCategoryPreviewsContent { ...props } />;
+}
+
+export function PatternCategoryPreviews( props ) {
+	// When the pattern panel is showing, we want to use zoom out mode
+	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
+		return <PatternCategoryPreviewsContentWithZoomOut { ...props } />;
+	}
+
+	return <PatternCategoryPreviewsContent { ...props } />;
+}

packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js

@@ -114,7 +114,7 @@ export function PatternsFilter( {
 					placement: 'right-end',
 				} }
 				label={ __( 'Filter patterns' ) }
-				toggleProps={ { size: 'compact' } }
+				toggleProps={ { size: 'small' } }
 				icon={
 					<Icon
 						icon={

packages/block-editor/src/components/inserter/inserter-content-navigator.js

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorButton as NavigatorButton,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
+export default function InserterContentNavigator( { categories, children } ) {
+	const compositeStore = useCompositeStore( { orientation: 'vertical' } );
+
+	return (
+		<NavigatorProvider
+			initialPath="/"
+			className="block-editor-inserter__mobile-tab-navigation"
+		>
+			<NavigatorScreen path="/">
+				<Composite
+					store={ compositeStore }
+					role="tree"
+					aria-label={ 'Categories' }
+				>
+					<VStack
+						spacing={ 1 }
+						className="block-editor-inserter__mobile-tab-navigation-buttons"
+					>
+						{ categories.map( ( category ) => (
+							<CompositeItem
+								key={ category.name }
+								render={
+									<NavigatorButton
+										path={ `/category/${ category.name }` }
+										role="treeitem"
+									>
+										<HStack>
+											<span>{ category.label }</span>
+											<Icon
+												icon={
+													isRTL()
+														? chevronLeft
+														: chevronRight
+												}
+											/>
+										</HStack>
+									</NavigatorButton>
+								}
+							/>
+						) ) }
+					</VStack>
+				</Composite>
+			</NavigatorScreen>
+			{ categories.map( ( category ) => (
+				<NavigatorScreen
+					key={ category.name }
+					path={ `/category/${ category.name }` }
+				>
+					{ children( category ) }
+				</NavigatorScreen>
+			) ) }
+		</NavigatorProvider>
+	);
+}

packages/block-editor/src/components/inserter/media-tab/media-panel.js

@@ -1,9 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { Spinner, SearchControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import {
+	Spinner,
+	SearchControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	FlexBlock,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
+} from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
 import { useDebouncedInput } from '@wordpress/compose';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -23,20 +32,35 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	const baseCssClass = 'block-editor-inserter__media-panel';
 	const searchLabel = category.labels.search_items || __( 'Search' );
 	return (
-		<div className={ baseCssClass }>
-			<SearchControl
-				className={ `${ baseCssClass }-search` }
-				onChange={ setSearch }
-				value={ search }
-				label={ searchLabel }
-				placeholder={ searchLabel }
-			/>
-			{ isLoading && (
-				<div className={ `${ baseCssClass }-spinner` }>
-					<Spinner />
-				</div>
-			) }
-			{ ! isLoading && ! mediaList?.length && <InserterNoResults /> }
+		<>
+			<VStack className={ baseCssClass }>
+				<HStack>
+					<NavigatorBackButton
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						size="small"
+						label={ __( 'Back' ) }
+					/>
+					<FlexBlock>
+						<Heading level={ 4 } as="div">
+							{ category.label }
+						</Heading>
+					</FlexBlock>
+				</HStack>
+				<SearchControl
+					__nextHasNoMarginBottom
+					className="block-editor-inserter__search"
+					onChange={ setSearch }
+					value={ search }
+					label={ searchLabel }
+					placeholder={ searchLabel }
+				/>
+				{ isLoading && (
+					<div className={ `${ baseCssClass }-spinner` }>
+						<Spinner />
+					</div>
+				) }
+				{ ! isLoading && ! mediaList?.length && <InserterNoResults /> }
+			</VStack>
 			{ ! isLoading && !! mediaList?.length && (
 				<MediaList
 					rootClientId={ rootClientId }
@@ -45,6 +69,6 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 					category={ category }
 				/>
 			) }
-		</div>
+		</>
 	);
 }