Enable the command palette feature everywhere in WordPress #54515

jonathanbardo · 2023-09-15T20:02:50Z

What?

This PR introduce the ability to have the command palette everywhere in WordPress and not just inside of the new editor experience.

Why?

After talking to a few people who got excited about the command palette at WordCamp US we realized that in order to increase adoption of the command palette it needed to be available everywhere (so that it becomes an habit to reach out for it much like Spotlight Search on mac).

How?

This PR removes the need to add the component in both editor packages (edit-site and edit-post) and instead registers it at the global level. When the script is on the page, then the command palette is there as well. Yeah editor are then able to register custom commands as required.

Some global commands might need to be reworked to be available in a global context. Some of them at the moment do not redirect to a valid url. This PR is mainly to open a conversation. Feedback welcomed :)

Testing Instructions

Open the admin and press CMD+K (on mac) or CTRL+K (on windows) to validate that the command palette appear.

Testing Instructions for Keyboard

Press the command palette keystroke combination to invoke the global component.

Screenshots or screencast

github-actions · 2023-09-15T20:03:19Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @jonathanbardo! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

youknowriad

I like this proposal personally. I left some technical comments.

That said, I believe we need a product decision here first. Would love more input from @mtias @jasmussen @richtabor @SaxonF

youknowriad · 2023-09-15T22:20:19Z

packages/commands/src/components/command-menu.js


-	useShortcut(


This should still use the useShortcut for several reasons: cross browser, cross platform and the ability to edit the shortcode programmatically.

@youknowriad I pulled the latest trunk changes and now the hooks works as expected. So I reverted the file in 0096521

packages/commands/src/components/command-menu.js

youknowriad · 2023-09-15T22:23:02Z

packages/core-commands/src/index.js

+	);
+}
+
+root.render( <CommandMenuWrapper /> );


While I like this way of rendering the command menu everywhere, I'm not sure that the "core-commands" package whose sole purpose is to have a list of commands that works cross pages. Would a small inline script work instead of a package for this?

I'm having second thoughts here, so I'd love more opinions here @WordPress/gutenberg-core

I agree it doesn't seem the right approach but there was a circular dependency if I implemented this inside of the command component directly. So perhaps it needs to be it's own component loader completely.

I'll try the approach of the inline script. Good idea :)

Inline script done in 2873f18

youknowriad · 2023-09-15T22:23:32Z

packages/edit-post/src/editor.js

@@ -13,7 +13,7 @@ import { useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { CommandMenu } from '@wordpress/commands';
+// eslint-disable-next-line no-unused-vars
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';


If it's not used, just remove it no?

@youknowriad yes I tried that but it didn't work. It needs the import to work or the commands do not get loaded at all. Not sure how to explain it still.

Removed in 2873f18

youknowriad · 2023-09-15T22:24:36Z

lib/experimental/commands.php

+	wp_enqueue_script( 'wp-core-commands' );
+}
+
+add_action( 'wp_print_scripts', 'gutenberg_enqueue_commands', 1 );


We should probably move this to lib/wordpress-6.4 (or 6.5) depending on when the PR lands.

alexstine · 2023-09-16T00:24:17Z

Personally, I'd like to see the logged accessibility issues fixed before this goes anywhere near Core-wide.

https://github.com/wordpress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22%5BPackage%5D+Commands%22+label%3A%22%5BType%5D+Accessibility+%28a11y%29%22

There are already some PRs in progress to fix things up but reviews/further assistance would be helpful.

Thanks.

packages/commands/src/components/command-menu.js

priethor · 2023-09-18T11:23:53Z

Congratulations on your first PR, @jonathanbardo! This change makes a lot of sense to me in the scope of Phase 3 and the admin redesign. Given that we are only a few days from WordPress 6.4 Beta1, this could be targeted towards 6.5 so that there's enough time to test it and work on the a11y issues mentioned above.

richtabor · 2023-09-18T20:27:13Z

Congratulations on your first PR, @jonathanbardo! This change makes a lot of sense to me in the scope of Phase 3 and the admin redesign.

Exactly what I was thinking. Love the potential here.

t-hamano · 2023-09-20T09:17:38Z

I tested this PR again. In some cases, it may cause unintended behavior.

✅ Site Editor: Works as expected
❌ Post Editor: Do not work (JS with handle name wp-commands-js is not enqueued)
✅ Customize Widget: Works as expected
🤔 Widget Editor: This instance does not originally support a command palette, but the script with the handle wp-commands-js is enqueued.

jonathanbardo · 2023-09-20T15:53:15Z

@t-hamano I fixed the issue regarding the commands not loading in the widget editor. Thanks for pointing this out. I'm still trying to wrap my head around how Gutenberg enqueues and overrides scripts and styles. The post editor should work too. One thing I've noticed at the moment is that the useShortcut hook doesn't trigger at all if the user hasn't clicked anywhere on the page (at least on Firefox, seems to work fine on Chrome cc @youknowriad)

youknowriad · 2023-09-20T19:18:53Z

packages/core-commands/src/index.js

@@ -1 +1,2 @@
+export { unlock } from './lock-unlock';


Unfortunately this is not something we should export but it makes "private APIs" public for any third-party plugin and this shouldn't be the case.

Maybe we should just export the CommandWrapper component like we used to do? 🤔

I exported a commands-menu-wrapper component from the core-commands packages and used a small inline script to register it on the page in d381a0d. I honestly would have preferred to this wrapper in the commands package instead but the circular dependency doesn't make this simple.

Add small inline script to load CommandsMenuWrapper

mtias · 2023-11-24T15:33:24Z

Cool PR! Let's aim to add this behind a flag in the experiments page until we are comfortable with wider rollout.

annezazu · 2023-12-14T20:00:58Z

Pulling in feedback from a Core Editor Improvement post comment that's in favor of this PR:

Currently, the Command Palette only works on the post editor and the site editor.

Can we use Command Palette in any place? For example, when I am on the frontend of a post, I can hit Cmd+K and then select “Edit this Post” to quickly jump to the post editor.

Is this doable? Or is this on the roadmap?

Going to respond to them with a link to this work but wanted to note it as we consider priorities.

jeffpaul · 2024-01-10T20:08:55Z

There are definitely plugins that we maintain (https://github.com/10up) that would make use of this outside the editor, though we'd want/need the ability to only have certain commands exist within the context of the editor vs. elsewhere. So some context of where the palette is being triggered so our various plugins would properly integrate or not depending on that context.

jbardo-godaddy added 4 commits September 1, 2023 14:30

First iteration - commands everywhere

22a10aa

Fix conflict

f24e68b

Move file to experimental section

8e13379

Merge remote-tracking branch 'upstream/trunk'

0358348

jonathanbardo requested a review from spacedmonkey as a code owner September 15, 2023 20:02

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Sep 15, 2023

richtabor requested a review from youknowriad September 15, 2023 20:10

richtabor added [Package] Commands /packages/commands [Type] Enhancement A suggestion for improvement. labels Sep 15, 2023

Fix PHPCS linting errors

4099e69

youknowriad reviewed Sep 15, 2023

View reviewed changes

t-hamano self-requested a review September 16, 2023 05:22

t-hamano reviewed Sep 16, 2023

View reviewed changes

packages/commands/src/components/command-menu.js Outdated Show resolved Hide resolved

t-hamano mentioned this pull request Sep 18, 2023

Command Palette: Global command shortcut conflicts with existing shortcut #51737

Open

jbardo-godaddy added 3 commits September 19, 2023 15:07

Merge remote-tracking branch 'upstream/trunk'

6de26eb

Revert to useShortcut

0096521

Use inline script instead of using core-commands package

2873f18

Enqueue commands on widget editor

a3c3e48

youknowriad reviewed Sep 20, 2023

View reviewed changes

jbardo-godaddy added 2 commits September 21, 2023 14:36

Merge remote-tracking branch 'upstream/trunk'

b708650

Export CommandsMenuWrapper from core-commands

d381a0d

Add small inline script to load CommandsMenuWrapper

This was referenced Dec 6, 2023

[Woo AI Assistant] - SPIKE – Strategy for Data Persistence and Script Enqueuing woocommerce/woocommerce#41758

Closed

[Woo AI Assistant] - Implement Activation Mechanism (Command Palette) woocommerce/woocommerce#41753

Closed

annezazu mentioned this pull request Jan 24, 2024

Command Palette: enable the command palette to be evoked everywhere in WordPress #58218

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable the command palette feature everywhere in WordPress #54515

Enable the command palette feature everywhere in WordPress #54515

jonathanbardo commented Sep 15, 2023

github-actions bot commented Sep 15, 2023

youknowriad left a comment

youknowriad Sep 15, 2023

jonathanbardo Sep 19, 2023

youknowriad Sep 15, 2023

youknowriad Sep 15, 2023

jbardo-godaddy Sep 16, 2023 •

edited

Loading

jonathanbardo Sep 18, 2023

jonathanbardo Sep 20, 2023

youknowriad Sep 15, 2023

jbardo-godaddy Sep 16, 2023

jonathanbardo Sep 20, 2023

youknowriad Sep 15, 2023

alexstine commented Sep 16, 2023

priethor commented Sep 18, 2023

richtabor commented Sep 18, 2023

t-hamano commented Sep 20, 2023

jonathanbardo commented Sep 20, 2023

youknowriad Sep 20, 2023

jonathanbardo Sep 21, 2023

mtias commented Nov 24, 2023

annezazu commented Dec 14, 2023

jeffpaul commented Jan 10, 2024

Enable the command palette feature everywhere in WordPress #54515

Are you sure you want to change the base?

Enable the command palette feature everywhere in WordPress #54515

Conversation

jonathanbardo commented Sep 15, 2023

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

github-actions bot commented Sep 15, 2023

youknowriad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jbardo-godaddy Sep 16, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexstine commented Sep 16, 2023

priethor commented Sep 18, 2023

richtabor commented Sep 18, 2023

t-hamano commented Sep 20, 2023

jonathanbardo commented Sep 20, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mtias commented Nov 24, 2023

annezazu commented Dec 14, 2023

jeffpaul commented Jan 10, 2024

jbardo-godaddy Sep 16, 2023 •

edited

Loading