Créateur de thèmes WordPress :: Formateur :: Web Designer

Claude Code et Gutenberg : l’IA lit vos modèles FSE

Publié le : 

Modifié le : 

Par : 

Depuis quelques semaines, je fais évoluer mes thèmes FSE directement depuis Claude Code, sans ouvrir l’éditeur visuel. Ce n’est pas un tour de passe-passe — c’est une conséquence directe de l’architecture de Gutenberg.

Claude Code lit tes blocs WordPress

Une découverte par l’usage

Je travaillais sur la restructuration d’un modèle de page pour un projet client. J’ai demandé à Claude de renommer des classes, de déplacer un groupe de blocs, de mettre à jour les règles CSS correspondantes.

Il l’a fait. Correctement. Sans se perdre dans la structure.

Au début, j’ai pensé que c’était lié à la précision de mes instructions. Mais en continuant à travailler ainsi — restructurer des groupes imbriqués, renommer des template parts, ajuster des patterns — j’ai compris qu’il y avait une raison structurelle.

Gutenberg stocke tout dans des commentaires HTML

C’est la clé. Un fichier de modèle FSE (.html) ressemble à ceci :

<!-- wp:group {"className":"hero-section","layout":{"type":"constrained"}} -->
<div class="wp-block-group hero-section">
    <!-- wp:heading {"level":1,"className":"hero-title"} -->
    <h1 class="wp-block-heading hero-title">Titre</h1>
    <!-- /wp:heading -->
</div>
<!-- /wp:group -->

Chaque bloc est délimité par des commentaires HTML qui encodent :

  • Le nom du bloc — y compris les blocs sur mesure (mon-plugin/hero)
  • Les classes CSS appliquées
  • Les options de groupe : layout, alignement, espacement
  • Les attributs imbriqués : typographie, couleurs, liens

C’est du texte. Structuré, commenté, hiérarchisé. Un format que n’importe quel LLM peut parcourir sans couche d’abstraction supplémentaire.

Ce que Claude voit réellement

Un LLM comme Claude peut lire l’intégralité d’un modèle FSE et en extraire :

  • La hiérarchie des blocs (qui est dans quoi)
  • Les classes CSS associées à chaque élément
  • Les noms de template parts appelés (<!-- wp:template-part {"slug":"header"} -->)
  • Les patterns intégrés et leurs attributs
  • Les références aux styles globaux

Il sait où il est dans l’arbre. Il sait ce qu’il touche. Il peut intervenir chirurgicalement sur un groupe précis sans altérer le reste.

Ce que ça change dans le workflow

Voici ce que j’utilise concrètement depuis Claude Code sur mes projets FSE :

  • Restructurer des groupes imbriqués — « déplace ce groupe à l’intérieur de ce conteneur, et préserve les classes »
  • Renommer des classes dans tout un fichier de template ou un pattern
  • Déplacer des blocs en préservant la structure et l’indentation
  • Mettre à jour les CSS en cohérence avec les changements de structure

Ce n’est pas un remplacement de l’éditeur visuel. C’est un complément pour les opérations répétitives, structurelles, ou globales — celles qui sont fastidieuses à faire bloc par bloc dans l’interface.

Pour les projets avec beaucoup de modèles ou de patterns, le gain de temps est réel.

Une convergence architecturale

Gutenberg n’a pas été conçu pour les IA. Mais son choix technique — tout encoder dans des commentaires HTML lisibles — en fait, presque par accident, un format machine-friendly.

Comparez avec un page builder classique qui stocke sa configuration dans du JSON sérialisé en base de données, ou dans des shortcodes opaques. Impossible pour un LLM de raisonner sur la structure sans outils supplémentaires.

Avec FSE, la structure est dans les fichiers. Elle est lisible. Elle est versionnable avec Git. Et elle est navigable par un agent IA.

C’est exactement ce dont je parlais dans mon article sur le développeur WordPress orchestrateur : comprendre l’architecture des blocs, c’est la condition pour orchestrer avec intention. Les développeurs FSE qui maîtrisent cette structure ont une longueur d’avance naturelle pour travailler avec les agents IA.

Conclusion

Si vous travaillez sur des thèmes FSE, l’architecture de Gutenberg est une ressource — pas seulement pour l’éditeur visuel, mais pour tout agent IA capable de lire du texte structuré. Claude Code, en particulier, s’y retrouve très bien.

La prochaine étape ? Aller plus loin : laisser un agent gérer des migrations de patterns, des refactorisations globales de design system, des synchronisations entre modèles. C’est déjà possible.

Vous travaillez sur des thèmes FSE et vous voulez explorer cette approche ? Contactez-moi — je construis des thèmes FSE sur mesure et j’accompagne les agences dans la transition FSE avec les outils IA.

Article publié initialement sur LinkedIn