Comment ajouter un bouton à l'éditeur Gutenberg

Détesté par certains et adoré par beaucoup, force est de constater que le nouvel éditeur de blocs de WordPress ne laisse pas indifférent. Il est avec nous depuis plus d'un mois maintenant et plus de plugins et de thèmes sont compatibles avec lui.

En tant que développeur de plugins, je dois dire que l'adaptation de nos produits à Gutenberg n'a pas été quelque chose qui peut être fait en quelques jours. Chez Nelio, nous suivons depuis un certain temps l'évolution et le développement du nouvel éditeur de blocs afin de pouvoir conserver les mêmes fonctionnalités de nos plugins sans changements significatifs.

L'un des points clés pour pouvoir adapter Nelio Content à Gutenberg était la possibilité d'ajouter des boutons dans les blocs de texte pour continuer à faire la même chose que nous faisions avec TinyMCE (l'éditeur classique). Je vous rappelle que l'une des fonctionnalités les plus intéressantes de Nelio Content est de vous permettre de sélectionner des phrases au sein du contenu pour les partager directement sur vos réseaux sociaux, ou de les marquer et ensuite notre algorithme sélectionnera les plus pertinentes et mettra en place une série de messages promotionnels automatiques. Je vous l'ai déjà expliqué dans ce post.

Pour inclure des boutons supplémentaires dans TinyMCE, WordPress dispose d'une documentation assez complète. Mais comment fait-on à Gutenberg ? Comment ajouter un bouton dans les blocs de texte enrichi dans WordPress ?

Il est clair que le maintien de cette fonctionnalité est essentiel pour continuer à fournir un produit de qualité tel que Nelio Content, non seulement pour nos clients mais aussi pour nous-mêmes, car nous aussi, nous sommes intéressés par l'utilisation de la fonctionnalité de mise en évidence des phrases dans Gutenberg.

Pour cette raison, j'ai décidé d'ouvrir un sujet dans le GitHub du projet Gutenberg expliquant le problème et demandant de l'aide en janvier 2018 (il y a presque un an, au moment de la publication de cet article). Là, j'ai demandé la possibilité d'ajouter des boutons aux blocs de texte de Gutenberg afin de travailler avec le texte sélectionné dans ces blocs.

L'évolution du problème a été positive et à la fin, une telle fonctionnalité a été ajoutée grâce aux types de format de Gutenberg. Étant donné que la documentation est encore assez pauvre (au moment où j'écris cet article), je vais vous expliquer comment ajouter un bouton personnalisé aux blocs de texte de l'éditeur de blocs, afin de ne pas perdre votre temps et d'avoir plus de facilité que moi.

Vous trouverez tout le code du plugin qui ajoute un bouton à l'éditeur dans ce référentiel GitHub. Bien que ce soit assez simple, je vais vous expliquer plus en détail les parties les plus importantes de ce projet.

Le fichier clé du projet est celui que vous trouverez à /src/js/gutenberg.js et que vous avez ci-dessous :

La fonction registerFormatType est spécifique au noyau WordPress et est celle qui vous permet d'ajouter un nouveau type de format, ainsi que le bouton qui déclenche l'action. Vous passez un nom ( 'nelio/button' ) et un objet JavaScript avec des arguments comme paramètres. Parmi ces arguments, vous avez la méthode edit , qui est celle qui renvoie un React Element , qui dans notre cas sera le bouton que nous voulons mettre dans le bloc.

Ce bouton est un RichTextToolbarButton , qui n'est rien de plus qu'un composant React de l'éditeur Gutenberg lui-même que vous pouvez trouver défini ici. Ce composant a besoin d'une icône (qui est un fichier SVG avec le logo de Nelio, dans ce cas), le titre du bouton et une fonction qui sera exécutée lorsque le bouton sera cliqué. Cette fonction finit par appeler la fonction doTheJob , où le texte sélectionné est récupéré et imprimé dans la console du navigateur. C'est l'endroit où vous pouvez ajouter n'importe quel code JavaScript pour gérer le texte sélectionné.

Dans l'attribut icon de RichTextToolbarButton , vous pouvez mettre une chaîne avec le nom d'un Dashicon WordPress au lieu du SVG. Pour que le SVG fonctionne, gardez à l'esprit que nous utilisons le package svg-react-loader qui convertit les fichiers SVG en éléments React, ce dont ces composants React ont besoin.

Le code utilise la syntaxe ES6+ pour le rendre plus facile à comprendre, mais pour le faire fonctionner il faut le traiter avec Babel, et pour cela nous avons cette configuration en webpack :

Je n'entrerai pas dans les détails de ce à quoi sert chaque ligne du fichier de configuration précédent du webpack , mais si vous le regardez, vous verrez que nous utilisons svg-react-loader pour les fichiers SVG et babel-loader pour traiter JavaScript et convertir en code qui fonctionne dans n'importe quel navigateur. J'ai déjà parlé de toutes ces technologies modernes dans ce post.

Le résultat est le fichier JavaScript gutenberg.js qui apparaît dans /dist/js . Maintenant, ce que nous devons faire est de charger ce fichier dans l'écran d'édition de WordPress, en utilisant (comme toujours) wp_enqueue_script :

Notez que le script est mis en file d'attente dans le crochet enqueue_block_editor_assets , qui est celui qui nous assure que le script ne sera chargé que lorsque l'éditeur de blocs WordPress est utilisé.

Si vous voulez essayer le code, téléchargez le projet GitHub et déplacez le dossier vers votre WordPress dans /wp-content/plugins . Là, ouvrez un terminal et exécutez npm install . Vous devez avoir installé NodeJS pour que tout fonctionne et pouvoir inclure les dépendances nécessaires requises par notre code.

Lorsque vous avez les dépendances, exécutez npm run build dans le terminal pour générer le code final (traitement du JavaScript, etc.). Vous pouvez maintenant accéder à votre WordPress et activer le plugin que nous venons d'ajouter.

Lorsque vous ouvrez un message pour le modifier, vous verrez le nouveau bouton apparaître dans les blocs de texte. Si vous sélectionnez un fragment du texte et cliquez sur le bouton, vous verrez le texte sélectionné apparaître dans la console du navigateur. C'est ce à quoi nous nous attendions, comme nous l'avons vu dans le code ci-dessus.

En savoir plus…

Ceci n'est qu'un exemple minimum de la façon de mettre un bouton dans un bloc de texte. Si vous souhaitez que le texte sélectionné soit modifié lorsque vous cliquez sur le bouton, je vous encourage à revoir le code de ce plugin où plusieurs boutons aux formats différents, plus complexes sont ajoutés.

En revanche, pour ceux d'entre vous qui veulent approfondir encore le sujet, je vous conseille de regarder le code du plugin GhostKit, qui modifie l'interface par défaut de Gutenberg en ajoutant différents éléments supplémentaires. C'est aussi un code très bien structuré et facile à comprendre.

À un moment donné, nous aurons une documentation officielle et détaillée couvrant tous les aspects de ces fonctionnalités de Gutenberg, mais pour l'instant, nous devons lire le code pour apprendre à implémenter ces types de modifications de l'éditeur de blocs WordPress. Bonne chance!

Image sélectionnée par Ashim D'Silva sur Unsplash.