Comment travailler avec des blocs WordPress en dehors de Gutenberg avec Node.js

L'éditeur de blocs WordPress change tout ce qui concerne la façon dont nous créons du contenu avec cette plateforme. Les nouvelles versions de WordPress apportent de nombreuses nouveautés concernant les blocs, et il reste encore beaucoup de chemin à parcourir dans le futur.

Pour cette raison, les développeurs qui travaillent avec WordPress en tant que plateforme de développement devraient se sentir de plus en plus à l'aise avec les blocs. Cependant, passer de PHP à des technologies basées sur JavaScript peut être difficile.

Quoi qu'il en soit, vous devez mettre à jour vos compétences et ne pas avoir peur de la nouvelle pile de développement WordPress. Plus tôt nous serons à l'aise avec cela, plus nous aurons d'occasions d'innover.

Aujourd'hui, nous allons voir comment nous pouvons travailler avec des blocs Gutenberg sans avoir à être à l'intérieur de l'éditeur WordPress. Pourquoi? Pour plusieurs raisons…

La première et la plus évidente est parce que nous le pouvons. Depuis un certain temps déjà, la définition des blocs de base dans l'éditeur Gutenberg est disponible sous la forme d'un package de code séparé. Cela signifie que nous pouvons les utiliser en dehors de WordPress grâce au gestionnaire de packages NPM.

De plus, il existe toute une série de fonctions pour gérer les blocs et travailler avec eux. Et ils sont également contenus dans leur propre package. Par conséquent, si nous voulons travailler avec les blocs WordPress standard, nous n'avons qu'à importer ces deux packages en tant que dépendances dans notre projet.

Pour ce faire, nous devons créer un dossier pour notre projet, exécuter npm init pour créer un fichier package.json avec les données du projet, puis exécuter la commande suivante pour installer ces deux dépendances :

 npm install @wordpress/block-library @wordpress/blocks

L'étape suivante consiste à créer un fichier index.js avec le code que nous voulons exécuter. Ce code est écrit en Node.js, une variante de JavaScript qui s'exécute sur les serveurs. Pour l'exemple d'aujourd'hui, le contenu de index.js peut être le suivant :

 const { registerCoreBlocks } = require( '@wordpress/block-library' ); const { createBlock, serialize } = require( '@wordpress/blocks' ); registerCoreBlocks(); const myBlock = createBlock( 'core/paragraph', { content: 'This is a block created programmatically', } ); const serializedBlock = serialize( myBlock ); console.log( serializedBlock );

Les deux premières instructions qui apparaissent dans le code précédent sont des instructions require pour importer les dépendances. Comme je l'ai déjà dit, nous voulons importer la définition de bloc WordPress standard. Nous le faisons avec require('@wordpress/block-library') . Puisque nous voulons uniquement importer la fonction registerCoreBlocks de ce package, sur le côté gauche du symbole d'égalité, nous déstructurons cette fonction.

De la même manière, nous importons le package @wordpress/blocks en tant que dépendance. Ce package est celui qui a les fonctions pour travailler avec des blocs. Il y a beaucoup de fonctions définies dans le package (vous les avez ici), mais pour cet exemple, nous voulons seulement que createBlock crée de nouveaux blocs et serialize pour les convertir en chaînes que nous pouvons enregistrer dans le contenu d'un article WordPress.

Maintenant que nous avons importé les dépendances, nous appelons la fonction registerCoreBlocks , qui charge la définition des types de blocs WordPress standard afin que nous puissions les utiliser. Dès lors, nous pouvons créer des blocs, comme vous pouvez le voir lorsque nous appelons la fonction createBlock en passant en paramètre le nom du type de bloc que nous voulons créer et un objet avec ses attributs.

Dans l'exemple précédent, nous allons créer un bloc de paragraphe, nous passons donc le nom 'core/paragraph' et à l'intérieur de l'objet attributs nous passons le contenu du paragraphe à créer sous forme de chaîne à l'intérieur de la clé de content .

Enfin, nous appelons la fonction serialize en lui passant le bloc que nous venons de créer. En conséquence, nous aurons une chaîne que nous pouvons produire avec la fonction console.log .

Nous pouvons maintenant exécuter le node index.js dans le terminal. Si nous faisons cela, voici ce qui se passe :

Il y a une erreur dans l'exécution ! La raison en est que nous devons disposer de la variable window , qui n'est pas définie. Mais quelle est cette variable et pourquoi en avons-nous besoin ?

Window est un objet JavaScript que le navigateur définit et représente la fenêtre du navigateur elle-même. Puisque nous exécutons le code dans notre terminal (ou s'il s'exécutait en production, sur un serveur), nous n'avons pas de navigateur avec ladite variable. Cela signifie-t-il que nous ne pouvons pas utiliser les blocs WordPress en dehors d'un navigateur ? Bien sûr que non !

Node.js a plusieurs packages qui nous permettent de simuler que nous exécutons notre code dans un environnement de navigateur. Dans ce cas, nous allons utiliser le package browser-env. Nous n'avons plus qu'à l'installer comme nous le faisions auparavant avec les packages WordPress :

 npm install browser-env

Dans notre fichier index.js , nous devons ajouter un nouveau require pour importer la dépendance browser-env . Mais aussi, nous devons "réparer" l'objet window car il ne vient pas avec la méthode matchMedia requise. Si vous copiez le code suivant et que vous l'ajoutez au début du fichier index.js , le problème est résolu :

 // Setup environment to simulate a browser // (mandatory to register Gutenberg blocks). require( 'browser-env' )(); window.matchMedia = window.matchMedia || function () { return { matches: false, addListener: function () {}, removeListener: function () {}, }; };

Vous pouvez maintenant réexécuter le code et vous verrez qu'il n'échoue pas et qu'il renvoie la représentation textuelle du bloc de paragraphe que nous venons de créer à l'aide de la fonction createBlock :

 $ node index.js <!-- wp:paragraph --> <p>This is a block created programmatically</p> <!-- /wp:paragraph -->

Vous avez tout le code dans ce référentiel GitHub. Les possibilités de travailler avec des blocs en dehors de l'éditeur sont énormes. Vous pouvez créer des blocs, les cloner, les transformer en un autre type de bloc, et bien plus encore.

Pouvoir travailler avec des blocs en dehors de l'éditeur WordPress nous permet de manipuler le contenu de notre WordPress et de travailler avec eux de n'importe où. Cela ouvre un monde de possibilités énormes pour les développeurs que nous commençons tout juste à explorer.

Chez Nelio, nous utilisons déjà ces possibilités. Nous allons bientôt lancer un nouveau service que vous trouverez, espérons-le, très intéressant. Restez à l'écoute des nouvelles que nous allons publier dans les semaines à venir ?.

Image sélectionnée par Kelly Sikkema sur Unsplash .