Un cabinet de conseil en cybersécurité publiait des articles techniques truffés de termes spécialisés (« phishing », « zero day », « surface d’attaque ») que ses lecteurs non experts ne maîtrisaient pas tous. La première solution envisagée par le rédacteur consistait à créer un lien hypertexte classique vers une page de glossaire à chaque occurrence, mais ce choix multipliait les liens sortants du flux de lecture principal et obligeait le lecteur à quitter l’article pour comprendre un simple mot, une expérience jugée trop lourde pour un besoin somme toute ponctuel.
Le besoin réel n’était pas un lien de navigation, mais une infobulle contextuelle affichée au survol, sans quitter la page. C’est exactement ce que permet un format personnalisé de texte enrichi enregistré via registerFormatType, appliqué à une sélection de texte à l’intérieur d’un bloc, au même titre que le gras ou l’italique natifs de l’éditeur.
Le choix de la balise porteuse
Plutôt qu’un <a href> qui suggère implicitement une navigation, la balise HTML <abbr>, conçue précisément pour porter une explication contextuelle via son attribut title, correspond bien mieux à l’intention réelle : afficher un survol explicatif natif du navigateur, sans dépendance JavaScript supplémentaire côté front, tout en restant sémantiquement correcte pour les lecteurs d’écran.
Enregistrer le format
import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
registerFormatType( 'cabinet/glossaire', {
title: __( 'Terme de glossaire', 'cabinet' ),
tagName: 'abbr',
className: 'terme-glossaire',
attributes: {
title: 'title',
},
edit( { value, onChange, isActive } ) {
return (
<RichTextToolbarButton
icon="editor-help"
title={ __( 'Terme de glossaire', 'cabinet' ) }
isActive={ isActive }
onClick={ () => {
const definition = window.prompt(
__( 'Définition à afficher au survol', 'cabinet' )
);
if ( ! definition ) return;
onChange(
toggleFormat( value, {
type: 'cabinet/glossaire',
attributes: { title: definition },
} )
);
} }
/>
);
},
} );
Ce que produit le format sur le contenu final
Une fois appliqué sur le mot « phishing » avec une définition saisie, le format produit le balisage suivant, entièrement sérialisé au sein de l’attribut content du bloc de paragraphe englobant :
<p>Une attaque de <abbr class="terme-glossaire" title="Tentative d'obtenir des informations confidentielles en usurpant une identité de confiance">phishing</abbr> cible généralement...</p>Un choix d’ergonomie discutable à surveiller
La saisie de la définition via window.prompt() reste une solution rapide à mettre en œuvre, mais peu satisfaisante en matière d’expérience d’édition, en particulier pour des définitions longues ou nécessitant une mise en forme. Une évolution plus aboutie remplacerait ce prompt par un composant Popover du package @wordpress/components, avec un champ de texte multi-lignes plutôt qu’une simple boîte de dialogue native du navigateur.
- Un prompt natif convient pour un prototype rapide, jamais pour une mise en production à grande échelle.
- Un Popover avec TextareaControl offre une bien meilleure expérience pour des définitions de plusieurs phrases.
- Prévoir une valeur par défaut cohérente si le rédacteur annule la saisie sans renseigner de définition.
Centraliser les définitions plutôt que les ressaisir
Sur le projet du cabinet de conseil, ressaisir manuellement la même définition à chaque occurrence du terme dans des dizaines d’articles s’est vite révélé source d’incohérences. Une évolution ultérieure a remplacé la saisie libre par une liste déroulante alimentée par une requête à l’API REST vers un type de contenu personnalisé « Termes de glossaire », garantissant une définition unique et centralisée pour chaque terme, quel que soit l’article dans lequel il apparaît.
Un format de texte enrichi personnalisé gagne toujours à être pensé comme une brique réutilisable dans plusieurs articles, pas comme une simple mise en forme locale à un seul contenu : la centralisation de la donnée sous-jacente évite les divergences silencieuses au fil du temps.
Pour aller plus loin
Ce format personnalisé montre qu’un besoin en apparence anodin, une simple infobulle, gagne à être traité avec le même sérieux qu’un bloc complet : choix de la balise sémantique appropriée, expérience d’édition soignée, et réflexion sur la source de vérité de la donnée affichée. Le résultat, une fois généralisé à l’ensemble des articles du cabinet, a nettement réduit le nombre de questions envoyées au support concernant des termes techniques mal compris.
