WordPress et son éditeur Automatic proposent depuis quelques temps le FSE, ou “Full Site Editing”, pour personnaliser complètement tout le contenu de son site, via son nouvel éditeur de blocs : Gutenberg.
Ce pamphlet (je vous le dis de suite : ça va piquer) vous donne mon point de vue très personnel sur Gutenberg, et sur ce que vous pouvez faire avec.
Présentation de Gutenberg et de son concept d’édition par blocs
Gutenberg est le nouvel éditeur de contenu pour WordPress depuis quelques années. Il vise à révolutionner la manière dont les utilisateurs conçoivent et publient du contenu en introduisant une interface intuitive basée sur des ‘blocs’. Ces blocs peuvent être n’importe quoi : du texte, des images, des citations, etc. Vous pouvez les ajouter, les réorganiser et les personnaliser à votre guise, offrant ainsi une manière plus flexible et dynamique de créer du contenu.
Mais, après plusieurs années de bons et loyaux services, peut-on dire que Gutenberg a tenu toutes ses promesses ?
L’intuitivité et la flexibilité de Gutenberg
L’une des principales forces de Gutenberg est censé être sa simplicité d’utilisation. Au lieu de jongler avec une pléthore d’options et de menus, vous avez juste besoin de choisir un bloc, de le placer là où vous le voulez, et de le remplir avec votre contenu. C’est presque comme jouer à des briques de construction pour votre site web, ce qui rend le processus de création de contenu beaucoup plus amusant et interactif. Ce concept d’édition par blocs doit également permettre une personnalisation sans précédent, car chaque bloc peut être ajusté individuellement, changeant ainsi la couleur, la taille, l’espacement etc.
Une modularité attrayante
Le principal avantage de Gutenberg résiderait aussi dans son approche modulaire et “intuitive”. Chaque partie du contenu, qu’il s’agisse d’un paragraphe, d’une image, d’un en-tête ou d’un bouton, peut être un bloc distinct. Ces blocs peuvent être ajoutés, réarrangés et stylisés individuellement, donnant une “liberté sans précédent dans le design des pages” (sur le papier). De plus, Gutenberg propose une large gamme de blocs prédéfinis, allant des éléments de base tels que les paragraphes texte, aux blocs plus spécialisés comme les galeries d’images, les formulaires, les citations ou les boutons.
<a data-src=“/img/theorie.jpg” data-fancybox=“blog-gallery” data-caption=""La théorie est ce lieu mystérieux où les idées prennent vie, bien avant d’être testées dans le monde tangible.""> <img src=“/img/theorie.jpg” loading=“lazy” alt=""La théorie est ce lieu mystérieux où les idées prennent vie, bien avant d’être testées dans le monde tangible."">
Voilà, tout ça, c’est de la théorie, et voilà ce qui se passe en pratique.
Je déteste Gutenberg.
Malgré ces fonctionnalités prometteuses, l’éditeur Gutenberg n’est pas encore entièrement adapté pour réaliser des sites professionnels. C’est mon avis, très personnel, et je vous explique ici pourquoi je désactive systématiquement Gutenberg sur les sites WP que je monte. Et que, malgré plusieurs heures à essayer de lui trouver un intérêt, chaque tentative effectuée pour lui trouver des qualités s’est terminée en “rage quit”, toujours avec la même conclusion : c’est une poubelle.
Un environnement de création limité
En premier lieu, sa bibliothèque de blocs, bien qu’étendue, reste limitée face aux besoins spécifiques des sites professionnels, requérant parfois des éléments hautement personnalisés.
C’est compliqué de modifier padding et margin (des trucs pourtant très basiques). Idem si je veux rajouter une image de fond sur un conteneur (on ne peut le faire que sur certains objets).
Et je ne parle même pas de la gestion des pseudo-classes CSS, comme le :hover ou les :before et :after (on ne peut pas).
Bref, pour faire une page, une VRAIE page, Gutenberg tient plus du gadget que de l’éditeur à proprement parler.
Alors, certes, on peut ajouter des classes CSS personnalisées sur tout (donc on peut tout styliser en dur). Mais si on en arrive là, autant rester sur un éditeur de code classique.
Pour pallier à tout cela, et avoir un truc totalement utile “nativement” il faudrait créer une foultitude de blocs supplémentaires, et je travaille bien plus vite avec mon éditeur de code, et le trio gagnant “VS Code + Emmett + Tailwind CSS”.
Ergonomie douteuse
On note un manque d’intuitivité et d’ergonomie flagrant, notamment pour les utilisateurs non expérimentés. La maitrise de Gutenberg nécessite un certain temps d’apprentissage, ce qui peut rallonger le processus de conception d’un site. C’est mal fichu, mal pensé, c’est le bazar et il manque pleins de trucs (cités plus haut).
Oui, on peut modifier l’essentiel, donc ça pourrait faire 80 % du job. Mais entre “faire un site” et “faire un site professionnel”, il y a justement ces 20 % restants qui font toute la différence.
La courbe d’apprentissage
Qui dit “ergonomie douteuse” dit aussi “courbe d’apprentissage plus rude”.
Malgré le fait que cette plateforme ait été pensée pour être facile à utiliser, elle représente un changement significatif par rapport à l’éditeur classique de WordPress. Les utilisateurs réguliers peuvent donc trouver difficile et chronophage de se familiariser avec cette nouvelle interface.
<a data-src=“/img/gutenberg-back-office.jpg” data-fancybox=“blog-gallery” data-caption=""Alors, pour modifier le padding, c’est…""> <img src=“/img/gutenberg-back-office.jpg” loading=“lazy” alt=""Alors, pour modifier le padding, c’est…"">
Les icônes utilisées sont mal choisies, et on a peu de contrôle sur le code en sortie, à moins de faire “clic droit + inspecter l’élément”, regarder le rendu HTML + CSS, et en déduire ce que Gutenberg, et son rendu foireux en back-office, ont fait. Pour le dire autrement, ce n’est pas DU TOUT à la portée d’un débutant.
Notre novice va donc s’en remettre au petit bonheur la chance, ou accepter d’avoir un rendu imparfait, faute de temps et de motivation pour procéder à une mise en place laborieuse en mode “essai / erreur / correction”. Une plaie, en matière de conception web.
Et le full site editing ?
Je vais pouvoir ici tordre le coup à ce concept. Le full site editing, normalement, c’est la promesse de pouvoir concevoir votre header, votre footer et votre pied de page comme bon vous semble. Grâce à ce bon vieux Gutenberg.
On va commencer par la side bar : on pouvait déjà éditer son contenu avec l’ancien customizer.
Ensuite, pour les headers et footer : personnaliser, Ok, mais comment ? Vous voulez centrer le logo ? Avoir la navigation en dessous ? Et pour le pied de page, vous préférez deux, trois colonnes ? Avec un peu de contenu HTML dedans ?
Super, on va pouvoir le faire grâce au FSE ! Ah. Sauf qu’on pouvait déjà le faire sur pratiquement tout les bons thèmes.
La valeur ajoutée du FSE n’est donc pas si grande que ça, pour peu que vous ayez déjà eu affaire à un thème “correct”.
La compétition des builders
Mais là où Gutenberg s’est vraiment loupé, justement, c’est sur sa cible.
Je récapitule : Gutenberg est censé être un outil simple d’utilisation, pour éditer tout le contenu de son site. Il doit être intuitif, et permettre de créer des pages professionnelles.
Son interface est loupée, moche, et peu intuitive.
Et en face de ça, on a quoi ?
Elementor.
Divi.
WP Bakery (et les autres).
Des outils qui ont énormément d’avance, permettent pour le coup une personnalisation bien plus avancée, plus simple, sur une interface mieux réalisée.
Elementor, pour ne citer que lui, réussit bien mieux à propose une expérience “intuitive” (je mets quand même des guillemets, et j’ai du mal à croire que je fait un compliment à ce builder).
Oui, le code source pondue par les builders est 100 fois plus sale que celui de Gutenberg. Mais franchement, aujourd’hui, qui s’intéresse à ça (à part les maniaques ou les professionnels) ?
Gutenberg est un produit raté, qui a manqué sa cible, et qui propose une expérience moins bonne que ses concurrents, pour un résultat beaucoup plus médiocre.
C’est un pseudo-builder, moins beau, avec moins de fonctionnalités. Il va vous permettre de faire des pages avec des colonnes, certes. Mais la personnalisation étant pour l’instant très limitée, quel intérêt ? Pour les articles de blog, l’ancien éditeur faisait parfaitement le job.
Ses deux seuls points positifs, c’est son code plutôt propre, et le fait qu’il est gratuit.
Ah, on me dit dans l’oreillette que Elementor aussi propose une version gratuite…
Passer du temps pour “bien apprendre” à utiliser Gutenberg, de mon point de vue, c’est une hérésie : mieux vaut apprendre le CSS et l’utilisation de certains outils de conception web moderne (Node, NPM, n’importe quel framework CSS qui va tourner avec SASS etc). Avec ça, vous ferez quelque chose de propre, et de véritablement professionnel.
