useBlockProps.save()

Définition : useBlockProps.save() fournit les propriétés d’enveloppe d’un bloc statique lors de la construction du HTML enregistré. Il conserve les classes et attributs nécessaires au fonctionnement des supports WordPress.

Comprendre et utiliser

À quoi cela sert ?

Ce mécanisme permet de garder une cohérence entre la déclaration des capacités du bloc et le balisage final présent dans la publication.

Comment cela fonctionne ?

L’appel se fait dans la fonction save, puis les propriétés sont déployées sur l’élément racine qui sera sérialisé. Il n’a pas vocation à gérer l’état interactif de l’éditeur.

Dans quel contexte l’utiliser ?

À utiliser pour tout bloc statique récent qui exploite les classes WordPress, l’alignement ou des supports de couleur et de typographie.

Cas concret : ATOOLPHA

Une boîte ATOOLPHA enregistre son texte dans une section dont les classes correspondent à ses options d’affichage.

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 } = wp.blockEditor;
const { createElement } = wp.element;
function SaveNotice( { attributes } ) {
    const props = useBlockProps.save( { className: 'atoolpha-notice' } );
    return createElement( 'section', props, attributes.text || '' );
}

Décryptage de l’exemple

Le bloc génère un élément section avec les classes nécessaires. Le texte vient des attributs, sans requête ni valeur aléatoire.

Résultat attendu

Lors de la sauvegarde, le HTML peut être conservé dans le contenu du post puis reconnu lors de sa réouverture.

Atelier pratique de vérification

Enregistrer un bloc statique muni de classes de support, puis comparer son HTML d’édition au HTML sauvegardé. Supprimer useBlockProps.save() dans une branche d’essai et vérifier l’impact sur les attributs d’enveloppe. Restaurer, recharger le front-end et contrôler les styles de couleur et d’espacement.

Précautions et limites

Un changement de l’élément racine après publication peut déclencher des invalidations. Conserver les anciens blocs dans les tests de compatibilité.

Contrôle avant intégration dans un plugin

Comparer les classes produites par la fonction save aux réglages autorisés du thème. Tester des contenus enregistrés avant une mise à jour afin de ne pas modifier silencieusement leur structure HTML persistante.

À ne pas confondre

useBlockProps.save() est destiné au HTML sauvegardé ; useBlockProps() prépare l’enveloppe visible pendant l’édition.

Diagnostic et dépannage avancés

Si une couleur fonctionne dans l’éditeur mais pas en public, vérifier la sortie de save, les classes générées et la disponibilité des styles du thème.