Gutenberg : le tutoriel pour maîtriser le (futur?) nouvel éditeur de WordPress

Gutenberg, vous connaissez forcément ce nom ! Si vous ne faites pas partie de la « communauté WordPress », cela vous évoquera sans doute l’illustre inventeur de l’imprimerie au XVe siècle.

Gutenberg WordPress Plugin

Mais si vous êtes des WordPress Addicts – ce que je soupçonne chez un certain nombre d’entre vous – le nom Gutenberg vous fera penser au nouvel éditeur de contenu de WordPress, prévu pour la version 5.0 du CMS. Cet éditeur visuel sera embarqué dans toutes les nouvelles installations WordPress et remplacera l’éditeur classique que vous connaissez tous et toutes.

Là, on est tenté de se dire : ENFIN ! Car cela fait des années que l’on installe des Page Builders pour palier le manque de flexibilité de l’éditeur classique, qui, disons-le franchement, est un véritable frein dès lors que l’on essaie de faire des mises en page un peu complexes. Donc une évolution de l’éditeur WordPress est la bienvenue !

Cependant, ce changement va mettre un grand coup de pied dans vos habitudes et révolutionner votre expérience utilisateur. Mais rassurez-vous, nous allons vous aider à anticiper l’arrivée de Gutenberg et à vous approprier ce nouvel éditeur de contenu. Dans cet article on va le découvrir ensemble et je vais vous expliquer comment l’utiliser, ainsi vous serez fin prêts à l’accueillir à sa sortie !

On va également voir si Gutenberg tient ses promesses et faire le point sur ses atouts et ses faiblesses par rapport à ses principaux concurrents.

Alors ? Editeur classique, Gutenberg ou Page Builders, lequel d’entre eux obtiendra notre préférence ?

Découverte de Gutenberg

Actuellement, Gutenberg est disponible au téléchargement dans la bibliothèque de plugins WordPress. Pour rappel, voici l’article qui vous explique la procédure à suivre pour installer un plugin.

A partir de la version 5.0 de WordPress, il ne sera plus nécessaire de télécharger Gutenberg, il sera automatiquement intégré à toute nouvelle installation WordPress.

Pour appréhender Gutenberg au mieux, il faut comprendre que, même s’il n’est pas un Page Builder à proprement parler, sa logique est assez similaire car elle repose sur l’utilisation de blocs de contenus. On ajoute des blocs, on y insère différents contenus (textes, images, vidéos, etc.) puis on les dispose dans la page comme on le souhaite – ou presque… Parce que si vous êtes habitués à utiliser des Page Builders, vous allez très vite vous rendre compte que, malheureusement, Gutenberg souffre d’un immense manque de souplesse et que c’en est très frustrant…

Allez, on y va ?

Présentation de l’interface

Je vous propose de créer ensemble une belle page d’accueil pour votre site vitrine, ainsi nous ferons le tour des possibilités offertes par Gutenberg. On va créer une bannière, rédiger une phrase d’accroche, présenter vos prestations et enfin ajouter un bouton d’appel à l’action.

On commence par créer une nouvelle page. Sachez que si vous souhaitez continuer à utiliser l’éditeur classique, c’est possible en cliquant sur la petite flèche vers le bas à droite du bouton Ajouter, ou sur le bouton Editeur classique qui s’affiche au survol d’un article ou d’une page.

Gutenberg WordPress éditeur classique

Gutenberg WordPress editeur-classique-2

Mais ce n’est pas ce qui nous intéresse ici, donc on ajoute une nouvelle page et on arrive directement sur la nouvelle interface d’édition.

Gutenberg WordPress interface

Voilà donc à quoi ressemble Gutenberg. Etudions un peu cette interface ensemble :
En haut à gauche, nous pouvons ajouter un nouveau Bloc avec le bouton (+), annuler ou rétablir une action grâce aux flèches, et afficher les informations relatives à la page/article (nombre de mots, de titres, de paragraphes, de blocs) avec le bouton (i).

En haut à droite, nous retrouvons les boutons de publication les plus importants : Enregistrer le brouillon, Aperçu (l’oeil) et Publier.
L’engrenage vous permet de masquer la barre latérale et de passer en pleine largeur et les 3 points déroulent quelques options supplémentaires, notamment la possibilité de passer en aperçu HTML (le raccourci clavier, c’est bien vu, mais c’est dommage qu’il faille appuyer sur 36 touches en même temps…).

Gutenberg WordPress code editor

Dans la barre latérale, dans l’onglet Document, on retrouve tous les réglages liés à la publication et je la trouve plus ergonomique que sur l’ancien éditeur. Les onglets sont par défaut fermés et il vous suffit de dérouler ceux qui vous intéressent : ça prend moins de place et c’est plus « propre ». Un bon point pour Gutenberg.

Dans l’onglet Block, on a accès au descriptif et aux réglages du bloc sélectionné. Chaque bloc de contenu possède ses propres options. Comme vous pouvez le constater sur les captures d’écran ci-dessous, les réglages sont basiques.

Gutenberg Réglages Blocs

Second bon point, la barre du haut et la barre latérale restent toujours visibles à l’écran. Fini le scroll sans fin pour prévisualiser ou mettre à jour lorsque l’on travaille sur de longues pages…

Présentation des blocs de contenus

On va maintenant construire notre page et découvrir les blocs de contenus proposés par Gutenberg. Pour bien comprendre leur fonctionnement, il faut imaginer que les blocs de contenus sont des briques que l’on empile les unes sur les autres pour créer un édifice (votre page, donc) – à la différence près qu’avec Gutenberg on peut déplacer et même supprimer autant de “briques” qu’on veut sans que l’édifice se casse la figure (je vous déconseille de tenter l’expérience avec les briques de votre maison) !

Pour ajouter des blocs, on clique sur le petit (+) en haut à gauche. Par défaut le bloc est ajouté en bas de la page. Si vous sélectionnez un bloc et cliquez sur le (+), le nouveau bloc sera ajouté sous le bloc sélectionné. Vous pouvez voir l’emplacement du bloc que vous êtes sur le point d’ajouter grâce à l’indicateur en bleu.

Gutenberg emplacement bloc

Remarque : les boutons pour modifier, supprimer ou déplacer un bloc n’apparaissent qu’au survol des blocs. Ça allège la page et permet d’avoir un rendu propre, mais ce n’est pas très user-friendly, les utilisateurs risquent de passer à côté !

On distingue 5 groupes de blocs de contenus :

  • Communs : ce sont les blocs basiques – les titres, les paragraphes, les listes à puce, les citations, les images, les galeries d’images, etc.
  • Formattage : ce sont les différents formats dans lesquels vous pourrez rédiger vos contenus – classique, HTML, code source, texte préformatté, etc.
  • Mise en page : il s’agit des blocs qui vous permettront de soigner votre mise en page. C’est à mon sens le groupe le plus important, mais il est encore très pauvre pour le moment – séparateur, colonnes, boutons, etc.
  • Widget : vous pourrez, dans ce groupe, retrouver vos widgets WordPress et les intégrer directement dans vos pages / articles.
  • Embed : ce sont des contenus embarqués depuis d’autres plateformes (YouTube, Flickr, Twitter, Tumblr, etc.).

On commence notre page d’accueil ?

Insérons une bannière en haut de notre page d’accueil avec le module Cover Image, qui permet d’insérer facilement du texte sur une image.

 

Puis ajoutons une phrase d’accroche juste en dessous pour capter l’attention du visiteur, à l’aide du module Headings.

 

Dans la prochaine vidéo, je vous montre la façon dont on déplace ou supprime un bloc de contenu.

 

Nous allons ensuite insérer, avec le module Gallery, trois images, dans trois colonnes, afin d’illustrer nos prestations.

 

On va maintenant présenter nos prestations et découvrir le module Text Columns.

 

Voyons comment afficher une image et la redimensionner en toute simplicité. Vous pouvez choisir une dimension dans les réglages du bloc à droite ou bien redimensionner directement l’image en saisissant les poignées bleues et en les faisant glisser. Attention avec les tailles des images : ce que vous voyez dans Gutenberg n’est pas forcément ce que vous aurez sur votre site en ligne. Le rendu peut être différent, pensez donc bien à vérifier votre mise en page avant de publier ou de mettre à jour.

 

Voilà, notre page d’accueil est presque prête ! Il ne manque plus qu’un appel à l’action pour inviter vos visiteurs à vous contacter. On va le créer à l’aide d’un bloc paragraphe que l’on va styliser et d’un bloc bouton.

 

Pour finir, faisons un petit inventaire des autres blocs les plus utiles : les listes à puces, les titres, les sous-titres et les blocs de citations.

 

Gutenberg permet également d’ajouter des Widgets directement dans les pages / articles. Vous pouvez afficher vos derniers articles (mais ce n’est pas beau pour l’instant et Gutenberg ne permet pas de personnaliser leur affichage) et vos catégories. Et vous pouvez toujours avoir recours à des shortcodes en utilisant le bloc shortcode disponible dans les widgets.

Gutenberg Liste articles

Le widget Derniers Articles : il n’est pas folichon folichon…

Publions notre page, maintenant qu’elle est prête. Il faut deux clics pour pouvoir publier une page ou un article. Une sécurité plutôt bien pour les utilisateurs qui débutent, pour les empêcher de commettre des boulettes, de publier sans le vouloir. Mais, qu’on se le dise, c’est très vite agaçant…

Les forces et les faiblesses de Gutenberg

Les forces de Gutenberg

Amélioration de l’expérience de l’utilisateur final

L’éditeur classique se faisait vieillissant et Gutenberg apporte la touche de modernité qu’il lui manquait, notamment grâce à une interface sobre, propre et soignée qui simplifie la publication de contenus. Dans son utilisation, il se rapproche davantage d’un Page Builder que d’un éditeur de texte standard. Il reste simple et efficace pour de la mise en page basique et génère un code propre (oui, parce qu’on y pense tous, aux shortcodes bien sales de Visual Composer).

Gutenberg pourra bien satisfaire les utilisateurs de l’éditeur classique qui n’ont encore jamais goûté aux Page Builders et qui se contentaient jusque là de mises en page simples. Il leur permettra en gros de faire la même chose, mais de manière plus intuitive et agréable. Mais pour les autres, je pense en particulier aux différents professionnels WordPress, eh bien… ce n’est pas gagné.

Les faiblesses de Gutenberg

Manque de souplesse

Bien qu’il s’en inspire, Gutenberg n’est clairement pas un véritable Page Builder, ce qui est à mon sens très limitant. La structure en Rangées / Colonnes et le système du Glisser-Déposer (Drag and Drop) des Page Builders manquent affreusement… on se voit contraint de déplacer les blocs uniquement à l’aide des flèches – manque d’intuitivité et perte de temps – et l’utilisation des colonnes est réservée aux blocs de texte, il n’est pas possible actuellement de les utiliser avec d’autres modules. Gutenberg est moins maniable, moins souple qu’un Page Builder et si ça passe crème sur de petites pages, c’est vite handicapant lorsque les pages s’allongent…

De plus, Gutenberg ne nous permet pas, à l’heure actuelle, de modifier un site en front, c’est-à-dire directement depuis un site en ligne. On ne peut pas voir en direct les modifications apportées, fonctionnalité que la plupart des Page Builders proposent.

Manque de personnalisation des blocs de contenus

De plus, les modules manquent de personnalisation… ils ne proposent que trop peu d’options là où l’on imaginerait un panel riche et complet. On ne peut pas jouer sur les marges des blocs (on n’a donc pas le contrôle sur les espaces blancs et c’est difficile d’aérer ses mises en page)… Les options d’affichage et de personnalisation des différents modules sont vraiment trop sommaires (par exemple, il n’est actuellement pas possible d’afficher une galerie sous forme de diaporama ou de carrousel).

Et le peu d’options disponibles ne sont, à mon sens, pas pertinentes. C’est dommage de permettre aux utilisateurs de créer des pages et des articles « sapin de Noël » en leur offrant la possibilité de changer la taille et la couleur des polices, ainsi que la couleur d’arrière plan des paragraphes. Ce n’est, en soi, pas une mauvaise chose, mais ça implique d’éduquer l’utilisateur afin qu’il respecte la charte graphique définie et les codes du design.

On préfèrerait donc avoir davantage d’options de mise en page que d’options de personnalisation graphique.

Gutenberg : alors, bien ou pas ?

Les nouveautés apportées Gutenberg sont loin d’être pertinentes et les faiblesses de l’ancien éditeur ne sont pas toutes corrigées… A quoi bon s’inspirer des Page Builders si c’est pour passer à côté de leurs plus gros atouts ?

En l’état actuel, Gutenberg est une bonne avancée par rapport à l’éditeur classique, il est plus moderne et plus abouti, mais il est encore bien en dessous de tout ce qui se fait en matière de Page Builders.

Gutenberg et le futur de WordPress ?

Gutenberg en est donc clairement à ses balbutiements. Mais il va peu à peu s’enrichir de nouvelles fonctionnalités et de nouveaux blocs de contenus. Les développeurs de thèmes et de plugins pourront créer des modules et des widgets qui s’intègreront à Gutenberg – de nombreux développeurs travaillent d’ores et déjà à rendre leurs extensions compatibles avec Gutenberg (par exemple Yoast SEO et Advanced Custom Fields sont déjà compatibles).

Le module Yoast SEO s’affiche sous votre contenu, comme dans l’éditeur classique.

Gutenberg peut donc devenir quelque chose de complet et puissant, mais en attendant, son arrivée prochaine dans le core de WordPress soulève beaucoup de questionnements et d’inquiétude du côté des professionnels de WordPress. Gutenberg va bouleverser les habitudes des concepteurs de thèmes, de plugins, de sites WordPress et des créateurs de contenus, et beaucoup d’entre eux se demandent de quelle manière anticiper cette perte de repères et s’y préparer au mieux. Mais ce n’est pas le sujet de cet article, je vous invite à découvrir cet article de Fabrice pour plus de détails.

N’hésitez pas à nous dire en commentaires ce que vous pensez de l’arrivée prochaine de Gutenberg : vous êtes prêts, impatients, curieux, inquiets… ?

Gutenberg : le tutoriel pour maîtriser le (futur?) nouvel éditeur de WordPress
4.7 pour 19 votes

A propos de l'auteur...

Johanne

Ancienne libraire reconvertie dans les métiers du web, je suis désormais webdesigner freelance, spécialisée WordPress, et je m'applique à créer de jolis univers graphiques. Sur mon blog professionnel, j'évoque la vie de freelance et je vous aide à améliorer votre présence en ligne.

3 commentaires pertinents à ce jour ;)

  • Titre dit :

    Merci Johanne pour cet article très complet sur les forces et faiblesses de Gutenberg. Finalement nous pourrons continuer comme avant en utilisant un bulder ou codant directement si j’ai bien compris. Bref, cela change sans changer :p

  • Charles dit :

    On ne peut pas se contenter d’améliorer la technologie existante. Il faut créer de nouvelles choses pour relever les nouveaux défis. WordPress grandit avec le temps, il en sera de même pour Gutenberg s’il venait dans de bonnes intentions.

  • DJ dit :

    Personnellement je suis habitué à utiliser les outils WP fournis par défaut. Je n’ai jamais utilisé popur l’insatnt des Page Builders. Cette nouvelle façon de voir les choses pour administrer l’ergonomie et les mises en page est déroutante de prime abord. Il va falloir s’habituer mais il faut reconnaître que les outils fournis par défaut dans WP (sans ajout de plugins) n’étaient pas très satisfaisants en terme de commodité et d’ergonomie. On ne pouvait pas faire grand chose au niveau visuel et disposition des paragraphes etc..
    p.s: comme a chaque fois, vos articles sont très plaisants à lire et instructifs. c’est une aide précieuse pour avancer.

Vous pouvez laisser votre commentaire ci-dessous et même vous abonner aux commentaires de l'article.
Nota: pour le champ "Site Web", seuls les liens vers vos réseaux sociaux sont autorisés.

Likez, Tweetez, Commentez, Partagez !

121 Partages
Partagez72
Tweetez46
Partagez
Buffer3