Gutenberg, deux ans après qu’en est-il ?

Steve Guttenberg, essentiellement connu pour ses rôles dans la série de films Police Academy est … 🤪

Gutenberg, apparu avec la version 5.0 de WordPress, promet de révolutionner la création de page web, en toute simplicité et sans utiliser code, plugins extérieurs, ou autres attributs de développeur. Et le 29 Avril 2020 a été lancée la dernière version, soit la 8.0. Cela fait maintenant 2 ans passés qu’il est en place de façon native dans WordPress et je pense que refaire un petit bilan après plusieurs mises à jour est pertinent. 

Gutenberg constructeur de page wordpress

Autant être honnête avec vous immédiatement, dès que Gutenberg est arrivé sur WP, je l’ai testé environ 3 minutes, le temps de faire le tour du proprio, et j’ai tranché “complètement inutile”. Cependant, avec le recul, je me dis que je ne lui ai jamais laissé de réelle chance. 

Pour cet article, je vais complètement revenir sur mes a priori, et essayer de faire place neuve pour laisser une chance à cette fonction révolutionnaire de WordPress next generation (à lire avec un accent américain). De fait, j’ai créée une nouvelle page vierge sur un de mes sites, désactivé mes plugins SiteOrigin (page builder assez complet à découvrir ici) et Elementor (autre page builder à découvrir ici), car sinon ils interfèrent avec Gutenberg, et cela crée des redondances, et c’est casse pied ! Le site utilise également OceanWP comme thème, donc certaines options apparaissent en plus, je ne les utiliserai évidemment pas.

Afin que vous compreniez bien l’aversion que j’avais de ce nouvel éditeur de page, j’ai même installé un plugin pour le désactiver … De fait, Je vous laisse admirer ma page de création de page, sans Gutenberg.

Constructeur de page sans gutenberg

Création d’une page sans constructeur de page Gutenberg

 

Et voici la page sur laquelle je vais travailler avec Gutenberg ! 

création de page avec Page builder Gutenberg

Création d’une page avec le page builder Gutenberg – Normalement on a tous la même ^^

 

Prêts ? Go ! 

 

1. Le design & simplicité d’utilisation de Gutenberg

En deux ans, je trouve que cela n’a pas énormément évolué, mais en me basant sur le vécu avant/après, je dois avouer que ce style minimaliste est assez déroutant surtout lorsqu’on a connu pendant longtemps la page WordPress usuelle (voir le screenshot de ma page sans Gutenberg). Après, je pense que c’est pour le mieux, dans la mesure où toutes les informations essentielles sont présentes tout autour de votre espace de création, et si vous souhaitez vous focaliser sur la création de votre contenu, en 1 clic vous faites tout disparaître.

Pour créer des blocs, modifier les attributs de la page, vous allez avoir tout à portée de vue, ce qui est peut être plus pratique pour quelqu’un qui débute sur WordPress. Enfin, les pages WordPress classiques donnaient une impression de plus grande complexité des options pour le néophyte lambda, un fouillis d’options nébuleuses qui pouvaient rebuter le moins technophiles d’entre nous.

J’ai essayé de créer un bloc avec logo, header, et sous titre. Je n’ai eu aucun problème, très facilement j’ai pu intégrer une image, changer sa taille, insérer des headers, changer leur couleur, les alignements et modifier le texte. 

création page basique

Création d’une page basique de style Homepage par exemple

Pour cela, OUI, Gutenberg est un gros plus pour quelqu’un qui démarre son blog. Vous pouvez le prendre en main sans même avoir les moindres notions sur WordPress. Pour ma part, étant une utilisatrice avertie de ce dernier, … je suis quelque peu perturbée de ne pas retrouver les options là où elles devraient être. Cependant, une fois cette impression passée, et le fait d’avoir une page blanche énorme, on peut vite s’y habituer, même si je garde l’impression d’avoir certaines options manquantes. Par exemple, Yoast qui se retrouve en bas de page au lieu d’en haut à droite chez moi habituellement, ou encore la possibilité de modifier les fonts de cette page uniquement, la taille de la page, etc.

Pour ma part, je trouve que cela ressemble beaucoup à des CMS du style Wix, mais en plus basique et moins d’options. Si le but du lancement de Gutenberg était de concurrencer les offres style Wix, e-monsite, SiteW, etc. je trouve cette tentative plutôt ratée, car au final ok, le style est plus épuré et simple d’accès, mais il manque ÉNORMÉMENT d’options de customisation. Et si on ne souhaite pas avoir un site qui ressemble à un blog bas de gamme, clairement ce n’est pas en comptant sur Gutenberg qu’on peut l’obtenir !

 

2. En parlant des options proposées, …

C’est là, que le bât blesse. En effet, nativement Gutenberg ne propose qu’un très faible florilège de blocs. Toujours dans la création de ma petite page de test, j’ai mis une image en bannière, pour ça pas de soucis, j’ai pu intégrer facilement une image de ma bibliothèque, j’ai eu ensuite la possibilité de modifier la taille, d’ajouter des filtres de couleurs, et même des dégradés déjà créés, ce qui est un gros plus en option native.

Et surtout j’ai pu mettre l’image en pleine largeur, ce qui est pour moi toujours très important car, j’en utilise beaucoup, surtout pour servir de séparateur entre des blocs de contenu. Le fait de pouvoir facilement et rapidement mettre cette bannière en pleine largeur, est très intéressant.

Mais dès que j’ai voulu créer un bloc composé ( comme un bloc divisé en plusieurs autres blocs) … là, le fait d’avoir d’avoir des blocs sans couleur, qui ne se distinguent pas et sur un fond blanc est devenu dérangeant. En effet, j’ai dû cliquer frénétiquement autour de mon contenu jusqu’à enfin avoir la main sur le bloc global et pouvoir enfin le mettre en pleine largeur de page. 

bloc gutenberg page de test contour des blocs wordpress

A gauche, ma page de travail avec Gutenberg, à droite j’ai mis en évidence les blocs compris dans mon groupe de blocs

Cependant, même si j’ai pu modifier facilement la casse du texte, son alignement, le type (H1 à Paragraphe), sa place dans le bloc, la taille image vs. texte, où est ma possibilité de personnaliser chaque bloc ? Je n’ai pas accès à la modification du padding et margin. Ce qui est très perturbant, et surtout très frustrant. Dois-je rédiger mon texte en fonction de la taille de mes images pour être sûre que tout soit parfaitement aligné ?

Bien sûr, vous avez la possibilité de modifier l’alignement mais autant que sur un document Word finalement … En tant que webmaster, c’est très problématique. En tant que néophyte rédigeant des articles de blog, je présume que n’étant pas au courant de ce genre de modifications, je n’irai pas la rechercher. 

En outre, en continuant à ajouter des blocs de contenu, j’ai ajouté un tableau !!!

tableau avec Gutenberg wordpress

Tableau crée avec Gutenberg

Oui, alors je m’explique, de base, il n’était pas possible d’ajouter “simplement” un tableau de données sur un article WordPress. De fait, là, on est sur une fonctionnalité intéressante !

En effet, en 2-3 clics le squelette de mon tableau était fait, je n’avais plus qu’à le remplir. Mais dès que l’on passe à la personnalisation, on a l’impression que ça a été ravitaillé par des corbeaux dépressifs. Pour le “style” il n’y en a que 2 : le classique, avec ces lignes, et le second avec des rayures grises (oui uniquement grises), et c’est marre. Ensuite, vous pouvez modifier : Cellules de tableau à largeur fixe, Section d’en-tête, Section de pied de page. Rien de folichon.

Puis, là vient enfin la personnalisation des couleurs ! Vous n’avez pas moins de QUATRE couleurs pour le BACKGROUND du tableau 🥳. Et celle-ci sont certainement les plus belles avec lesquelles vous aurez à travailler, respectivement : un gris dépression, un vert d’un document piqué à la compta, un bleu OSEF et enfin un très beau orange fadasse. Autant vous dire, que votre tableau donne immédiatement envie à votre lectorat de se pencher sur son contenu. 

Gutenberg

Pour finir sur le reste des options de blocs disponibles, que du ultra basique. La possibilité d’ajouter du code, des shortcodes, du contenu embarqué, des listes, des menus … Pas de quoi vermifuger un abribus ! Je retiendrai quand même la possibilité d’ajouter des call-to-action ou boutons, avec la possibilité de modifier la couleur de police du texte, et la couleur du background du bouton, en mettant des dégradés !! (et ça, c’est cool, parce que j’adore les dégradés, en fait !)

tableau et bouton

Boutons ou call-to-action disponible en natif sous Gutenberg

 

3. Les bundles d’options supplémentaires

Alors ok, je suis peut être un peu vache avec Gutenberg, car il existe maintenant la bibliothèque “Gutengerhub” dont, Cyril a déjà fait l’éloge dans un article précédent, ainsi que Lycia dans cet article. Vous pouvez désormais agrémenter votre Gutenberg natif avec différents packs qui vous permettront d’avoir accès à beaucoup plus de blocs de contenu, et par conséquent vous approchez de façon bien plus significative de ce à quoi ressemble un site au design pro et attrayant. 

Cependant, et je pense que beaucoup de webmaster auront tendance à penser comme moi : quel est le but d’avoir un page builder (ou constructeur de page) natif dans mon CMS, mais dans lequel j’aurai moins d’options qu’un concurrent comme SiteOrigin, Beaver, ou Elementor ? Car au final, ok vous n’avez pas à télécharger un plugin supplémentaire, qui pourrait potentiellement alourdir votre page, votre site, etc. Mais si vous souhaitez avoir un vrai rendu pro, vous êtes obligé d’aller farfouiller le répertoire Gutenberg blocs, donc alourdir votre site avec des plugins, qui ne sont pas crées par WordPress même, mais des collaborateurs.

En gros, cela revient à exactement la même chose, mais en moins complet, en n’ayant toujours pas la possibilité de modifier certains réglages, et on n’a pas accès à des éléments préenregistrés tel que des pages pré-construites, voire des kits de sites. 

exemple de page pré construite avec elementor ou siteorigin

Exemple de pages pré construites avec Elementor ou Siteorigin, elles vous attendent pour être customisées !

 

Pour conclure, je n’avais pas re testé Gutenberg depuis sa sortie, … et je pense que je continuerai à ne pas l’utiliser, car je ne le trouve pas utile, et je n’ai pas envie de perdre du temps à apprendre à utiliser un builder trop “light” pour mes besoins. Il serait ma seule alternative à du code, sans que d’autres builders sur WordPress n’existent, bien sûr que j’en serai ravie. Mais ce n’est pas le cas. Les builders concurrents sont trop bien installés dans la place, et bien bien plus performants que ne le sera jamais Gutenberg.

Aujourd’hui pour chacun de mes sites j’utilise une extensions pour désactiver d’office Gutenberg, afin d’éviter qu’il entre en conflit avec un constructeur de page (ce qui m’est déjà arrivé). Vous avez plusieurs extensions qui vous le propose, celle qui est la mieux noté sur le répertoire WordPress est à ce jour : Classic Editor. Et j’avoue, c’est un plaisir sadique de désactiver cette option de WP qui m’agace franchement 😈 

Gutenberg

Je modère mes propos si toutefois, vous ne souhaitez qu’écrire un blog, sans trop vous prendre la tête avec le design, et que vous n’êtes pas très à l’aise avec l’idée de créer un site internet, alors Gutenberg sera fait pour vous, et il est très minimaliste, donc cela permet d’éviter de  vous perdre dans une tonne de réglages qui vous paraîtront inutiles. 

 

A vous maintenant, de jouer et de ne pas expérimenter Gutenberg, et d’aller lire nos fabuleux articles qui présentent Elementor, Beaver Builder, SiteOrigin ! Cependant, si toutefois vous jugez pouvoir me présenter une landing page, digne des plus grands builders, en ayant recours exclusivement à Gutenberg (sans les add-ons), dîtes-moi en commentaires !

A propos de l'auteur...

Valentine

Après une dizaine d'années passées dans la négociation et relation client, je me suis ré-orientée afin de réaliser un rêve d'enfant : devenir WEBMASTER. Freelance dans le webmarketing, la com digitale et la création de site internet, j'opère depuis depuis 2016, suite à l'obtention de mon bachelor dans le Marketing et la Com digitale. J'aide les TPE/PME à gérer leurs sites, réseaux sociaux, mieux connaitre leur communauté, et globalement améliorer leur marketing digital. Création de site web, de visuels, de contenus rédactionnels, fiches produits, rien n'échappe à mon expertise !

Très orientée geekerie, j'aime tout ce qui est attenant à la tech, au web, la hard SF, les jeux vidéo, le cinéma et ... les chats (ils règnent sur le web, logique !)

11 commentaires pertinents à ce jour ;)

  • Claude Laurent dit :

    Je te rerjoins totalmement sur cet article bien ficelé. Moi de même je trouve inutile ce changement opéré vers Gutenberg,.
    Utilisant pour ma part et avec grand plaisir oceanWP et Siteorigin, je trouve qu’avec cela on a plus de possibilités et de joie que l’on ne ^pourrait trouver avec Gutenberg.
    Merci pour cette étude détaillée.

  • Valentine dit :

    Merci Claude :)
    Surtout qu’avec SiteOrigin le bloc “éditeur” est juste NI-CKEL ! Avec la possibilité de TOUT changer au besoin. Bref, du confort.

  • Claude Laurent dit :

    Non seulement il est nickel mais en plus d’une facilité déconcertante.
    Je ne comprends pas pourquoi on mets toujours Elementor et les autres devant SiteOrigin.
    En fait ton article est le premier que je lis mettant en avant les bienfaits de SiteOrigin.
    Désolé pour mes fautes de frappes dans ma première réponse mais je ne vois pas la possibilité de les corriger 😉

  • Valentine dit :

    Exactement, après je dois reconnaitre qu’il est mal traduit, donc plus d’une fois, j’ai préféré le garder en ENG, histoire de pas avoir à chercher 20 ans les blocs et plugins donc j’ai besoin ^^
    Je peux te conseiller cet article, où j’explique comment réaliser un one page avec SiteOrigin :)
    Gloire à SiteOrigin :D

  • Claude Laurent dit :

    Merci mais désolé de te décevoir… j’ai déjà visiter cet article que j’ai d’ailleurs très bien aimé également et qui m’a montré un autre point en commun avec toi… la fonte robots 😂
    Pareil pour avoir gardé plus d’une fois en fonction des besoins la version en anglais.

  • Claude Laurent dit :

    Ah mais je vois encore un point commun lol
    Et nous ne sommes pas les seuls à garder parfois la version anglaise car parfois trop de bugs ou d’incompréhension sur la version traduite 😂
    Cela me rappelle mes débuts sur un… Mac+ en… 1986 (oui je sais c’est déjà loin 😩) où je préférais travailler sur les programmes anglais car les versions françaises Buguaient constamment.
    Merci pour ton article mais désolé de te décevoir… j’avais déjà été le voir et je le trouve très bon également même si avec oceanWP on peut s’en passer, travaillant la one page en relation avec SiteOrigin.

  • Valentine dit :

    Le principal c’est que les articles t’ont paru pertinents et intéressants :D
    Je comprends totalement et même si je trouve que sur WP les versions FR s’améliorent grandement, certains utilisent encore Google trad pour faire leurs versions.

    Merci pour ton retour Claude, et je pense écrire de nouveaux articles sur SiteOrigin, car ils n’en existent quasi pas sur le web FR. C’est dommage !

  • Claude Laurent dit :

    Je les lirai donc avec attention car effectivement je ne trouve pas qu’on lui donne la valeur qu’il mérite et vu le peu de contenu « correct » sur SiteOrigin je ne peux que t’encourager à en faire surtout s’ils sont du même niveau que tes articles habituels.
    Bonne continuation à toi

  • ALEXANDRA dit :

    Bonjour Valentine,
    J’ai suivi une formation WP il y a quelques années et j’avais installé Visual composer avec lequel j’étais très à l’aise. Mais voilà, j’ai fait une mise à jour de mon site et me voilà avec cet horrible “Gutenberg”! Bien sûr j’ai réussi à le prendre en main très vite mais je ne retrouve pas toutes les fonctionnalités que j’utilisais.
    J’ai donc besoin d’un conseil. Est-ce que je le désactive (mais je ne sais pas comment faire) ou est-ce que j’essaie d’ajouter des pluggins qui me permettront d’avoir davantage de fonctionnalités?
    Merci pour ta réponse à venir.
    Alexandra

  • Valentine dit :

    Hello Alexandra, comme indiqué dans l’article, perso je le retire et fait mon site avec un Page Builder (soit SiteOrigin soit Elementor). Pour retirer Gutenberg, il suffit de télécharger une extension qui le désactivera. Il y en a beaucoup qui font le job.

  • jeremy dit :

    Bonjour,

    Merci pour cette analyse précise de Gutenberg !
    Je souhaite apporter ici une vision un peu différente de l’utilisation possible de cet éditeur tant décrié.

    Comme il l’a souvent été signalé sur différents blogs, Gutenberg n’a pas pour vocation de remplacer un page builder pour le moment. L’éditeur permet surtout d’agencer visuellement le contenu d’un post ou d’une page, et c’est en cela qu’on nombre limité de fonctionnalités et de blocs est une bonne chose.

    Pour les utilisateurs de page builder, habitués à une ribambelle de fonctionnalités plus ou moins utilisées, il est clair que Gutenberg peut sembler fade.
    Mais d’un point de vue orienté code et production sur-mesure, Gutenberg est une passerelle intéressante entre d’une part, un site structuré très rigoureusement (avec Advanced Custom Field notamment) et d’autre part, une gestion de contenus sans shortcodes, widgets ou autre gymnastique inconfortable qui a fait basculer bon nombre de développeurs WordPress sur les page builders.

    Je crois que ce qui est intéressant d’observer, ce n’est pas simplement notre confort de développement, mais plutôt l’administration des sites par les utilisateurs finaux. Certes, les clients ont souvent le souhait de “pouvoir tout faire” et en ça le page builder permet une grande liberté. Mais dans la réalité, je constate que devant le tableau de bord, les administrateurs sont plus rassurés par un parcours balisé leur permettant de mettre à jour simplement leur site.

    Du coup, il est intéressant d’explorer les possibilités (et les limites) de cet éditeur mais pas en l’opposant à des page builders car cela reviendrait à opposer une voiture à une tondeuse. Les deux roulent mais ne servent pas la même fonction. Associé à un développement de thème sur-mesure, sans page builder (oui, c’est possible!), Gutenberg a un réel intérêt et permet d’enrichir l’expérience utilisateur d’administration sans trop l’alourdir.

    Voilà pour mon humble avis :)

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 !