[HelpHub] [6.4] Site Editor > Command Palette

[femkreations]

Article: https://wordpress.org/documentation/article/site-editor-command-palette/

Updates for 6.4

• [ ] Update the command palette is now available on site editor dev note
• [ ] update the Manage all my patterns command to redirect to site editor patterns list. 52817
• [ ] Update label and icon for Patterns. 52742
• [ ] Follow up visual tweaks to block-specific commands 54427
• [ ] Use solid accent color selection in command palette 54318
• [ ] Order template results in Site Editor 53286
• [ ] Add context to the "Reset template" "Delete template" and "Edit template" commands 52989
• [ ] Display keyboard shortcut for command palette in site view 52841
• [ ] Add common commands 53073
• [ ] Add toggle list view command in site editor 53983
• [ ] Tweak, and add, more consistent commands 53496
• [ ] Try updated command palette styling 53117
• [ ] Add new block commands 52509
• [ ] Add global styles related commands 51637
• [ ] Add keyboard icon and use in relative commands 53083
• [ ] Distraction Free: Add missing command in site editor 52868

General

• [ ] Make sure all screenshots are relevant to the latest version
• [ ] Make sure videos, if any, are up to date
• [ ] Add ALT tags for the images
• [ ] Make sure the headings are in sentence case
• [ ] Convert all reusable blocks to a ‘regular block’.
• [ ] Update the changelog at the end of the article

[github-actions[bot]]

Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels.

[github-actions[bot]]

Heads up @femkreations - the "block editor" label was applied to this issue.

[zunaid321]

Would like to work on this!

[abhansnuk]

Thanks for discussing this and some of the other tasks earlier @zunaid321 , and volunteering for these tasks.

[jordesign]

As an aside/additional thing - it's worth changing this document (and it's organisation) to reflect that the Command Palette is not only available in the Site editor. It's available in the post/page editor as well. https://make.wordpress.org/core/2023/09/12/core-editor-improvement-commanding-the-command-palette/

Could we include that in the changes being made? I don't have permissions to add it to the checklist.

Also wanted to check in to se how progress is going @zunaid321 ?

[zunaid321]

Update the command palette is now available on site editor dev note

The Command Palette is now accessible in the Site Editor and Post Editor, offering contextual options for template switching and settings toggle. Keyboard shortcuts enable access to List View, breadcrumbs, distraction-free mode, and page previewing.

https://github.com/WordPress/Documentation-Issue-Tracker/assets/5287486/1cc5ccf2-443c-480e-ac8a-de6112aa7555

[zunaid321]

Update the Manage all my patterns command to redirect to site editor patterns list. https://github.com/WordPress/gutenberg/pull/52817

The Manage all my patterns command is updated to redirect to the site editor patterns list when using a block-based theme when checking for the site editor context.

Block Based Theme:

https://user-images.githubusercontent.com/3629020/255043790-454dec22-47d6-4f93-923a-3854578fa5e6.mp4

Non-Block Based Theme:

https://user-images.githubusercontent.com/3629020/255043824-e75c0db0-2463-46f5-9b4a-1236a4d52afc.mp4

[zunaid321]

Update label and icon for Patterns. https://github.com/WordPress/gutenberg/pull/52742

The Library has been renamed to Patterns, necessitating an update to the Command Palette and the icon in the sidebar.

[zunaid321]

Follow up visual tweaks to block-specific commands https://github.com/WordPress/gutenberg/pull/54427

The update includes visual adjustments that enable the addition of block-specific commands based on the user's selection.

[zunaid321]

Use solid accent color selection in command palette https://github.com/WordPress/gutenberg/pull/54318

The command palette now features a solid accent color selection, with a background color and a white foreground color for commands.

Before:

After:

[zunaid321]

Order template results in Site Editor https://github.com/WordPress/gutenberg/pull/53286

The command palette now orders wp_template and wp_template_part entity records based on the search term in the site editor command navigation.

Before:

https://user-images.githubusercontent.com/8639742/258038978-48a49433-e8f1-4ab0-9bd0-be2605d1221f.mp4

After:

https://user-images.githubusercontent.com/8639742/258039287-5877a058-5d28-4fd0-9820-936cc78a941d.mp4

[zunaid321]

Add context to the "Reset template" "Delete template" and "Edit template" commands https://github.com/WordPress/gutenberg/pull/52989

The update adds context to the "Reset template", "Delete template" and "Edit template" command, allowing users to view entity records based on search terms in the site editor command navigation.

[abhansnuk]

Adding the link to Learn.WordPress.org for working faster with the command palette https://learn.wordpress.org/tutorial/working-faster-with-the-command-palette/

This is showing on Learn WP, valid for 6.4.

[jordesign]

Loving all this work - thanks @zunaid321

[jordesign]

@zunaid321 - just checking are these changes just drafted at the moment?

[abhansnuk]

Command palette tutorial on Learn.WordPress.org to cross-link on both docs and from Learn. https://learn.wordpress.org/tutorial/working-faster-with-the-command-palette/

Just did an interview with Anne where she raised that Command Palette has wider use and has commented on this in docs. So looking for that comment to make sure it is covered in end user. @annezazu if you can link it, this would be great.

[zunaid321]

@jordesign Yes correct! There are still some changes, I have to work on. Hoping to deliver the draft for the remaining changes soon!

[zunaid321]

Display keyboard shortcut for command palette in site view https://github.com/WordPress/gutenberg/pull/52841

The site editor now displays a keyboard shortcut for the Command Palette button, ensuring consistency with other buttons with associated shortcuts.

[zunaid321]

Add common commands https://github.com/WordPress/gutenberg/pull/53073

The command palette now includes common commands such as displaying/hiding block breadcrumbs, enabling/disabling pre-publish checklist, and previewing in a new tab.

[zunaid321]

Add toggle list view command in site editor https://github.com/WordPress/gutenberg/pull/53983

The command palette now includes common commands such as displaying/hiding block breadcrumbs, enabling/disabling pre-publish checklist, and previewing in a new tab.

[zunaid321]

Tweak, and add, more consistent commands https://github.com/WordPress/gutenberg/pull/53496

The update includes improvements to existing commands, code/visual editor suggestions, and command snackbars. It also removes verbs, adds missing commands, and aims to maintain consistency in command language and style.

Before:

After:

[zunaid321]

Try updated command palette styling https://github.com/WordPress/gutenberg/pull/53117

Revise command palette UI with search icon, $gray-900 icon color, simplified input placeholder, removed bolding, added ellipsis text-overflow, removed distinction between suggested contextual commands, and reduced width for more manageable size.

Before:

After:

[zunaid321]

Add new block commands https://github.com/WordPress/gutenberg/pull/52509

The command center has been updated to include new block selection commands, enhancing its usefulness and providing a distraction-free mode experience.

https://user-images.githubusercontent.com/107534/252685435-b02d9053-41db-4816-8178-3299fbb3d61b.mp4

[zunaid321]

Add global styles related commands https://github.com/WordPress/gutenberg/pull/51637

The site editor now includes three "styles" related commands: reset global styles to defaults, open global styles revisions panel, learn about styles, and open styles, but these commands are edit-site specific.

[zunaid321]

Add keyboard icon and use in relative commands https://github.com/WordPress/gutenberg/pull/53083

The update adds a keyboard icon to the library and uses it in the "Open keyboard shortcuts" command.

Before:

After:

[zunaid321]

Distraction Free: Add missing command in site editor https://github.com/WordPress/gutenberg/pull/52868

The site editor now includes a missing command for toggling distraction-free mode, addressing an inconsistency between posts and editors.

https://user-images.githubusercontent.com/14988353/255503182-d3e5dc90-835b-4219-98ae-eec6c2fb09e7.mp4

[zunaid321]

Finally done with this one! This one had a lot of changes haha! Took a long time for me.

@abhansnuk Please check the above changes. Thank you for being patient with me.

[jordesign]

@zunaid321 have you drafted or scheduled these changes into the document itself?

[zunaid321]

@jordesign Oh no. I just posted the description and the screenshots for each changes here.

[jordesign]

@zunaid321 - that's a great start thank you. Do you have access to edit the actual doc at https://wordpress.org/documentation/wp-admin/post.php?post=16358338&action=edit

You can add the changes directly into the document there.

[zunaid321]

@jordesign Oh I don't have the access. As far as I know, the existing editors will make the changes in the actual doc.

[jordesign]

Hey @zunaid321 - that's totally ok. An editor can totally help out. We may not need all of those videos but some of them will definitely come in handy - thank you.

[jordesign]

@zunaid321 In terms of the edits to the existing docs - what would be most helpful is if you could record new version of the two videos in the existing doc https://wordpress.org/documentation/article/site-editor-command-palette/

[jordesign]

I've gone ahead and updated the text here to be relevant to Site Editor and Post Editor - and to include the new commands. We just need those updated videos to put in.

cc/ @annezazu

[zunaid321]

@jordesign I see two videos at the top and one on the bottom. So should I just record for the top two?

[jordesign]

Hey @zunaid321 - all the videos in that doc will need new ones - so anything that'already there, a new one would be great.

[zunaid321]

Here are the videos. I don't think the demo video is needed, since I have already shown the commands and options in the first video.

https://drive.google.com/drive/folders/1C62hr5541ZeUGLw9keXI1ETFMFSzRNre?usp=sharing

[github-actions[bot]]

Heads up @docs-reviewers - the "[Status] Review" label was applied to this issue.