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…
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.
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.).
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 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… ?
Formation Gutenberg Avancée
Pour aller encore plus loin avec Gutenberg, découvrez notre formation Gutenberg éligible CPF et à distance.
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
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.
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.
Bonjour, une avancée sans l’être, pour des sites plus complexes et encore une fois il faudrait penser aux utilisateurs qu’il faudra reformer…
En utilisant Gutenberg, le bloc étiquettes fait l’impasse sur le lien :
Choisir parmi les étiquettes les plus utilisées
Du coup comment faire ?
Pour ma part, je viens de l’installer afin de le tester.
Je suis assez frustré car j’écris des articles sur mon blog avec un certain nombre de caractères, et le fait de devoir systématiquement cliquer sur le petit “i” et ne plus voir le nombre augmenter au fur et à mesure de ma saisie me frustre. Sinon, je ne suis pas réfractaire au changement. Mais pour l’heure, rien ne remplacera un Visual Composer s’il on recherche un éditeur de texte.
En revanche, si vous connaissez une bonne extension qui pourrait me permettre de retrouver un affichage permanent du nombre de caractères, je suis preneur ;)
J’ai essayé pour voir, mais ce n’est pas très ergonomique, pas très pratique. Je suis bien conscient que comme toutes choses il faut laisser le temps au temps, mais quand on créé du progrès, à mon avis, il faut que ce soit vers du simple, pas vers du compliqué. Or là… c’est compliqué ! Et puis… ça efface des choses. J’ai voulu mettre une image sur un article, et j’ai du m’y reprendre à plusieurs fois jusqu’au moment où ça m’a gavé et où je suis retourné à l”éditeur simple : l’image s’enlevait à chaque fois que je continuais à écrire !
Bref, ils ont encore du progrès à faire !
Bonjour. Je suis – enfin j’essaie ! – de créer un blog via Gutenberg… Et c’est vrai que c’est pas tout à fait au point… Par exemple, je souhaite modifier une page du site mais elle ne s’affiche pas dans Gutenberg, seulement sur le site. Comment faire pour y accéder afin de pouvoir y apporter des modifications ? Est-ce-que c’est parce-que j’ai déjà publié que je ne peux pas revenir sur mon travail ?? Je suis coincée… Merci de m’aider si vous le pouvez…
Sandrine.
Franchement cette nouvelle version de WP via Gutemberg me saoule trop. Imaginez vous travaillez 6 ans sur le même programme pour qu’un jour une bande de mecs sous cocaïne, voulant rendre “l’expérience utilisateur fascinante” se disent tient on va tout changer. On va faire encore mieux.
Et voilà en pensant rendre le logiciel simple pour les débutants, tous les autres utilisateurs perdent du temps pour par exemple trouver un bouton ou pour tout simplement insérer une image dans un bloc.
Et quid de l’impact de ces blocs sur le référencement?? est-ce que cela va alourdir les pages, ralentir le travail des robots SEO qui scroll les pages à longueur de temps.
Tous ces changements ne rendent pas les choses meilleures. Dans le meilleur des cas elles permettent juste de justifier des salaires exorbitants et dans le pire des cas ces changements ne sont qu’une évolution pour verrouiller le business et inclure plus tard de la publicité.
Quelle perte de temps pour les millions d’utilisateurs WP…
Bonjour,
Gutenberg est sorti. Tous mes champs ACF ont disparu ! J’ai trouvé, pour ce problème, des articles en anglais absolument incompréhensible. Pouvez-vous m’aider ?
Merci . Salutations.
Sabine
C’est nul ce changement, comme si on n’avait qu’à apprendre à changer en permanence ! J’ai bien regarder vos vidéos, mais je ne trouve pas les 3 petits points qui permettraient d’annuler une image par exemple; et je ne trouve même pas de quoi reprendre l’ancien éditeur, comme vous le montrer…je suis bloquée avec cela. j’utilise WP ancien depuis 8 ans ! et ça allait très bien et rapidement.
Merci pour l’article,
Pour etre honnête je trouve cette version wordpress gutenberg ecoeurante. Mais il va falloir s’y habituer car l’éditeur classique n’existera plus en 2021 ????
#touchepasamonwordpress
Pour les rageux de l’évolution je vous suggère d’apprendre HTML, PHP, CSS, BOOTSTRAP, JAVASCRIPT et la Bible de tout bon dév WP : LE CODEX. Ainsi vous pourrez créer vos propres thèmes / extensions et ne plus critiquer ceux qui vous donnent des outils gratuits..
Bonjour,
Si, en 2021, WordPress m’impose son Gutenberg tel qu’il se présente aujourd’hui en nous imposant, sans prévenir, une nouvelle version désastreuse, je n’aurais qu’une seule chose à faire, c’est d’aller ailleurs et abandonner WordPress.
Toujours est-il que je vais éviter les mises à jour qui sont un “grand n’importe quoi” pour les non-initiés.
Aujourd’hui, après cette mise à jour, mes articles existants et mes pages sont tronqués sans que l’on sache pourquoi, mais surtout, sans explications ni formations. Mais aussi, comme si nous avions le temps de nous former en continu !
Bonjour, Merci pour ce tuto et à tous les développeurs de wordpress, mais moi aussi j’ai arrêté d’utiliser Gutemberg au bout de 5 minutes, j’avais commencé une liste et ne savait pas comment la terminer, normalement on “reclique” sur l’icône de liste pour clore la liste mais là , comment faire ?
Bonjour ! Un grand merci pour ce tutoriel que je garde dans mes favoris. En effet, j’ai fait la mise à jour de WordPress et j’ai été chamboulé par le nouvel éditeur Gutenberg. Pour moi et comme pour plusieurs utilisateurs, c’est un changement radical et une nouvelle façon d’écrire, d’éditer et de publier ses articles. Comme toujours et pour ne pas changer, je n’ai pas pris mes devants et je ne me suis pas documenté avant. Encore une chance qu’il existe ce plugin classic editor, car je suis trop habitué à l’ancienne version d’édition. J’apprends que l’ancien éditeur prendra fin pour 2021 ? C’est une chose et d’ici là, je pense avoir le temps de bien me familiariser avec ce Gutenberg. Encore merci pour ce tutoriel, vraiment super !
Bonsoir,
Pour ma part c’est simple, aussitôt testé aussitôt jeté. Mais bon, la mode étant “pourquoi faire simple quand on peut faire compliqué” il faut faire avec. Bref, je retourne à mon éditeur classique avec un grand soulagement qu’il soit encore là. 5/20 aux développeurs WP sur ce coup-là.
J’ai essayé Gutenberg, ce qu’il fait, il le fait bien, toutefois les fonctionnalités sont très limitées. J’espère et souhaite qu’au fil du temps celui-ci s’enrichisse de nouvelles fonctionnalités. En l’état, c’est trop basique pour moi. Beaucoup de critiques sont faite à l’égard des Site builder. Oui, ils ont des défauts, mais ils ont aussi des avantages dont Gutenberg ferait bien de s’inspirer.
Oui c’est vraiment dommage..une amélioration vers plus de simplicité c’est une avancée..vers plus compliqué c’est un échec..mais comme ils ont travaillé, personne ne pourra leur demander de faire marche arrière..quand dans une page on se retrouve avec 5 barres de scroll il faudrait juste se mettre à la place de l’utilisateur..pourquoi faire simple quand on peut faire compliqué! et pour des dev intégrateurs dieu sait combien il est ardu de modifier du code généré par un page builder….bref…ils ont fait du grand n’importe quoi…
j’utilise sur plusieurs sites PageBuilder de SiteOrigin avec la tonne de widgets formidables qu’ils proposent, super ergonomique et j’en passe.
Ce Gutemberg est manifestement tellement complexe et invasif que la grande majorité des outils SiteOrigin ne sont pas(encore ???) compatibles WP5, moralité , le temps que je m’en rende compte, 2 sites vérolés à remettre en place !
Ok et si ce nouvel éditeur permettait de faire en natif ce que permettent les pages builder ? essayons… et là c’est le drame, ce truc ne sait rien faire de plus que l’éditeur d’origine à part déplacer les blocs, chose que l’on a besoin de faire une fois de temps en temps et qui se fait en 1 coup de copier coller…
Bref, il n’améliore pas l’expérience utilisateur puisqu’il propose une ergonomie très spécifique, à apprendre donc. Au final c’est un gros bouzin, qui détruit l’existant en apportant rien !
Autant je trouvais WP et son évolution pleins de bon sens, autant là c’est nullissime, sur l’objectif comme sur la mise en œuvre.
Développeurs WP : 0/20
Euhhhhh, je ne pige pas…Gutenberg fait sauter certaines de mes extensions. Je retourne à Classic Editor. Mon extension Ultimate Nofollow ou d’autres (coloration syntaxique en HTML, super pratique !!!) ne marchent plus.
Alors, je n’avais pas fait la mise à jour WordPress jusqu’à aujourd’hui et je ne peux pas dire que j’accueille cette mise à jour avec le sourire. C’est une perte de temps énorme dans mon cas, où j’ai l’habitude d’utiliser mes propres astuces en mode texte, et là j’ai l’impression que plus rien ne marche comme avant… Et ce qui m’irrite le plus avec ces “blocs” c’est tout le code inutile qui est ajouté dans l’article, et qui ne sert en fait à rien du tout… Bref, je suis déçu pour une fois par WordPress… :(
Merci Johanne… j’ai une petite question et ne trouve pas la réponse. Comment insérer une balise “more” pour que l’extrait de notre article apparaisse au lieu du texte entier? Car le bouton a disparu de la version WP 5 :-(
Merci par avance,
Claire