@wordpress/commands 0.2.0 → 0.4.0

package/src/components/command-menu.js

@@ -9,11 +9,16 @@ import { Command } from 'cmdk';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Modal, TextHighlight } from '@wordpress/components';
+import {
+	Modal,
+	TextHighlight,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import {
 	store as keyboardShortcutsStore,
 	useShortcut,
 } from '@wordpress/keyboard-shortcuts';
+import { Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -39,12 +44,18 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
 						value={ command.name }
 						onSelect={ () => command.callback( { close } ) }
 					>
-						<span className="commands-command-menu__item">
-							<TextHighlight
-								text={ command.label }
-								highlight={ search }
-							/>
-						</span>
+						<HStack
+							alignment="left"
+							className="commands-command-menu__item"
+						>
+							<Icon icon={ command.icon } />
+							<span>
+								<TextHighlight
+									text={ command.label }
+									highlight={ search }
+								/>
+							</span>
+						</HStack>
 					</Command.Item>
 				) ) }
 			</Command.List>
@@ -91,19 +102,25 @@ export function CommandMenuGroup( { group, search, setLoader, close } ) {
 	);
 
 	return (
-		<Command.Group heading={ group }>
+		<Command.Group>
 			{ commands.map( ( command ) => (
 				<Command.Item
 					key={ command.name }
 					value={ command.name }
 					onSelect={ () => command.callback( { close } ) }
 				>
-					<span className="commands-command-menu__item">
-						<TextHighlight
-							text={ command.label }
-							highlight={ search }
-						/>
-					</span>
+					<HStack
+						alignment="left"
+						className="commands-command-menu__item"
+					>
+						<Icon icon={ command.icon } />
+						<span>
+							<TextHighlight
+								text={ command.label }
+								highlight={ search }
+							/>
+						</span>
+					</HStack>
 				</Command.Item>
 			) ) }
 			{ loaders.map( ( loader ) => (
@@ -122,14 +139,16 @@ export function CommandMenuGroup( { group, search, setLoader, close } ) {
 export function CommandMenu() {
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
 	const [ search, setSearch ] = useState( '' );
-	const [ open, setOpen ] = useState( false );
-	const { groups } = useSelect( ( select ) => {
-		const { getGroups } = select( commandsStore );
+	const { groups, isOpen } = useSelect( ( select ) => {
+		const { getGroups, isOpen: _isOpen } = select( commandsStore );
 		return {
 			groups: getGroups(),
+			isOpen: _isOpen(),
 		};
 	}, [] );
+	const { open, close } = useDispatch( commandsStore );
 	const [ loaders, setLoaders ] = useState( {} );
+	const commandMenuInput = useRef();
 
 	useEffect( () => {
 		registerShortcut( {
@@ -147,7 +166,11 @@ export function CommandMenu() {
 		'core/commands',
 		( event ) => {
 			event.preventDefault();
-			setOpen( ( prevOpen ) => ! prevOpen );
+			if ( isOpen ) {
+				close();
+			} else {
+				open();
+			}
 		},
 		{
 			bindGlobal: true,
@@ -162,12 +185,19 @@ export function CommandMenu() {
 			} ) ),
 		[]
 	);
-	const close = () => {
+	const closeAndReset = () => {
 		setSearch( '' );
-		setOpen( false );
+		close();
 	};
 
-	if ( ! open ) {
+	useEffect( () => {
+		// Focus the command menu input when mounting the modal.
+		if ( isOpen ) {
+			commandMenuInput.current.focus();
+		}
+	}, [ isOpen ] );
+
+	if ( ! isOpen ) {
 		return false;
 	}
 	const isLoading = Object.values( loaders ).some( Boolean );
@@ -176,39 +206,37 @@ export function CommandMenu() {
 		<Modal
 			className="commands-command-menu"
 			overlayClassName="commands-command-menu__overlay"
-			onRequestClose={ close }
+			onRequestClose={ closeAndReset }
 			__experimentalHideHeader
 		>
 			<div className="commands-command-menu__container">
 				<Command label={ __( 'Global Command Menu' ) }>
 					<div className="commands-command-menu__header">
 						<Command.Input
-							// The input should be focused when the modal is opened.
-							// eslint-disable-next-line jsx-a11y/no-autofocus
-							autoFocus
+							ref={ commandMenuInput }
 							value={ search }
 							onValueChange={ setSearch }
-							placeholder={ __(
-								'Search for content and templates, or try commands like "Add…"'
-							) }
+							placeholder={ __( 'Type a command or search' ) }
 						/>
 					</div>
-					<Command.List>
-						{ ! isLoading && (
-							<Command.Empty>
-								{ __( 'No results found.' ) }
-							</Command.Empty>
-						) }
-						{ groups.map( ( group ) => (
-							<CommandMenuGroup
-								key={ group }
-								group={ group }
-								search={ search }
-								setLoader={ setLoader }
-								close={ close }
-							/>
-						) ) }
-					</Command.List>
+					{ search && (
+						<Command.List>
+							{ ! isLoading && (
+								<Command.Empty>
+									{ __( 'No results found.' ) }
+								</Command.Empty>
+							) }
+							{ groups.map( ( group ) => (
+								<CommandMenuGroup
+									key={ group }
+									group={ group }
+									search={ search }
+									setLoader={ setLoader }
+									close={ closeAndReset }
+								/>
+							) ) }
+						</Command.List>
+					) }
 				</Command>
 			</div>
 		</Modal>

package/src/components/style.scss

@@ -1,8 +1,7 @@
 // dirty hack to clean up modal
 .commands-command-menu {
-	padding: 0;
 	width: 100%;
-	max-width: 680px;
+	max-width: 480px;
 	position: relative;
 	top: 15%;
 
@@ -20,7 +19,6 @@
 .commands-command-menu__header {
 	display: flex;
 	align-items: center;
-	margin: $grid-unit-15 $grid-unit-15 0 $grid-unit-15;
 
 	.components-button {
 		height: $grid-unit-70;
@@ -38,72 +36,47 @@
 }
 
 .commands-command-menu__container {
-	[cmdk-linear-badge] {
-		height: 24px;
-		padding: 0 8px;
-		font-size: 12px;
-		color: $gray-800;
-		background: $gray-300;
-		border-radius: 4px;
-		width: fit-content;
-		display: flex;
-		align-items: center;
-		margin: $grid-unit-20 $grid-unit-20 0;
-	}
-
-	[cmdk-linear-shortcuts] {
-		display: flex;
-		margin-left: auto;
-		gap: $grid-unit-10;
-
-		kbd {
-			color: $gray-800;
-		}
-	}
+	// the style here is a hack to force safari to repaint to avoid a style glitch
+	will-change: transform;
 
 	[cmdk-input] {
-		border: 1px solid $gray-600;
+		border: none;
 		width: 100%;
-		padding: $grid-unit-15 $grid-unit-20;
-		min-height: $grid-unit-70;
+		padding: $grid-unit-20;
 		outline: none;
 		color: $gray-900;
 		margin: 0;
-		border-radius: $radius-block-ui;
+		font-size: 20px;
+		line-height: 28px;
+		border-bottom: 1px solid $gray-200;
+		border-radius: 0;
 
 		&::placeholder {
 			color: $gray-600;
 		}
 
 		&:focus {
-			outline: 2px solid transparent;
-			border-color: var(--wp-admin-theme-color);
-			box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+			box-shadow: none;
+			outline: none;
+			border-bottom: 1px solid $gray-200;
 		}
 	}
 
 	[cmdk-item] {
-		content-visibility: auto;
-		border-radius: $radius-block-ui;
+		border-radius: $grid-unit-05;
 		cursor: pointer;
-		height: $grid-unit-50;
 		display: flex;
 		align-items: center;
-		gap: $grid-unit-15;
-		padding: 0 $grid-unit-20;
+		padding: $grid-unit;
 		color: $gray-900;
-		user-select: none;
-		will-change: background, color;
-		transition: all 150ms ease;
-		transition-property: none;
-		position: relative;
 
-		&[aria-selected="true"] {
+		&[aria-selected="true"],
+		&:active {
 			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 			color: var(--wp-admin-theme-color);
 
 			svg {
-				color: var(--wp-admin-theme-color);
+				fill: var(--wp-admin-theme-color);
 			}
 		}
 
@@ -112,46 +85,15 @@
 			cursor: not-allowed;
 		}
 
-		&:active {
-			transition-property: background;
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-		}
-
-		& + [cmdk-item] {
-			margin-top: $grid-unit-05;
-		}
-
-		svg,
-		.dashicon {
-			width: $grid-unit-20;
-			height: $grid-unit-20;
-			color: $gray-800;
+		svg {
+			fill: $gray-600;
 		}
 	}
 
 	[cmdk-root] > [cmdk-list] {
-		min-height: 300px;
 		max-height: 400px;
 		overflow: auto;
-		overscroll-behavior: contain;
-		transition: 100ms ease;
-		transition-property: height;
-		margin: $grid-unit-15;
-	}
-
-	[cmdk-group-heading] {
-		user-select: none;
-		color: $gray-700;
-		padding: $grid-unit-30 $grid-unit-20 $grid-unit-20;
-		display: flex;
-		align-items: center;
-		font-size: 11px;
-		text-transform: uppercase;
-		font-weight: 500;
-		position: sticky;
-		top: 0;
-		background: $white;
-		z-index: 1;
+		padding: $grid-unit;
 	}
 
 	[cmdk-empty] {

package/src/hooks/use-command.js

@@ -26,6 +26,7 @@ export default function useCommand( command ) {
 			name: command.name,
 			group: command.group,
 			label: command.label,
+			icon: command.icon,
 			callback: currentCallback.current,
 		} );
 		return () => {
@@ -35,6 +36,7 @@ export default function useCommand( command ) {
 		command.name,
 		command.label,
 		command.group,
+		command.icon,
 		registerCommand,
 		unregisterCommand,
 	] );

package/src/private-apis.js

@@ -8,6 +8,7 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
  */
 import { default as useCommand } from './hooks/use-command';
 import { default as useCommandLoader } from './hooks/use-command-loader';
+import { store } from './store';
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -19,4 +20,5 @@ export const privateApis = {};
 lock( privateApis, {
 	useCommand,
 	useCommandLoader,
+	store,
 } );

package/src/store/actions.js

@@ -5,10 +5,11 @@
  *
  * @typedef {Object} WPCommandConfig
  *
- * @property {string}   name     Command name.
- * @property {string}   label    Command label.
- * @property {string=}  group    Command group.
- * @property {Function} callback Command callback.
+ * @property {string}      name     Command name.
+ * @property {string}      label    Command label.
+ * @property {string=}     group    Command group.
+ * @property {JSX.Element} icon     Command icon.
+ * @property {Function}    callback Command callback.
  */
 
 /**
@@ -32,11 +33,12 @@
  *
  * @return {Object} action.
  */
-export function registerCommand( { name, label, callback, group = '' } ) {
+export function registerCommand( { name, label, icon, callback, group = '' } ) {
 	return {
 		type: 'REGISTER_COMMAND',
 		name,
 		label,
+		icon,
 		callback,
 		group,
 	};
@@ -89,3 +91,25 @@ export function unregisterCommandLoader( name, group ) {
 		group,
 	};
 }
+
+/**
+ * Opens the command center.
+ *
+ * @return {Object} action.
+ */
+export function open() {
+	return {
+		type: 'OPEN',
+	};
+}
+
+/**
+ * Closes the command center.
+ *
+ * @return {Object} action.
+ */
+export function close() {
+	return {
+		type: 'CLOSE',
+	};
+}

package/src/store/reducer.js

@@ -23,6 +23,7 @@ function commands( state = {}, action ) {
 						label: action.label,
 						group: action.group,
 						callback: action.callback,
+						icon: action.icon,
 					},
 				},
 			};
@@ -73,9 +74,29 @@ function commandLoaders( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the command center open state.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+function isOpen( state = false, action ) {
+	switch ( action.type ) {
+		case 'OPEN':
+			return true;
+		case 'CLOSE':
+			return false;
+	}
+
+	return state;
+}
+
 const reducer = combineReducers( {
 	commands,
 	commandLoaders,
+	isOpen,
 } );
 
 export default reducer;

package/src/store/selectors.js

@@ -18,6 +18,7 @@ export const getGroups = createSelector(
 		),
 	( state ) => [ state.commands, state.commandLoaders ]
 );
+
 export const getCommands = createSelector(
 	( state, group ) => Object.values( state.commands[ group ] ?? {} ),
 	( state, group ) => [ state.commands[ group ] ]
@@ -27,3 +28,7 @@ export const getCommandLoaders = createSelector(
 	( state, group ) => Object.values( state.commandLoaders[ group ] ?? {} ),
 	( state, group ) => [ state.commandLoaders[ group ] ]
 );
+
+export function isOpen( state ) {
+	return state.isOpen;
+}