Créer un bloc Gutenberg personnalisé – Partie 1 : Configuration de l’environnement de développement

Dans la première partie de cette série de tutoriels sur la création de blocs Gutenberg personnalisés, nous devons configurer notre environnement de développement. Nous avons besoin d’un endroit où nous pouvons écrire notre code dans les syntaxes ES6/ESNext et le compiler à la volée. Il est possible d’écrire des blocs Gutenberg personnalisés en utilisant la syntaxe ES5 sans configurer Webpack et Babel. Mais le code sera vraiment lourd à lire et à écrire. Si vous ne savez pas pourquoi nous devons faire tout cela, ou quelle est la différence, lisez mon article expliquant cela. Je peux vous garantir que lorsque vous reviendrez, vous serez convaincu de franchir cette étape supplémentaire afin d’écrire un meilleur code.

Je suppose que vous avez déjà un WordPress local fonctionnant sur une pile LAMP ou similaire. Et que vous écrivez soit un thème, soit un plugin. Quant à moi, je mets mon code dans un thème que j’ai développé, awp-starter-theme, situé dans mon dossier de thème WordPress. Je souhaite séparer mon développement Gutenberg de tous les autres fichiers de thème, je crée donc un sous-répertoire gutenberg-devdans le dossier racine de mon thème. Ce sera mon dossier de projet et le dossier auquel je me référerai pour le reste de la série de tutoriels.

J’ai déjà écrit un guide détaillé sur la configuration d’un environnement de développement pour Gutenberg, je vais donc parcourir rapidement les étapes ici. Si vous ne l’avez jamais fait auparavant, je vous recommande de lire le post lié ci-dessous, car il contient plus d’informations que ce que vous trouverez ici !

Configurer le projet avec webpack

À l’aide du terminal (terminal iOS ou Windows cmd, les deux fonctionnent correctement), accédez au dossier de votre projet (dans mon cas awp-starter-theme/gutenberg-dev). Nous initions un nouveau projet en demandant à npm de générer un package.jsonavec un contenu générique.

Création de package.json

npm init -y

Ensuite, j’installerai les scripts de WordPress qui nous aideront beaucoup avec la configuration avec cette commande (qui ajoutera le sous-dossier node_modulesainsi package-lock.jsonque) :

npm install --save-dev --save-exact @wordpress/scripts

Ouvrez le package.jsonfichier dans votre dossier de projet dans un éditeur et recherchez la scriptspropriété. Nous le remplaçons par deux scripts du package WordPress que nous venons d’installer :

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
},

Le script «build» va compiler mes fichiers. Mais comme il doit être exécuté manuellement à chaque modification, nous utiliserons plutôt le script «start» pendant que nous développons. Il initiera alors un «watch mode» où il écoute aux modifications apportées à l’un de vos fichiers de script et les recompile chaque fois que vous enregistrez des modifications.

Configuration Webpack

L’étape suivante consiste à créer un fichier de configuration Webpack. Je fais cela parce que je ne veux pas utiliser les noms de fichiers et dossiers source et de sortie par défaut. Je veux décider par moi-même où se trouvent mes fichiers source et où les fichiers compilés doivent se retrouver.

Avec l’aide du @wordpress/scriptspackage que nous avons installé, nous pouvons hériter de la configuration Webpack de WordPress et remplacer uniquement les parties que nous voulons modifier.

Dans notre dossier de projet, créez un nouveau fichier nommé webpack.config.jset ouvrez-le dans un éditeur. Ajoutez ce contenu :

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require('path');
module.exports = {
    ...defaultConfig,
    entry: {
        'block-awhitepixel-myfirstblock': './src/block-awhitepixel-myfirstblock.js'
    },
    output: {
        path: path.join(__dirname, '../assets/js'),
        filename: '[name].js'
    }
}

Cela définit mon fichier d’entrée (actuellement un seul) dans la entrypropriété, située dans un sous-dossier srcde mon dossier de projet, nommé block-awhitepixel-myfirstblock.js. Évidemment, nommez vos fichiers comme vous voulez, mais n’oubliez pas de changer à la fois la clé et la valeur. Parce que dans la outputpropriété, je demande à webpack de compiler mes fichiers d’entrée avec la clé d’entrée comme nom de fichier. Dans la pathpropriété, je demande de placer tous les fichiers compilés une étape hors de mon dossier de projet et dans le dossier du thème assets/js. Ajustez les noms de fichiers et l’emplacement en fonction de votre projet. Reportez-vous à mon guide détaillé si vous êtes confus.

Créez un sous-dossier src/dans le dossier du projet et c’est là que nous mettrons tous les fichiers source. (Ajustez si vous avez modifié l’ entryemplacement dans webpack.config.js). Créez un fichier block-awhitepixel-myfirstblock.jsici et laissez-le vide pour le moment.

Il reste une étape – et cela vaut pour nous qui voulons utiliser les dernières fonctionnalités d’ESNext. La configuration par défaut de WordPress Babel manque malheureusement de cela. Et parce que je veux utiliser des fonctionnalités telles que les fonctions fléchées, je dois également configurer Babel.

Mise en place de Babel

Nous devons d’abord installer quelques packages pour notre configuration Babel en tapant cette commande :

npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

Lorsque cela est fait, créez un nouveau fichier .babelrcdans notre dossier de projet. C’est là que nous allons mettre notre configuration Babel :

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        [
            "@babel/plugin-proposal-class-properties"
        ]
    ]
}

Et c’est tout pour la configuration de notre environnement de développement !

Construire des commandes

Tout au long du développement, vous devrez compiler vos fichiers Javascript. Dans notre package.json, nous avons ajouté deux scripts pour cela.

Chaque fois que nous voulons développer dans nos fichiers Javascript, nous exécutons ceci dans le terminal :

npm run build

Cette commande effectuera la compilation chaque fois que vous l’exécuterez dans le terminal. Essayez-le et vous devriez voir qu’il génère le fichier block-awhitepixel-myfirstblock.js(avec un ou deux autres fichiers "asset") dans votre dossier de sortie défini que vous avez défini dans webpack.config.js. Dans mon cas, il apparaît dans awp-starter-theme/assets/js/.

L’utilisation de la commande ci-dessus fonctionne bien, mais devient ennuyeuse à répéter chaque fois que vous apportez des modifications à vos fichiers. Vous préféreriez probablement exécuter cette commande à la place :

npm run start

Cela mettra votre terminal en "mode veille", détectera toutes les modifications enregistrées dans vos fichiers Javascript et les compilera au fur et à mesure. Chaque fois que vos fichiers contiennent des erreurs, le terminal affichera les messages d’erreur. Appuyez sur CTRL + C pour arrêter le processus de surveillance.

Comme référence, mon dossier de projet ressemble maintenant à l’image. Je préfère séparer tous les fichiers de configuration et en particulier le sous-dossier node_modules/(qui contient littéralement des dizaines de milliers de fichiers) du reste de mon code de thème. Facilite la configuration des règles d’ignorance – par exemple les compilateurs SCSS ou git ignore. Nous avons déjà configuré la configuration Webpack pour compiler les fichiers finaux directement awp-starter-theme/assets/js/avec d’autres fichiers Javascript pour mon thème.

Nous sommes maintenant prêts pour la partie suivante où nous commencerons par enregistrer notre premier bloc personnalisé.