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.
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 le nouvel éditeur 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.
Découvrez ci-après, le mode d’emploi de l’éditeur de texte dans la version 5 de 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, le nouvel éditeur WordPress souffre d’un immense manque de souplesse et que c’en est très frustrant…
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.
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.
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…).
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 ».
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.
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 ce dernier 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.
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.).
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 cela 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.
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
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
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, il 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 par le nouvel éditeur WordPress 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 à terme – 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. Cette nouveauté 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… ?
