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

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

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

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

Une prise en main facilitée

Une démarche qui dépasse la simple contribution

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

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 ?

1. Les types de blocs

Les blocs natifs

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

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

  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à

Les blocs réutilisables

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)

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

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 💪 !

UI & WordPress theme developer @be_api, Paris, France. https://francoisthibaud.me

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store