Working faster with the Command Palette


In this tutorial, discover the Command Palette — an essential tool to enhance your Site Editor experience. Quickly navigate your site, create content, and execute commands with ease.

Here is a link to the list of commands: List of commands.

Learning outcomes

  1. Defining the Command Palette.
  2. Accessing the Command Palette.
  3. Exploring the various types of commands.
  4. Highlighting the benefits of using the Command Palette.

Comprehension questions

  1. What type of commands will enhance your workflow?

Transcript

Introduction

Good day, and welcome to Learn WordPress. In this tutorial, we are going to explore how you can work faster and improve your Site Editor experience using the Command Palette.

Learning outcomes

Here are the learning outcomes for this lesson. Firstly, we will define what the Command Palette is. Secondly, we will look at how we can access the Command Palette and finally we will explore how we can use the Command Palette effectively as well as highlight the benefits.

Definition

The Command Palette allows you to navigate to different areas of your site quickly, create new pages and posts, and execute other commands.

How to access the Command Palette

To access the Command Palette, simply open the Site Editor or a page or a post and use the keyboard shortcut command K on Mac or control K on Windows. You can also find it in the sidebar of the site view by clicking on the Search icon or the title bar of a template or page. Once you open the Command Palette, you will see a list of available commands.

Types of commands

Let’s dive into some of the useful commands you can find in the palette. Let’s try our first command and type open styles. This command allows you to quickly open the style editing interface where you can customize the site-wide styles of your website, such as typography, colors, and layout. If you want to make your way to the patterns area quickly you can merely type in Patterns and select. Here you can manage, add, and delete custom patterns as well as header and footer template part patterns.

What about adding a new page or post? Well, if you type in ‘Add,’ you will see you can quickly add a new post or page, and when I select ‘Add a new page,’ I can start editing content right away. The Command Palette also allows you to navigate to a specific page, for example. So let’s make our way to my About page to see this in action, and here you will see it takes us directly to the Site Editor, and now we can open up the page and continue editing.

If you want to add custom CSS the Command Palette also provides a shortcut to do so. It’s perfect when you need to apply specific customizations to your site’s design.

Benefits of the Command Palette

Now, let’s talk about the benefits of the Command Palette. By providing quick access to frequently used actions, the Command Palette streamlines your workflow in the Site Editor. Instead of navigating through multiple menus and settings, you can execute commands with a few simple keystrokes, saving you valuable time and effort.

Imagine you are editing a page in the Site Editor, and then when you’re done, you want to create a custom template. Instead of searching through various menus, you can open the Command Palette, type ‘Templates’, and select Templates. Templates will open up instantly, allowing you to add a new template or edit others.

More commands

In addition to the commands we’ve discussed, the Command Palette offers a wide range of actions to enhance your editing experience. Here are a few more notable commands you can explore. First up is to view your site on the front end quickly. If you were editing a page in the post editor, you also have the option to preview the page in a new tab. When you type in ‘Toggle’ you will be able to activate or deactivate certain features. For example Spotlight mode, if you select Spotlight mode, it will grey out all the blocks you are not working on and highlight the blocks you are editing. To turn it off, merely select Spotlight mode again. You can also use the Command Palette to activate Distraction-free mode, for example. Distraction-free mode creates a focused writing experience by hiding various parts of the editor interface, allowing you to focus on your content without any interference. Feel free to experiment with these commands and discover how they can further streamline your editing process.

Keyboard shortcuts

If you open a template or a page and click on the three vertical dots on the top right, you will also be able to access the keyboard shortcuts for your site if this is something you are keen to explore.

Conclusion

In conclusion, the Command Palette is a game changer for the Site Editor. With its quick access to frequently used actions and commands, it empowers you to work more efficiently and save valuable time. Thank you for watching, and visit Learn WordPress for more tutorials and training material.

Resources

List of commands

Workshop Details


Presenters

Wes Theron
@west7

I am an Instructional Designer for the WordPress open-source project sponsored by Automattic. I am a strong supporter of the open-source movement. I have a background in education and content development. I am a husband, father, dreamer and lifelong learner.