Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable the command palette feature everywhere in WordPress #54515

Open
wants to merge 11 commits into
base: trunk
Choose a base branch
from

Conversation

jonathanbardo
Copy link

@jonathanbardo jonathanbardo commented Sep 15, 2023

What?

Closed #58218.

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

CleanShot 2023-09-15 at 15 58 41@2x CleanShot 2023-09-15 at 15 59 02@2x

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

👋 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.

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

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

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


useShortcut(
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Author

Choose a reason for hiding this comment

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

@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 Outdated Show resolved Hide resolved
);
}

root.render( <CommandMenuWrapper /> );
Copy link
Contributor

Choose a reason for hiding this comment

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

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?

Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link

@jbardo-godaddy jbardo-godaddy Sep 16, 2023

Choose a reason for hiding this comment

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

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.

Copy link
Author

Choose a reason for hiding this comment

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

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

Copy link
Author

Choose a reason for hiding this comment

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

Inline script done in 2873f18

@@ -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';
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Choose a reason for hiding this comment

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

@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.

Copy link
Author

Choose a reason for hiding this comment

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

Removed in 2873f18

wp_enqueue_script( 'wp-core-commands' );
}

add_action( 'wp_print_scripts', 'gutenberg_enqueue_commands', 1 );
Copy link
Contributor

Choose a reason for hiding this comment

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

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

@alexstine
Copy link
Contributor

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.

@t-hamano t-hamano self-requested a review September 16, 2023 05:22
@priethor
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor

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
Copy link
Author

@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)

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

Choose a reason for hiding this comment

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

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? 🤔

Copy link
Author

Choose a reason for hiding this comment

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

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.

@mtias
Copy link
Member

mtias commented Nov 24, 2023

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

@annezazu
Copy link
Contributor

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Commands /packages/commands [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Command Palette: enable the command palette to be evoked everywhere in WordPress
10 participants