RichText

Définition : RichText est le composant d’édition de texte enrichi du Block Editor. Il autorise la saisie et certains formats inline tout en maintenant une structure exploitable pour la sauvegarde du bloc.

Comprendre et utiliser

À quoi cela sert ?

Il offre une saisie plus proche du rendu final qu’un champ texte brut, notamment pour les liens, emphases et passages formatés dans une zone de contenu.

Comment cela fonctionne ?

RichText reçoit notamment tagName, value et onChange. Pour un bloc statique, la sortie save s’appuie généralement sur RichText.Content afin de conserver correctement le balisage.

Dans quel contexte l’utiliser ?

À employer quand le contenu doit autoriser une typographie inline. Pour une clé technique ou un code de référence, PlainText peut être plus adapté.

Cas concret : ATOOLPHA

Le bloc « Conseil » ATOOLPHA permet de mettre un mot en gras dans une définition sans obliger l’auteur à saisir des balises HTML.

Exemple de code commenté

Extrait documentaire : le contexte WordPress du plugin/éditeur et les dépendances décrites sont nécessaires ; ne pas coller dans le contenu d’une page.

const { RichText, useBlockProps } = wp.blockEditor;
const { createElement: h } = wp.element;
function EditAdvice( { attributes, setAttributes } ) {
    return h( RichText, {
        ...useBlockProps(),
        tagName: 'p',
        value: attributes.message || '',
        onChange: ( message ) => setAttributes( { message } ),
        placeholder: 'Rédiger le conseil…',
    } );
}

Décryptage de l’exemple

La fonction onChange met à jour message. Le système conserve le texte enrichi selon la déclaration d’attribut et la sortie de sauvegarde prévue.

Résultat attendu

Le rédacteur peut saisir un message formaté dans l’éditeur ; la publication conserve la représentation autorisée après sauvegarde.

Atelier pratique de vérification

Saisir un paragraphe RichText comprenant gras, lien et texte simple. Enregistrer, rouvrir et inspecter le HTML dans le contenu sauvegardé. Retirer un format autorisé dans une copie de travail, puis vérifier si les formats existants restent affichables sans écraser le texte original.

Précautions et limites

Ne pas injecter directement un HTML non filtré depuis une source externe. Les formats et la sérialisation doivent être compatibles avec les attributs et la stratégie de sortie.

Contrôle avant intégration dans un plugin

Tester les liens, le gras et les textes contenant des caractères spéciaux, puis réouvrir la publication. Un format rejeté doit être expliqué au rédacteur plutôt que supprimer silencieusement un passage important.

À ne pas confondre

RichText autorise du balisage inline ; PlainText traite une valeur textuelle sans mise en forme riche.

Diagnostic et dépannage avancés

Si des balises apparaissent comme texte, vérifier la source de l’attribut et le composant utilisé dans save pour restituer le contenu riche.

Notions associées

  • PlainText
  • Sources d’attributs de bloc
  • save (fonction de bloc)

Références officielles

Bouton retour en haut de la page