Chapitre 3.1 — Les blocs en profondeur

⏱️ TL;DR — Un bloc a trois facettes : ce que voit l’utilisateur (le rendu), ses attributs (ses réglages : texte, couleur, alignement…), et sa représentation stockée — car un contenu Gutenberg est enregistré comme du HTML annoté de commentaires (<!-- wp:… -->). Comprendre cette « sérialisation en HTML » est essentiel : c’est ce que vous manipulerez en headless (Partie 9) et ce que vous produirez en codant des blocs (Partie 8).

🎯 Objectifs

• Décomposer un bloc en rendu / attributs / stockage.
• Lire la sérialisation d’un contenu en blocs (HTML + commentaires).
• Distinguer blocs statiques et dynamiques (aperçu).
• Comprendre alignements, réglages et blocs conteneurs.

1. Les trois facettes d’un bloc

• Le rendu éditeur : l’aperçu manipulable dans Gutenberg.
• Les attributs : les données du bloc (le texte d’un paragraphe, l’URL d’une image, l’alignement, la couleur). En Partie 8, vous les déclarerez explicitement.
• Le stockage : quand vous enregistrez, WordPress sérialise le document en une chaîne HTML où chaque bloc est délimité par des commentaires spéciaux.

2. La sérialisation : du HTML annoté

Un contenu Gutenberg n’est pas stocké en JSON dans une table de blocs : il est stocké comme une seule chaîne HTML (dans la colonne post_content), où les blocs sont balisés par des commentaires wp: :

<!-- wp:heading -->
<h2 class="wp-block-heading">Mon titre</h2>
<!-- /wp:heading -->
 
<!-- wp:paragraph -->
<p>Un paragraphe d'exemple.</p>
<!-- /wp:paragraph -->
 
<!-- wp:image {"id":42,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
  <img src="…/photo.jpg" alt="" class="wp-image-42"/>
</figure>
<!-- /wp:image -->

Points clés :

• Chaque bloc est encadré par wp:nom … /wp:nom.
• Les attributs non déductibles du HTML sont écrits en JSON dans le commentaire d’ouverture (ex. {"id":42,"sizeSlug":"large"}).
• Le reste (le texte, les classes) vit dans le HTML lui-même.

💡 Pour un dev React — C’est un choix d’architecture malin : le contenu reste du HTML valide et lisible (rétrocompatible, indexable, affichable même sans Gutenberg), et les commentaires wp: sont des métadonnées que l’éditeur relit pour reconstruire l’arbre de blocs (le « parse »). En headless, la REST API vous renvoie ce content.rendered (HTML final) — ou, si besoin, le contenu brut à parser vous-même. Retenez : le HTML est la source de vérité, les commentaires sont l’index.

3. Blocs statiques vs dynamiques

Un bloc dynamique ne stocke qu’un marqueur du genre :

<!-- wp:latest-posts {"postsToShow":5} /-->

…et WordPress exécute une fonction PHP à chaque affichage pour produire le HTML à jour. Vous coderez les deux en Partie 8 ; retenez la distinction : statique = figé au save, dynamique = rendu à la volée.

⚠️ Piège — Un bloc statique dont on change le code de rendu (save) après coup provoque une « invalidation de bloc » : le HTML stocké ne correspond plus à ce que le code produit, Gutenberg affiche un avertissement. Les blocs dynamiques n’ont pas ce problème (le rendu vient toujours du PHP courant). C’est une raison d’aller vers le dynamique pour du contenu amené à évoluer (Partie 8).

4. Attributs, alignements, réglages

Dans l’éditeur, un bloc sélectionné expose :

• une barre d’outils (formatage, alignement du bloc) ;
• un panneau latéral (Réglages + Styles) : couleurs, typographie, dimensions (marge/padding), bordures, réglages avancés (classe CSS, ancre HTML).

Les alignements notables : aucun, large (déborde du conteneur de contenu) et pleine largeur (full) — ces deux derniers ne fonctionnent que si le thème les supporte (déclaré dans theme.json, ch. 3.4). Chaque réglage correspond à un attribut de bloc.

5. Blocs conteneurs (composition)

Certains blocs en contiennent d’autres : Groupe, Colonnes, Couverture, Ligne/Pile (Row/Stack). Ils permettent la mise en page (fond, disposition, espacement d’un ensemble de blocs). C’est l’imbrication — techniquement, des InnerBlocks (Partie 8). La vue en liste (arborescence) est indispensable pour naviguer dans des structures imbriquées.

✏️ Exercices

1. Décrivez les trois facettes d’un bloc (rendu / attributs / stockage).
2. Où sont stockés les attributs « non visibles » d’un bloc (comme l’id d’une image) ?
3. Un bloc « Derniers articles » affiche toujours les articles récents, même publiés après l’enregistrement de la page. Est-il statique ou dynamique ? Pourquoi ?

🧠 Quiz de révision

Chapitre suivant : Compositions, motifs & blocs synchronisés.