Comment votre plugin peut personnaliser la palette de commandes de WordPress

La sortie de WordPress 6.3 a introduit la palette de commandes, une fonctionnalité qui offre un accès rapide aux actions fréquemment utilisées par ceux qui modifient le contenu ou les thèmes dans l’interface d’administration du CMS.

La palette de commande, qui s’apparente à un menu, permet aux utilisateurs de filtrer les tâches disponibles à l’aide d’une interface de recherche simple et de sélectionner des options pour naviguer dans l’interface utilisateur de l’éditeur, basculer les préférences, transformer les styles, manipuler les blocs et même commencer à créer de nouveaux articles et de nouvelles pages.

Une API JavaScript est également disponible pour permettre aux développeurs d’ajouter des fonctionnalités à la palette de commandes. Par exemple, le créateur d’une extension WordPress qui génère des formulaires web peut ajouter une entrée à la palette de commandes qui renvoie les utilisateurs à une page qui affiche les résultats des envois de formulaires.

Le développeur d’une extension qui utilise de nombreux codes courts peut lier une entrée de la palette de commandes à une « antisèche » contextuelle pour rappeler aux utilisateurs comment utiliser ces codes.

Les possibilités sont infinies, et nous vous donnons un aperçu du fonctionnement de l’API pour vous inciter à utiliser la palette de commandes dans votre prochain projet d’extension WordPress.

Les bases de la palette de commandes de WordPress

Vous pouvez lancer la palette de commandes en utilisant le raccourci clavier Cmd + k (Mac) ou Ctl + k (Windows et Linux) ou en cliquant sur le champ Titre en haut de l’éditeur d’articles ou de l’éditeur de sites :

La partie supérieure de la palette comprend un champ de recherche qui filtre les entrées au fur et à mesure que vous tapez. Vous pouvez sélectionner des entrées à l’aide d’une souris ou en utilisant uniquement le clavier.

Une liste partielle des commandes disponibles dans la palette comprend :

• Modifier le modèle (lors de la modification d’une page)
• Retourner à la page (après avoir modifié son modèle)
• Réinitialiser le modèle
• Réinitialiser la partie du modèle
• Réinitialiser les styles par défaut
• Supprimer le modèle
• Supprimer la partie du modèle
• Basculer la colonne latérale des réglages
• Basculer l’inspecteur de blocs
• Basculer le mode projecteur
• Basculer vers le mode sans distraction
• Basculer la barre d’outils supérieure
• Ouvrir l’éditeur de code
• Quitter l’éditeur de code
• Basculer l’affichage de la liste
• Basculer en mode plein écran
• Préférences de l’éditeur
• Raccourcis clavier
• Afficher/masquer les fils d’Ariane des blocs
• Personnaliser le CSS
• Révisions de style
• Ouvrir les styles
• Réinitialiser les styles
• Voir le site
• Voir les modèles
• Voir les parties du modèle
• Ouvrir les menus de navigation
• Renommer le modèle
• Dupliquer un modèle
• Gérer tous les modèles personnalisés

Et, bien sûr, les développeurs peuvent ajouter les leurs pour améliorer leurs applications WordPress. Allons de l’avant avec ce processus !

Ce dont vous aurez besoin pour commencer

L’API palette de commandes est prise en charge par des paquets JavaScript que vous ajouterez à vos projets à l’aide de npm, le gestionnaire de paquets de Node. Vous aurez besoin d’une installation de WordPress (locale ou distante) à laquelle vous pourrez accéder via le terminal pour exécuter des commandes sur la ligne de commande.

Pour commencer, nous avons créé une extension WordPress qui hébergera le code qui modifie la palette de commandes. L’extension ne fait pas grand-chose d’autre que de créer un type de publication personnalisé que nous appelons Products. (Tout ce que vous devez savoir pour aller aussi loin avec une extension rudimentaire est disponible dans notre guide sur la création de types de publication personnalisés).

Lorsque notre extension Product pages est activée, nous obtenons une entrée de menu dans le tableau de bord pour créer et parcourir les publications de produits :

Notre extension ne bénéficie pas d’une assistance unique de la part de la palette de commandes de WordPress. Par exemple, la fonctionnalité par défaut de la palette de commandes fournit des raccourcis pour ajouter de nouveaux articles et pages WordPress :

Cependant, la palette de commandes ne sait rien de la création de nos pages Produits. Nous ajoutons cette fonctionnalité ci-dessous.

Ajout d’une commande personnalisée à la palette de commandes

À l’heure actuelle, l’ensemble de notre extension Product pages de produits se compose d’un seul fichier PHP que nous avons nommé products.php et placé dans wp-content/plugins/products. À part l’activation du type d’article Products, il ne fait rien pour l’instant. Nous reviendrons sur ce fichier une fois que nous aurons mis en place l’API JavaScript pour la palette de commandes.

Installation des dépendances de l’API

Nous commençons par créer un fichier générique package.json dans le répertoire products en nous plaçant dans ce répertoire dans le terminal et en exécutant la commande :

npm init

La façon dont vous répondez aux invites de init n’est pas essentielle, mais vous devrez fournir un nom et une description pour votre application. (Nous avons utilisé products comme nom et Products Pages comme description).

Maintenant que vous avez un squelette de fichier package.json, ouvrez-le dans votre éditeur de code préféré et ajoutez les lignes suivantes quelque part dans le corps du texte, peut-être après la ligne description:

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

Toujours dans le terminal, nous pouvons ajouter la dépendance pour le paquetage WordPress Scripts – @wordpress/scripts:

npm install @wordpress/scrips --save

Cela ajoutera les lignes suivantes au fichier package.json de notre extension :

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

Maintenant, nous pouvons exécuter npm run build, mais le processus attend un fichier index.js (même s’il est vide) dans le répertoire src de notre plugin. Nous allons les créer et exécuter la construction en utilisant les commandes suivantes dans le terminal :

mkdir src
touch src/index.js
npm run build

Cela créera un répertoire build pour notre JavaScript de production (index.js). Comme celui de src, ce fichier sera vide pour l’instant. De plus, dans le répertoire build, vous devriez trouver le fichier index.asset.php.

Si les choses semblent être construites correctement, allons-y et ajoutons les dépendances restantes en exécutant ces commandes dans le terminal à l’intérieur du répertoire racine de l’extension :

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

Jetez un coup d’œil au fichier package.json maintenant, et le bloc des dépendances devrait ressembler à ceci :

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

Le paquet WordPress Commands nouvellement ajouté s’interface avec la palette de commandes, le paquet Plugins s’occupe des extensions WordPress, et le paquet Icons vous permet de sélectionner et d’afficher les membres d’une bibliothèque d’images pré-construite.

Ajout d’un crochet à la palette de commandes et mise en file d’attente de notre script

Maintenant que nos ressources sont en place, nous devons ajouter du code à notre fichier src/index.js vide pour qu’il s’accroche à la palette de commandes. Ouvrez le fichier dans ton éditeur et ajoutez ce code :

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;

Quelques remarques sur le code ci-dessus :

• Une seule icône (le chiffre plus) est importée du paquet Icônes.
• useComand() est le crochet qui enregistre la commande.
• Le libellé Add new product est le texte qui deviendra une entrée dans la palette de commandes.
• Le site callback (ce qui se passe lorsqu’un utilisateur clique sur Add new product) ouvre simplement le fichier PHP WordPress new post avec une chaîne de requête qui spécifie un article Product. (Jusqu’à présent, c’était la seule chose que notre extension pouvait faire).

Une fois cela sauvegardé, il est temps de procéder à la construction finale :

npm run build

Après la construction, build/index.js contiendra notre JavaScript de production. La dernière étape consiste à mettre le script en file d’attente dans WordPress. Pour ce faire, nous ajoutons le code suivant au bas de notre fichier products.php (le simple fichier PHP qui établit l’extension et définit le type de publication Product) :

// 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
  );
}

Une fois cela terminé, nous retournerons dans l’éditeur de WordPress et nous activerons la palette de commandes. Nous devrions voir Add new product dans la liste après avoir saisi le texte de recherche approprié :

Si nous sélectionnons Add new product dans la palette, WordPress ouvrira l’éditeur d’articles sur le chemin réservé à notre nouveau type de contenu Product.

Résumé

L’API palette de commandes offre un moyen flexible d’intégrer votre application à l’une des fonctionnalités les plus intéressantes de WordPress moderne. Nous serions intéressés de savoir si vous avez tiré parti de l’API et ce que vous avez réalisé.

Les développeurs comme vous peuvent compter sur Kinsta pour fournir des solutions d’hébergement WordPress infogéré et puissantes qui soutiennent des projets performants et évolutifs.

Essayez Kinsta dès aujourd’hui pour voir comment nous pouvons vous aider à créer des sites WordPress de premier plan !

Steve Bonisteel Kinsta

Steve Bonisteel est un rédacteur technique chez Kinsta qui a commencé sa carrière d'écrivain en tant que journaliste de presse écrite, chassant les ambulances et les camions de pompiers. Il couvre les technologies similaires à l'Internet depuis la fin des années 1990.