Gutenberg : modifier ses pages WordPress avec l'éditeur de blocs

Vous ouvrez la page d'accueil de votre site WordPress pour changer les horaires, et l'écran ne ressemble plus à l'éditeur d'autrefois : des blocs partout, un petit « + » en haut, un panneau de réglages à droite. Cet éditeur s'appelle Gutenberg, et il suffit à la plupart des mises à jour d'un site de commerce ou d'indépendant.

Ce qu'est l'éditeur de blocs

Gutenberg est le nom de l'éditeur de blocs de WordPress, intégré au logiciel depuis la version 5.0, fin 2018. Chaque élément de la page est un bloc : paragraphe, titre, image, bouton, liste, galerie, colonnes. L'écran se repère en quelques éléments :

• le « + » ajoute un bloc, que l'on glisse ensuite à sa place ;
• le panneau latéral règle le bloc sélectionné : couleurs, tailles, alignement ;
• la vue en liste montre la structure de la page, utile quand elle devient longue ;
• le menu d'aperçu affiche le rendu sur ordinateur, tablette et téléphone ;
• les flèches annuler et rétablir rattrapent une fausse manœuvre.

Au clavier, tapez « / » suivi du nom d'un bloc, par exemple « /image », pour l'insérer sans toucher à la souris.

Une extension nommée Gutenberg existe aussi dans le répertoire des extensions. Elle sert à tester les nouveautés avant leur arrivée dans WordPress et s'adresse aux curieux : les fonctions stables sont déjà dans le logiciel, donc inutile de l'installer sur le site de votre commerce.

Des blocs aux compositions

Les blocs de base couvrent l'essentiel : titres, paragraphes, listes, images, citations, vidéos intégrées et groupes, qui rassemblent plusieurs blocs dans un même cadre. Les couleurs, les polices et les largeurs proposées viennent du thème : changer de thème modifie l'apparence des blocs sans toucher à leur contenu.

Les compositions, appelées « patterns » en anglais, vont plus loin. Une composition est un assemblage de blocs déjà mis en forme, comme une section d'accueil avec titre, texte et bouton, ou une grille de tarifs. Vous l'insérez, puis vous remplacez les textes et les photos.

Pour un commerce, quelques blocs servent presque chaque semaine : des boutons pour « Réserver » ou « Appeler », des colonnes pour placer l'adresse et les horaires côte à côte, un tableau pour les tarifs, une galerie pour les réalisations.

Les compositions synchronisées, qui s'appelaient auparavant « blocs réutilisables », restent liées à leur original : si vous en modifiez une, tous les endroits où elle apparaît changent en même temps. Elles conviennent à un bandeau d'annonce, à un bouton de réservation ou à des horaires d'ouverture. Elles ont un revers : une correction faite sur une page se répète partout, y compris sur celles que vous aviez oubliées.

Modifier sans casser le site

Un site en ligne se modifie avec méthode. Quelques gestes évitent la plupart des accidents :

• travaillez en brouillon pour une nouvelle page, et publiez seulement quand l'aperçu vous convient, sur téléphone comme sur ordinateur ;
• pour refondre une page déjà en ligne, copiez son contenu dans un brouillon pour l'essayer, puis reportez la version retenue dans la page d'origine, dont l'adresse ne change pas ;
• servez-vous des révisions : WordPress garde l'historique des enregistrements, et vous pouvez comparer deux versions et restaurer l'ancienne ;
• programmez la publication d'une annonce ou d'un menu de saison à une date précise ;
• réservez les droits de publication aux personnes qui en ont besoin : un contributeur peut rédiger sans publier ;
• gardez le bloc de code HTML personnalisé pour les modules fournis par un service de confiance, comme un outil de réservation : un code collé sans être compris peut casser la page ou poser un problème de sécurité.

Avant une grosse modification, vérifiez aussi qu'une sauvegarde récente existe : l'article sur la sauvegarde d'un site internet détaille ce qu'elle doit contenir.

Des habitudes qui comptent aussi pour Google

• choisissez le niveau d'un titre, H2 ou H3, selon la structure du texte ; la taille se règle à part, dans le panneau latéral ;
• renseignez le texte alternatif de chaque image ;
• collez les textes venus de Word ou d'un e-mail en texte brut, pour éviter les mises en forme parasites.

Gutenberg, Elementor ou Divi

L'éditeur de blocs est intégré à WordPress : pas d'extension de plus, pas de licence à renouveler, et un contenu enregistré sous une forme standard qui reste lisible si vous changez de thème. En contrepartie, ses mises en page sont moins spectaculaires que celles d'un constructeur de pages : animations, superpositions et compositions très élaborées y restent limitées. Les blocs produisent en général un code plus simple, mais le poids final d'une page dépend aussi du thème, des images et des extensions.

Elementor et Divi, présentés dans les articles sur Elementor et Divi, offrent cette liberté, au prix de pages plus lourdes et d'une dépendance à l'outil et à sa licence. Si vous changez surtout des textes, des photos, des horaires et des tarifs, les blocs suffisent. Si vous voulez recomposer souvent vos pages à la souris, un constructeur se défend, à condition d'en accepter les contreparties.

Selon le thème, l'en-tête et le pied de page se modifient avec l'éditeur de site, pour les thèmes à blocs, ou avec le personnalisateur, pour les thèmes classiques. Demandez à votre prestataire de quel type est votre thème.

Vos premiers réglages

1. Ouvrez une page de test en brouillon, insérez une composition et modifiez-la pour vous familiariser avec les blocs.
2. Créez une composition synchronisée pour vos horaires ou votre bouton de réservation.
3. Vérifiez l'affichage de vos pages sur téléphone, et repérez celles qui demanderaient un constructeur.
4. Si vous préférez déléguer la mise en page, un site de cinq pages coûte 950 € HT chez nous, et les zones que vous modifierez seul se définissent dès le départ : la page des tarifs détaille les formules.