@wordpress/block-editor 12.23.0 → 12.25.0

package/src/components/inserter/menu.js

@@ -11,28 +11,26 @@ import {
 	useState,
 	useCallback,
 	useMemo,
-	useImperativeHandle,
 	useRef,
+	useLayoutEffect,
 } 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, MediaCategoryDialog, 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 = () => {};
 function InserterMenu(
@@ -58,7 +56,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( {
@@ -68,18 +66,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 ) => {
@@ -122,27 +108,98 @@ function InserterMenu(
 				__experimentalOnPatternCategorySelection();
 			}
 		},
-		[ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ]
+		[
+			setSelectedPatternCategory,
+			__experimentalOnPatternCategorySelection,
+			isZoomedOutViewExperimentEnabled,
+		]
 	);
 
-	const blocksTab = useMemo(
-		() => (
+	const showPatternPanel =
+		selectedTab === 'patterns' &&
+		! delayedFilterValue &&
+		selectedPatternCategory;
+
+	const showMediaPanel = selectedTab === 'media' && selectedMediaCategory;
+
+	const inserterSearch = useMemo( () => {
+		if ( selectedTab === 'media' ) {
+			return null;
+		}
+		return (
 			<>
-				<div className="block-editor-inserter__block-list">
-					<BlockTypesTab
-						rootClientId={ destinationRootClientId }
-						onInsert={ onInsert }
+				<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 }
-						showMostUsedBlocks={ showMostUsedBlocks }
+						onHoverPattern={ onHoverPattern }
+						rootClientId={ rootClientId }
+						clientId={ clientId }
+						isAppender={ isAppender }
+						__experimentalInsertionIndex={
+							__experimentalInsertionIndex
+						}
+						showBlockDirectory
+						shouldFocusBlock={ shouldFocusBlock }
+						prioritizePatterns={ selectedTab === 'patterns' }
 					/>
-				</div>
-				{ showInserterHelpPanel && (
-					<div className="block-editor-inserter__tips">
-						<VisuallyHidden as="h2">
-							{ __( 'A tip for using the block editor' ) }
-						</VisuallyHidden>
-						<Tips />
-					</div>
+				) }
+			</>
+		);
+	}, [
+		selectedTab,
+		hoveredItem,
+		setHoveredItem,
+		setFilterValue,
+		filterValue,
+		delayedFilterValue,
+		onSelect,
+		onHover,
+		onHoverPattern,
+		shouldFocusBlock,
+		clientId,
+		rootClientId,
+		__experimentalInsertionIndex,
+		isAppender,
+	] );
+
+	const blocksTab = useMemo(
+		() => (
+			<>
+				{ 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>
+						) }
+					</>
 				) }
 			</>
 		),
@@ -152,23 +209,46 @@ function InserterMenu(
 			onHover,
 			showMostUsedBlocks,
 			showInserterHelpPanel,
+			inserterSearch,
+			delayedFilterValue,
 		]
 	);
 
 	const patternsTab = useMemo(
 		() => (
-			<BlockPatternsTab
-				rootClientId={ destinationRootClientId }
-				onInsert={ onInsertPattern }
-				onSelectCategory={ onClickPatternCategory }
-				selectedCategory={ selectedPatternCategory }
-			/>
+			<>
+				{ inserterSearch }
+				{ ! delayedFilterValue && (
+					<BlockPatternsTab
+						rootClientId={ destinationRootClientId }
+						onInsert={ onInsertPattern }
+						onSelectCategory={ onClickPatternCategory }
+						selectedCategory={ selectedPatternCategory }
+					>
+						{ showPatternPanel && (
+							<PatternCategoryPreviewPanel
+								rootClientId={ destinationRootClientId }
+								onInsert={ onInsertPattern }
+								onHover={ onHoverPattern }
+								category={ selectedPatternCategory }
+								patternFilter={ patternFilter }
+								showTitlesAsTooltip
+							/>
+						) }
+					</BlockPatternsTab>
+				) }
+			</>
 		),
 		[
 			destinationRootClientId,
+			onHoverPattern,
 			onInsertPattern,
 			onClickPatternCategory,
+			patternFilter,
 			selectedPatternCategory,
+			showPatternPanel,
+			inserterSearch,
+			delayedFilterValue,
 		]
 	);
 
@@ -179,13 +259,22 @@ function InserterMenu(
 				selectedCategory={ selectedMediaCategory }
 				onSelectCategory={ setSelectedMediaCategory }
 				onInsert={ onInsert }
-			/>
+			>
+				{ showMediaPanel && (
+					<MediaCategoryPanel
+						rootClientId={ destinationRootClientId }
+						onInsert={ onInsert }
+						category={ selectedMediaCategory }
+					/>
+				) }
+			</MediaTab>
 		),
 		[
 			destinationRootClientId,
 			onInsert,
 			selectedMediaCategory,
 			setSelectedMediaCategory,
+			showMediaPanel,
 		]
 	);
 
@@ -198,22 +287,8 @@ function InserterMenu(
 		[ blocksTab, mediaTab, patternsTab ]
 	);
 
-	const searchRef = useRef();
-	useImperativeHandle( ref, () => ( {
-		focusSearch: () => {
-			searchRef.current.focus();
-		},
-	} ) );
-
-	const showPatternPanel =
-		selectedTab === 'patterns' &&
-		! delayedFilterValue &&
-		selectedPatternCategory;
-	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 );
 
 	const handleSetSelectedTab = ( value ) => {
 		// If no longer on patterns tab remove the category setting.
@@ -223,64 +298,32 @@ 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="block-editor-inserter__menu">
-			<div
-				className={ classnames( 'block-editor-inserter__main-area', {
-					'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 }
+		<div
+			className={ classnames( 'block-editor-inserter__menu', {
+				'show-panel': showPatternPanel || showMediaPanel,
+			} ) }
+			ref={ ref }
+		>
+			<div className="block-editor-inserter__main-area">
+				<InserterTabs
+					ref={ tabsRef }
+					onSelect={ handleSetSelectedTab }
+					tabsContents={ inserterTabsContents }
 				/>
-				{ !! 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 }
-					/>
-				) }
-				{ ! delayedFilterValue && ! showAsTabs && (
-					<div className="block-editor-inserter__no-tab-container">
-						{ blocksTab }
-					</div>
-				) }
 			</div>
-			{ showMediaPanel && (
-				<MediaCategoryDialog
-					rootClientId={ destinationRootClientId }
-					onInsert={ onInsert }
-					category={ selectedMediaCategory }
-				/>
-			) }
 			{ showInserterHelpPanel && hoveredItem && (
 				<Popover
 					className="block-editor-inserter__preview-container__popover"
@@ -292,16 +335,6 @@ function InserterMenu(
 					<InserterPreviewPanel item={ hoveredItem } />
 				</Popover>
 			) }
-			{ showPatternPanel && (
-				<PatternCategoryPreviewPanel
-					rootClientId={ destinationRootClientId }
-					onInsert={ onInsertPattern }
-					onHover={ onHoverPattern }
-					category={ selectedPatternCategory }
-					patternFilter={ patternFilter }
-					showTitlesAsTooltip
-				/>
-			) }
 		</div>
 	);
 }