Core Editor Improvement: Commanding the Command Palette

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

The following dives deep into the latest updates to the Command Palette, a new tool available with WordPress 6.3 designed to speed up your workflow. You can use the keyboard shortcut Cmd+kon Mac or Ctrl+k on Windows to activate it and get started. With work underway for WordPress 6.4, here are some very early looks at what you can look forward to when it comes to this new option in your WordPress creation experience and a reminder of what it’s capable of already.

Use commands to do more, faster in any editor

The Command Palette is available across the editing experience, whether you’re switching between templates in the Site Editor or toggling open settings in the Post Editor, with specific contextual options depending on where you are. In the video below, you’ll see the keyboard shortcut used to evoke the Command Palette, open and close List View, display and hide breadcrumbs, toggle on distraction free mode, and preview the page in a new tab.

Think of the Command Palette as the ultimate shortcut tool, allowing you to do more with less clicks, whether you’re trying to enable a specific setting or transform an Image blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to a Cover block.

Explore every option

If you’re using WordPress 6.3, the following commands are ready to use to allow you to quickly switch between different parts of your site and personalize your experience without needing to find every setting individually:

• Edit Template when editing a page.
• Back to page to return to editing a page from a template.
• Reset template
• Reset template part
• Reset styles to default
• Delete template
• Delete template part
• Toggle settings sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.
• Toggle block inspector
• Toggle spotlight mode
• Toggle top toolbar
• Open code editor
• Toggle list view in the Post Editor.
• Toggle fullscreen mode
• Open editor preferences
• Open keyboard shortcuts
• Customize CSSCSS Cascading Style Sheets.
• Open styles revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.
• Open styles
• Learn about styles to trigger the welcome guide for Styles
• View site
• View templates
• View template parts
• Open Navigation Menus
• Manage all custom patterns

Since WordPress 6.3, new commands have been added with more planned as part of a larger effort to have contextual commands in place across the various editors:

• Open List View (in the Site Editor)
• Exit code editor
• Hide breadcrumbs
• Show breadcrumbs
• Enable pre-publish checklist 
• Disable pre-publish checklist
• Preview in a new tab

Shown when selecting a block:

• Group
• Ungroup
• Duplicate
• Remove
• Add before
• Add after

Additionally, you can access all transforms a block has defined using the Command Palette. For example, with an Image block, you will see the option to transform to a Cover block, a Gallery block, Columns block, File block, Group block, and Media & Text block. Finally, for the various reset, delete, and edit commands related to templates, the name of the template has been added to ensure you’re taking the actions you want on the exact item you want. 

What commands do you want to see? Please share in Gutenberg’s GitHub repository or in the comments below to help make this feature even more powerful.

Enjoy a refreshed design and experience

To better accommodate a growing number of commands and make it easier to skim what each option allows, new styling was added that includes darker icons and an always present search icon. Below is an image showing the design before on the left and the current design on the right:

Thanks to a recent fix, this new design looks great on all screen sizes. Work has also been done to ensure that the commands that are listed are most applicable to the context at hand. For example, if a block is locked, grouping is no longer listed as a command, resulting in a more intuitive experience. For a bonus quality of life detail, the keyboard shortcut is also displayed when in site view in the Site Editor when you hover over the search icon.

Add your own commands (with or without an icon)

The Command Palette is an excellent option for extenders to seamlessly add commands related to their specific plugins. For instructions on how to do this, check out the dev note introducing this feature. Of note, with a recent change, the requirement of having an icon has been dropped as well with a discussion underway around how best to identify third party commands. 

Thank you to @richtabor for creating the visuals used in this post.

#command-palette, #core-editor-improvement