diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js index 2c78a32b435d67..f9d2e4bc5ea9e2 100644 --- 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 } ) } > - - - + + + + + + ) ) } @@ -91,19 +102,25 @@ export function CommandMenuGroup( { group, search, setLoader, close } ) { ); return ( - + { commands.map( ( command ) => ( command.callback( { close } ) } > - - - + + + + + + ) ) } { 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' ) } /> - - { ! isLoading && ( - - { __( 'No results found.' ) } - - ) } - { groups.map( ( group ) => ( - - ) ) } - + { search && ( + + { ! isLoading && ( + + { __( 'No results found.' ) } + + ) } + { groups.map( ( group ) => ( + + ) ) } + + ) } diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss index 1847c136252a67..afee315f9f2330 100644 --- 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 index a2dfe526700a2b..4ff9ca54e2d106 100644 --- 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 index 6b4a65b9132e0d..a94fe8041113d0 100644 --- 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 index 995d16d5013966..fbcd9c7fb9af6b 100644 --- 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 index 4ab181ef42b803..881ce31fc41424 100644 --- 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,