Default commands
Toggle
Open
Register a custom command
Static commands
Dynamic commands
Contextual commands

Site Editor Command Palette

September 4, 2023

In this tutorial we are going to talk about WordPress command palette and also going to add some custom commands into it.

The command palette is intended to simplify the process of site editing in FSE. In order to open it you need to use Cmd + K combination or just click on a document title.

Another way to open it is to click on this search button:

How to open WordPress site editor command palette

Command Palette Default Commands

First of all let’s take a look at some default commands you can use in command palette. You can:

Search for posts and pages.
Search for templates, template parts and patters.
“Learn about styles”.
“View site”.
“Add new post” and “Add new page”,
Also I sorted all the remaining commands into two groups – toggle group and open group.
Oh, and yes, don’t forget we still can add any custom commands.

Toggle

Open

Register a Custom Command Palette Command

In order to register your own custom command you don’t need anything super-specific – just create a new plugin, install the environment using @wordpress/scripts and then just enqueue your build/index.js file using enqueue_block_editor_assets action hook.

Static commands

A static command could be just a link to any settings page or to “Create a new post” page or something like that. For example if you’re using my crossposting plugin and you’re about to use its settings page often (for whatever reason), then we can create a custom command that allows us to go to the plugin settings directly from Site Editor.

import { useCommand } from '@wordpress/commands';
import { registerPlugin } from '@wordpress/plugins';
import { cog } from '@wordpress/icons';


registerPlugin( 'rudr-command-crossposting-settings', {
	render: () => {
		useCommand( {
			name: 'open-crossposting-settings',
			label: 'Open crossposting settings',
			icon: cog,
			callback: () => {
				document.location.href = 'options-general.php?page=rudr-page';
				close();
			},
		} )
	}
} )

As you can see we should use useCommand() inside registerPlugin().
Because we are going to add a link to a settings page, I decided to use a default “Cog” icon. I imported it from @wordpress/icons package, so before that don’t forget to install it npm install @wordpress/icons --save and the list of icons you can find here. Custom SVGs are also supported here.

If something remains unclear for you, you can explore my ready-to-use code on GitHub.

But it works pretty good:

Dynamic commands

A dynamic command palette command – is not just some kind of a super-complex and difficult command with modals etc. Dynamic commands are the ones generated based on a search results for your command palette query.

For example when you search for Pages – it is a dynamic command.

Well, nothing else comes to my mind at this moment, so no code examples of a dynamic command here 🙃 Guys, if you have some ideas, please let me know in the comments.

Contextual commands

The thing with contextual commands is that you can provide a context (for example, when navigating the site editor, or when editing a template) to useCommand(), which will mean to give more priority to your command within a specific context.

Currently commands have two contexts, but more are about to be added:

site-editor – when navigating Site Editor with a right sidebar visible,
site-editor-edit – when editing a specific template.

For example if we try to add site-editor-edit context to our static command, like this:

useCommand( {
	name: 'open-crossposting-settings',
	label: 'Open crossposting settings',
	icon: cog,
	callback: () => {
		document.location.href = 'options-general.php?page=rudr-page';
		close();
	},
	context: 'site-editor-edit',
} )

The result: