Command Center: Quick search for jumping to other pages or templates in the editor.

[mtias]

This can be seen as a start on an extensible command & quick search component that can be used for way-finding (go to About page; edit Archive template) and running commands (toggle top toolbar; etc). The first milestone is to power quick search for content and templates within the site editor.

• Remove the experimental flag and enable the e2e tests
• Allow third-party commands (stabilize the API)
• Initial implementation Add a command center to the site editor.  #49330
• Explore adding sub pages support Allow nested command loaders within the command center #49658
• Add the command center to more pages (post editor?)
• Add category/tag pages to the site editor and add them as commands to the command center Add a command center to the site editor.  #49330 (comment)
• Explore categories for commands Add a command center to the site editor.  #49330 (comment)
• Use keyboard-shortcuts package for the shortcut to make it discoverable and cross-platform Use the keyboard shortcuts package for the command center #49680
• Add contextual commands Command Palette: Mapping Contextual Commands #50407
• Add a button ton invoke the command center Command Center: Add a button to invoke the cmd+k interface in site view #50375

---

Contextual Behaviours

To do: map actions based on context and state (i.e. published page should include view link, edit url, recent pages; template should include duplicate, recent templates / related templates). Related Figma doc.

[tomdevisser]

I would love this! Some sort of Spotlight/Raycast functionality.

[rosswintle]

@annezazu Linked me to this. I'm the author of https://wordpress.org/plugins/turbo-admin/ and a huge proponent of command palettes and keyboard navigation.

I'd like to link some other prior art and resources that may be useful:

• kbar is a pre-existing, open source, extensible React component command palette. This would almost certainly make an awesome off-the shelf front-end that would fit really well with WordPress.
• Streamline is a paid-for command palette/search tool
• Command Bar is a commercial offering with some nice features.

Some thoughts/experiences from me:

• The key to activate this needs to be either chosen really carefully and testing across multiple browsers, or it needs to be customisable. I would suggest both. Cmd/Ctrl-K is kinda standard. But some code editors/IDEs use Cmd/Ctrl-Shift-P, but beware of this because some browsers (Firefox, I think) have it reserved.
• I love the idea of this being extensible but there must be limits! We do not want crazy ads and upsells injected into here.
• This should, preferably, work across all parts of the Dashboard, not just inside the editor.
• I note that some parts of the editor are hard to "action" because they are not necessarily <a> tags or <buttons> but rather React-activated elements that are not always visible. This will, I suppose, be easier if the command palette is itself a React component that has awareness of available actions on a page. But I say this to note the difference between those actions and most other things that can be activated using URLs.

Hope that's useful. I very much support this idea and would love to stay involved in whatever ways I can, even though I'm doing myself out of a job!! :-)

[rosswintle]

Other things:

• This is NOT a simple piece of UI. There are a lot of intricacies (I’m sure you would anticipate this, but it’s worth saying!)
• (Some) people want dark mode! :face_with_rolling_eyes: 😆
• General principles of modal UX apply.
  Extensibility would be awesome, but there has to be limits. We don’t want plugins injecting all sorts of nonsense into it. I don’t know how that can be enforced.
• Fuzzy search is a must, but how you handle the difference between commands/actions and search is an issue. I decided on keywords to switch into search modes, a bit like how Alfred works on MacOS.
• Discoverability was an issue for some. People didn’t know it was there. So I gave them the option to put it in the admin bar as a global search box rather than as a pop-up/modal.

[leeoniya]

maybe helpful: https://github.com/leeoniya/uFuzzy#a-biased-appraisal-of-similar-work

[mtias]

@rosswintle thanks for chiming in and the offer to collaborate! kbar was definitely on my mind. I also quite like cmdk.paco.me. @richtabor also has some prior art within the WP dashboard.

The editor focus is just a step in the direction, the hope is to have something that expands beyond and would be part of a more global search, not just invoked via keyboard shortcuts.

[gravityrail]

I would definitely like to make it pluggable so that plugins can enhance it with cloud-based functionality.

Imagine this: it submits the AST of the current editor contents to a service, and can receive back a series of transformations that can be applied to the current document (these could be the same transformations we use to do collaborative editing, which I assume someone's looking at).

Those transformations can be applied to the current document in a reversible way. So you can say "align the banner image to the right" and then get back a transformation that does that, and if you don't like it you can reject the change.

In the simplest case, of course, the transformation might just search for and insert a block (which can be accomplished without any fancy cloud stuff) but doing it this way makes it infinitely extensible.

[alexstandiford]

I would suggest both. Cmd/Ctrl-K is kinda standard

One thing to watch for is that this keybinding is already being used in Gutenberg to create links.

[richtabor]

@richtabor also has some prior art within the WP dashboard.

I had previously explored a command palette for navigating WordPress, commanding the editor, and conducting common actions—such as adding posts and pages.

Adding context was very helpful, allowing some commands to only be available when requirements were met (i.e. commands for controlling the block editor, only available within the editor). But then other commands, like adding a post, or searching for a post to edit/open, would be available anywhere.

[youknowriad]

As the initial implementation is getting close to land in #49330 I've updated the issue and add a todo list to keep track of potential follow-up work.

[youknowriad]

The initial PR has landed behind a feature flag, we'll be following up with design updates... If you want to help, there's a todo list attached to this issue.

[youknowriad]

We're making some good progress here:

The command center is now implemented behind an experimental flag,
It is now available in both site and post editor,
We've also added a button to open the command center form the site editor sidebar (next to the site title)

The next steps are going to be around "contextual commands" for the command center.

[youknowriad]

Status update here:

We now have the contextual commands API and the command center is not experimental anymore in the Gutenberg Plugin. We don't have yet all the commands we hope to include but we're iterating on these in #50407

Should we close this issue maybe?

[jasmussen]

I was just about to ask, since all the boxes are checked. Nice work!

[mtias]

Let's close and monitor must have pending items separately.