Gutenberg : que nous propose le nouvel éditeur de WordPress ?

Logo Oniti représentant une girafe violette sur une palette verte et quelques bulles vertes et violettes
Wordpress a lancé la phase 2 de Gutenberg, le full site editing de son éditeur de contenu « maison », pour une meilleure expérience d’édition avec des blocs. Il n’en fallait pas plus pour aiguiser la curiosité des équipes d’Oniti. Que propose cette nouvelle solution ? C’est ce que Sybil, notre développeuse designer UX s’est empressée d’étudier, et c’est pour la bonne cause : la refonte prochaine de notre propre site internet Oniti ! Alors Sybil ? Gutenberg, on y va ou on n’y va pas ?

Gutenberg, de quoi s'agit-il ?

Sybil Développeuse Ux designer

Initialement, Gutenberg est un éditeur de contenu par blocs, sorti avec wordpress 5.0 en décembre 2018, mais beaucoup de choses ont changé depuis. Avant, l’éditeur, dit “classique”, était un éditeur de texte basique qui ne permettait pas de construire des pages. Alors que Gutenberg, lui, a vocation à devenir un constructeur de pages, comme Elementor ou Divi.

À quoi correspond cette deuxième étape de full site editing ?

La mise en place de Gutenberg suit quatre grandes étapes, et nous en sommes donc à la deuxième. Première étape, l’introduction de l’éditeur avec wordpress 5.0. Deuxième étape, le full site editing, cette fameuse proposition de construction de blocs, qui est sortie en janvier avec wordpress 5.9. La troisième étape sera la collaboration et la quatrième, le multilingue.

Alors c’est du WordPress pour WordPress ?

Gutenberg est un projet périphérique à WordPress, mais effectivement développé par l’équipe du célèbre CMS. Il est cependant indépendant et pourra servir aussi d’autres CMS, comme Drupal, par exemple.

Quel intérêt représente Gutenberg ?

Sybil Développeuse Ux designer

C’est une vraie révolution ! Avant, il y avait plusieurs façons de gérer du contenu dans wordpress : des shortcodes, des widgets, l’éditeur classique, les menus. Chacun avec une façon spécifique d’éditer le contenu. Maintenant, il n’y a qu’un seul concept-clé transversal à tout le site : c’est le bloc. Cela permet d’unifier l’édition. De plus, les blocs sont réutilisables, importables et exportables, comme chez Divi et Elementor. Pour une agence comme Oniti, cette dernière fonctionnalité nous permettra de créer notre propre bibliothèque de blocs.

Et techniquement ?

Sybil Développeuse Ux designer

Ça c’est l’autre révolution de Gutenberg ! L’architecture des thèmes est complètement différente. Avant, on travaillait avec la template hierarchy, une série de templates en php. Avec Gutenberg, on a deux groupes : les template et les template parts, qui sont des fichiers html, et le css est géré dans un fichier theme.json.

Qu’a-t-il de plus à nous offrir qu’Elementor ou Divi ?

Pour Elementor et Divi, le contenu est prisonnier de ces builders. En effet, Divi fonctionne avec des shortcodes. Ainsi, lorsqu’on désactive Divi, on perd notre contenu ! Avec Gutenberg, le contenu est construit en html, ce qui lève ce problème de cycle de vie du site. Techniquement, le contenu est sauvegardé dans un commentaire html, plus ou moins un objet json.

L’autre différence avec les builders est qu’on obtient une sémantique beaucoup plus propre. Le balisage est mieux réalisé et on évite la multiplication de div. Avec les constructeurs de page, on peut avoir jusqu’à dix ou douze

sur un paragraphe de texte, ce qui n’est pas très performant, ni très SEO friendly ! L’expérience d’édition, elle, est très visuelle, avec un vrai rendu en back office, assez similaire à Elementor. Cerise sur le gâteau, l’accessibilité serait particulièrement améliorée sur la solution Gutenberg et la communauté est gigantesque, en comparaison d’Elementor ou de Divi.

Quels atouts pour les développeurs ?

Le wp – bloc est un type de publication natif qui peut être statique ou dynamique. On peut surcharger les blocs existants grâce à des bloc filters, l’enregistrement de variations de blocs, ou bien des classes ou le fichier thème json. Mais on peut aussi créer de toute pièce ses propres blocs avec un fonctionnement proche de react ou en utilisant ACF PRO… Bref, les possibilités sont infinies. En plus, on évite l’accumulation de plug in à mettre à jour et les aléas associés que l’on connaît.

N’y a-t-il donc que des avantages à choisir Gutenberg ?

Malheureusement, non. La contrepartie est le temps nécessaire pour réaliser un site internet, car chaque fonctionnalité devra être développée. Plus de widgets clé-en-main, plus de plug-in déjà paramétrés, etc. Pour l’instant, ce différentiel de temps de développement et de maintenance sont encore à explorer. Ils seront à mettre en regard du gain de performance, de SEO et d’accessibilité.

De plus, nous observons que les plugins bibliothèques de bloc qui complètent l’existant se développent de toute part. Or, selon nous, tout l’intérêt de Gutenberg n’est pas de rajouter x plugins pour le transformer en une usine à gaz comme Divi ou Elementor, mais justement de pouvoir tout faire avec lui et de garder le wp léger et performant (en limitant les problématiques de mises-à-jour).

Alors ? On y va ?

Chez Oniti, nous allons effectivement expérimenter Gutenberg dans le cadre de la refonte de notre propre site internet. Nous vous partagerons évidemment notre retour d’expérience dans un nouvel article !

En attendant, nous vous invitons à consulter le site de Jean-Baptiste Audras, un des deux core dev français de wordpress. Avec le handbook de Gutenberg, ces sources nous ont permis de pousser notre analyse du sujet.

Un bel exemple de site entièrement développé sur Gutenberg ? Le site de la Maison blanche !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *