edit (fonction de bloc)

Définition : La fonction edit décrit l’interface qu’un bloc présente dans l’éditeur WordPress. Elle affiche les contenus modifiables, les contrôles et les interactions qui mettent à jour les attributs.

Comprendre et utiliser

À quoi cela sert ?

Elle définit l’expérience du rédacteur, pas nécessairement le HTML public. Elle transforme les valeurs courantes du bloc en composants éditables et déclenche leurs changements via setAttributes().

Comment cela fonctionne ?

Le composant reçoit attributes, setAttributes et d’autres propriétés fournies par l’éditeur. Il s’exécute dans le cycle d’affichage de l’interface JavaScript.

Dans quel contexte l’utiliser ?

À utiliser pour concevoir une édition directe : champ texte, options du panneau latéral, sélection de média ou zone de blocs internes.

Cas concret : ATOOLPHA

Un bloc « Citation technique » permet de modifier un texte court dans la zone centrale, puis de l’enregistrer comme attribut.

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 { createElement } = wp.element;
const { TextControl } = wp.components;
function EditQuote( { attributes, setAttributes } ) {
    return createElement( TextControl, {
        label: 'Citation technique',
        value: attributes.quote || '',
        onChange: ( quote ) => setAttributes( { quote } ),
    } );
}

Décryptage de l’exemple

L’événement onChange renseigne l’attribut quote. Cette fonction doit être déclarée dans les réglages d’un bloc qui prévoit cet attribut, puis raccordée à une fonction save ou à un rendu dynamique.

Résultat attendu

La saisie change la valeur courante dans l’éditeur ; l’article n’est réellement conservé qu’au moment où l’utilisateur le sauvegarde.

Atelier pratique de vérification

Brancher un TextControl à setAttributes() et saisir trois valeurs successives sans enregistrer le brouillon. Contrôler l’affichage immédiat, puis fermer et rouvrir la page sans sauvegarde. Refaire après sauvegarde pour distinguer état local d’édition, brouillon WordPress et contenu réellement persistant.

Précautions et limites

Ne pas effectuer de requêtes serveur directement à chaque frappe sans nécessité. Distinguer la modification locale de l’attribut de sa persistance définitive et traiter les valeurs manquantes.

Contrôle avant intégration dans un plugin

Éviter les effets secondaires dans les événements de saisie et différer les traitements coûteux. Après enregistrement du post, rouvrir l’éditeur pour distinguer la valeur affichée provisoirement et la valeur réellement persistée.

À ne pas confondre

edit détermine l’interface d’édition ; save construit le HTML enregistré pour un bloc statique ; render_callback produit la sortie serveur d’un bloc dynamique.