Créer des Blocs Gutenberg : Le Guide Complet du Développeur

Introduction : L'Évolution de WordPress vers une Expérience Modulaire

Depuis son lancement, WordPress a parcouru un chemin phénoménal, passant d'une simple plateforme de blogging à un système de gestion de contenu (CMS) surpuissant qui alimente plus de 40% du web. Le tournant le plus significatif de ces dernières années a sans aucun doute été l'introduction de l'éditeur de blocs, connu sous le nom de Gutenberg. Cette révolution a transformé la création de contenu, la faisant passer d'un simple champ de texte à une expérience visuelle et modulaire, semblable à un jeu de construction.

Cependant, en tant que développeurs, nous nous retrouvons souvent face à un dilemme. Faut-il se contenter des blocs par défaut, utiliser des page builders lourds comme Elementor ou Divi, ou jongler avec des shortcodes et des champs personnalisés (ACF) complexes ? Si ces solutions ont leur place, elles présentent souvent des inconvénients en termes de performance, de maintenabilité et d'expérience utilisateur pour le client final.

Chez Maevo, nous croyons en la puissance de la maîtrise des outils natifs. C'est pourquoi nous avons adopté une approche centrée sur Gutenberg. La véritable flexibilité ne réside pas dans l'ajout de couches d'abstraction, mais dans l'extension du cœur même de WordPress. Ce guide est conçu pour les développeurs qui souhaitent franchir le pas : nous allons vous montrer pourquoi et comment créer vos propres blocs Gutenberg personnalisés. Préparez-vous à débloquer un niveau de personnalisation, de performance et de professionnalisme inégalé pour vos projets WordPress.

Pourquoi créer ses propres blocs Gutenberg ?

Avant de plonger dans le code, il est essentiel de comprendre les avantages stratégiques de cette approche. Créer des blocs sur mesure n'est pas seulement un exercice technique ; c'est un investissement dans la qualité et la pérennité de vos sites web.

H3: Une expérience utilisateur sur-mesure pour vos clients

Imaginez livrer un site à un client. Au lieu de lui fournir une documentation complexe sur l'utilisation de shortcodes ou une interface surchargée par un page builder, vous lui offrez une palette de blocs personnalisés, conçus spécifiquement pour ses besoins. Un bloc "Témoignage", un bloc "Membre de l'équipe", un bloc "Grille de services"... Chaque élément est intuitif. Le client n'a qu'à remplir les champs dédiés dans une interface claire et visuelle, voyant en temps réel le résultat final. C'est une expérience d'édition fluide, contrôlée et beaucoup moins intimidante, qui valorise votre travail et réduit drastiquement les demandes de support.

H3: Performance et légèreté : L'avantage natif

Les constructeurs de pages, bien que populaires, ont un coût caché : la performance. Ils chargent souvent une quantité massive de CSS et de JavaScript sur chaque page, qu'un élément soit utilisé ou non. De plus, leur code HTML est souvent imbriqué dans de multiples div, ce qui alourdit le DOM.

Un bloc Gutenberg personnalisé, en revanche, ne charge ses scripts et ses styles que lorsque le bloc est réellement utilisé sur la page. Le balisage HTML est celui que vous définissez : propre, sémantique et optimisé. Le résultat ? Des temps de chargement plus rapides, un meilleur score sur les Core Web Vitals de Google, et donc un meilleur SEO.

H3: Maintenabilité et pérennité

Les blocs Gutenberg sont la voie d'avenir de WordPress. En construisant avec la technologie native, vous vous assurez que vos développements resteront compatibles avec les futures évolutions du CMS. La maintenance est également simplifiée. Au lieu d'avoir une logique éparpillée entre functions.php, des templates de page et des shortcodes, chaque bloc est un composant autonome et encapsulé. Son code (PHP, JS, CSS) est regroupé au même endroit, ce qui facilite les mises à jour et le débogage.

H3: Un contrôle total sur le design et la structure

Avec les blocs personnalisés, vous êtes l'architecte du design system. Vous pouvez définir précisément les options disponibles pour chaque bloc, en vous assurant que le client respecte la charte graphique. Couleurs, espacements, typographies... tout peut être prédéfini. Cela évite les dérives de design et garantit une cohérence visuelle sur l'ensemble du site, tout en offrant une flexibilité contrôlée à l'éditeur de contenu.

Les prérequis techniques pour se lancer

La création de blocs Gutenberg modernes s'appuie sur des technologies web actuelles. N'ayez pas peur, la courbe d'apprentissage est plus douce qu'il n'y paraît, surtout avec les outils disponibles aujourd'hui.

Connaissances de base : HTML5, CSS3 (et idéalement un préprocesseur comme SASS), et un peu de PHP pour l'intégration à WordPress.
JavaScript moderne (ESNext) : Comprendre les concepts comme les modules, les fonctions fléchées, et les promesses est crucial.
React.js : Gutenberg est construit avec React. Vous n'avez pas besoin d'être un expert, mais vous devez comprendre les bases : les composants, les props, le state et le JSX.
Environnement de développement : Node.js et un gestionnaire de paquets (npm ou yarn) installés sur votre machine. C'est indispensable pour gérer les dépendances et compiler votre code.

L'écosystème WordPress fournit des outils formidables qui s'occupent de toute la configuration complexe (Webpack, Babel), vous permettant de vous concentrer sur la création du bloc lui-même.

Anatomie d'un bloc Gutenberg

Un bloc est essentiellement un plugin WordPress miniature. Il est composé de plusieurs fichiers clés qui travaillent de concert.

H3: Le fichier `block.json` : Le manifeste de votre bloc

C'est le cerveau de votre bloc. Ce fichier déclaratif centralise toutes les métadonnées et indique à WordPress comment gérer votre bloc. C'est la norme depuis WordPress 5.8 et c'est une pratique essentielle.

Voici les propriétés les plus importantes :

name: Un identifiant unique pour votre bloc, sous la forme namespace/nom-du-bloc (ex: maevo/testimonial).
title: Le nom lisible qui apparaît dans l'éditeur.
category: La catégorie où le bloc apparaîtra (ex: text, media, design).
icon: L'icône du bloc (vous pouvez utiliser les Dashicons de WordPress ou un SVG personnalisé).
attributes: Un objet qui définit la structure des données de votre bloc. C'est ici que vous déclarez ce que le bloc doit sauvegarder (le texte du témoignage, le nom de l'auteur, etc.).
editorScript: Le chemin vers votre fichier JavaScript principal pour l'éditeur.
style et editorStyle: Les chemins vers vos fichiers CSS pour le front-end et pour l'éditeur, respectivement.

H3: Les fonctions `edit()` et `save()` : Le cœur de votre bloc

Votre code JavaScript s'articule principalement autour de deux composants React :

La fonction edit() : Elle définit ce que l'administrateur voit dans l'éditeur de blocs. C'est ici que vous construisez l'interface d'édition, en utilisant des composants React fournis par WordPress (RichText, InspectorControls, etc.) pour permettre à l'utilisateur de modifier le contenu du bloc.
La fonction save() : Elle définit le rendu HTML final du bloc, tel qu'il sera sauvegardé dans la base de données et affiché sur le site public. Cette fonction reçoit les attributes en paramètre et retourne le JSX correspondant au balisage HTML que vous souhaitez générer.

Guide pratique : Créer votre premier bloc "Témoignage Client"

Passons à la pratique. Nous allons créer un bloc simple mais utile qui affichera un témoignage avec une citation, le nom de l'auteur et son poste.

H3: Étape 1 : Mettre en place l'environnement

L'équipe WordPress a créé un outil en ligne de commande fantastique pour démarrer. Ouvrez votre terminal, naviguez jusqu'au dossier wp-content/plugins de votre installation WordPress locale, et lancez la commande suivante :

npx @wordpress/create-block testimonial-block

Cette commande va créer un nouveau dossier testimonial-block contenant un plugin WordPress fonctionnel avec toute la structure nécessaire pour un premier bloc. Activez ce plugin depuis votre administration WordPress.

H3: Étape 2 : Configurer `block.json`

Ouvrez le fichier src/block.json. Modifions-le pour notre bloc de témoignage :

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "maevo/testimonial-block",
  "version": "0.1.0",
  "title": "Témoignage Client",
  "category": "text",
  "icon": "format-quote",
  "description": "Affiche un témoignage client avec une citation, un auteur et son poste.",
  "attributes": {
    "quote": {
      "type": "string",
      "source": "html",
      "selector": "blockquote"
    },
    "author": {
      "type": "string",
      "source": "text",
      "selector": ".author"
    },
    "role": {
      "type": "string",
      "source": "text",
      "selector": ".role"
    }
  },
  "supports": {
    "html": false
  },
  "textdomain": "testimonial-block",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

Nous avons défini trois attributs : quote, author, et role, en précisant comment les extraire du HTML sauvegardé (via source et selector).

H3: Étape 3 : Développer la vue d'édition (`src/edit.js`)

Modifiez le fichier src/edit.js pour créer les champs d'édition :

import { useBlockProps, RichText } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit({ attributes, setAttributes }) {
  const blockProps = useBlockProps();
  const { quote, author, role } = attributes;

  return (
    <div {...blockProps}>
      <RichText
        tagName="blockquote"
        value={quote}
        onChange={(newQuote) => setAttributes({ quote: newQuote })}
        placeholder="Saisir le témoignage ici..."
      />
      <div className="author-info">
        <RichText
          tagName="p"
          className="author"
          value={author}
          onChange={(newAuthor) => setAttributes({ author: newAuthor })}
          placeholder="Nom de l'auteur"
        />
        <RichText
          tagName="p"
          className="role"
          value={role}
          onChange={(newRole) => setAttributes({ role: newRole })}
          placeholder="Poste de l'auteur"
        />
      </div>
    </div>
  );
}

Nous utilisons le composant RichText de WordPress, qui offre des fonctionnalités d'édition de texte enrichi.

H3: Étape 4 : Définir le rendu final (`src/save.js`)

Maintenant, modifions src/save.js pour le rendu sur le front-end :

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save({ attributes }) {
  const blockProps = useBlockProps.save();
  const { quote, author, role } = attributes;

  return (
    <div {...blockProps}>
      <RichText.Content tagName="blockquote" value={quote} />
      <div className="author-info">
        <RichText.Content tagName="p" className="author" value={author} />
        <RichText.Content tagName="p" className="role" value={role} />
      </div>
    </div>
  );
}

Notez l'utilisation de RichText.Content, qui est la version en lecture seule pour l'affichage public.

H3: Étape 5 : Compiler et tester

Dans votre terminal, à la racine du dossier de votre plugin, lancez npm start. Cela va compiler votre code et rester en attente de modifications. Allez maintenant dans l'éditeur de WordPress, ajoutez un nouveau bloc et cherchez "Témoignage Client". Vous devriez voir votre bloc ! Remplissez les champs, enregistrez, et admirez le résultat sur le front-end.

Conclusion : Prenez le contrôle de votre expérience WordPress

La création de blocs Gutenberg personnalisés est bien plus qu'une compétence technique ; c'est un changement de paradigme dans la façon de concevoir et de développer des sites WordPress. En maîtrisant cet outil, vous vous affranchissez des contraintes des thèmes et des page builders pour devenir un véritable architecte de l'expérience de contenu.

Vous offrez à vos clients des sites plus performants, plus sécurisés, plus faciles à administrer et parfaitement alignés avec leur identité de marque. C'est la promesse d'un travail plus professionnel et d'une valeur ajoutée indéniable.

Chez Maevo, l'innovation digitale est notre moteur. Nous intégrons cette philosophie de développement sur mesure dans chacun de nos projets pour livrer des plateformes web qui ne sont pas seulement belles, mais aussi intelligentes et durables. Si vous souhaitez construire un site WordPress qui repousse les limites du standard, contactez notre équipe d'experts. Ensemble, nous pouvons bâtir l'expérience digitale que votre projet mérite.