Gutenberg , le content builder user-friendly de WordPress

[Article écrit pour BeAPI, et disponible sur beapi.fr]

Après un peu plus de 2 ans d’existence, on peut désormais l’affirmer. WordPress et Gutenberg, son nouvel éditeur, ont radicalement révolutionné la manière de créer/concevoir un site Internet, et plus spécifiquement de créer des contenus pour le Web.

Exit l’éditeur TinyMCE et la rigidité de l’édition en mode traitement de texte, bonjour Gutenberg la souplesse, la créativité, la liberté.

Lancé avec timidité en décembre 2018 (et pourtant figure de proue de WordPress dans sa version 5.0), pas toujours très bien reçu, par les utilisateurs historiques notamment, le nouvel éditeur du CMS a fini par conquérir petit à petit le coeur de ces derniers, et peut-être même celui des nouveaux webmakers, en témoigne la courbe d’utilisation toujours grimpante du CMS le plus utilisé au monde.

Du changement, mais pourquoi ?

1. Améliorer l’expérience utilisateur

Créé en 2003, WordPress n’a pas attendu 2020 pour se renouveler, et c’est plutôt de manière constante que le CMS s’est adapté aux usages de ses utilisateurs. Malgré cela et il faut tout de même se l’avouer : la contribution et l’édition des contenus était l’un des seuls pans du CMS à n’avoir que très peu évolué au fil du temps. Il était donc temps de s’y pencher.

En termes d’édition, Gutenberg n’a rien créé et il n’est pas toujours nécessaire de réinventer des bonnes idées quand elles sont déjà là. Le nouvel éditeur de WordPress s’est plutôt inspiré des meilleures expériences d’édition émergeantes, et notamment l’édition épurée et par blocs de la plateforme de blogging Medium, créée en 2012. Oui, la contribution sous forme de blocs, le principe de base de Gutenberg, existait déjà il y a plus de 8 ans !

L’éditeur de Medium.com

2. Faire face à des solutions externes concurrentes

De nombreuses plateformes de création de sites Internet en ligne sont nées ces dernières années. Wix, Weebly, Squarespace, pour ne citer qu’elles, font la promesse à leurs utilisateurs de créer rapidement et simplement leur site Internet, sans aucune connaissance technique particulière.

En terme d’expérience de contribution, WordPress n’a pas eu d’autre choix que de se rapprocher de ces promesses, tout en conservant les spécificités qui ont fait sa popularité : gratuit, open-source, souple, extensible, documenté, communautaire, seo-friendly. Avec Gutenberg, l’édition user-friendly vient donc s’ajouter à cette liste de bons points pour le CMS, et après deux années d’existence, on peut dire que c’est un pari réussi.

3. Reprendre la main au sein de son propre écosystème

Depuis des années déjà, WP Bakery (Visual Composer pour les 👴 / 👵 ), Elementor, Divi ou encore Beaver Builder (entre autres) sont bien installés en tant que constructeurs de page (page builders). Pourquoi ? Parce qu’ils répondent à un besoin utilisateur précis : celui de pouvoir contribuer ses contenus WordPress avec une expérience utilisateur améliorée, simplifiée et très visuelle.

Avant Gutenberg, ces besoins-là, WordPress n’y avait jamais réellement répondu nativement. Avec son nouvel éditeur, l’idée était bien de revenir dans le game de l’édition libérée et créative. OK, mais comment déloger ces mastodontes de l’édition de contenus ?

Un gain en temps et en performance

Par rapport à ses concurrents, Gutenberg a un énorme avantage : il est intégré au coeur de WordPress. Pas d’extension ou de dépendance, donc pas de chargement supplémentaire côté backoffice, un plus indéniable face à ces page builders souvent qualifiés d’usines à gaz. Avec Gutenberg, c’est simple et rapide : on installe WordPress, on ouvre le backoffice, on crée son contenu.

Une prise en main facilitée

L’éditeur est donc intégré techniquement à WordPress, mais il l’est aussi visuellement. En effet, Gutenberg utilise les composants natifs de WordPress sans surcouche visuelle, contrairement aux page builders. Peu importe où il se trouve dans le backoffice, dans l’édition d’une page en mode Gutenberg ou ailleurs, le contributeur reste dans l’esprit et l’interface native de WordPress en permanence, ce qui favorise à n’en pas douter un apprentissage plus rapide de l’utilisation de l’éditeur.

Une démarche qui dépasse la simple contribution

Ce qui fait de Gutenberg un éditeur différent est également son approche différente de contribution, sur l’aspect technique bien évidemment, mais aussi et surtout dans l’esprit. En réalité, Gutenberg n’est pas un page builder mais un content builder : la différence est légère, mais elle est là et importante. On ne pense plus page ou template avec Gutenberg. On décloisonne un peu tout ça, on pense plus largement, on pense contenu, transversalité et réutilisabilité !

Et ça tombe bien car c’est exactement comme ça que se construit le web d’aujourd’hui. A tous les niveaux, de la conception au développement, tout se fait désormais en mode composant. Gutenberg et ses blocs s’inscrivent totalement dans ce mouvement. Le contributeur rejoint ainsi le webdesigner et développeur dans cette vision et cette organisation des choses, et c’est comme si tout devenait enfin logique et cohérent dans la façon de faire du web.

Avec Gutenberg, tous les maillons de la chaine de production web sont désormais sur la même longueur d’onde.

4. Apprivoiser des technos modernes

Face à l’arrivée d’interfaces toujours plus fluides et réactives reposant sur le langage Javascript, WordPress se voit offrir l’opportunité d’un petit lifting, mais aussi de prendre un virage déterminant pour son évolution. Même si la librairie JavaScript jQuery est intégré au coeur de WordPress depuis très longtemps, elle ne suffira plus pour passer un cap.

Le JavaScript a évolué à une vitesse exponentielle ces 5 dernières années, et les frameworks et librairies qui s’appuient sur ce langage aussi. Il faudra désormais se tourner vers une librairie ou un framework plus solide comme Angular, React, VueJS (pour les plus connus) qui sont finalement très récents mais déjà incontournables pour faire du web moderne, léger et interactif.

Pour Gutenberg, WordPress choisira React, une solution open source depuis 2013, créée par Facebook, qui commençait à sortir du lot à l’heure ou il fallait faire un choix. Tout comme WordPress, React bénéficie d’une popularité grandissante, d’une communauté importante et d’une documentation solide. Ce choix aura aussi pour avantage d’attirer de nouveaux développeurs spécialisés et d’agrandir un peu plus la communauté WordPress.

Gutenberg en pratique, ça donne quoi ?

Natif, additionnel, sur mesure, réutilisable, imbriqué en composition, le bloc est central dans l’utilisation de Gutenberg et se met au service de la contribution, avec pour quasi seule restriction la créativité du contributeur.

1. Les types de blocs

Les blocs natifs

A ce jour, Gutenberg met à disposition du contributeur environ 70 blocs natifs. Si on ajoute à cela le nombre de combinaisons et imbrications possibles entre eux, mais aussi le nombre d’options de personnalisation proposées pour chacun des blocs, les possibilités sont énormes.

Avec toute cette liberté offerte, on peut alors comprendre que le contributeur puisse se sentir à la fois tout-puissant mais aussi peut-être un peu perdu, sentiment qui peut être renforcé par l’interface très épurée de l’éditeur.

Heureusement, Gutenberg étant lui même extensible et bien documenté, il est possible de personnaliser et optimiser l’éditeur en ajoutant facilement (en code ou via une extension) quelques garde-fous au backoffice : restriction du nombre de blocs disponibles aux seuls qui vous seront utiles, personnalisation des options de blocs (choix de couleurs limités à la charte du site par exemple), limitation d’accès aux blocs par type de contenu ou même par rôle contributeur.

La liberté de Gutenberg c’est de pouvoir l’utiliser mais aussi de pouvoir le personnaliser comme bon vous semble.

Les blocs additionnels

Parce que vous pouvez avoir besoin de blocs non disponibles nativement, sachez que de très nombreux packs de blocs ont été développés, sous forme d’extension pour la majorité d’entre eux, vous permettant d’étendre assez largement la liste de blocs disponibles de base. Comme lorsque vous choisissez une extension, veillez toutefois à ce que le pack que vous aurez choisi ne vienne pas dégrader la qualité, le SEO, l’accessibilité ou même la performance de votre site.

Pour les extensions existantes avant Gutenberg, l’adaptation à ce nouvel éditeur s’est faite progressivement. Aujourd’hui, la plupart des grosses extensions proposent un ou plusieurs blocs Gutenberg, en lieu et place des fonctionnalités qu’elles proposaient auparavant souvent sous forme de code court (shortcode). Pas d’inquiétude si le bloc de votre extension préférée n’existe pas, les shortcodes sont toujours gérés par Gutenberg qui propose un bloc natif dédié.

Les blocs sur mesure

Grâce à un éditeur techniquement ouvert, codé dans l’esprit de WordPress, et une documentation complète pour les concepteurs/développeurs, sachez qu’il est assez accessible de créer ses propres blocs, et de différentes manières :

1. La solution JavaScript / React : cohérente mais chronophage
   Si vous souhaitez totalement vous fondre dans l’expérience utilisateur proposée nativement par Gutenberg, et notamment l’édition live, vous devrez alors créer vos propres blocs Gutenberg en React. Cette solution est la plus logique, car elle utilise pleinement Gutenberg, mais aussi la plus complexe car elle va nécessiter d’avoir, ou d’acquérir, des compétences avancées en JavaScript et en maitrise du framework React.
2. La solution PHP / ACF : un peu old school mais très efficace
   La deuxième solution consiste à utiliser l’une des extensions les plus populaires de la communauté : Advanced Custom Fields PRO. ACF PRO permet la déclaration et la création de blocs en PHP. Avec cette technique, le contributeur perdra un peu de fluidité en expérience de contribution, puisque l’édition du bloc se fera via des masques de saisie (champs ACF), mais cette solution s’avèrera aussi être plus naturelle et rapide à mettre en place.

Il y a donc plusieurs manières de créer vos propres blocs, selon vos affinités de langage, mais aussi le temps et le budget dont vous disposez.

2. Les blocs et au-delà

Gutenberg propose également aux contributeurs des fonctionnalités leur permettant de tirer le meilleur parti de l’utilisation des blocs, et d’utiliser au maximum la notion de composant directement depuis le backoffice.

Les blocs réutilisables

Les blocs réutilisables permettent de partager entre plusieurs pages du site un bloc Gutenberg (natif, additionnel ou sur-mesure) déjà contribué et paramétré par le contributeur. Une fois converti (et c’est réversible), le bloc rejoint alors la bibliothèque spécifique des blocs réutilisables, et est immédiatement disponible pour tous les contenus Gutenberg du site.

Cette fonctionnalité est principalement utilisée pour créer une bibliothèque de “blocs pré-conçus” propres au projet, permettant au(x) contributeur(s) de gagner du temps à la contribution, tout en étant certain de conserver une homogénéité graphique entre les pages.

Les compositions (ou patterns)

Les compositions Gutenberg ont globalement le même fonctionnement et les mêmes objectifs que les blocs réutilisables : mutualiser, favoriser l’homogénéité des pages, et industrialiser un peu plus la contribution.

A la différence des blocs réutilisables, les compositions ne peuvent pas être créées par le contributeur depuis le backoffice. Elle doivent être définies par la charte graphique et créées en code directement dans le thème du projet.

Si les blocs réutilisables sont plutôt orientés contenu, et destinés à ne pas contribuer un contenu plusieurs fois, les compositions sont plutôt là pour permettre au contributeur de disposer de mises en page prédéfinies et élaborées, pouvant contenir un ou plusieurs blocs. A titre de comparaison, une composition est au bloc ce qu’un template est à la page.

Une solution éprouvée et approuvée

S’il faut retenir une seule chose de Gutenberg, c’est qu’en termes de contribution, l’éditeur n’impose aucune règle : prenez/faites ce qui vous intéresse. Adaptez la solution à vos besoins et problématiques, et pas l’inverse (ça c’était avant).

Aujourd’hui, avec presque 8 nouvelles versions majeures de WordPress depuis la sortie de Gutenberg, l’éditeur a grandi, s’est enrichi et continue de s’affiner un peu plus tous les jours. Chaque nouvelle version de WordPress laisse d’ailleurs de plus en plus de place à son éditeur.

Avec l’arrivée très proche du full site editing (d’ici la fin de l’année 2021), Gutenberg sera alors incontournable et prendra tout son sens en vous permettant d’éditer bien plus d’éléments que la simple zone de contenus. Les entêtes, pieds de pages, menus, widgets (…) seront en effet eux aussi de la fête.

Alors, parce qu’il n’est jamais trop tard, sautez dans le train et adoptez Gutenberg 💪 !