L'éditeur de blocs

Module 4: Créer du contenu · Temps de lecture : 8 minutes

Objectif pédagogique : Après cette leçon, vous saurez construire une page avec des blocs et des compositions, et vous comprendrez le fonctionnement des brouillons, de la planification et des révisions.

Notions clés : bloc, réglages de bloc, barre d'outils, vue en liste, groupe, colonnes, composition, composition synchronisée, brouillon, privé, planification, révisions, prévisualisation

Tout est un bloc

Depuis WordPress 5.0 (fin 2018), vous créez du contenu dans l'éditeur de blocs (aussi appelé Gutenberg, du nom du projet). Une page est constituée de blocs distincts : un titre, un paragraphe, une image, un bouton, une liste, un tableau, une vidéo intégrée. Chaque bloc possède ses propres réglages. Vous pouvez placer les blocs les uns sous les autres, côte à côte (en colonnes) ou les uns dans les autres (dans un groupe).

Pourquoi des blocs ? Dans l'ancien éditeur, une page était une seule grande zone de texte. Pour obtenir deux colonnes ou un bouton, il fallait un créateur de page, des shortcodes ou du HTML. Avec les blocs, tout cela est possible directement dans WordPress, et le résultat est un HTML propre que le thème met en forme.

En coulisses, WordPress enregistre les blocs sous forme de HTML entouré de commentaires :

<!-- wp:heading -->
<h2 class="wp-block-heading">Horaires d'ouverture</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Nous sommes ouverts du mardi au samedi.</p>
<!-- /wp:paragraph -->

C'est utile à savoir : le contenu reste du HTML lisible, même si vous changez de thème par la suite ou si un bloc n'existe plus. Vous pouvez le constater en choisissant, pour un bloc, l'option « Modifier en HTML », ou dans l'éditeur de code (Ctrl+Shift+Alt+M).

L'éditeur en trois parties

1. Le canevas au centre : votre page telle qu'elle apparaîtra approximativement.
2. La barre d'outils au-dessus d'un bloc sélectionné : gras, italique, lien, alignement, et la conversion du bloc vers un autre type (un paragraphe devient une liste, une image devient une galerie).
3. La barre latérale à droite, avec deux onglets : Page (ou Article) pour les réglages de toute la page, et Bloc pour les réglages du bloc sélectionné, comme la couleur, l'espacement et la taille de police.

Deux outils qui facilitent grandement votre travail :

• Vue en liste (l'icône à trois traits en haut à gauche) : la structure de votre page sous forme d'arborescence. Elle vous permet de sélectionner précisément le bloc souhaité, même s'il se trouve dans un groupe à l'intérieur d'une colonne.
• Les commandes slash : tapez sur une ligne vide / suivi du nom d'un bloc (/titre, /bouton, /image) et appuyez sur Entrée.

Construire avec des groupes et des colonnes

Une bonne page a une structure claire. Pour cela, vous disposez de trois éléments de construction :

• Groupe : un cadre autour de quelques blocs, avec son propre arrière-plan ou espacement. Par exemple, un bloc coloré avec un titre, une phrase et un bouton.
• Colonnes : des blocs côte à côte. Sur un téléphone, ils s'affichent les uns sous les autres.
• Ligne et Pile : des variantes d'un groupe qui organisent les blocs horizontalement ou verticalement.

Utilisez les titres de manière appropriée : un seul H1 (le titre de la page, généralement généré par le thème lui-même), puis des H2 pour les chapitres et des H3 pour les sous-parties. Ne choisissez pas un titre en fonction de la taille de police ; cela se règle dans les réglages du bloc. Les lecteurs d'écran et les moteurs de recherche utilisent les titres pour comprendre la structure de la page (leçon 9.2).

Compositions : ne repartez pas de zéro à chaque fois

Une composition est un groupe de blocs prêt à l'emploi : un titre avec texte et image, un tableau de prix, trois colonnes avec des icônes. Vous les insérez via le bouton d'ajout (le signe plus), onglet Compositions. Votre thème en fournit souvent quelques-unes, et la bibliothèque de compositions de wordpress.org en propose des centaines.

Vous pouvez aussi créer vos propres compositions : sélectionnez quelques blocs, choisissez les trois points dans la barre d'outils puis Créer une composition. Vous choisissez alors si la composition est synchronisée :

• Non synchronisée : chaque fois que vous l'insérez, vous obtenez une copie indépendante. Si vous la modifiez, seule cette copie change. Pratique comme modèle.
• Synchronisée : partout où elle apparaît, elle est identique. Si vous la modifiez à un endroit, elle change partout. Pratique pour un bloc « Contact et horaires d'ouverture » présent sur dix pages. (Auparavant, on les appelait « blocs réutilisables ».)

Un piège : une composition synchronisée que vous modifiez « juste un peu » sur une page change aussi sur toutes les autres pages. Si vous souhaitez une modification à un seul endroit, transformez cette copie en groupe ordinaire (en la désolidarisant).

Enregistrer, publier et planifier

Une page possède un statut :

Utilisez Prévisualiser pour voir la page telle qu'un visiteur la verra, y compris sur mobile et tablette, avant de publier.

Révisions : remonter dans le temps

Chaque fois que vous enregistrez, WordPress conserve une révision : la version de ce moment précis. Dans la barre latérale, vous voyez au niveau de la page le nombre de révisions existantes. Cliquez dessus, vous verrez alors, à l'aide d'un curseur, les différences entre deux versions et pourrez restaurer une version antérieure.

Les révisions constituent votre premier filet de sécurité en cas d'erreur (« j'ai supprimé la moitié de la page par inadvertance »). Elles sont toutefois toutes stockées dans la base de données. Un site comptant des milliers de révisions devient plus volumineux et parfois plus lent. Vous pouvez en limiter le nombre dans wp-config.php :

define( 'WP_POST_REVISIONS', 20 );

La leçon 6.3 traite du nettoyage des anciennes révisions.

Les limites de l'éditeur

L'éditeur de blocs crée le contenu d'une page. Ce qui l'entoure (l'en-tête du site, le menu, le pied de page) relève du thème. Avec un thème basé sur des blocs, vous modifiez cela dans l'Éditeur de site (Apparence > Éditeur) avec les mêmes blocs ; avec un thème classique, dans l'Outil de personnalisation et au niveau des Widgets (leçon 5.1). Si vous utilisez un créateur de page comme Elementor ou Divi, vous travaillez alors dans ce logiciel plutôt que dans l'éditeur de blocs ; la leçon 5.1 en aborde les inconvénients.

Résumé

• Une page est constituée de blocs que vous placez les uns sous, à côté et dans les autres ; WordPress les enregistre sous forme de HTML entouré de commentaires.
• La vue en liste et les commandes slash permettent de construire rapidement et précisément.
• Utilisez les titres pour la structure (H2, H3), pas pour la taille de police.
• Les compositions font gagner du temps ; une composition synchronisée se modifie partout à la fois.
• Brouillon, planifié, privé et révisions vous donnent le contrôle sur ce qui est visible, quand, et un moyen de revenir en arrière.

Quiz

Exercice

Exercice D4.1 : Construisez une page avec des blocs. Créez une page en brouillon « À propos » comprenant : un H2 et un H3, au moins deux paragraphes, une image avec texte alternatif, un bloc colonnes avec deux colonnes, un bouton avec un lien, et une composition issue de la bibliothèque. Transformez un groupe en une composition synchronisée personnelle et insérez-la sur une deuxième page en brouillon. Modifiez-la ensuite à un seul endroit et observez ce qui se passe sur l'autre page. Restaurez enfin une révision antérieure. Cochez chaque étape et décrivez en deux phrases dans quels cas vous utiliseriez, ou non, une composition synchronisée.

Pour aller plus loin

Pour le travail dans WordPress lui-même, nous n'avons pas encore d'articles propres ; la documentation officielle de WordPress est très complète.

• L'éditeur de blocs (wordpress.org, en anglais) : https://wordpress.org/documentation/article/wordpress-block-editor/
• Les compositions (wordpress.org, en anglais) : https://wordpress.org/documentation/article/block-pattern/
• Les révisions (wordpress.org, en anglais) : https://wordpress.org/documentation/article/revisions/