@wordpress/block-editor

Définition : @wordpress/block-editor est le paquet JavaScript qui fournit des composants, hooks et outils d’interface pour éditer les blocs. Il comprend notamment RichText, InnerBlocks et useBlockProps pour une édition structurée.

Comprendre et utiliser

À quoi cela sert ?

Il normalise l’interaction avec l’éditeur : sélection de blocs, outils de contrôle, zones de contenu imbriqué et propriétés des éléments d’enveloppe.

Comment cela fonctionne ?

Ses composants s’utilisent dans la fonction edit d’un bloc. Leurs propriétés dépendent de l’état de l’éditeur et doivent être intégrées au cycle de rendu React/WordPress.

Dans quel contexte l’utiliser ?

Le paquet est pertinent pour créer une interface d’édition personnalisée, pas pour exécuter des traitements serveur ni pour remplacer les styles du thème.

Cas concret : ATOOLPHA

Une zone « Ressource utile » ATOOLPHA peut employer RichText pour modifier une description et InspectorControls pour choisir une présentation.

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 { useBlockProps, RichText } = wp.blockEditor;
const { createElement } = wp.element;
function EditResource( { attributes, setAttributes } ) {
    return createElement( RichText, {
        ...useBlockProps(),
        tagName: 'p',
        value: attributes.text,
        onChange: ( text ) => setAttributes( { text } ),
    } );
}

Décryptage de l’exemple

La fonction est un composant d’édition, à raccorder à edit d’un type enregistré possédant l’attribut text. wp.blockEditor représente l’export global du paquet correctement chargé.

Résultat attendu

Dans l’éditeur, le paragraphe devient directement modifiable. La persistance définitive dépendra de la déclaration de l’attribut et de save ou du rendu dynamique.

Atelier pratique de vérification

Créer un composant RichText dans un bloc de test et mettre à jour un attribut texte. Enregistrer puis rouvrir le brouillon pour vérifier la persistance. Retirer temporairement le raccordement onChange et comparer le comportement. Identifier si l’absence de mise à jour provient de l’interface ou de la sérialisation.

Précautions et limites

Ne pas employer ce composant dans le contenu public importé : les composants de l’éditeur nécessitent le runtime et la gestion d’état WordPress appropriés.

Contrôle avant intégration dans un plugin

Contrôler les styles et la navigation au clavier dans l’éditeur actuel, y compris lorsqu’il fonctionne en iframe. La persistance d’un attribut dépend de sa définition et non du simple affichage correct du composant.

À ne pas confondre

@wordpress/block-editor est spécialisé dans l’édition de blocs ; @wordpress/components fournit des contrôles d’interface réutilisables au-delà de l’éditeur.