Ce point d’étape sur Gutenberg est un article invité rédigé par l’agence WordPress Fantassin, et édité avec l’équipe de WPMarmite.

Il y a quelques siècles, un homme un peu plus ingénieux que les autres a eu l’idée de créer des caractères mobiles réutilisables, de les aligner, de les tremper dans un peu d’encre et de poser le tout sur du papier.

Il a donc donné naissance au processus d’impression, et à la possibilité de reproduire à la chaîne des livres entiers par un procédé mécanique. Ce brave gars, c’était Gutenberg

Son invention a provoqué quelques réactions, et là où certains se sont enthousiasmés à l’idée de faire circuler des idées, d’autres ont hurlé à la catastrophe, annoncé la fin de la société et de la civilisation.

La démocratisation de la lecture, c’était l’apocalypse (parce que c’était la fin de leurs privilèges) ! 

this is the revolution gif en noir et blanc

Au final, si nous sommes ensemble à lire ces lignes, c’est que la société a survécu, malgré les remous et les changements considérables provoqués par l’imprimerie. 

Revenons à une période un peu plus récente : il y a deux ans, le 6 décembre 2018 pour être exact, WordPress intégrait un nouvel éditeur de contenus à sa version 5.0. Une révolution à base de blocs, baptisée Gutenberg (comme par hasard). L’évolution est considérable, c’est toute l’interface qui s’en trouve bouleversée. 

Comme pour l’imprimerie, l’éditeur veut inaugurer une nouvelle approche de la production et de la diffusion de contenus sur le web.

Pour faire simple, il repose sur un système de blocs répondant chacun à une fonction bien précise, pour mieux structurer et organiser son contenu quel que soit son niveau de connaissance technique, le tout dans une interface où ce que l’on voit est ce que l’on obtient (What You See Is What You Get, comme disent nos amis anglophones)

Un aperçu de l'éditeur Gutenberg de WordPress

L’époque est différente, les acteurs ne sont pas les mêmes, mais les réactions sont étrangement similaires : la levée de boucliers pour s’opposer à ce changement a été bruyante au sein de la communauté WordPress. 

Pourtant, l’exploration sans préjugés du fonctionnement de Gutenberg révélait déjà à l’époque de solides atouts, malgré quelques limites inhérentes à une phase de lancement.

Au fil des mises à jour, l’éditeur n’a pas cessé de s’affiner et de proposer de nouvelles fonctionnalités et des orientations innovantes. 

Deux ans après, quel bilan peut-on tirer de ces évolutions ? L’impression a-t-elle changé au sein de la communauté WordPress (spoiler : on peut entendre des sceptiques de la première heure s’exclamer “I love it” aujourd’hui) ? 

En tout cas, ça semble le bon moment de faire un point d’étape sur Gutenberg, forcément un peu subjectif et marqué par notre volonté de prendre en compte tous les utilisateurs potentiels, avec toute la variété de profils et de besoins que ça représente.

Hébergez votre site chez o2switch

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

ESSAYEZ O2SWITCH
o2switch

Les blocs Gutenberg, un nouveau standard ? 

Vous l’aurez compris, Gutenberg fonctionne avec des blocs de contenus, choisis en fonction de ce qu’on veut mettre dedans.

Les blocs natifs représentent déjà un éventail suffisamment large pour produire du contenu riche et varié, et se divisent en cinq catégories : 

  • Les blocs communs (paragraphe, titre, image…)
  • Les blocs de mise en forme (code, tableau, HTML personnalisé…)
  • Les blocs de mise en page (colonnes, boutons, groupes…)
  • Les blocs widgets (archives, calendrier, code court…)
  • Les blocs de contenu embarqué (YouTube, Facebook, Twitter…)

L’objectif est de rendre tous les types de créateurs de contenus les plus autonomes possible… et cela comprend aussi ceux qui n’ont absolument aucune base en HTML/CSS. 

Simplifier la création de contenus

C’est un point à ne pas oublier quand on veut faire l’évaluation de Gutenberg : c’est un outil qui s’adresse principalement à des gens qui ne sont pas forcément des professionnels du web, ou tout du moins qui n’ont pas un profil technique. 

En ce sens, pour les besoins les plus courants, Gutenberg apparaît objectivement comme une réussite, qui rappelle l’éditeur de texte de Medium, centré sur le contenu, rien que le contenu.

Le mode d’écriture est fluide, les modifications de style sont visibles directement dans l’éditeur, la sélection et la modification de blocs est très intuitive. 

On comprend qu’il est parfois difficile de se débarrasser du poids des habitudes. Mais si on compare Gutenberg avec le Classic Editor (encore disponible sous la forme de plugin, et qui sera maintenu au minimum jusqu’en 2022), l’expérience est beaucoup plus simple, naturelle, et offre nativement beaucoup plus de possibilités de mise en forme. 

Ces points forts n’ont fait que s’améliorer au fil des mises à jour, ouvrant de plus en plus de possibilités de mise en forme et de personnalisation de blocs. 

On peut notamment relever sur les dernières mises à jour la possibilité d’éditer les images directement dans Gutenberg (recadrage, rotations, ajustement du positionnement et des niveaux de zoom…) ou la possibilité d’appliquer des modifications à plusieurs blocs en même temps…

Le tout en améliorant constamment les performances, la stabilité et l’interface.

Le recadrage des images avec Gutenberg sur WordPress

Parmi les dernières avancées importantes, on trouve aussi la possibilité de créer ou de recourir à des Motifs (aussi appelés “block patterns”), soit des ensembles de blocs pré-agencés de manière à répondre à certains besoins précis instantanément, sans avoir à configurer chaque bloc séparément.

C’est un gain de temps considérable pour tous ceux qui utilisent régulièrement les mêmes groupes de blocs dans leurs contenus et leurs mises en page.

Un usage différent de celui des constructeurs de pages

Mais alors, d’où viennent les réserves sur de prétendues limites ?

Soyons honnêtes, cela vient principalement des utilisateurs de constructeurs de page (ou Page Builders), tels que Divi, Elementor, Beaver Builder, qui ne retrouvent pas dans Gutenberg les mêmes possibilités. C’est vrai. Mais l’éditeur n’a pas tout à fait la même vocation que ces constructeurs de page, et ne répond pas aux mêmes besoins. 

Entre des outils qui ont passé des années à intégrer des tonnes de fonctionnalités avancées pour répondre au même endroit à tous les cas de figure possibles et imaginables, et un éditeur grand public qui vise à simplifier la création de contenus, l’état d’esprit n’est pas le même. 

Et le comparatif n’a pas forcément de sens. Tout est une affaire de positionnement et de pratiques professionnelles.

Si vous avez l’habitude d’utiliser un constructeur de page, que vous avez des besoins très spécifiques, des automatismes, et que ça vous facilite la vie, on comprend que vous privilégiez cette solution. Mais vous avez un profil qui n’est pas le plus courant, suggérant des connaissances techniques plus consistantes que la moyenne. 

“Au vu de notre expérience d’agence web, si on installait un constructeur de pages sur les sites de 99% de nos clients, ils n’en utiliseraient qu’un centième des capacités, connaîtraient des difficultés avec l’interface, et auraient bien du mal à être autonomes. 


Alors que depuis le déploiement de Gutenberg, on se retrouve avec des personnes très enthousiastes dans la prise en main d’un outil qui leur permet d’être autonome. C’est une découverte importante pour beaucoup de gens qui abordaient le web avec appréhension, persuadées qu’ils n’y comprendraient rien, et qui se retrouvent à publier du contenu riche avec le sourire, et se réconcilient avec un monde qui leur semblait inabordable”. 

Joffrey Jochum, Directeur Artistique de l’agence créative WordPress Fantassin

En effet, les personnes qui produisent et saisissent du contenu sont rarement issues du monde du développement ou du design web.

Ce sont souvent des rédacteurs qui ont à coeur de partager quelque chose, leur expertise, leur passion, leurs produits, leurs astuces, et qui cherchent un outil qui leur permette de se concentrer sur cette seule et unique tâche, celle qu’ils connaissent et qu’ils maîtrisent : produire du contenu de qualité lié à leurs compétences. Se focaliser sur l’éditorial sans avoir à se soucier de contraintes techniques.

La pertinence d’un outil se mesure à la réponse qu’il apporte aux besoins qu’on met en face. Et dans l’immense majorité des cas, Gutenberg nous semble apporter un large éventail de possibilités aux utilisateurs de WordPress, tout en restant accessible à tous.

Formez-vous à WordPress en 3 mois

Apprenez à concevoir des sites WordPress sécurisés, rapides et conformes aux obligations légales avec la formation à distance la plus généreuse du marché (éligible au CPF).

WPChef, la formation WordPress de référence

Des spécificités techniques adaptées aux professions du web 

Si on va plus loin et qu’on aborde le sujet sous un angle un peu plus technique, Gutenberg est loin d’être aussi limité qu’on voudrait le croire. 

En comparaison avec les constructeurs de page, Gutenberg offre nativement moins de possibilités. Certes.

Mais…

  • Les Page Builders sont aussi de véritables usines à gaz techniques mobilisant beaucoup de ressources, qui resteront bien souvent inutilisées.
  • Ce sont aussi des extensions, qui créent donc de la dette technique, c’est à dire un défaut d’optimisation qui aura un coût dans le futur. 

Bon, n’importe quel site a une part de dette technique, intentionnelle ou non, parce que les standards et les usages évoluent, c’est inévitable.

Mais plus un site intègre d’éléments extérieurs, moins ses aspects techniques ont été pensés “globalement”. Ce qui a un impact sur les performances, mais aussi favorise le risque de générer des dysfonctionnements sur le long terme, et ouvre des dépendances pour l’entretien du site, voire des failles de sécurité. 

Loin de nous l’idée de vous empêcher d’installer des plugins/extensions, véritables atouts pour des sites qui intègrent des fonctionnalités adaptées à vos objectifs.

Cependant, faites preuve de modération, en pensant bien en amont vos besoins réels.

Directement intégré à WordPress, Gutenberg n’a pas ces problèmes et représente une option équilibrée entre performances et fonctionnalités : malgré la multiplication des nouveautés, l’interface et l’usage restent simples pour les utilisateurs qui ont des besoins simples.

Gutenberg ne se complexifie que pour les personnes qui sont en mesure de gérer cette complexité.

“Gutenberg est un véritable terrain de jeu pour tous les professionnels du web : en ce qui nous concerne, il nous a permis d’automatiser de nombreux aspects de nos processus de design et de développement.


Penser en blocs permet de mieux décomposer les contraintes des projets, d’envisager les contenus en termes de contexte et d’exceptions, de construire avec des modules et des composants potentiellement réutilisables, de multiplier les possibilités de mise en page à partir d’une même base… Bref, de mettre la forme au service du contenu (et non l’inverse)”.

Florian Truchot, Directeur Technique de l’agence WordPress Fantassin

Et même si le catalogue de fonctionnalités natives reste restreint, Gutenberg peut devenir un véritable laboratoire d’expérimentations pour créer de nouveaux blocs, de nouveaux thèmes qui en tirent le meilleur parti, et ouvrir de nouvelles possibilités. 

Les thèmes et plugins à l’épreuve de Gutenberg

Pour les développeurs, la sortie de Gutenberg a été l’occasion de partir à la conquête d’un nouveau marché, et de créer des extensions venant pallier les limites originelles de l’éditeur, ou des thèmes conçus pour fonctionner en blocs.

Il y en a beaucoup trop pour faire un tour complet de la question, mais il apparaît indispensable dans ce bilan de mettre en avant les plus Gutenberg-compatibles

Comment vérifier la compatibilité de son site avec Gutenberg ? 

Avant toute chose, pas de panique : Gutenberg a été pensé pour poser le moins de problèmes de compatibilité possible avec les thèmes et extensions qui le précèdent. Il y a même un bloc qui reprend les caractéristiques de l’éditeur classique.

Souvenirs de l'ancien éditeur de WordPress
Il vous manque, à vous, cet éditeur classique ?

Mais les nombreuses avancées et modifications de l’éditeur exigent quand même un suivi, et demandent certaines adaptations pour lui laisser une place à sa mesure, et surtout pour que les thèmes et extensions puissent profiter pleinement du potentiel de Gutenberg.

L’un des premiers moyens de vérifier si son thème et ses extensions sont compatibles avec Gutenberg, c’est de vérifier qu’ils ont été testés avec une version de WordPress postérieure à la version 5.0.

Si ce n’est pas le cas, au-delà de la question de la compatibilité, ça suggère un déficit de maintenance flagrant, et on vous suggère de vous débarrasser de ces thèmes et extensions. 

Quels thèmes et extensions pour développer le potentiel de Gutenberg ? 

Parce qu’il y a de quoi faire avec des éléments conçus spécialement pour Gutenberg ! En termes de plugins Gutenberg, beaucoup viennent enrichir la bibliothèque de blocs pour donner plus de possibilités et renforcer le potentiel de l’éditeur face aux constructeurs de page. 

L’article que la Marmite avait rédigé sur les plugins Gutenberg en présente les principales : il y en a pour tous les goûts.

page de téléchargement du plugin wordpress advanced gutenberg blocks

Mais on a envie de mettre en avant le travail Made In France de Maxime Bernard-Jacquet, qui avec son plugin Advanced Gutenberg Blocks propose 16 blocs variés, notamment utiles pour des usages e-commerce et pour de la monétisation, mais aussi un bloc “Table Of Contents” bien utile pour les contenus longs… et qui est d’ailleurs utilisé sur WPMarmite !

En ce qui concerne les thèmes, l’offre est foisonnante, du gratuit au premium (comme vous avez pu le découvrir dans le test du thème Rosa 2 que la Marmite a fait), et chaque enseigne met en avant des thèmes garantis optimisés pour Gutenberg, avec plus ou moins de paillettes et de fonctionnalités pas forcément utiles.

page d'accueil des thèmes d'Anders Noren pour l'éditeur Gutenberg de WordPress

Comme on préfère l’efficacité discrète et le minimalisme élégant, on vous recommande les thèmes d’Anders Noren, un développeur qui s’est approprié Gutenberg dès le départ pour développer des thèmes bien conçus et équilibrés, au code propre et performant.

C’est d’ailleurs ce qui lui a permis de diriger la conception du thème par défaut actuel de WordPress, Twenty-Twenty, qui est lui aussi particulièrement efficace et qui représente une base de travail très malléable, avec des possibilités de personnalisation qui peuvent répondre à des besoins très variés, tant que vous n’avez pas besoin de fonctionnalités non natives. 

Pour terminer, il faut bien sûr mentionner les constructeurs de pages (qui reviennent souvent dans cet article). En effet, leur emploi avec Gutenberg entraîne des redondances techniques, et parfois des conflits.

La meilleure option est donc de faire un choix pour son contenu. Et même si Beaver Builder revendique aujourd’hui une compatibilité complète avec Gutenberg, faire cohabiter l’éditeur avec un constructeur de pages empêche d’utiliser toutes les capacités de l’un et de l’autre. 

Les deux outils peuvent néanmoins coexister quand ils ont chacun une fonction séparée et bien précise. Par exemple, WPMarmite…

  • Créé la plupart de ses pages avec Elementor
  • Mais ses articles sont exclusivement rédigés avec l’éditeur de WordPress

Comme toujours, l’essentiel est de choisir l’outil qui colle le plus aux besoins.

Et pour faire ce choix, il peut aussi être judicieux de s’intéresser au futur de Gutenberg, et à la feuille de route des équipes qui participent à son développement. 

Accélérez votre site internet avec WP Rocket

Transformez votre site en fusée grâce au plugin de cache reconnu le plus performant par les experts WordPress.

Essayez WP Rocket
Logo WP Rocket

Quel avenir pour Gutenberg ? 

Depuis son lancement, Gutenberg s’est bien développé et a su consolider ses atouts, tout en corrigeant un certain nombre de défauts de jeunesse (notamment en termes d’accessibilité). De nombreux chantiers ambitieux sont encore en cours, et dévoilent ce que sera le projet à long terme. 

Ça bosse fort, côté Gutenberg !

Dès l’origine, Gutenberg a été pensé en deux phases :

  • D’abord un éditeur de contenu (Post Editor)
  • Puis un éditeur de site complet (Full Site Editing)

A l’heure actuelle, la première phase touche à sa fin, notamment avec le bloc “navigation” qui va faire son apparition dans la version 5.6 de WordPress, et permettra d’intervenir sur les menus.

De nombreuses expérimentations sont menées pour véritablement concrétiser la phase deux dans un futur proche, et permettre aux utilisateurs de construire chaque aspect de leur site avec ce système de blocs et sa simplicité d’utilisation. 

Le travail en cours de développement sur les styles globaux (ou Global Styles) va dans ce sens, et vise à définir directement dans l’interface de Gutenberg les paramètres de style qui vont être appliqués par défaut sur le site : typographie, tailles de caractères et d’interligne, paramètres de marges, de couleurs, d’arrière plan, etc.

Une fois définies, ces variables vont s’appliquer par défaut à tous les blocs Gutenberg présents sur le site. Pour résumer, il s’agit de définir l’ensemble des variables CSS en quelques clics

Il faut ici imaginer la possibilité de construire des thèmes et des modèles de pages spécifiques pour des profils non-techniciens (qui vont quand même devoir être attentifs pour y voir clair, et faire preuve de soin et de rigueur pour créer des pages cohérentes).

De construire sans produire la moindre ligne de code un site à son image, sans passer par un thème développé par des tiers.

De poser soi-même ses blocs, avec un minimum de contraintes. 

Dit comme ça, ça donne envie !

D’après Chris Lema, ce système ouvre également la voie vers la création de sites dynamiques, pour devenir la base de sites où les blocs de contenus changent en fonction des intérêts des visiteurs.

On imagine les possibilités en termes d’A/B testing (c’est à dire le fait d’afficher aléatoirement deux contenus différents pour mesurer celui qui a les meilleurs résultats) et de webmarketing, comme par exemple de remplacer un encart d’abonnement à une newsletter par un contenu personnalisé une fois la personne inscrite ! 

Et ces atouts pourront se déployer largement en dehors des frontières de WordPress : Gutenberg est en effet CMS-agnostique, et peut potentiellement s’exprimer sur n’importe quelle autre plateforme. D’ailleurs, Drupal et Laravel ont déjà fait un portage. 

Enfin, on peut également mentionner le projet asblocks de Riad Benguella, l’un des principaux développeurs de Gutenberg, qui en propose une version collaborative en temps réel.

A l’image du fonctionnement d’un Google Doc, plusieurs auteurs peuvent intervenir, commenter leur travail en même temps sur une seule et même interface. En fait, ce travail pose les bases de la phase 3 du développement de l’éditeur, celle du collaboratif, en attendant la quatrième phase : le multilingue !

De votre côté, qu’est-ce que vous retenez de votre expérience avec Gutenberg ? Quel est votre bilan personnel de ces deux années avec l’éditeur dans le paysage ?