List View: Add a new prop to allow blocks in the inserter to be prioritized

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
+					}
 				/>
 				<div
 					className="list-view-appender__description"

packages/block-editor/src/components/list-view/index.js

@@ -56,17 +56,18 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}         props                         Components props.
- * @param {string}         props.id                      An HTML element id for the root element of ListView.
- * @param {Array}          props.blocks                  _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {?boolean}       props.showBlockMovers         Flag to enable block movers. Defaults to `false`.
- * @param {?boolean}       props.isExpanded              Flag to determine whether nested levels are expanded by default. Defaults to `false`.
- * @param {?boolean}       props.showAppender            Flag to show or hide the block appender. Defaults to `false`.
- * @param {?ComponentType} props.blockSettingsMenu       Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
- * @param {string}         props.rootClientId            The client id of the root block from which we determine the blocks to show in the list.
- * @param {string}         props.description             Optional accessible description for the tree grid component.
- * @param {Function}       props.renderAdditionalBlockUI Function that renders additional block content UI.
- * @param {Ref}            ref                           Forwarded ref
+ * @param {Object}         props                           Components props.
+ * @param {string}         props.id                        An HTML element id for the root element of ListView.
+ * @param {Array}          props.blocks                    _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {?boolean}       props.showBlockMovers           Flag to enable block movers. Defaults to `false`.
+ * @param {?boolean}       props.isExpanded                Flag to determine whether nested levels are expanded by default. Defaults to `false`.
+ * @param {?boolean}       props.showAppender              Flag to show or hide the block appender. Defaults to `false`.
+ * @param {?ComponentType} props.blockSettingsMenu         Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
+ * @param {string}         props.rootClientId              The client id of the root block from which we determine the blocks to show in the list.
+ * @param {string}         props.description               Optional accessible description for the tree grid component.
+ * @param {Function}       props.renderAdditionalBlockUI   Function that renders additional block content UI.
+ * @param {Array}          props.prioritizedInserterBlocks An array of block types to show first in the appender.
+ * @param {Ref}            ref                             Forwarded ref
  */
 function ListViewComponent(
 	{
@@ -79,6 +80,7 @@ function ListViewComponent(
 		rootClientId,
 		description,
 		renderAdditionalBlockUI,
+		prioritizedInserterBlocks,
 	},
 	ref
 ) {
@@ -206,6 +208,7 @@ function ListViewComponent(
 			BlockSettingsMenu,
 			listViewInstanceId: instanceId,
 			renderAdditionalBlockUI,
+			prioritizedInserterBlocks,
 		} ),
 		[
 			draggedClientIds,
@@ -215,6 +218,7 @@ function ListViewComponent(
 			BlockSettingsMenu,
 			instanceId,
 			renderAdditionalBlockUI,
+			prioritizedInserterBlocks,
 		]
 	);
 
@@ -269,6 +273,7 @@ export default forwardRef( ( props, ref ) => {
 			blockSettingsMenu={ BlockSettingsDropdown }
 			rootClientId={ null }
 			renderAdditionalBlockUICallback={ null }
+			prioritizedInserterBlocks={ null }
 		/>
 	);
 } );