Command Palette: consider bringing back more context to names of commands

[annezazu]

What problem does this address?

In testing out GB 16.6, I'm noticing that it's tricky to know which command to use for patterns, styles, pages as there's not much distinction in the duplicated items:

command.palette.which.commands.to.use.mov

Here's a specific example with Styles (of note, where is the style revision option?):

With just 6.3, while harder to skim, it's easier to get a sense of what each command will do:

styles.open.command.mov

What is your proposed solution?

I think we need to keep iterating on how verbose these descriptions are. Currently, I found I needed to guess which option might match what I'm trying to do between patterns, styles, and pages. cc @WordPress/gutenberg-design

[richtabor]

Yea, I agree. The tricky part is on these more generic locations, even some with the same icons.

I'm not sure why "Open style revisions" is now just "Styles" though — that doesn't seem right.

Here's an issue on adding context to post types: #51505

[richtabor]

And templates should be clearly identified as templates:

Why I leaned towards this exploration in #53192 (comment), where the category/type/source could be exposed like "Templates > Index":

[jameskoster]

I know we initially decided against this, but I still think the command palette could benefit from more organisation patterns in order for it to scale.

[annezazu]

Yeah, I am feeling that latter design might be helpful to explore at this stage.

[richtabor]

Or even just the context on the right side.

[richtabor]

What about if we just append the context to the title? I.e. "Index template" instead of "Index"?

[t-hamano]

What about if we just append the context to the title? I.e. "Index template" instead of "Index"?

I think this issue needs to be considered for localization. Depending on the language, the word order may not always be {template-part-name} template part or {pattern-name} pattern. Words may be reversed, words may be hyphenated, and words may not be lowercased.

The following is an example of a pattern description.

English (en)

Header pattern

French (fr_FR)

composition Header

German (de_DE)

Header-Vorlage

Italiano (it_IT)

pattern Header

[jameskoster]

Additionally it wouldn't work so well for other post types "Hello World post" is a bit strange. It would produce a lot of repetition too. Groups with headings solves those issues. The headings could even drill down into contextual views:

[richtabor]

I think this issue needs to be considered for localization.

Yea, I'll push @youknowriad's suggestion here.

[richtabor]

Groups with headings solves those issues.

I think we can solve it without having to split up the command list, keeping the flow predictable and simple. I don't personally mind appended template/template part.

But also the text on the right side could be helpful (#53192), especially if folks start adding third-party commands. It's an extra affordance to help identify what the command is/where it's from, rather than if it's a command or shortcut.

For templates, we could have "Templates" as the extra affordance.

[jameskoster]

Yeah there's probably many ways to slice it.

It's an extra affordance to help identify what the command is/where it's from, rather than if it's a command or shortcut.

Might be worth trying this. Having the identifier in a consistent position seems way more scannable compared to the suffix. Makes the localisation element simpler too.

[jameskoster]

@richtabor unsure if this is what you meant, but it could work:

It solves all the issues with the suffix approach, and plays nicely with the third-party identification pattern you proposed.

[richtabor]

@richtabor unsure if this is what you meant, but it could work:

Yea I think so.

[annezazu]

More food for thought with the Command Palette from the FSE Outreach Program's Final Touches call for testing:

It would be awesome to have more information about the current state of a toggle, “Disable distraction free mode” instead of “Toggle distraction free mode.” Or maybe make the icon of the active toggle reflect its state by adding a black background like the Settings or Styles buttons do.

& more feedback:

Using the Command Palette. I write Portfolio and get up two Portfolios that have two different icons. One that looks like a post/page and the other as if it is a template part. Hovering over both it would be nice if it said something like: Portfolio page and the other Portfolio template part. To strengthen the meaning of the icons I see.

[danielbachhuber]

On a WordPress multisite install, it would be nice to have an affordance for selecting a site to run the command on.

[SaxonF]

Grouping is worth revisiting. cmdk has <Command.Group heading="Letters">. This works quite well for other products like Linear and Vercel.

linear-command.mp4

vercel-command.mp4

You can also see nested commands which would resolve scenarios like @danielbachhuber multisite or digging into a post type commands without navigating.