From 700e6aefec0710183d5172e00b80ab0da6f3fb77 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 14 Aug 2023 14:42:43 -0400 Subject: [PATCH 1/5] Styling to account for no icons --- packages/commands/src/components/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss index 16db48bac44683..58d3405474999b 100644 --- a/packages/commands/src/components/style.scss +++ b/packages/commands/src/components/style.scss @@ -69,6 +69,7 @@ padding: $grid-unit; color: $gray-900; font-size: $default-font-size; + min-height: $button-size-next-default-40px; &[aria-selected="true"], &:active { @@ -88,6 +89,10 @@ svg { fill: $gray-900; } + + > .with-no-icon { + padding-left: $grid-unit-40; // Align text, even without icons. + } } [cmdk-root] > [cmdk-list] { From 45678ada4d7df11e40d158726c5699af64178ade Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 14 Aug 2023 14:45:11 -0400 Subject: [PATCH 2/5] Remove fallback cog icons --- .../edit-post/src/hooks/commands/use-common-commands.js | 6 ------ .../edit-site/src/hooks/commands/use-edit-mode-commands.js | 6 ------ 2 files changed, 12 deletions(-) diff --git a/packages/edit-post/src/hooks/commands/use-common-commands.js b/packages/edit-post/src/hooks/commands/use-common-commands.js index 13a85df7a364a3..dfb7c82a1029ca 100644 --- a/packages/edit-post/src/hooks/commands/use-common-commands.js +++ b/packages/edit-post/src/hooks/commands/use-common-commands.js @@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { __, isRTL } from '@wordpress/i18n'; import { code, - cog, drawerLeft, drawerRight, blockDefault, @@ -92,7 +91,6 @@ export default function useCommonCommands() { useCommand( { name: 'core/toggle-distraction-free', label: __( 'Toggle distraction free' ), - icon: cog, callback: ( { close } ) => { toggle( 'core/edit-post', 'distractionFree' ); close(); @@ -102,7 +100,6 @@ export default function useCommonCommands() { useCommand( { name: 'core/toggle-spotlight-mode', label: __( 'Toggle spotlight mode' ), - icon: cog, callback: ( { close } ) => { toggle( 'core/edit-post', 'focusMode' ); close(); @@ -132,7 +129,6 @@ export default function useCommonCommands() { useCommand( { name: 'core/toggle-top-toolbar', label: __( 'Toggle top toolbar' ), - icon: cog, callback: ( { close } ) => { toggle( 'core/edit-post', 'fixedToolbar' ); close(); @@ -152,7 +148,6 @@ export default function useCommonCommands() { useCommand( { name: 'core/open-preferences', label: __( 'Editor preferences' ), - icon: cog, callback: () => { openModal( PREFERENCES_MODAL_NAME ); }, @@ -172,7 +167,6 @@ export default function useCommonCommands() { label: showBlockBreadcrumbs ? __( 'Hide block breadcrumbs' ) : __( 'Show block breadcrumbs' ), - icon: cog, callback: ( { close } ) => { toggle( 'core/edit-post', 'showBlockBreadcrumbs' ); close(); diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index 3d865375c3ea60..5b4f02eda8b4cd 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -12,7 +12,6 @@ import { drawerLeft, drawerRight, blockDefault, - cog, code, keyboard, } from '@wordpress/icons'; @@ -256,7 +255,6 @@ function useEditUICommands() { commands.push( { name: 'core/toggle-spotlight-mode', label: __( 'Toggle spotlight mode' ), - icon: cog, callback: ( { close } ) => { toggle( 'core/edit-site', 'focusMode' ); close(); @@ -266,7 +264,6 @@ function useEditUICommands() { commands.push( { name: 'core/toggle-distraction-free', label: __( 'Toggle distraction free' ), - icon: cog, callback: ( { close } ) => { setPreference( 'core/edit-site', 'fixedToolbar', false ); setIsInserterOpened( false ); @@ -289,7 +286,6 @@ function useEditUICommands() { commands.push( { name: 'core/toggle-top-toolbar', label: __( 'Toggle top toolbar' ), - icon: cog, callback: ( { close } ) => { toggle( 'core/edit-site', 'fixedToolbar' ); close(); @@ -311,7 +307,6 @@ function useEditUICommands() { commands.push( { name: 'core/open-preferences', label: __( 'Editor preferences' ), - icon: cog, callback: () => { openModal( PREFERENCES_MODAL_NAME ); }, @@ -331,7 +326,6 @@ function useEditUICommands() { label: showBlockBreadcrumbs ? __( 'Hide block breadcrumbs' ) : __( 'Show block breadcrumbs' ), - icon: cog, callback: ( { close } ) => { toggle( 'core/edit-site', 'showBlockBreadcrumbs' ); close(); From 716380a73921d3146f31c42b39ee3e131eafb5f0 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 14 Aug 2023 14:46:53 -0400 Subject: [PATCH 3/5] Add check for command icons --- packages/commands/package.json | 1 + packages/commands/src/components/command-menu.js | 16 ++++++++++++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/commands/package.json b/packages/commands/package.json index bc12422b697f34..2116aebafb482e 100644 --- a/packages/commands/package.json +++ b/packages/commands/package.json @@ -34,6 +34,7 @@ "@wordpress/icons": "file:../icons", "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", "@wordpress/private-apis": "file:../private-apis", + "classnames": "^2.3.1", "cmdk": "^0.2.0", "rememo": "^4.0.2" }, diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js index f2ea39d112da67..5914ccc27f944c 100644 --- a/packages/commands/src/components/command-menu.js +++ b/packages/commands/src/components/command-menu.js @@ -2,6 +2,7 @@ * External dependencies */ import { Command, useCommandState } from 'cmdk'; +import classnames from 'classnames'; /** * WordPress dependencies @@ -53,9 +54,14 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) { > - + { command.icon && } - + { command.icon && } Date: Tue, 15 Aug 2023 11:27:56 -0400 Subject: [PATCH 4/5] Switch to using has-icon --- packages/commands/src/components/command-menu.js | 4 ++-- packages/commands/src/components/style.scss | 10 +++++++--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js index 5914ccc27f944c..59d03f10a01bf2 100644 --- a/packages/commands/src/components/command-menu.js +++ b/packages/commands/src/components/command-menu.js @@ -57,7 +57,7 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) { className={ classnames( 'commands-command-menu__item', { - 'with-no-icon': ! command.icon, + 'has-icon': command.icon, } ) } > @@ -130,7 +130,7 @@ export function CommandMenuGroup( { isContextual, search, setLoader, close } ) { { command.icon && } diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss index 58d3405474999b..93e25a88191b4c 100644 --- a/packages/commands/src/components/style.scss +++ b/packages/commands/src/components/style.scss @@ -66,7 +66,6 @@ cursor: pointer; display: flex; align-items: center; - padding: $grid-unit; color: $gray-900; font-size: $default-font-size; min-height: $button-size-next-default-40px; @@ -90,8 +89,13 @@ fill: $gray-900; } - > .with-no-icon { - padding-left: $grid-unit-40; // Align text, even without icons. + > div { + padding: $grid-unit; + padding-left: $grid-unit-50; // Account for commands without icons. + } + + > .has-icon { + padding-left: $grid-unit; } } From a28b625f3fc7bb886490782155b47f6d9c7cc0e3 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 15 Aug 2023 13:44:06 -0400 Subject: [PATCH 5/5] Update package-lock.json --- package-lock.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package-lock.json b/package-lock.json index 32b6636a8ec71c..3a4050464c96ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54720,6 +54720,7 @@ "@wordpress/icons": "file:../icons", "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", "@wordpress/private-apis": "file:../private-apis", + "classnames": "^2.3.1", "cmdk": "^0.2.0", "rememo": "^4.0.2" }, @@ -67368,6 +67369,7 @@ "@wordpress/icons": "file:../icons", "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", "@wordpress/private-apis": "file:../private-apis", + "classnames": "^2.3.1", "cmdk": "^0.2.0", "rememo": "^4.0.2" }