Gutenberg , le content builder user-friendly de WordPress

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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).

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

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