« Pourquoi je ne peux pas juste surligner un mot dans mon paragraphe ? » — c’est la question qui revient le plus souvent de clients habitués à un traitement de texte classique. Gutenberg gère nativement le gras, l’italique et le lien, mais rien n’empêche d’ajouter d’autres formats inline : surlignage, abréviation avec info-bulle, texte barré avec une couleur spécifique. La fonction registerFormatType, du paquet @wordpress/rich-text, sert exactement à ça.
La différence entre un format et un bloc
Un format s’applique à une portion de texte sélectionnée à l’intérieur d’un champ RichText, pas au bloc dans son ensemble. Techniquement, il correspond à une balise HTML inline (ou à un attribut sur une balise existante) insérée autour de la sélection, un peu comme le fait <strong> pour le gras. Une fois enregistré, un format devient disponible dans tous les champs RichText du site, y compris ceux de blocs tiers, ce qui en fait un outil transversal plutôt qu’une fonctionnalité propre à un seul bloc.
Recette : un format de surlignage
import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';
const name = 'mon-projet/surlignage';
registerFormatType( name, {
title: 'Surlignage',
tagName: 'mark',
className: null,
edit( { isActive, value, onChange } ) {
return (
<RichTextToolbarButton
icon="admin-customizer"
title="Surlignage"
onClick={ () => {
onChange( toggleFormat( value, { type: name } ) );
} }
isActive={ isActive }
/>
);
},
} );La balise <mark> est native en HTML5 pour le surlignage : pas besoin d’inventer une classe CSS pour ce cas précis. toggleFormat applique ou retire le format sur la sélection courante, en préservant la position du curseur — c’est ce comportement qui rend l’expérience naturelle pour l’utilisateur.
Variante : une abréviation avec info-bulle
Pour un format qui porte un attribut supplémentaire, comme un titre d’info-bulle sur une abréviation, la déclaration se complète d’un objet attributes :
registerFormatType( 'mon-projet/abreviation', {
title: 'Abréviation',
tagName: 'abbr',
className: null,
attributes: {
title: 'title',
},
edit( { isActive, value, onChange } ) {
return (
<RichTextToolbarButton
icon="editor-help"
title="Abréviation"
onClick={ () => {
const titre = window.prompt( 'Signification :' );
if ( ! titre ) return;
onChange(
toggleFormat( value, {
type: 'mon-projet/abreviation',
attributes: { title: titre },
} )
);
} }
isActive={ isActive }
/>
);
},
} );L’objet attributes mappe un nom d’attribut logique (title) vers l’attribut HTML réellement écrit sur la balise <abbr>. Un window.prompt reste rudimentaire pour la démonstration ; en production, une petite popover avec un champ texte offre une meilleure expérience.
Ce que ça ne couvre pas
Un format personnalisé reste limité à une portion de texte inline. Dès que le besoin dépasse ce cadre — insérer un élément avec sa propre structure, gérer plusieurs lignes, ou stocker une donnée complexe non réductible à un attribut de balise — c’est un bloc complet qu’il faut créer, pas un format supplémentaire.
- Un format ne peut pas contenir d’autres blocs.
- Il ne dispose pas de son propre panneau latéral d’inspecteur.
- Il doit rester réversible : le retirer ne doit laisser aucune trace dans le contenu.
Retirer proprement un format en cours de projet
Si un format cesse d’être utile, unregisterFormatType( name ) le retire de la barre d’outils, mais le HTML déjà écrit dans les articles existants garde la balise correspondante. Il faut alors migrer le contenu existant, par exemple avec une recherche-remplacement ciblée, sous peine de laisser des balises orphelines dans les articles publiés.
Sur nos projets, un format qui n’a pas d’icône Dashicons adaptée mérite un SVG personnalisé plutôt qu’une icône approximative : l’utilisateur associe l’icône au résultat visuel, une icône mal choisie crée de la confusion durable.
En résumé
registerFormatType reste sous-utilisé alors qu’il répond précisément aux demandes de mise en forme fine que les blocs seuls ne couvrent pas. Une poignée de lignes de JavaScript suffit à doter tout le site d’un format cohérent, disponible partout où un champ RichText existe.
