Composant RichText

Reconstruire, pour chaque nouveau bloc, tout le mécanisme d’un champ de texte qui accepte le gras, l’italique ou les liens serait un travail considérable et source d’incohérences d’un bloc à l’autre. WordPress fournit ce comportement clé en main via le composant RichText du paquet @wordpress/block-editor : il affiche un contenu HTML modifiable, gère automatiquement la barre de mise en forme flottante et synchronise sa valeur avec un attribut du bloc.

Fonctionnement dans WordPress

Le composant s’utilise avec une prop value (le HTML actuel) et onChange (la fonction appelée à chaque modification, qui met généralement à jour un attribut via setAttributes). La prop tagName détermine la balise HTML du conteneur final (p, h2, span…), et allowedFormats restreint, si besoin, les options de mise en forme proposées, par exemple pour n’autoriser que le gras sur un petit encart.

Exemple

import { RichText } from '@wordpress/block-editor';

<RichText
  tagName="p"
  value={ attributes.texte }
  onChange={ ( texte ) => setAttributes( { texte } ) }
  placeholder="Saisissez votre texte..."
/>

Bon à savoir

• La valeur gérée par RichText est du HTML, pas du texte brut : un attribut associé doit être déclaré avec la source html dans block.json pour être correctement extrait à la relecture du bloc.
• Contrairement à un simple champ <textarea>, RichText ne permet pas de saut de ligne par défaut sauf activation explicite, ce qui convient bien à un titre ou une légende courte.
• Le bloc Paragraphe natif de WordPress est lui-même construit avec ce composant, ce qui en fait la meilleure référence de code pour comprendre son usage réel.