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.

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.