Update the design of the command center (#49681)

Co-authored-by: James Koster <james@jameskoster.co.uk>
WordPress · Apr 18, 2023 · cc81040 · cc81040
1 parent c0d704b
commit cc81040
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 117 deletions.
diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/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 ) => (
@@ -188,27 +205,27 @@ export function CommandMenu() {
 							autoFocus
 							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={ close }
+								/>
+							) ) }
+						</Command.List>
+					) }
 				</Command>
 			</div>
 		</Modal>

diff --git a/packages/commands/src/components/style.scss b/packages/commands/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,44 @@
 }
 
 .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;
-		}
-	}
-
 	[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 +82,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] {

diff --git a/packages/commands/src/store/actions.js b/packages/commands/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,
 	};

diff --git a/packages/commands/src/store/reducer.js b/packages/commands/src/store/reducer.js
@@ -23,6 +23,7 @@ function commands( state = {}, action ) {
 						label: action.label,
 						group: action.group,
 						callback: action.callback,
+						icon: action.icon,
 					},
 				},
 			};

diff --git a/packages/edit-site/src/hooks/commands/use-navigation-commands.js b/packages/edit-site/src/hooks/commands/use-navigation-commands.js
@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { post, page, layout, symbolFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,6 +17,13 @@ import { useHistory } from '../../components/routes';
 
 const { useCommandLoader } = unlock( privateApis );
 
+const icons = {
+	post,
+	page,
+	wp_template: layout,
+	wp_template_part: symbolFilled,
+};
+
 const getNavigationCommandLoaderPerPostType = ( postType ) =>
 	function useNavigationCommandLoader( { search } ) {
 		const supportsSearch = ! [ 'wp_template', 'wp_template_part' ].includes(
@@ -51,6 +59,7 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 					label: record.title?.rendered
 						? record.title?.rendered
 						: __( '(no title)' ),
+					icon: icons[ postType ],
 					callback: ( { close } ) => {
 						history.push( {
 							postType,

diff --git a/packages/edit-site/src/hooks/commands/use-wp-admin-commands.js b/packages/edit-site/src/hooks/commands/use-wp-admin-commands.js
@@ -6,6 +6,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 import { useMemo } from '@wordpress/element';
+import { plus } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -45,6 +46,7 @@ const getWPAdminAddCommandLoader = ( postType ) =>
 				{
 					name: 'core/wp-admin/add-' + postType,
 					label,
+					icon: plus,
 					callback: () => {
 						document.location.href = addQueryArgs( newPostLink, {
 							post_type: postType,