Order initial block items in Navigation with PrivateInserter (#48752)

* Order initial block items in Navigation with PrivateInserter * add co author Co-authored-by: Dave Smith <[email protected]> --------- Co-authored-by: Dave Smith <[email protected]>
WordPress · Mar 7, 2023 · 73e0540 · 73e0540
1 parent 4ad2060
commit 73e0540
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { speak } from '@wordpress/a11y';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Dropdown, Button } from '@wordpress/components';
-import { Component } from '@wordpress/element';
+import { forwardRef, Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
@@ -76,7 +76,7 @@ const defaultRenderToggle = ( {
 	);
 };
 
-class Inserter extends Component {
+class PrivateInserter extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -150,6 +150,7 @@ class Inserter extends Component {
 			prioritizePatterns,
 			onSelectOrClose,
 			selectBlockOnInsert,
+			orderInitialBlockItems,
 		} = this.props;
 
 		if ( isQuick ) {
@@ -173,6 +174,7 @@ class Inserter extends Component {
 					isAppender={ isAppender }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
+					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 			);
 		}
@@ -224,7 +226,7 @@ class Inserter extends Component {
 	}
 }
 
-export default compose( [
+export const ComposedPrivateInserter = compose( [
 	withSelect(
 		( select, { clientId, rootClientId, shouldDirectInsert = true } ) => {
 			const {
@@ -421,4 +423,16 @@ export default compose( [
 		( { hasItems, isAppender, rootClientId, clientId } ) =>
 			hasItems || ( ! isAppender && ! rootClientId && ! clientId )
 	),
-] )( Inserter );
+] )( PrivateInserter );
+
+const Inserter = forwardRef( ( props, ref ) => {
+	return (
+		<ComposedPrivateInserter
+			ref={ ref }
+			{ ...props }
+			orderInitialBlockItems={ undefined }
+		/>
+	);
+} );
+
+export default Inserter;
diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -32,6 +32,7 @@ export default function QuickInserter( {
 	isAppender,
 	prioritizePatterns,
 	selectBlockOnInsert,
+	orderInitialBlockItems,
 } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -124,6 +125,7 @@ export default function QuickInserter( {
 					isDraggable={ false }
 					prioritizePatterns={ prioritizePatterns }
 					selectBlockOnInsert={ selectBlockOnInsert }
+					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 			</div>
 

diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js
@@ -46,6 +46,7 @@ function InserterSearchResults( {
 	shouldFocusBlock = true,
 	prioritizePatterns,
 	selectBlockOnInsert,
+	orderInitialBlockItems,
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
@@ -88,8 +89,12 @@ function InserterSearchResults( {
 		if ( maxBlockTypesToShow === 0 ) {
 			return [];
 		}
+		let orderedItems = orderBy( blockTypes, 'frecency', 'desc' );
+		if ( ! filterValue && orderInitialBlockItems ) {
+			orderedItems = orderInitialBlockItems( orderedItems );
+		}
 		const results = searchBlockItems(
-			orderBy( blockTypes, 'frecency', 'desc' ),
+			orderedItems,
 			blockTypeCategories,
 			blockTypeCollections,
 			filterValue
@@ -104,6 +109,7 @@ function InserterSearchResults( {
 		blockTypeCategories,
 		blockTypeCollections,
 		maxBlockTypes,
+		orderInitialBlockItems,
 	] );
 
 	// Announce search results on change.

diff --git a/packages/block-editor/src/components/off-canvas-editor/appender.js b/packages/block-editor/src/components/off-canvas-editor/appender.js
@@ -4,15 +4,27 @@
 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';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
-import Inserter from '../inserter';
+
+import { unlock } from '../../lock-unlock';
+import { privateApis as blockEditorPrivateApis } from '../../private-apis';
+
+const prioritizedInserterBlocks = [
+	'core/navigation-link/page',
+	'core/navigation-link',
+];
 
 export const Appender = forwardRef(
 	( { nestingLevel, blockCount, ...props }, ref ) => {
@@ -61,10 +73,23 @@ 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;
+		}, [] );
+
 		if ( hideInserter ) {
 			return null;
 		}
-
+		const { PrivateInserter } = unlock( blockEditorPrivateApis );
 		const descriptionId = `off-canvas-editor-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. */
@@ -76,7 +101,7 @@ export const Appender = forwardRef(
 
 		return (
 			<div className="offcanvas-editor-appender">
-				<Inserter
+				<PrivateInserter
 					ref={ ref }
 					rootClientId={ clientId }
 					position="bottom right"
@@ -91,6 +116,7 @@ export const Appender = forwardRef(
 							setInsertedBlock( maybeInsertedBlock );
 						}
 					} }
+					orderInitialBlockItems={ orderInitialBlockItems }
 				/>
 				<div
 					className="offcanvas-editor-appender__description"

diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
@@ -6,6 +6,7 @@ import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import OffCanvasEditor from './components/off-canvas-editor';
 import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu';
+import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -16,4 +17,5 @@ lock( privateApis, {
 	ExperimentalBlockEditorProvider,
 	LeafMoreMenu,
 	OffCanvasEditor,
+	PrivateInserter,
 } );
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -5,7 +5,10 @@ import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { BlockEditorProvider, Inserter } from '@wordpress/block-editor';
+import {
+	BlockEditorProvider,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 
 /**
@@ -33,6 +36,11 @@ function SidebarNavigationScreenWrapper( { children, actions } ) {
 	);
 }
 
+const prioritizedInserterBlocks = [
+	'core/navigation-link/page',
+	'core/navigation-link',
+];
+
 export default function SidebarNavigationScreenNavigationMenus() {
 	const history = useHistory();
 	const { navigationMenus, hasResolvedNavigationMenus } = useSelect(
@@ -93,6 +101,18 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		},
 		[ history ]
 	);
+	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;
+	}, [] );
 
 	if ( hasResolvedNavigationMenus && ! hasNavigationMenus ) {
 		return (
@@ -109,7 +129,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 			</SidebarNavigationScreenWrapper>
 		);
 	}
-
+	const { PrivateInserter } = unlock( blockEditorPrivateApis );
 	return (
 		<BlockEditorProvider
 			value={ blocks }
@@ -118,7 +138,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 		>
 			<SidebarNavigationScreenWrapper
 				actions={
-					<Inserter
+					<PrivateInserter
 						rootClientId={ blocks[ 0 ].clientId }
 						position="bottom right"
 						isAppender
@@ -129,6 +149,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 							as: SidebarButton,
 							label: __( 'Add menu item' ),
 						} }
+						orderInitialBlockItems={ orderInitialBlockItems }
 					/>
 				}
 			>