Zo kan je met je plugin het WordPress Command Palette aanpassen

Met de release van WordPress 6.3 werd het Command Palette geïntroduceerd, een feature die snelle toegang biedt tot acties die vaak worden gebruikt door degenen die inhoud of thema’s bewerken binnen de beheerinterface van het CMS.

Met het menu-achtige Command Palette kunnen gebruikers de beschikbare taken filteren met behulp van een eenvoudige zoekinterface en opties selecteren om door de gebruikersinterface van de editor te navigeren, voorkeuren in te stellen, stijlen te transformeren, blokken te manipuleren en zelfs te beginnen met het maken van nieuwe berichten en pagina’s.

Er is ook een API beschikbaar die JavaScript ondersteunt, waarmee ontwikkelaars functionaliteit kunnen toevoegen aan het Command Palette. De maker van een WordPress plugin die webformulieren genereert kan bijvoorbeeld een Command Palette-item toevoegen waarmee gebruikers naar een pagina worden geleid die de resultaten van formulierinzendingen laat zien.

De ontwikkelaar van een plugin die veel shortcodes gebruikt kan een item in het Command Palette koppelen aan een pop-up “spiekbriefje” om gebruikers eraan te herinneren hoe ze die codes moeten gebruiken.

De mogelijkheden zijn eindeloos en we geven je een voorproefje van hoe de API werkt om je te inspireren om het Command Palette te gebruiken in je volgende WordPress plugin project.

WordPress Command Palette basis

Je start het Command Palette door de sneltoets Cmd + k (Mac) of Ctl + k (Windows en Linux) te gebruiken of door te klikken op het titelveld bovenaan de Post Editor of Site Editor:

De bovenkant van het palet bevat een zoekveld dat items filtert terwijl je typt. Je kunt items selecteren met de muis of alleen met het toetsenbord.

Een gedeeltelijke lijst van commando’s die direct beschikbaar zijn in het palet bevat:

• Template bewerken (bij het bewerken van een pagina)
• Terug naar pagina (na het bewerken van de template)
• Template terugzetten
• Template part resetten
• Stijlen terugzetten naar standaard
• Template verwijderen
• Template part verwijderen
• Togglen zijbalk instellingen
• Togglen Block Inspector
• Togglen Spotlight modus
• Togglen Distraction Free modus
• Togglen bovenste werkbalk
• Code-editor openen
• Code-editor afsluiten
• Togglen List View
• Togglen Full Screen modus
• Editor voorkeuren
• Shortcut toetsenbord
• Breadcrumbs block tonen/verbergen
• CSS aanpassen
• Stijl revisies
• Stijlen openen
• Stijlen resetten
• Site weergeven
• Templates bekijken
• Template parts bekijken
• Navigatiemenu’s openen
• Pattern hernoemen
• Pattern dupliceren
• Alle custom patterns beheren

En natuurlijk kunnen ontwikkelaars hun eigen patterns toevoegen om hun WordPress applicaties te verbeteren. Laten we beginnen met het proces!

Wat je nodig hebt om te beginnen

De Comand Palette API wordt ondersteund door JavaScript pakketten die je aan je projecten toevoegt met npm, de Node Package Manager. Je hebt een installatie van WordPress nodig (lokaal of op afstand) die je kunt benaderen via de terminal om commando’s uit te voeren op de commandoregel.

Om te beginnen hebben we een WordPress plugin gemaakt die de code bevat die het Command Palette aanpast. De plugin doet niet veel meer dan een custom post type maken dat we Products noemen. (Alles wat je moet weten om zo ver te komen met een rudimentaire plugin is beschikbaar in onze gids voor het maken van custom post types).

Wanneer onze Product Pages plugin is geactiveerd, krijgen we een Dashboard menu-item voor het maken en doorbladeren van Product posts:

Onze plugin heeft geen unieke hulp van het WordPress Command Palette. De standaard functionaliteit van het Command Palette biedt bijvoorbeeld shortcuts om nieuwe WordPress berichten en pagina’s toe te voegen:

Het Command Palette weet echter niets over het maken van onze Product pagina’s. Die functionaliteit voegen we hieronder toe.

Een custom opdracht toevoegen aan het Command Palette

Op dit moment bestaat onze hele Product Pages plugin uit één PHP bestand dat we products.php hebben genoemd en op wp-content/plugins/products hebben geplaatst. Behalve dat het het posttype Products inschakelt, doet het nog niets. We komen op dit bestand terug nadat we de door JavaScript aangestuurde API voor het Command Palette hebben ingesteld.

De API dependencies installeren

We beginnen met het maken van een generiek package.json bestand in de products map door in de terminal naar die map te gaan en het commando uit te voeren:

npm init

Het is niet kritisch hoe je reageert op de init prompts, maar je wilt wel een naam en beschrijving opgeven voor je applicatie. (Wij gebruikten products als naam en Product Pages als beschrijving).

Nu je een skeletbestand package.json hebt, open je het in je favoriete code-editor en voeg je de volgende regels ergens in de body toe, misschien na de regel description:

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

Nog steeds in de terminal kunnen we de dependency voor het WordPress Scripts – @wordpress/scripts pakket toevoegen:

npm install @wordpress/scrips --save

Dat zal de volgende regels toevoegen aan het bestand package.json van onze plugin:

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

Nu kunnen we npm run build uitvoeren, maar het proces verwacht een index.js bestand (zelfs als het leeg is) in de src map van onze plugin. We maken die aan en voeren de build uit met de volgende commando’s in de terminal:

mkdir src
touch src/index.js
npm run build

Dat maakt een build map voor ons productie JavaScript (index.js). Net als die in src, zal dat bestand nu leeg zijn. In de map build zou je ook het bestand index.asset.php moeten vinden.

Als alles correct gebouwd lijkt te zijn, gaan we verder met het toevoegen van de resterende dependencies door deze commando’s in de terminal in de hoofdmap van de plugin uit te voeren:

npm install @wordpress/commands @wordpress/plugins @wordpress/icons --save

Kijk nu in het bestand package.json en het dependencies blok zou er ongeveer zo uit moeten zien:

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

Het nieuw toegevoegde WordPress Commands pakket heeft een interface met het Command Palette, het Plugins pakket werkt met WordPress plugins, en met het Icons pakket kun je members van een vooraf samengestelde bibliotheek met afbeeldingen selecteren en weergeven.

Een Command Palette hook toevoegen en ons script enqueuen

Nu we onze bronnen op hun plaats hebben, moeten we code toevoegen aan ons lege src/index.js bestand dat daadwerkelijk zal hooken aan het Command Palette. Open het bestand in je editor en voeg deze code toe:

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

const AddProductCommand = () => {
    useCommand( {
        name: 'add-product',
        label: 'Add new product',
        icon: plus,
        callback: ( { close } ) => {
            document.location.href = 'post-new.php?post_type=kinsta_product';
            close();
         },
         context: 'block-editor',
     } );
    return null;
}
registerPlugin( 'products', { render: AddProductCommand } );
export default AddProductCommand;

Enkele opmerkingen over de bovenstaande code:

• Een enkel pictogram (het plus-pictogram) wordt geïmporteerd uit het pictogrammenpakket.
• useComand() is de hook die de opdracht registreert.
• Het label Add new product is de tekst die wordt toegevoegd aan het Command Palette.
• De callback (wat er gebeurt als een gebruiker op Add new product klikt) opent eenvoudigweg het WordPress new post PHP bestand met een query string die een Product post specificeert. (Tot nu toe was dat het enige wat onze plugin kon doen).

Nu dat is opgeslagen, is het tijd voor de laatste build:

npm run build

Na het bouwen zal build/index.js onze productie JavaScript bevatten. De laatste stap is het enqueuen van het script in WordPress. Dat doen we door de volgende code toe te voegen aan de onderkant van ons products.php bestand (het eenvoudige PHP bestand dat de plugin heeft ingesteld en het Product post type definieert):

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

/**
 * Enqueue assets.
 *
 * @return void
 */

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

Als dat klaar is, gaan we terug naar de WordPress editor en activeren we het Command Palette. We zouden Add new product in de lijst moeten zien na het typen van de juiste zoektekst:

Als we Add new product selecteren in het Palet, opent WordPress de Post Editor op het pad dat is gereserveerd voor ons nieuwe content type Product.

Samenvatting

De Command Palette API biedt een flexibele manier om je applicatie te integreren met een van de interessantere features van het moderne WordPress. We zouden graag willen weten of je al gebruik hebt gemaakt van de API en wat je ermee hebt bereikt.

Ontwikkelaars zoals jij kunnen rekenen op Kinsta voor het leveren van krachtige, Managed WordPress Hosting oplossingen die krachtige en schaalbare projecten ondersteunen.

Probeer Kinsta vandaag nog om te zien hoe we je kunnen helpen om WordPress sites van topklasse te bouwen!

Steve Bonisteel Kinsta

Steve Bonisteel is Technical Editor bij Kinsta. Hij begon zijn schrijverscarrière als verslaggever en achtervolgde ambulances en brandweerwagens. Sinds eind jaren negentig schrijft hij over internetgerelateerde technologie.