TLDR: J’ai créé un outil en ligne de commande et un plugin Webpack qui convertissent des fichiers HTML en blocs Gutenberg instantanément. Résultat : tu peux créer des blocs personnalisés jusqu’à 5 fois plus vite.
👉 Tu peux le découvrir ici : HTML To Gutenberg
Il doit exister une meilleure façon de développer des blocs Gutenberg
J’adore Gutenberg. Et mes clients aussi.
Mais comme beaucoup de développeurs WordPress qui ont grandi avec ACF et les bonnes vieilles méthodes™ de création de sites, j’étais plutôt frileux à l’idée d’adopter Gutenberg.
Je veux dire… qui a déjà essayé de créer un site entier uniquement avec des blocs Gutenberg personnalisés ?
Pour chaque bloc, le process ressemble à ça :
- Écrire le HTML et le styliser jusqu’à ce que tout soit parfait.
- Générer un nouveau bloc avec
wp scaffold blockpour les blocs statiques ou l’excellent@wordpress/create-blockpour les blocs dynamiques. - Coller le HTML dans le fichier
render.php. - Le coller à nouveau dans
edit.js(la partie React). - "Reactifier" le code en remplaçant
class=parclassName=, en fermant correctement les balises, en adaptant les attributs pour React, etc. - Définir les attributs dans
block.json. - Ajouter les composants React pour modifier ces attributs dans l’éditeur (
<RichText />,<MediaUpload />, etc.). - Passer les valeurs au
render.phpet les insérer au bon endroit dans le HTML.
Qu'on s'entende : on ne fait pas décoller une fusée, mais c’est long, répétitif et source d’erreurs. Et à chaque fois que je me retrouve à refaire exactement la même chose pour la dixième fois, mon sixième sens de développeur me murmure à l'oreille :
Il doit y avoir une meilleure façon de faire les choses…
Créer des blocs Gutenberg dynamiques à partir d’un simple fichier HTML
Alors... j'en ai construit une.
Je te présente HTML to Gutenberg : un CLI et un plugin Webpack qui convertissent des fichiers HTML valides en blocs Gutenberg dynamiques, complets et 100 % fonctionnels — avec React côté éditeur, et un rendu en PHP ou Twig côté frontend.
Autrement dit : tu écris ton code une seule fois, et tu obtiens un bloc. Aussi simple que ça.
Plus besoin de copier-coller, de Reactifier ton code ou de réécrire le même boilerplate.
Juste du développement rapide, simple, et efficace ✨
Une vidéo vaut mille mots, alors voici une petite démo de l’outil en action :
Comment ça fonctionne
- Tu écris un fichier HTML qui représente le rendu final du bloc.
- Tu ajoutes quelques annotations dans le HTML pour définir les champs dynamiques (par ex.
data-attribute="title"). - Tu exécutes le CLI ou intègres le plugin Webpack dans ton thème ou plugin.
Et ça génère automatiquement :
- Le fichier block.json
- Un edit.js fonctionnel avec les bons composants React (
<RichText />,<MediaUpload />, etc.) - Un fichier de rendu PHP ou Twig (au choix)
- Le fichier
index.jspour enregistrer le bloc auprès de WordPress
Et voilà : ton fichier HTML est devenu un bloc Gutenberg dynamique, prêt à l’emploi dans l’éditeur WordPress 🎉
Pour le moment, l’outil prend en charge les attributs de type texte et image, mais aussi la définition de zones InnerBlocks et de templates via les balises personnalisées <blocks> et <block name="custom/child-block">.
Tu peux retrouver une doc plus complète sur la page GitHub du projet.
Pourquoi c’est un game changer pour les développeurs et les agences WordPress
Je suis convaincu que lorsqu’il est bien utilisé, Gutenberg offre l’une des meilleures expériences de création de contenu sur le marché — même face à des éditeurs modernes comme Framer ou Webflow.
Il offre un bon équilibre : assez de liberté pour les clients, tout en gardant le contrôle du rendu et de la structure pour les devs.
Mais côté développement, c’est encore trop lourd, répétitif, et propice aux bugs. Et même si des outils comme ACF Blocks existent, ils ne permettent pas une édition aussi fluide et intuitive que celle des blocs Gutenberg natifs.
Avec HTML to Gutenberg, tu peux :
- Créer des blocs natifs jusqu’à 5 fois plus vite
- Éviter la duplication de code
- Te concentrer sur le design et la fonctionnalité, pas sur le setup
- Versionner, partager et maintenir tes blocs facilement
Cet outil débloque de nouveaux workflows pour les équipes et les agences qui veulent gagner en productivité :
- Transforme les composants Tailwind UI en blocs éditables en quelques minutes
Tu prends un snippet Tailwind, tu ajoutes quelques annotations, et boom — un bloc 100 % éditable. - Crée ta propre bibliothèque de blocs réutilisables
Tu peux maintenant standardiser, documenter et réutiliser des blocs de qualité sur tous tes projets — le tout à partir de simples fichiers HTML. - Copier-coller des blocs de sites en sites
Comme les blocs ne sont que des fichiers HTML, les réutiliser sur différents projets n'a jamais été aussi facile.
Essayer cet outil
Le projet est disponible ici : jverneaut/html-to-gutenberg
Si tu l'utilises sur un projet, n'hésite pas à me donner ton retour. Ensemble, on peut rendre Gutenberg plus accessible et proposer à nos clients la meilleure expérience d'édition possible.
