Éditeur de blocs (Gutenberg)

Définition : L’éditeur de blocs est l’interface de création de contenus WordPress qui assemble textes, médias et composants réutilisables. Il permet de structurer une page sans coder directement sa mise en page.

Comprendre et utiliser

À quoi cela sert ?

Il rend la composition d’une page plus prévisible : chaque zone devient un objet identifiable, configurable et éventuellement extensible par un plugin. L’auteur peut réorganiser la page en conservant les unités de contenu.

Comment cela fonctionne ?

Le contenu est représenté par des blocs et leurs attributs. WordPress enregistre une sérialisation dans le contenu, puis restitue le rendu des blocs statiques ou demande au serveur de produire celui des blocs dynamiques.

Dans quel contexte l’utiliser ?

Employer l’éditeur pour des pages éditoriales, des fiches de services ou une page d’accueil administrable. Un site peut toutefois employer des modèles classiques tout en offrant l’éditeur de blocs pour les publications.

Cas concret : ATOOLPHA

Pour ATOOLPHA, insérer un bloc Titre, un Paragraphe et un Groupe puis déplacer le Groupe sans réécrire l’article ni modifier le code du thème.

Exemple de sérialisation commenté

Exemple de sérialisation HTML : ne pas l’insérer tel quel dans une page publique.

<!-- Exemple de contenu sérialisé, pas un script à exécuter. -->
<!-- wp:paragraph -->
<p>Bienvenue dans les ressources ATOOLPHA.</p>
<!-- /wp:paragraph -->

Décryptage de l’exemple

Les commentaires wp: encadrent ici un bloc Paragraphe. Ce balisage fait partie du format de stockage de WordPress ; ce n’est ni du JavaScript ni un commentaire destiné aux visiteurs.

Résultat attendu

Après insertion et sauvegarde, le paragraphe apparaît au rendu public et demeure modifiable comme un bloc distinct dans l’administration.

Atelier pratique de vérification

Créer un brouillon contenant trois blocs natifs et noter l’ordre visible dans l’éditeur. Déplacer le deuxième bloc avant le premier, enregistrer, puis rouvrir le brouillon. Contrôler que la structure modifiée reste présente et observer en mode éditeur de code les délimiteurs utilisés. Tester aussi la navigation au clavier.

Précautions et limites

Ne pas remplacer aveuglément les délimiteurs par du HTML arbitraire : le code enregistré doit rester compatible avec la validation des blocs. Préserver l’accessibilité et la hiérarchie des titres.

Contrôle avant intégration dans un plugin

Contrôler la lisibilité des blocs sur smartphone et au clavier, puis vérifier que le contenu reste compréhensible si les styles du thème ne se chargent pas. L’éditeur doit aussi restituer correctement un article ancien après mise à jour du site.

À ne pas confondre

L’éditeur de blocs est une interface d’édition ; l’édition complète du site concerne également les templates et structures d’un thème à blocs.

Diagnostic et dépannage avancés

Si un bloc signale un contenu invalide après modification manuelle, comparer son HTML sauvegardé au rendu attendu par sa définition actuelle avant de supprimer quoi que ce soit.