How your plugin can customize the WordPress command palette

The release of wordpress 6.3 introduced the Command Palette, a service that provides quick access to actions often used by those editing content or topics in the CMS admin interface.

The menu-like command palette we could offer buyers to filter available tasks, use a simple search interface and choose possible choices to have the same opinion, navigate the editor UI, toggle preferences , turn out types, manipulate blocks, and even start creating new posts and pages.

There is also a JavaScript-enabled API that allows developers to load capabilities into the command palette. For example, the author of a wordpress plugin that generates web documents would most likely add an access right to the command palette that directs buyers to a web page where the results of form submissions are displayed.

The developer of a plugin that uses numerous shortcodes would most likely link the access right within the command palette to a pop-up “cheat sheet” to remind users how to use those codes.

The probability is infinite, and we’re providing you with a way of how the API works to inspire you to use the Command Palette on your next wordpress plugin project.

wordpress-command-palette-basics”/>wordpress Command Palette Basics

You unlock the command palette using the keyboard shortcut Cmd + ok (Mac) or Ctl + ok (Windows and Linux) or by clicking the Title field at the top of the post editor or website editor:

wordpress-command-palette-basics.png” alt=”Screenshot showing the wordpress command palette with the search field highlighted.” width=”840″ height=”486″/>

The absolute best of the palette includes a search field that filters entries as you type. You can choose whether to use the mouse or just use the keyboard.

A partial list of indications available outside the sector within the palette includes:

• Edit Template (when editing an Internet web page)
• Once again to the Internet web page (after editing its template)
• Reset model
• Resets the model segment
• Reset varieties to default values
• Delete model
• Delete the model segment
• Toggle the settings sidebar
• Toggle the block inspector
• Turn spotlight mode on/off
• Turn on/off without distractions
• Toggle the peaking toolbar
• Open the code editor
• Clear the code editor
• Toggles the tick list display
• Toggle full screen mode
• Editor preferences
• Keyboard shortcuts
• Show/hide block breadcrumbs
• Customize CSS
• Style revisions
• Open varieties
• Reset varieties
• View the website online
• View templates
• View the model parts
• Open navigation menus
• Rename building
• Building replicas
• Organize all custom designed templates

And, in any case, developers can add their own to strengthen their wordpress applications. Let’s jump into the process!

What will you want to get started

The Comand Palette API is supported by the use of JavaScript applications that you add to your tasks npmthe node package supervisor. You will need a wordpress package (local or distant) that you will simply be able to use directly via the terminal to execute command line instructions.

To fix the issues, we created a wordpress plugin that can be added to the code that modifies the command palette. The plugin does nothing more than create a custom post type that we call Products. (Everything you need to accomplish this with a rudimentary plugin is available in our data to broaden your custom publishing varieties.)

When our Product Pages plugin is activated, we can access the Dashboard menu to view and browse product posts:

wordpress Plugins page and an arrow pointing to the entry for a custom Products content type in the Admin menu.” width=”2254″ height=”1036″/>

Our plugin does this Not Have any unique wordpress command palette assistance. For example, the default command palette capability provides shortcuts for loading new wordpress posts and pages:

wordpress command palette showing entries for creating posts and pages.” width=”2022″ height=”1040″/>

However, the command palette is no longer aware of the rest of the increase in our product pages. We stand together with that underlying capacity.

Along with a custom designed command for the command palette

Currently, our entire product page plugin consists of a single PHP file that we’ve given a name products.php and located in wp-content/plugins/products. Somehow then you allow the type of publishing of products, however it doesn’t do the rest. We will return to this file once again when we have prepared the JavaScript-based API for the command palette.

Configuring API dependencies

Let’s start with the use of creating a generic file package deal.json files inside the products record by moving to that record within the terminal and using the command:

npm init

It’s not very powerful how you respond to the init turns on, instead you will need to provide a name and description in your device. (We used products for the reason that they identify e Product pages as the description.)

Now that you simply have a skeleton package deal.json file, open it on your favorite code editor and add the following traces somewhere inside the body, most likely after the file description line:

"scripts": {
        "assemble": "wp-scripts assemble --env mode=production"
},

However within the terminal we can add the dependency for wordpress scripts — @wordpress/scripts – package:

npm arrange @wordpress/scrips --save

This can add the following tracks to our plugins package deal.json file:

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

Now we can execute npm run assembleon the other hand the process involves a index.js file (even if empty) in our plugin src documentation. We will create them and perform the assembly using the following instructions within the terminal:

mkdir src
touch src/index.js
npm run assemble

This can create a assemble record for our JavaScript production (index.js). Like the one inside srcthe file may be empty at the moment. Furthermore, inside the assemble record, you will have to search for the file index.asset.php.

If the issues seem to be resolved correctly, let’s go ahead and add the remaining dependencies by working on the directions within the terminal while registering the plugin root:

npm arrange @wordpress/directions @wordpress/plugins @wordpress/icons --save

Take a look inside the package deal.json file now and the dependency block should look like this:

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

The newly added wordpress Directions package interfaces with the command palette, the Plugins package is expert in wordpress plugins and the Icons package we can offer you to select and display participants of a predefined image library.

Along with a Command Palette hook and appending our script

Now that we’ve got things set up, we want to add the code to our blank file src/index.js file that could actually hook into the command palette. Open the file in your editor and add this code:

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

const AddProductCommand = () => {
    useCommand( {
        identify: 'add-product',
        label: 'Add new product',
        icon: plus,
        callback: ( { close } ) => {
            record.location.href = "https://wpmountain.com/how-your-plugin-can-customise-the-wordpress-command-palette/post-new.php?post_type=kinsta_product";
            close();
         },
         context: 'block-editor',
     } );
    return null;
}
registerPlugin( 'products', { render: AddProductCommand } );
export default AddProductCommand;

Some notes on the code above:

• A single icon (the plus decides) is imported from the Icons package.
• useComand() it is the hook that registers the command.
• The label Add new product it is the text that can become an access right within the command palette.
• THE callback (what happens when an individual clicks Add new product) simply opens the new wordpress post PHP file with a query string that specifies a product post. (Until now, the only problem our plugin could have done.)

Once this is saved, it’s time for final assembly:

npm run assemble

After building, assemble/index.js will include our production JavaScript. The general step is to enqueue the script in wordpress. We do this by using the following code at the bottom of ours together products.php file (the simple PHP file that installs the plugin and defines the product post type):

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

/**
 * Enqueue belongings.
 *
 * @return void
 */

function enqueue_block_editor_assets() {
    wp_enqueue_script(
    'products',
    plugins_url( 'assemble/index.js', __FILE__ ),
    array(),
    '1.0',
    true
  );
}

With that said, we’ll go back to the wordpress editor and navigate to the commands palette. We may have to watch Add new product within the checkbox after typing the correct search text:

wordpress command palette showing that Add New Product has been added.” width=”2022″ height=”1040″/>

If we make a choice Add new product from the palette, wordpress will open the publish editor to the path reserved for our new product content material type.

Summary

The Command Palette API opens up a flexible option to combine your device with one of the most powerful and attention-grabbing choices in recent wordpress. We’ll be excited to learn if, if so, you’ve leveraged the API and what you’ve accomplished.

Developers like you can rely on Kinsta to provide robust, vetted wordpress Internet hosting solutions that power your performant and scalable businesses.

Check out Kinsta today to see how we can help you build world-class wordpress websites!

The post How Your Plugin Can Customize the wordpress Command Palette first appeared on Kinsta®.

WP hosting

[ continue ]

wordpress Maintenance Plans | wordpress hosting

Read more