@wordpress/commands 1.42.0 → 1.43.1-next.v.202604091042.0

package/src/components/command-menu.js

@@ -12,8 +12,6 @@ import {
 	useState,
 	useEffect,
 	useRef,
-	useCallback,
-	useMemo,
 	isValidElement,
 	Component,
 } from '@wordpress/element';
@@ -35,9 +33,16 @@ import { Icon, search as inputIcon, arrowRight } from '@wordpress/icons';
  */
 import { store as commandsStore } from '../store';
 import { unlock } from '../lock-unlock';
+import {
+	recordUsage,
+	useLoaderCollector,
+	useRecentCommands,
+} from './use-recent-commands';
 
 const { withIgnoreIMEEvents } = unlock( componentsPrivateApis );
 
+// Namespaces item ids to avoid collisions with other elements on the page.
+const ITEM_ID_PREFIX = 'command-palette-item-';
 const inputLabel = __( 'Search commands and settings' );
 
 /**
@@ -80,18 +85,62 @@ export function isValidIcon( icon ) {
 	);
 }
 
-function CommandMenuLoader( {
-	name,
-	search,
-	hook,
-	setLoader,
-	close,
-	category,
-} ) {
-	const { isLoading, commands = [] } = hook( { search } ) ?? {};
+function CommandItem( { command, search, category, valuePrefix } ) {
+	const { close } = useDispatch( commandsStore );
+	const commandCategory = category ?? command.category;
+	const label = command.searchLabel ?? command.label;
+	const value = valuePrefix ? `${ valuePrefix }${ command.name }` : label;
+	return (
+		<Command.Item
+			key={ command.name }
+			id={ `${ ITEM_ID_PREFIX }${ value.toLowerCase() }` }
+			value={ value }
+			keywords={
+				valuePrefix
+					? [ ...( command.keywords ?? [] ), label ]
+					: command.keywords
+			}
+			onSelect={ () => {
+				recordUsage( command.name );
+				command.callback( { close } );
+			} }
+		>
+			<HStack
+				alignment="left"
+				className={ clsx( 'commands-command-menu__item', {
+					'has-icon':
+						CATEGORY_ICONS[ commandCategory ] || command.icon,
+				} ) }
+			>
+				{ CATEGORY_ICONS[ commandCategory ] ? (
+					<Icon icon={ CATEGORY_ICONS[ commandCategory ] } />
+				) : (
+					isValidIcon( command.icon ) && (
+						<Icon icon={ command.icon } />
+					)
+				) }
+				<span className="commands-command-menu__item-label">
+					<TextHighlight
+						text={ command.label }
+						highlight={ search }
+					/>
+				</span>
+				{ CATEGORY_LABELS[ commandCategory ] && (
+					<span className="commands-command-menu__item-category">
+						{ CATEGORY_LABELS[ commandCategory ] }
+					</span>
+				) }
+			</HStack>
+		</Command.Item>
+	);
+}
+
+function CommandMenuLoader( { name, search, hook, category, valuePrefix } ) {
+	const { setLoaderLoading } = unlock( useDispatch( commandsStore ) );
+	const { isLoading: loading, commands = [] } = hook( { search } ) ?? {};
 	useEffect( () => {
-		setLoader( name, isLoading );
-	}, [ setLoader, name, isLoading ] );
+		setLoaderLoading( name, loading );
+	}, [ setLoaderLoading, name, loading ] );
 
 	if ( ! commands.length ) {
 		return null;
@@ -99,64 +148,24 @@ function CommandMenuLoader( {
 
 	return (
 		<>
-			{ commands.map( ( command ) => {
-				const commandCategory = command.category ?? category;
-				return (
-					<Command.Item
-						key={ command.name }
-						value={ command.searchLabel ?? command.label }
-						keywords={ command.keywords }
-						onSelect={ () => command.callback( { close } ) }
-						id={ command.name }
-					>
-						<HStack
-							alignment="left"
-							className={ clsx( 'commands-command-menu__item', {
-								'has-icon':
-									CATEGORY_ICONS[ commandCategory ] ||
-									command.icon,
-							} ) }
-						>
-							{ CATEGORY_ICONS[ commandCategory ] && (
-								<Icon
-									icon={ CATEGORY_ICONS[ commandCategory ] }
-								/>
-							) }
-							{ ! CATEGORY_ICONS[ commandCategory ] &&
-								isValidIcon( command.icon ) && (
-									<Icon icon={ command.icon } />
-								) }
-							<span className="commands-command-menu__item-label">
-								<TextHighlight
-									text={ command.label }
-									highlight={ search }
-								/>
-							</span>
-							{ CATEGORY_LABELS[ commandCategory ] && (
-								<span className="commands-command-menu__item-category">
-									{ CATEGORY_LABELS[ commandCategory ] }
-								</span>
-							) }
-						</HStack>
-					</Command.Item>
-				);
-			} ) }
+			{ commands.map( ( command ) => (
+				<CommandItem
+					key={ command.name }
+					command={ command }
+					search={ search }
+					category={ command.category ?? category }
+					valuePrefix={ valuePrefix }
+				/>
+			) ) }
 		</>
 	);
 }
 
-export function CommandMenuLoaderWrapper( {
-	hook,
-	search,
-	setLoader,
-	close,
-	category,
-} ) {
+function CommandMenuLoaderWrapper( { hook, ...props } ) {
 	// The "hook" prop is actually a custom React hook
 	// so to avoid breaking the rules of hooks
 	// the CommandMenuLoaderWrapper component need to be
-	// remounted on each hook prop change
-	// We use the key state to make sure we do that properly.
+	// remounted on each hook prop change.
 	const currentLoaderRef = useRef( hook );
 	const [ key, setKey ] = useState( 0 );
 	useEffect( () => {
@@ -170,96 +179,123 @@ export function CommandMenuLoaderWrapper( {
 		<CommandMenuLoader
 			key={ key }
 			hook={ currentLoaderRef.current }
-			search={ search }
-			setLoader={ setLoader }
-			close={ close }
-			category={ category }
+			{ ...props }
 		/>
 	);
 }
 
-export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
-	const { commands, loaders } = useSelect(
-		( select ) => {
-			const { getCommands, getCommandLoaders } = select( commandsStore );
-			return {
-				commands: getCommands( isContextual ),
-				loaders: getCommandLoaders( isContextual ),
-			};
-		},
-		[ isContextual ]
+function CommandList( { search, commands, loaders, valuePrefix } ) {
+	return (
+		<>
+			{ commands.map( ( command ) => (
+				<CommandItem
+					key={ command.name }
+					command={ command }
+					search={ search }
+					valuePrefix={ valuePrefix }
+				/>
+			) ) }
+			{ loaders.map( ( loader ) => (
+				<CommandMenuLoaderWrapper
+					key={ loader.name }
+					name={ loader.name }
+					search={ search }
+					hook={ loader.hook }
+					category={ loader.category }
+					valuePrefix={ valuePrefix }
+				/>
+			) ) }
+		</>
 	);
+}
+
+function RecentLoaderRunner( { hook, name, filterNames, onResolved } ) {
+	useLoaderCollector( hook, name, filterNames, onResolved );
+	return null;
+}
+
+function RecentGroup() {
+	const { commands, loaders, recentSet, onResolved } = useRecentCommands();
 
 	if ( ! commands.length && ! loaders.length ) {
 		return null;
 	}
 
 	return (
-		<Command.Group>
-			{ commands.map( ( command ) => (
-				<Command.Item
-					key={ command.name }
-					value={ command.searchLabel ?? command.label }
-					keywords={ command.keywords }
-					onSelect={ () => command.callback( { close } ) }
-					id={ command.name }
-				>
-					<HStack
-						alignment="left"
-						className={ clsx( 'commands-command-menu__item', {
-							'has-icon':
-								CATEGORY_ICONS[ command.category ] ||
-								command.icon,
-						} ) }
-					>
-						{ CATEGORY_ICONS[ command.category ] ? (
-							<Icon icon={ CATEGORY_ICONS[ command.category ] } />
-						) : (
-							command.icon && <Icon icon={ command.icon } />
-						) }
-						<span>
-							<TextHighlight
-								text={ command.label }
-								highlight={ search }
-							/>
-						</span>
-						{ CATEGORY_LABELS[ command.category ] && (
-							<span className="commands-command-menu__item-category">
-								{ CATEGORY_LABELS[ command.category ] }
-							</span>
-						) }
-					</HStack>
-				</Command.Item>
-			) ) }
+		<Command.Group heading={ __( 'Recent' ) }>
 			{ loaders.map( ( loader ) => (
-				<CommandMenuLoaderWrapper
+				<RecentLoaderRunner
 					key={ loader.name }
+					name={ loader.name }
 					hook={ loader.hook }
-					search={ search }
-					setLoader={ setLoader }
-					close={ close }
-					category={ loader.category }
+					filterNames={ recentSet }
+					onResolved={ onResolved }
+				/>
+			) ) }
+			{ commands.map( ( command ) => (
+				<CommandItem
+					key={ command.name }
+					command={ command }
+					search=""
+					valuePrefix="recent-"
 				/>
 			) ) }
 		</Command.Group>
 	);
 }
 
-function CommandInput( { isOpen, search, setSearch } ) {
+function SuggestionsGroup() {
+	const { commands, loaders } = useSelect( ( select ) => {
+		const { getCommands, getCommandLoaders } = select( commandsStore );
+		return {
+			commands: getCommands( true ),
+			loaders: getCommandLoaders( true ),
+		};
+	}, [] );
+
+	return (
+		<Command.Group heading={ __( 'Suggestions' ) }>
+			<CommandList search="" commands={ commands } loaders={ loaders } />
+		</Command.Group>
+	);
+}
+
+function ResultsGroup( { search } ) {
+	const { commands, contextualCommands, loaders, contextualLoaders } =
+		useSelect( ( select ) => {
+			const { getCommands, getCommandLoaders } = select( commandsStore );
+			return {
+				commands: getCommands( false ),
+				contextualCommands: getCommands( true ),
+				loaders: getCommandLoaders( false ),
+				contextualLoaders: getCommandLoaders( true ),
+			};
+		}, [] );
+
+	return (
+		<Command.Group heading={ __( 'Results' ) }>
+			<CommandList
+				search={ search }
+				commands={ commands }
+				loaders={ loaders }
+			/>
+			<CommandList
+				search={ search }
+				commands={ contextualCommands }
+				loaders={ contextualLoaders }
+			/>
+		</Command.Group>
+	);
+}
+
+function CommandInput( { search, setSearch } ) {
 	const commandMenuInput = useRef();
 	const _value = useCommandState( ( state ) => state.value );
-	const selectedItemId = useMemo( () => {
-		const item = document.querySelector(
-			`[cmdk-item=""][data-value="${ _value }"]`
-		);
-		return item?.getAttribute( 'id' );
-	}, [ _value ] );
+	const selectedItemId = _value ? `${ ITEM_ID_PREFIX }${ _value }` : null;
 	useEffect( () => {
 		// Focus the command palette input when mounting the modal.
-		if ( isOpen ) {
-			commandMenuInput.current.focus();
-		}
-	}, [ isOpen ] );
+		commandMenuInput.current.focus();
+	}, [] );
 	return (
 		<Command.Input
 			ref={ commandMenuInput }
@@ -277,12 +313,14 @@ function CommandInput( { isOpen, search, setSearch } ) {
 export function CommandMenu() {
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	const [ search, setSearch ] = useState( '' );
-	const isOpen = useSelect(
-		( select ) => select( commandsStore ).isOpen(),
+	const { isOpen: paletteIsOpen, loadersLoading } = useSelect(
+		( select ) => ( {
+			isOpen: select( commandsStore ).isOpen(),
+			loadersLoading: unlock( select( commandsStore ) ).isLoading(),
+		} ),
 		[]
 	);
 	const { open, close } = useDispatch( commandsStore );
-	const [ loaders, setLoaders ] = useState( {} );
 
 	useEffect( () => {
 		registerShortcut( {
@@ -306,7 +344,7 @@ export function CommandMenu() {
 			}
 
 			event.preventDefault();
-			if ( isOpen ) {
+			if ( paletteIsOpen ) {
 				close();
 			} else {
 				open();
@@ -317,35 +355,26 @@ export function CommandMenu() {
 		}
 	);
 
-	const setLoader = useCallback(
-		( name, value ) =>
-			setLoaders( ( current ) => ( {
-				...current,
-				[ name ]: value,
-			} ) ),
-		[]
-	);
 	const closeAndReset = () => {
 		setSearch( '' );
 		close();
 	};
 
-	if ( ! isOpen ) {
+	if ( ! paletteIsOpen ) {
 		return false;
 	}
 
-	const isLoading = Object.values( loaders ).some( Boolean );
-
 	return (
 		<Modal
 			className="commands-command-menu"
 			overlayClassName="commands-command-menu__overlay"
 			onRequestClose={ closeAndReset }
 			__experimentalHideHeader
+			size="medium"
 			contentLabel={ __( 'Command palette' ) }
 		>
 			<div className="commands-command-menu__container">
-				<Command label={ inputLabel }>
+				<Command label={ inputLabel } loop>
 					<div className="commands-command-menu__header">
 						<Icon
 							className="commands-command-menu__header-search-icon"
@@ -354,28 +383,17 @@ export function CommandMenu() {
 						<CommandInput
 							search={ search }
 							setSearch={ setSearch }
-							isOpen={ isOpen }
 						/>
 					</div>
 					<Command.List label={ __( 'Command suggestions' ) }>
-						{ search && ! isLoading && (
+						{ search && ! loadersLoading && (
 							<Command.Empty>
 								{ __( 'No results found.' ) }
 							</Command.Empty>
 						) }
-						<CommandMenuGroup
-							search={ search }
-							setLoader={ setLoader }
-							close={ closeAndReset }
-							isContextual
-						/>
-						{ search && (
-							<CommandMenuGroup
-								search={ search }
-								setLoader={ setLoader }
-								close={ closeAndReset }
-							/>
-						) }
+						{ ! search && <RecentGroup /> }
+						{ ! search && <SuggestionsGroup /> }
+						{ search && <ResultsGroup search={ search } /> }
 					</Command.List>
 				</Command>
 			</div>

package/src/components/style.scss

@@ -2,12 +2,12 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/colors" as *;
 
+$palette-max-height: 376px;
+$palette-header-height: 48px;
+
 // Here we extend the modal styles to be tighter, and to the center. Because the palette uses the modal as a container.
 .commands-command-menu {
-	border-radius: $grid-unit-05;
-	width: calc(100% - #{$grid-unit-40});
 	margin: auto;
-	max-width: 400px;
 	position: relative;
 	top: calc(5% + #{$header-height});
 
@@ -61,7 +61,7 @@
 	[cmdk-input] {
 		border: none;
 		width: 100%;
-		padding: $grid-unit-20 $grid-unit-05;
+		padding: $grid-unit-15 $grid-unit-05;
 		outline: none;
 		color: $gray-900;
 		margin: 0;
@@ -80,23 +80,13 @@
 	}
 
 	[cmdk-item] {
-		border-radius: $radius-small;
 		cursor: pointer;
 		display: flex;
 		align-items: center;
+		padding: $grid-unit-05 0;
 		color: $gray-900;
 		font-size: $default-font-size;
 
-		&[aria-selected="true"],
-		&:active {
-			background: var(--wp-admin-theme-color);
-			color: $white;
-
-			svg {
-				fill: $white;
-			}
-		}
-
 		&[aria-disabled="true"] {
 			color: $gray-600;
 			cursor: not-allowed;
@@ -107,19 +97,34 @@
 		}
 
 		> div {
-			min-height: $button-size-next-default-40px;
+			border-radius: $radius-small;
+			min-height: $grid-unit-40;
 			padding: $grid-unit-05;
 			padding-left: $grid-unit-50; // Account for commands without icons.
 			padding-right: $grid-unit-20; // Accounts for the command category.
 		}
 
+		&[aria-selected="true"] > div,
+		&:active > div {
+			background: var(--wp-admin-theme-color);
+			color: $white;
+
+			svg {
+				fill: $white;
+			}
+		}
+
 		> .has-icon {
 			padding-left: $grid-unit;
 		}
 	}
 
+	[cmdk-group]:has([cmdk-group-items]:empty) {
+		display: none;
+	}
+
 	[cmdk-root] > [cmdk-list] {
-		max-height: $palette-max-height; // Specific to not have commands overflow oddly.
+		max-height: min($palette-max-height - $palette-header-height, calc(70vh - $palette-header-height));
 		overflow: auto;
 		scroll-padding-top: $grid-unit-10;
 		scroll-padding-bottom: $grid-unit-10;
@@ -130,20 +135,18 @@
 			border-top: $border-width solid $gray-300;
 		}
 
-		// Only add vertical padding when there are commands to show.
-		&:has([cmdk-group-items]:not(:empty)) {
-			padding-top: $grid-unit-10;
-		}
-
-		// Ensures there is always padding bottom on the last group, when there are commands.
-		&
-		[cmdk-list-sizer] > [cmdk-group]:last-child
-		[cmdk-group-items]:not(:empty) {
-			padding-bottom: $grid-unit-10;
+		& [cmdk-list-sizer] > [cmdk-group] > [cmdk-group-items]:not(:empty) {
+			padding: 0 $grid-unit-10 $grid-unit-05;
 		}
 
-		& [cmdk-list-sizer] > [cmdk-group] > [cmdk-group-items]:not(:empty) {
-			padding: 0 $grid-unit-10;
+		[cmdk-group-heading] {
+			margin-top: $grid-unit-10;
+			padding: $grid-unit-10 $grid-unit-20;
+			line-height: $grid-unit-20;
+			font-size: $font-size-x-small;
+			font-weight: $font-weight-medium;
+			text-transform: uppercase;
+			color: $gray-900;
 		}
 	}
 

package/src/components/use-recent-commands.js

@@ -0,0 +1,131 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useSelect,
+	useDispatch,
+	select as globalSelect,
+	dispatch,
+} from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as commandsStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+const MAX_RECENTLY_SAVED = 30;
+const MAX_RECENTLY_DISPLAYED = 5;
+const EMPTY_ARRAY = [];
+const EMPTY_SET = new Set();
+
+export function recordUsage( name ) {
+	const current =
+		globalSelect( preferencesStore ).get(
+			'core/commands',
+			'recentlyUsed'
+		) ?? [];
+	const next = [ name, ...current.filter( ( n ) => n !== name ) ].slice(
+		0,
+		MAX_RECENTLY_SAVED
+	);
+	dispatch( preferencesStore ).set( 'core/commands', 'recentlyUsed', next );
+}
+
+export function useLoaderCollector( hook, name, filterNames, onResolved ) {
+	const { setLoaderLoading } = unlock( useDispatch( commandsStore ) );
+	const { isLoading: loading, commands = [] } = hook( { search: '' } ) ?? {};
+
+	useEffect( () => {
+		setLoaderLoading( name, loading );
+	}, [ setLoaderLoading, name, loading ] );
+
+	const filtered = filterNames
+		? commands.filter( ( c ) => filterNames.has( c.name ) )
+		: commands;
+
+	useEffect( () => {
+		onResolved( name, filtered );
+	}, [ onResolved, name, filtered ] );
+
+	// Clear this loader's entries when it unmounts.
+	useEffect( () => {
+		return () => onResolved( name, [] );
+	}, [ onResolved, name ] );
+}
+
+export function useRecentCommands() {
+	const {
+		contextualCommands,
+		staticCommands,
+		contextualLoaders,
+		staticLoaders,
+		recentlyUsedNames = EMPTY_ARRAY,
+	} = useSelect( ( select ) => {
+		const { getCommands, getCommandLoaders } = select( commandsStore );
+		return {
+			contextualCommands: getCommands( true ),
+			staticCommands: getCommands( false ),
+			contextualLoaders: getCommandLoaders( true ),
+			staticLoaders: getCommandLoaders( false ),
+			recentlyUsedNames: select( preferencesStore ).get(
+				'core/commands',
+				'recentlyUsed'
+			),
+		};
+	}, [] );
+
+	const [ resolvedMap, setResolvedMap ] = useState( () => new Map() );
+
+	const onResolved = useCallback( ( loaderName, cmds ) => {
+		setResolvedMap( ( prev ) => {
+			const prevCmds = prev.get( loaderName );
+			if (
+				prevCmds &&
+				prevCmds.length === cmds.length &&
+				prevCmds.every( ( c, i ) => c.name === cmds[ i ].name )
+			) {
+				return prev;
+			}
+			const next = new Map( prev );
+			next.set( loaderName, cmds );
+			return next;
+		} );
+	}, [] );
+
+	const { recentNames, recentSet } = useMemo( () => {
+		const names = recentlyUsedNames.slice( 0, MAX_RECENTLY_DISPLAYED );
+		return { recentNames: names, recentSet: new Set( names ) };
+	}, [ recentlyUsedNames ] );
+
+	if ( ! recentlyUsedNames.length ) {
+		return {
+			commands: [],
+			loaders: [],
+			recentSet: EMPTY_SET,
+			onResolved,
+		};
+	}
+
+	const allStaticCommands = [ ...contextualCommands, ...staticCommands ];
+	const loaders = [ ...contextualLoaders, ...staticLoaders ];
+
+	// Merge static commands with loader-resolved commands.
+	const allByName = new Map();
+	allStaticCommands.forEach( ( c ) => allByName.set( c.name, c ) );
+	for ( const cmds of resolvedMap.values() ) {
+		cmds.forEach( ( c ) => {
+			if ( ! allByName.has( c.name ) ) {
+				allByName.set( c.name, c );
+			}
+		} );
+	}
+	// Return in recency order.
+	const commands = recentNames
+		.map( ( n ) => allByName.get( n ) )
+		.filter( Boolean );
+
+	return { commands, loaders, recentSet, onResolved };
+}