Tout commence parfois par un besoin simple qu’on ne trouve pas tout fait. En développant des thèmes WordPress FSE pour mes clients, je me suis régulièrement retrouvé à vouloir donner à l’éditeur la possibilité d’appliquer un format inline personnalisé sur du texte, une couleur spécifique, une classe CSS, un style particulier, sans sortir du bloc paragraphe natif de Gutenberg.
Résultat : un mini plugin. Le principe est simple, un filtre WordPress pour enregistrer des boutons de formatage dans la toolbar de l’éditeur de blocs. Vous ajoutez un add_filter, vous écrivez le CSS qui va avec, et vos clients peuvent appliquer le style depuis l’éditeur en un clic.
J’ai posté l’idée sur LinkedIn pour voir si ça intéressait des gens. La réponse a été claire : oui.
Pourquoi pas une solution existante ?
La question méritait d’être posée avant de coder. Il existe des plugins qui permettent de créer des styles de blocs, d’autres qui gèrent des variations. Mais aucun ne répondait exactement au besoin : enregistrer un format inline, dans la toolbar native, via un simple filtre PHP. Sans interface d’administration, sans CPT dédié, sans overhead. Un mécanisme léger, transparent, qui s’intègre dans le workflow développeur existant.
Ce post, c’est le point de départ de JuZ Rich Text Extender
Ce petit sondage LinkedIn a décidé de la suite. J’ai formalisé le code, soigné la documentation et publié le plugin sur WordPress.org.
JuZ Rich Text Extender permet aujourd’hui aux développeurs d’enregistrer des formats inline personnalisés dans la toolbar Gutenberg via un simple filtre WordPress, tag HTML, classe CSS, icône Dashicon ou SVG. Avec en prime un système de validation intelligente de l’imbrication HTML : les boutons sont automatiquement désactivés quand leur usage produit du HTML invalide.
Disponible gratuitement sur WordPress.org, sous licence GPL-2.0+.
Ce que JuZ Rich Text Extender permet concrètement
Quelques exemples de ce qu’on peut faire avec un seul add_filter :
- Couleur de texte personnalisée : un bouton qui applique une classe CSS ou un style inline, sans toucher à la palette de couleurs WordPress.
- Mise en exergue typographique : un span avec une classe personnalisée pour styler les phrases importantes différemment du texte courant.
- Balise sémantique : envelopper une sélection dans un mark, un abbr, ou n’importe quelle balise HTML valide.
- Icône inline : injecter un SVG ou un Dashicon directement dans le flux de texte.
La validation de l’imbrication HTML est gérée automatiquement : si l’application d’un format produit du HTML invalide dans le contexte actuel, le bouton est désactivé. Les clients ne peuvent pas casser le markup, même en essayant.
L’intégration côté développeur
L’intégration dans un thème prend cinq minutes. On enregistre les formats dans le filtre juz_rich_text_extender_formats, avec pour chaque bouton : l’identifiant, le tag HTML cible, la classe CSS, et l’icône. Le CSS est à écrire côté thème – le plugin ne force aucun style par défaut.
C’est volontairement minimaliste. JuZ Rich Text Extender résout un problème précis sans chercher à en résoudre d’autres.
Ce post est tiré d’un message LinkedIn publié avant la sortie du plugin, le point de départ de l’aventure JuZ Rich Text Extender.