diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js index ea1332dc63d0d..c66a99601ed23 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab.js @@ -28,6 +28,19 @@ import BlockPatternList from '../block-patterns-list'; import PatternsExplorerModal from './block-patterns-explorer/explorer'; import MobileTabNavigation from './mobile-tab-navigation'; +// Preffered order of pattern categories. Any other categories should +// be at the bottom without any re-ordering. +const patternCategoriesOrder = [ + 'featured', + 'posts', + 'text', + 'gallery', + 'call-to-action', + 'banner', + 'header', + 'footer', +]; + function usePatternsCategories( rootClientId ) { const [ allPatterns, allCategories ] = usePatternsState( undefined, @@ -56,17 +69,27 @@ function usePatternsCategories( rootClientId ) { ) ) .sort( ( { name: currentName }, { name: nextName } ) => { + // The pattern categories should be ordered as follows: + // 1. The categories from `patternCategoriesOrder` in that specific order should be at the top. + // 2. The rest categories should be at the bottom without any re-ordering. if ( ! [ currentName, nextName ].some( ( categoryName ) => - [ 'featured', 'text' ].includes( categoryName ) + patternCategoriesOrder.includes( categoryName ) ) ) { return 0; } - // Move `featured` category to the top and `text` to the bottom. - return currentName === 'featured' || nextName === 'text' - ? -1 - : 1; + if ( + [ currentName, nextName ].every( ( categoryName ) => + patternCategoriesOrder.includes( categoryName ) + ) + ) { + return ( + patternCategoriesOrder.indexOf( currentName ) - + patternCategoriesOrder.indexOf( nextName ) + ); + } + return patternCategoriesOrder.includes( currentName ) ? -1 : 1; } ); if (