diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index b8ae5e233416e..d0f589e87955c 100644 --- 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 (
diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index cd869ae90a678..dcdaea3a58a09 100644 --- 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,7 +71,25 @@ 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, @@ -78,8 +97,8 @@ function InserterSearchResults( { 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 && ( + { __( 'Blocks' ) } } + > + + + ); + + const patternsUI = !! filteredBlockPatterns.length && ( + { __( 'Block Patterns' ) } + } + > +
+ +
+
+ ); + return ( { ! showBlockDirectory && ! hasItems && } - { !! filteredBlockTypes.length && ( - { __( 'Blocks' ) } - } - > - - - ) } + { prioritizePatterns ? patternsUI : blocksUI } { !! filteredBlockTypes.length && !! filteredBlockPatterns.length && (
) } - { !! filteredBlockPatterns.length && ( - - { __( 'Block Patterns' ) } - - } - > -
- -
-
- ) } + { prioritizePatterns ? blocksUI : patternsUI } { showBlockDirectory && ( <__unstableInserterMenuExtension.Slot diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index c546e00f0eb68..fc07bb7b77cd1 100644 --- 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 index 9c2eeb7235ff8..c3da83b3d8fe8 100644 --- a/packages/edit-site/src/store/test/selectors.js +++ b/packages/edit-site/src/store/test/selectors.js @@ -106,7 +106,11 @@ 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, @@ -114,6 +118,7 @@ describe( 'selectors', () => { 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 index 888d72c8e3d31..46c70c9bb3435 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -148,6 +148,7 @@ function useBlockEditorSettings( settings, hasTemplate ) { __experimentalCreatePageEntity: createPageEntity, __experimentalUserCanCreatePages: userCanCreatePages, pageOnFront, + __experimentalPreferPatternsOnRoot: hasTemplate, } ), [ settings,