Update: Prioritize patterns on quick inserter (#38709)

WordPress · Feb 17, 2022 · eb3e569 · eb3e569
1 parent 7db9381
commit eb3e569
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 52 deletions.
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -23,6 +23,7 @@ import { store as blockEditorStore } from '../../store';
 const SEARCH_THRESHOLD = 6;
 const SHOWN_BLOCK_TYPES = 6;
 const SHOWN_BLOCK_PATTERNS = 2;
+const SHOWN_BLOCK_PATTERNS_WITH_PRIORITIZATION = 4;
 
 export default function QuickInserter( {
 	onSelect,
@@ -46,26 +47,39 @@ export default function QuickInserter( {
 		onInsertBlocks,
 		destinationRootClientId
 	);
-	const showPatterns = patterns.length && !! filterValue;
-	const showSearch =
-		( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
-		blockTypes.length > SEARCH_THRESHOLD;
 
-	const { setInserterIsOpened, insertionIndex } = useSelect(
+	const {
+		setInserterIsOpened,
+		insertionIndex,
+		prioritizePatterns,
+	} = useSelect(
 		( select ) => {
 			const { getSettings, getBlockIndex, getBlockCount } = select(
 				blockEditorStore
 			);
+			const settings = getSettings();
 			const index = getBlockIndex( clientId );
+			const blockCount = getBlockCount();
+
 			return {
-				setInserterIsOpened: getSettings()
-					.__experimentalSetIsInserterOpened,
-				insertionIndex: index === -1 ? getBlockCount() : index,
+				setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
+				prioritizePatterns:
+					settings.__experimentalPreferPatternsOnRoot &&
+					! rootClientId &&
+					index > 0 &&
+					( index < blockCount || blockCount === 0 ),
+				insertionIndex: index === -1 ? blockCount : index,
 			};
 		},
 		[ clientId, rootClientId ]
 	);
 
+	const showPatterns =
+		patterns.length && ( !! filterValue || prioritizePatterns );
+	const showSearch =
+		( showPatterns && patterns.length > SEARCH_THRESHOLD ) ||
+		blockTypes.length > SEARCH_THRESHOLD;
+
 	useEffect( () => {
 		if ( setInserterIsOpened ) {
 			setInserterIsOpened( false );
@@ -78,6 +92,13 @@ export default function QuickInserter( {
 		setInserterIsOpened( { rootClientId, insertionIndex, filterValue } );
 	};
 
+	let maxBlockPatterns = 0;
+	if ( showPatterns ) {
+		maxBlockPatterns = prioritizePatterns
+			? SHOWN_BLOCK_PATTERNS_WITH_PRIORITIZATION
+			: SHOWN_BLOCK_PATTERNS;
+	}
+
 	return (
 		<div
 			className={ classnames( 'block-editor-inserter__quick-inserter', {
@@ -104,9 +125,10 @@ export default function QuickInserter( {
 					rootClientId={ rootClientId }
 					clientId={ clientId }
 					isAppender={ isAppender }
-					maxBlockPatterns={ showPatterns ? SHOWN_BLOCK_PATTERNS : 0 }
+					maxBlockPatterns={ maxBlockPatterns }
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
 					isDraggable={ false }
+					prioritizePatterns={ prioritizePatterns }
 				/>
 			</div>
 

diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js
@@ -48,6 +48,7 @@ function InserterSearchResults( {
 	showBlockDirectory = false,
 	isDraggable = true,
 	shouldFocusBlock = true,
+	prioritizePatterns,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -70,16 +71,34 @@ function InserterSearchResults( {
 		destinationRootClientId
 	);
 
+	const filteredBlockPatterns = useMemo( () => {
+		if ( maxBlockPatterns === 0 ) {
+			return [];
+		}
+		const results = searchItems( patterns, filterValue );
+		return maxBlockPatterns !== undefined
+			? results.slice( 0, maxBlockPatterns )
+			: results;
+	}, [ filterValue, patterns, maxBlockPatterns ] );
+
+	let maxBlockTypesToShow = maxBlockTypes;
+	if ( prioritizePatterns && filteredBlockPatterns.length > 2 ) {
+		maxBlockTypesToShow = 0;
+	}
+
 	const filteredBlockTypes = useMemo( () => {
+		if ( maxBlockTypesToShow === 0 ) {
+			return [];
+		}
 		const results = searchBlockItems(
 			orderBy( blockTypes, [ 'frecency' ], [ 'desc' ] ),
 			blockTypeCategories,
 			blockTypeCollections,
 			filterValue
 		);
 
-		return maxBlockTypes !== undefined
-			? results.slice( 0, maxBlockTypes )
+		return maxBlockTypesToShow !== undefined
+			? results.slice( 0, maxBlockTypesToShow )
 			: results;
 	}, [
 		filterValue,
@@ -89,13 +108,6 @@ function InserterSearchResults( {
 		maxBlockTypes,
 	] );
 
-	const filteredBlockPatterns = useMemo( () => {
-		const results = searchItems( patterns, filterValue );
-		return maxBlockPatterns !== undefined
-			? results.slice( 0, maxBlockPatterns )
-			: results;
-	}, [ filterValue, patterns, maxBlockPatterns ] );
-
 	// Announce search results on change
 	useEffect( () => {
 		if ( ! filterValue ) {
@@ -122,49 +134,49 @@ function InserterSearchResults( {
 	const hasItems =
 		! isEmpty( filteredBlockTypes ) || ! isEmpty( filteredBlockPatterns );
 
+	const blocksUI = !! filteredBlockTypes.length && (
+		<InserterPanel
+			title={ <VisuallyHidden>{ __( 'Blocks' ) }</VisuallyHidden> }
+		>
+			<BlockTypesList
+				items={ currentShownBlockTypes }
+				onSelect={ onSelectBlockType }
+				onHover={ onHover }
+				label={ __( 'Blocks' ) }
+				isDraggable={ isDraggable }
+			/>
+		</InserterPanel>
+	);
+
+	const patternsUI = !! filteredBlockPatterns.length && (
+		<InserterPanel
+			title={
+				<VisuallyHidden>{ __( 'Block Patterns' ) }</VisuallyHidden>
+			}
+		>
+			<div className="block-editor-inserter__quick-inserter-patterns">
+				<BlockPatternsList
+					shownPatterns={ currentShownPatterns }
+					blockPatterns={ filteredBlockPatterns }
+					onClickPattern={ onSelectBlockPattern }
+					isDraggable={ isDraggable }
+				/>
+			</div>
+		</InserterPanel>
+	);
+
 	return (
 		<InserterListbox>
 			{ ! showBlockDirectory && ! hasItems && <InserterNoResults /> }
 
-			{ !! filteredBlockTypes.length && (
-				<InserterPanel
-					title={
-						<VisuallyHidden>{ __( 'Blocks' ) }</VisuallyHidden>
-					}
-				>
-					<BlockTypesList
-						items={ currentShownBlockTypes }
-						onSelect={ onSelectBlockType }
-						onHover={ onHover }
-						label={ __( 'Blocks' ) }
-						isDraggable={ isDraggable }
-					/>
-				</InserterPanel>
-			) }
+			{ prioritizePatterns ? patternsUI : blocksUI }
 
 			{ !! filteredBlockTypes.length &&
 				!! filteredBlockPatterns.length && (
 					<div className="block-editor-inserter__quick-inserter-separator" />
 				) }
 
-			{ !! filteredBlockPatterns.length && (
-				<InserterPanel
-					title={
-						<VisuallyHidden>
-							{ __( 'Block Patterns' ) }
-						</VisuallyHidden>
-					}
-				>
-					<div className="block-editor-inserter__quick-inserter-patterns">
-						<BlockPatternsList
-							shownPatterns={ currentShownPatterns }
-							blockPatterns={ filteredBlockPatterns }
-							onClickPattern={ onSelectBlockPattern }
-							isDraggable={ isDraggable }
-						/>
-					</div>
-				</InserterPanel>
-			) }
+			{ prioritizePatterns ? blocksUI : patternsUI }
 
 			{ showBlockDirectory && (
 				<__unstableInserterMenuExtension.Slot

diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
@@ -98,6 +98,8 @@ export const getSettings = createSelector(
 			hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
 			__experimentalSetIsInserterOpened: setIsInserterOpen,
 			__experimentalReusableBlocks: getReusableBlocks( state ),
+			__experimentalPreferPatternsOnRoot:
+				'wp_template' === getEditedPostType( state ),
 		};
 
 		const canUserCreateMedia = getCanUserCreateMedia( state );
@@ -120,6 +122,7 @@ export const getSettings = createSelector(
 		isFeatureActive( state, 'focusMode' ),
 		isFeatureActive( state, 'fixedToolbar' ),
 		getReusableBlocks( state ),
+		getEditedPostType( state ),
 	]
 );
 

diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js
@@ -106,14 +106,19 @@ describe( 'selectors', () => {
 		it( "returns the settings when the user can't create media", () => {
 			canUser.mockReturnValueOnce( false );
 			canUser.mockReturnValueOnce( false );
-			const state = { settings: {}, preferences: {} };
+			const state = {
+				settings: {},
+				preferences: {},
+				editedPost: { type: 'wp_template' },
+			};
 			const setInserterOpened = () => {};
 			expect( getSettings( state, setInserterOpened ) ).toEqual( {
 				outlineMode: true,
 				focusMode: false,
 				hasFixedToolbar: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
 				__experimentalReusableBlocks: [],
+				__experimentalPreferPatternsOnRoot: true,
 			} );
 		} );
 
@@ -126,6 +131,7 @@ describe( 'selectors', () => {
 						fixedToolbar: true,
 					},
 				},
+				editedPost: { type: 'wp_template_part' },
 			};
 			const setInserterOpened = () => {};
 
@@ -137,6 +143,7 @@ describe( 'selectors', () => {
 				__experimentalSetIsInserterOpened: setInserterOpened,
 				__experimentalReusableBlocks: [],
 				mediaUpload: expect.any( Function ),
+				__experimentalPreferPatternsOnRoot: false,
 			} );
 		} );
 	} );

diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -149,6 +149,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			__experimentalCreatePageEntity: createPageEntity,
 			__experimentalUserCanCreatePages: userCanCreatePages,
 			pageOnFront,
+			__experimentalPreferPatternsOnRoot: hasTemplate,
 		} ),
 		[
 			settings,