How your plugin can customise the WordPress Command Palette

The unencumber of WordPress 6.3 offered the Command Palette, a function that provides fast get admission to to movements steadily utilized by those that edit content material or topics throughout the CMS’s admin interface.

The menu-like Command Palette lets in customers to clear out to be had duties the usage of a easy seek interface and choose choices to lend a hand navigate the editor’s UI, toggle personal tastes, turn out to be types, manipulate blocks, or even start growing new posts and pages.

Additionally to be had is a JavaScript-enabled API that permits builders so as to add capability to the Command Palette. For instance, the author of a WordPress plugin that generates Internet bureaucracy would possibly upload a Command Palette access that whisks customers off to a web page that presentations the result of shape submissions.

The developer of a plugin that makes use of many shortcodes would possibly hyperlink an access within the Command Palette to a pop-up “cheat sheet” to remind customers find out how to use the ones codes.

The chances are unending, and we’re providing you with a style of the way the API works to encourage you to make use of the Command Palette for your subsequent WordPress plugin mission.

WordPress Command Palette fundamentals

You release the Comand Palette by means of the usage of the keyboard shortcut Cmd + okay (Mac) or Ctl + okay (Home windows and Linux) or clicking at the Name box on the height of the Put up Editor or Website online Editor:

The highest of the Palette features a seek box that filters entries as you sort. You’ll choose entries the usage of a mouse or the usage of the keyboard by myself.

A partial checklist of instructions to be had out of the field within the Palette comprises:

• Edit Template (when modifying a web page)
• Again to web page (after modifying its template)
• Reset template
• Reset template phase
• Reset types to default
• Delete template
• Delete template phase
• Toggle settings sidebar
• Toggle block inspector
• Toggle highlight mode
• Toggle distraction loose
• Toggle height toolbar
• Open code editor
• Go out code editor
• Toggle checklist view
• Toggle fullscreen mode
• Editor personal tastes
• Keyboard shortcuts
• Display/disguise block breadcrumbs
• Customise CSS
• Taste revisions
• Open types
• Reset types
• View website
• View templates
• View template portions
• Open navigation menus
• Rename Development
• Reproduction Development
• Arrange all customized patterns

And, after all, builders can upload their very own to fortify their WordPress packages. Let’s bounce into the method!

What you’ll want to get began

The Comand Palette API is supported by means of JavaScript applications you’re going to upload in your tasks the usage of npm, the Node Bundle Supervisor. You’ll want an set up of WordPress (native or far flung) that you’ll be able to get admission to by the use of the terminal to execute instructions at the command line.

To get issues rolling, we created a WordPress plugin that might be house to the code that modifies the Command Palette. The plugin does little greater than create a customized publish sort that we name Merchandise. (The whole lot you wish to have to grasp to get this some distance with a rudimentary plugin is to be had in our information to growing customized publish varieties.)

When our Product Pages plugin is activated, we achieve a Dashboard menu access for growing and skimming Product posts:

Our plugin does no longer have any distinctive the help of the WordPress Command Palette. For instance, the default capability of the Command Palette supplies shortcuts so as to add new WordPress posts and pages:

Then again, the Command Palette is aware of not anything about growing our Product pages. We’re including that capability beneath.

Including a customized command to the Command Palette

At this time, our whole Product Pages plugin is composed of a unmarried PHP report that we have got named merchandise.php and positioned in wp-content/plugins/merchandise. Rather then permit the Merchandise publish sort, it doesn’t do the rest but. We’ll come again to this report once we’ve arrange the JavaScript-powered API for the Command Palette.

Putting in the API dependencies

We begin by means of making a generic bundle.json report within the merchandise listing by means of shifting to that listing within the terminal and operating the command:

npm init

It’s no longer crucial the way you reply to the init activates, however you’ll want to supply a reputation and outline on your software. (We used merchandise because the title and Product Pages as the outline.)

Now that you’ve a skeletal bundle.json report, open it for your favourite code editor and upload the next strains someplace within the frame, possibly after the description line:

"scripts": {
        "construct": "wp-scripts construct --env mode=manufacturing"
},

Nonetheless within the terminal, we will be able to upload the dependency for the WordPress Scripts — @wordpress/scripts — bundle:

npm set up @wordpress/scrips --save

That may upload the next strains to our plugin’s bundle.json report:

"dependencies": {
    "@wordpress/scripts": "^30.5.1"
}

Now, we will be able to execute npm run construct, however the procedure expects an index.js report (although empty) in our plugin’s src listing. We’ll create the ones and run the construct the usage of the next instructions within the terminal:

mkdir src
contact src/index.js
npm run construct

That may create a construct listing for our manufacturing JavaScript (index.js). Like the only in src, that report might be clean at the moment. Additionally, within the construct listing, you will have to to find the report index.asset.php.

If issues seem to be constructed accurately, let’s move forward and upload the rest dependencies by means of operating those instructions within the terminal throughout the plugin’s root listing:

npm set up @wordpress/instructions @wordpress/plugins @wordpress/icons --save

Have a look within the bundle.json report now, and the dependencies block will have to glance one thing like this:

"dependencies": {
    "@wordpress/instructions": "^1.12.0",
    "@wordpress/icons": "^10.12.0",
    "@wordpress/plugins": "^7.12.0",
    "@wordpress/scripts": "^30.5.1"
}

The newly added WordPress Instructions bundle interfaces with the Command Palette, the Plugins bundle is savvy about WordPress plugins, and the Icons bundle lets in you to make a choice and show contributors of a pre-built library of pictures.

Including a Command Palette hook and enqueuing our script

Now that we have got our assets in position, we want to upload code to our empty src/index.js report that can if truth be told hook into the Command Palette. Open the report for your editor and upload this code:

import { useCommand } from '@wordpress/instructions';
import { registerPlugin } from '@wordpress/plugins';
import { plus } from '@wordpress/icons';

const AddProductCommand = () => {
    useCommand( {
        title: 'add-product',
        label: 'Upload new product',
        icon: plus,
        callback: ( { shut } ) => {
            file.location.href = 'post-new.php?post_type=kinsta_product';
            shut();
         },
         context: 'block-editor',
     } );
    go back null;
}
registerPlugin( 'merchandise', { render: AddProductCommand } );
export default AddProductCommand;

Some notes at the above code:

• A unmarried icon (the plus determine) is imported from the Icons bundle.
• useComand() is the hook that registers the command.
• The label Upload new product is the textual content that can turn out to be an access within the Command Palette.
• The callback (what occurs when a person clicks on Upload new product) merely opens the WordPress new publish PHP report with a question string that specifies a Product publish. (Till now, the one factor our plugin may do.)

With that stored, it’s time for a last construct:

npm run construct

After construction, construct/index.js will comprise our manufacturing JavaScript. The general step is to enqueue the script in WordPress. We do this by means of including the next code to the ground of our merchandise.php report (the easy PHP report that established the plugin and defines the Product publish sort):

// Enqueue property.
add_action( 'enqueue_block_editor_assets', 'enqueue_block_editor_assets' );

/**
 * Enqueue property.
 *
 * @go back void
 */

serve as enqueue_block_editor_assets() {
    wp_enqueue_script(
    'merchandise',
    plugins_url( 'construct/index.js', __FILE__ ),
    array(),
    '1.0',
    true
  );
}

With that entire, we’ll go back to the WordPress editor and turn on the Command Palette. We will have to see Upload new product within the checklist after typing the fitting seek textual content:

If we choose Upload new product from the Palette, WordPress will open the Put up Editor at the trail reserved for our new Product content material sort.

Abstract

The Command Palette API opens up a versatile technique to combine your software with one of the crucial extra fascinating options of contemporary WordPress. We’d be focused on finding out if in case you have taken good thing about the API and what you accomplished.

Builders like you’ll be able to rely on Kinsta to supply robust, Controlled WordPress Internet hosting answers that improve performant and scalable tasks.

Check out Kinsta nowadays to peer how we will be able to let you construct top-tier WordPress websites!

The publish How your plugin can customise the WordPress Command Palette seemed first on Kinsta®.

WP Hosting

[ continue ]