Environnement de développement pour un plugin dans Gutenberg (Block Editor)

Juil 18, 2020 | wordPress | 0 commentaire

Block Editor WordPress Plugin

Pour utiliser un environnement permettant de développer des composants React en JSX, il faut préparer un environnement qui permette de compiler le code ESNext en JSX. On configure l’environnement de développement pour utiliser ces syntaxes.

Installation

Webpack et Babel sont des outils écrits en JavaScript et exécutés sur le serveur à l’aide de Node.js. Node.js est un environnement d’exécution pour JavaScript en dehors d’un navigateur. Pour commencer un nouveau projet, on crée un répertoire et on initialise npm dans ce répertoire. J’ai un plugin qui fait plusieurs choses donc je crée un répertoire block-editor dans le répertoire assets de mon plugin. On lance alors l’initialisation avec npm init.

Installation des packages

On crée un nouveau package.json exécutant npm init dans le terminal. On installe ensuite les packages à l’aide de la commande npm install. Si vous passez le paramètre --save-dev, npm écrira le package en tant que dépendance de développement dans le fichier package.json. Le paramètre --save-exact indique à npm d’enregistrer une version exacte d’une dépendance, et non une plage de versions valides.

Configuration de la construction de scripts wp

Le package @wordpress/scripts gère les dépendances et la configuration par défaut pour webpack et Babel. Le package de scripts s’attend à ce que le fichier source à compiler soit src/index.js et enregistrera la sortie compilée dans build/index.js. On crée le répertoire src et l’on édite index.js avec le contenu JSX suivant :

1
2
3
4
5
6
7
8
9
const { registerBlockType } = wp.blocks;
registerBlockType( 'myguten/test-block', {
    title: 'Basic Example',
    icon: 'smiley',
    category: 'design',
    edit: () => <div>Hola, mundo!</div>,
    save: () => <div>Hola, mundo!</div>,
} );

Pour configurer npm et exécuter un script, on utilise la section scripts dans package.json :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "icon-inserter",
  "version": "1.0.0",
  "description": "Icon inserter for block editor",
  "main": "icon-inserter.js",
  "scripts": {
    "build": "wp-scripts build"
  },
  "author": "Xavier BS",
  "license": "GPL-3.0",
  "devDependencies": {
    "@wordpress/scripts": "12.1.1"
  }
}

On peut alors lancer le build en utilsant la commande npm run build dans le répertoire contenant le package.json.

Si on liste le répertoire, on a donc :

Le fichier index.asset.php contient les dépendances et le N° de version.

1
<?php return array('dependencies' => array('wp-blocks', 'wp-element', 'wp-polyfill'), 'version' => 'de28583a8c7c477aedda80077b80fd8a');

Mode développement

La commande build dans @ wordpress/scripts s’exécute en mode production. Cela réduit le code afin de le télécharger plus rapidement, mais rend difficile la lecture. On peut utiliser la commande start qui s’exécute en mode développement, qui continue le processus en cours d’exécution pour surveiller le fichier source, afin de faire les modifications et reconstructions au fur et à mesure du votre développement. La commande start peut être ajoutée à la section scripts de package.json:

1
2
3
4
"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
},

Ainsi, lorsque l’on exécute npm start, un watcher s’exécute dans le terminal. On peut modifier index.js ; après chaque sauvegarde, le build se construit automatiquement. On garde le terminal ouvert pour suivre toute erreur. En cas d’erreur, la construction échoue et l’erreur se trouvera dans le terminal. Pour sortir du watcher et annuler le Live Reload, on appuie sur Ctrl + C.

Gestion des sources et des dépendances

Le dossier node_modules contient des milliers de fichiers qui changent à chaque mise à jour logicielle, on doit exclure ce dossier node_modules/ du contrôle des sources. Si l’on veut cloner le module, on exécute simplement npm install dans le même dossier que package.json pour extraire les paquets requis et créer un nouveau dossier node_modules. On intègre juste le fichier build/index.js dans le plugin PHP (il s’agit du fichier JavaScript principal nécessaire à l’exécution) en se servant de build/index.asset.php pour les dépendances.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
/**
* Class admin
*/
 
// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) exit;
 
class ICI_Admin {
 
   public function __construct( $ici ) {
      $this->textdomain = $ici->textdomain;
 
      add_action( 'enqueue_block_editor_assets', [$this, 'enqueue_block_editor_assets'] );
   }
 
   public function enqueue_block_editor_assets() {
 
      $build = Icon_Inserter::dir( 'assets/icon-inserter/build' );
      $index_asset = require( "{$build}/index.asset.php" );
 
      wp_enqueue_script(
         'icon-inserter-button',
         Icon_Inserter::url( 'assets/icon-inserter/build/index.js' ),
         $index_asset['dependencies'],
         $index_asset['version']
      );
   }
}

A chaque fois que l’on fera des modifications dans src/index.js, le build sera reconstruit, et le fichier index.asset.php mis à jour pour les dépendances.

Et hop, l’environnement est installé, en lançant npm start, on peut développer tranquillement un plugin pour le nouvel éditeur de blocs Gutenberg.

Trackbacks/Pingbacks

  1. Plugin : Insérer des icones dans Gutenberg (Block Editor) - Murviel Info - […] avoir mis en place un environnement de développement comme dans cet article, on developpe un plugin dans l’éditeur de…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.