Comment créer un bloc Gutenberg pour WordPress ?

Qu’est ce qu’un bloc Gutenberg ?

Comme vous devez le savoir, l’éditeur Gutenberg est le nouvel éditeur de contenu inclus dans WordPress. Cet éditeur contient déjà un bon nombre de blocs mais dans ce tutoriel, nous allons voir comment en créer un sur-mesure !

Prérequis à la création d’un bloc Gutenberg

Pour créer un bloc gutenberg, nous allons utiliser du php mais également beaucoup de javascript. En effet, l’éditeur Gutenberg a été développé avec React.

Pour coder notre bloc, nous allons devoir installer Node.js. L’installation de Node.js va permettre d’utiliser npm : un gestionnaire de paquets javascript qui permet de gérer les dépendances d’une application. Dans notre cas, cet outil va permettre d’installer les fichiers nécessaires à la création des blocs Gutenberg.

Ce tutoriel est basé sur la documentation officiel : https://developer.wordpress.org/block-editor/tutorials/javascript/js-build-setup/

Préparation du bloc

Tout d’abord, nous devons charger les modules javascript qui vont être nécessaires au développement de notre bloc. Pour cela :

• Rendez-vous sur l’outil d’invite de commande de Windows (raccourci « Touche Windows » + « R », tapez « cmd » et tapez sur « Entrer »)
• Allez dans le dossier de votre installation de WordPress dans le répertoire des plugins

Pour moi, cela donne :

cd ../../wamp64/www/wordpress/wp-content/plugins/
mkdir tutowp-block
cd tutowp-block

Les commandes ci-dessus permettent de vous rendre dans le dossier des plugins, de créer un dossier « tutowp-block » et de vous rendre dans ce dossier. ( les « .. » permettent de remonter dans la hiérarchie des dossiers.)

Tapez les commandes suivantes pour générer un fichier « package.json » :

npm init

Vous aurez ensuite plusieurs paramètres à indiquer :

package name: (tutowp-block)
version: (1.0.0)
description: TutoWP Block
entry point: (index.js) build/index.js
test command:
git repository:
keywords:
author: TutoWP
license: (ISC)

Tapez les commandes suivantes pour installer les fichiers nécessaires à la création des blocs sur WordPress.

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

Les fichiers s’installent.

Création du bloc Gutenberg

Une fois les fichiers installés, nous allons pouvoir commencer à coder notre bloc.

Créez un dossier « src » dans le dossier du plugin puis créez un fichier « index.js » :

import { registerBlockType } from '@wordpress/blocks';
 
registerBlockType( 'tutowp/test-block', {
    title: 'TutoWP Bloc exemple',
    icon: 'smiley',
    category: 'design',
    edit: () => <div>Bonjour !</div>,
    save: () => <div>Bonjour !</div>,
} );

Plusieurs remarques :

• Le contenu de ce bloc est volontairement simple mais nous apprendrons dans d’autres tutoriels comment en créer des plus complexes 😉.
• La syntaxe utilisée n’est pas du javascript pur, il s’agit de la syntaxe ESNext (c’est pour cela qu’elle doit être compilée dans la syntaxe originale)

Pour faire un build (pour compiler le code javascript), ajoutez le code suivant au fichier « package.json ».

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

Tapez « npm start » pour être en mode développement (ctrl + c pour sortir du mode développement). Dès lors, les fichiers seront compilés à chaque modification.

Une fois les développements effectués. Tapez « npm run build » pour compiler définitivement vos fichiers pour un environnement de production.

Créer un plugin pour votre bloc Gutenberg

Pour faire de notre bloc un plugin, créez un fichier « tutowp-block.php » à la racine du dossier du plugin et ajoutez le code php suivant :

<?php

/**
 * Plugin Name: TutoWP Block
 */

function create_block_tutowp_block_init() {
    $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
    wp_register_script(
        'tutowp-block',
        plugins_url( 'build/index.js', __FILE__ ),
        $asset_file['dependencies'],
        $asset_file['version']
    );
    register_block_type( 'tutowp/test-block', [
        'editor_script' => 'tutowp-block',
    ] );
}
add_action( 'init', 'create_block_tutowp_block_init' );

PS: n'oubliez pas de lire mon tutoriel principal sur comment créer un thème WordPress !