diff --git a/packages/block-editor/src/components/list-view/appender.js b/packages/block-editor/src/components/list-view/appender.js index a006b91e860c2..b20df2800f1a2 100644 --- a/packages/block-editor/src/components/list-view/appender.js +++ b/packages/block-editor/src/components/list-view/appender.js @@ -4,7 +4,12 @@ import { useInstanceId } from '@wordpress/compose'; import { speak } from '@wordpress/a11y'; import { useSelect } from '@wordpress/data'; -import { forwardRef, useState, useEffect } from '@wordpress/element'; +import { + forwardRef, + useState, + useEffect, + useCallback, +} from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; /** @@ -13,9 +18,12 @@ import { __, sprintf } from '@wordpress/i18n'; import { store as blockEditorStore } from '../../store'; import useBlockDisplayTitle from '../block-title/use-block-display-title'; import Inserter from '../inserter'; +import { useListViewContext } from './context'; export const Appender = forwardRef( ( { nestingLevel, blockCount, clientId, ...props }, ref ) => { + const { prioritizedInserterBlocks } = useListViewContext(); + const [ insertedBlock, setInsertedBlock ] = useState( null ); const instanceId = useInstanceId( Appender ); @@ -58,11 +66,27 @@ export const Appender = forwardRef( ); }, [ insertedBlockTitle ] ); + const orderInitialBlockItems = useCallback( + ( items ) => { + items.sort( ( { id: aName }, { id: bName } ) => { + // Sort block items according to `prioritizedInserterBlocks`. + let aIndex = prioritizedInserterBlocks.indexOf( aName ); + let bIndex = prioritizedInserterBlocks.indexOf( bName ); + // All other block items should come after that. + if ( aIndex < 0 ) aIndex = prioritizedInserterBlocks.length; + if ( bIndex < 0 ) bIndex = prioritizedInserterBlocks.length; + return aIndex - bIndex; + } ); + return items; + }, + [ prioritizedInserterBlocks ] + ); + if ( hideInserter ) { return null; } - const descriptionId = `list-view-appender__${ instanceId }`; + const description = sprintf( /* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */ __( 'Append to %1$s block at position %2$d, Level %3$d' ), @@ -88,6 +112,11 @@ export const Appender = forwardRef( setInsertedBlock( maybeInsertedBlock ); } } } + orderInitialBlockItems={ + prioritizedInserterBlocks + ? orderInitialBlockItems + : null + } />