Skip to content

Commit

Permalink
Add support for registering commands without icons (#53647)
Browse files Browse the repository at this point in the history 
* Styling to account for no icons

* Remove fallback cog icons

* Add check for command icons

* Switch to using has-icon

* Update package-lock.json
  • Loading branch information
@richtabor
richtabor committed Aug 15, 2023
1 parent c167bb6 commit 75d626c
Show file tree
Hide file tree
Showing 6 changed files with 25 additions and 17 deletions.
2 changes: 2 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/commands/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
16 changes: 12 additions & 4 deletions packages/commands/src/components/command-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* External dependencies
*/
import { Command, useCommandState } from 'cmdk';
import classnames from 'classnames';

/**
* WordPress dependencies
Expand Down Expand Up @@ -53,9 +54,14 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
>
<HStack
alignment="left"
className="commands-command-menu__item"
className={ classnames(
'commands-command-menu__item',
{
'has-icon': command.icon,
}
) }
>
<Icon icon={ command.icon } />
{ command.icon && <Icon icon={ command.icon } /> }
<span>
<TextHighlight
text={ command.label }
Expand Down Expand Up @@ -123,9 +129,11 @@ export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
>
<HStack
alignment="left"
className="commands-command-menu__item"
className={ classnames( 'commands-command-menu__item', {
'has-icon': command.icon,
} ) }
>
<Icon icon={ command.icon } />
{ command.icon && <Icon icon={ command.icon } /> }
<span>
<TextHighlight
text={ command.label }
Expand Down
11 changes: 10 additions & 1 deletion packages/commands/src/components/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,9 @@
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;

&[aria-selected="true"],
&:active {
Expand All @@ -94,6 +94,15 @@
svg {
fill: $gray-900;
}

> div {
padding: $grid-unit;
padding-left: $grid-unit-50; // Account for commands without icons.
}

> .has-icon {
padding-left: $grid-unit;
}
}

[cmdk-root] > [cmdk-list] {
Expand Down
6 changes: 0 additions & 6 deletions packages/edit-post/src/hooks/commands/use-common-commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { __, isRTL } from '@wordpress/i18n';
import {
code,
cog,
drawerLeft,
drawerRight,
blockDefault,
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand Down Expand Up @@ -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();
Expand All @@ -152,7 +148,6 @@ export default function useCommonCommands() {
useCommand( {
name: 'core/open-preferences',
label: __( 'Editor preferences' ),
icon: cog,
callback: () => {
openModal( PREFERENCES_MODAL_NAME );
},
Expand All @@ -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();
Expand Down
6 changes: 0 additions & 6 deletions packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
drawerLeft,
drawerRight,
blockDefault,
cog,
code,
keyboard,
} from '@wordpress/icons';
Expand Down Expand Up @@ -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();
Expand All @@ -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 );
Expand All @@ -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();
Expand All @@ -311,7 +307,6 @@ function useEditUICommands() {
commands.push( {
name: 'core/open-preferences',
label: __( 'Editor preferences' ),
icon: cog,
callback: () => {
openModal( PREFERENCES_MODAL_NAME );
},
Expand All @@ -331,7 +326,6 @@ function useEditUICommands() {
label: showBlockBreadcrumbs
? __( 'Hide block breadcrumbs' )
: __( 'Show block breadcrumbs' ),
icon: cog,
callback: ( { close } ) => {
toggle( 'core/edit-site', 'showBlockBreadcrumbs' );
close();
Expand Down

1 comment on commit 75d626c

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 75d626c.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5871408714
📝 Reported issues:

Please sign in to comment.