Tout savoir sur l’arrivée de Gutenberg en quelques points essentiels

Gutenberg arrive à grand pas, alors voici un résumé de tout ce qu’il faut savoir sur le nouvel éditeur visuel de WordPress au travers de questions / réponses !

Difficile de marcher tranquillement dans le quartier WordPress sans entendre parler de ce fameux Gutenberg ! C’est un nouvel éditeur ? C’est un nouveau page builder ? C’est une révolution ? Une vraie épine dans le pied ? Vous avez entendu tout et son contraire, alors je vais essayer au travers de cet article de vous donner toutes les informations essentielles sur Gutenberg en essayant de rester le plus objectif possible.

Si vous voulez un simple résumé, vous trouverez un TL;DR à la fin de cet article !

Qu’est-ce que Gutenberg ?

Gutenberg est effectivement le nouvel éditeur visuel de WordPress qui va remplacer très bientôt le bon vieux TinyMCE, après 15 ans de bons et loyaux services.

Du coup notre page d’édition va passer de ça :

à ça :

Sympa non ?

Alors il faut savoir que ce n’est pas juste un lifting visuel. Il y a toute une refonte sous le capot également. Mais pas de panique, cela ne va pas casser vos contenus existants (je reviens sur ce point un peu plus tard).

Sans trop rentrer dans les détails techniques, Gutenberg a été écrit de zéro en utilisant des technologies Web modernes comme ReactJS, la librairie de Facebook qui permet de créer des applications Web réactives et performantes. Bref je m’arrête là pour le côté technique.

L’expérience de rédaction de contenu a complètement été dépoussiérée et repensée pour être plus fluide et plus agréable. L’éditeur actuel, enclavé dans un cadre qu’il faut scroller n’est pas la chose la plus évidente qui soit pour les personnes qui rédigent énormément de contenu.

Je suis le projet Gutenberg depuis quelques mois et je peux vous assurer que j’adore cette nouvelle interface. Elle me permet de mettre le focus sur l’écriture et d’oublier tous les désagrément de l’interface utilisateur. Et c’est très important car la rédaction est une activité qui demande une grosse concentration.

Une nouvelle approche : les blocs

La grosse nouveauté est l’approche sous forme de blocs : chaque paragraphe, titre, bouton, est un bloc qui peut être personnalisé indépendamment des autres blocs et facilement déplacé dans le contenu.

A chaque nouveau paragraphe on peut cliquer sur le bouton + pour choisir un bloc. Il en existe pas mal, certains pour du contenu, d’autres pour la mise en page…

Par exemple le bloc image, qui peut contenir une description, ne posera plus de souci lorsqu’il sera déplacé. Actuellement lorsque vous glissez une image qui contient une description, cette dernière ne suit pas.

Il est également toujours aussi simple d’importer une vidéo Youtube, une liste de lecteur Spotify ou tout autre contenu embarqué, et plus facile de le déplacer.

Gutenberg propose pas mal de nouveaux blocs, dont certains éléments nouveaux qui peuvent être très utiles comme on peut le voir dans cette vidéo :

Ce système de blocs est extensible, c’est-à-dire qu’un développeur peut créer ses propres blocs, ce qui permettra bien assez vite de dire adieu aux shortcodes (codes courts) mais je reviens sur ce sujet dans un instant.

Soyez rassurés, à la base votre éditeur ressemble à ce que l’on avait avant, ou même à un document Word ou Google doc : vous pouvez écrire simplement des textes, titres, mettre des images comme ça a toujours été le cas. Mais désormais on peut ajouter de nouveaux blocs.

Quels sont ses avantages ?

Voici quelques avantages les plus flagrants de Gutenberg.

Plus rapide

Gutenberg ne nécessite plus un rechargement complet de la page lorsque vous enregistrez ou publiez votre article. L’interface d’administration de WordPress accompagnée de nombreuses extensions, peut sur certains sites s’avérer lourde et gourmande et il faut jusqu’à 7 secondes pour recharger complètement la page.

Gutenberg enregistre tout en temps réel et sans rechargement. Petite aparté technique : l’éditeur utilise l’API Rest de WordPress ainsi que des requêtes Ajax et fonctionne comme les applications Web modernes. A terme c’est toute l’interface d’administration qui pourrait bénéficier de ce nouveau traitement.

Plus simple

L’interface utilisateur a été repensée pour faire gagner du temps et effacer les frustrations de l’éditeur actuel : la zone d’écriture est plus large, plus agréable, et prend toute la hauteur de l’écran. Les options de personnalisation, publication se trouvent dans une barre latérale que l’on peut cacher pour gagner en place.

L’expérience d’écriture est plus simple, plus personnalisable.

On retrouve également de nouveaux outils comme un compteur de mots, et un sommaire en fonction de vos titres.

Plus de possibilités

Grâce à cette approche par blocs, les extensions et développeurs de thèmes pourront créer facilement leurs propres blocs personnalisables. Tout est possible ! Une Google Map, afficher un produit WooCommerce, un appel à l’action, la liste des ingrédients d’une recette de cuisine dans un petit bloc note…

Et ça c’est le très gros avantage de Gutenberg. Auparavant on utilisait les codes courts, ou [shortcodes] en anglais, ces codes entre crochet qui, à l’affichage sur le site, se transformaient en quelque chose : une carte, un formulaire.

Désormais ce ne sera plus nécessaire. Et l’appellation WYSIWYG prendra toute son ampleur : vous voyez exactement le rendu que vous aurez sur le site, une fois l’article publié !

J’ai joué avec Gutenberg et créé mon propre bloc Google Map interactif. Voici à quoi il ressemble :

Pas mal non ? Cela ouvre tout un univers de possibilités !

Gutenberg est-il un page builder ?

C’est une question qui revient souvent, et la réponse est non. Inutile donc de comparer Gutenberg à Elementor ou Beaver Builder. L’objectif actuel n’est pas du tout le même.

Les constructeurs de page ou page builders vous permettent ce créer une mise en page complexe pour vos pages : sections, colonnes…

Pour l’instant Gutenberg est simplement un nouvel éditeur visuel pour rédiger vos contenus. Si je devais le comparer à un autre éditeur, ce serait Medium.com

Gutenberg vise une meilleure expérience d’écriture de contenu, il est destiné aux rédacteurs.

Le design du site reste donc la responsabilité du thème (qu’il soit fait sur mesure par une agence ou un freelance) ou du constructeur de page pour les utilisateurs de thèmes premium. Du coup, pour cette tâche, vous pouvez conserver votre constructeur de page. L’utilisation des deux en parallèles ne pose pas de problème.

Si vous faites des sites pour des clients, vous savez qu’un accès complet au constructeur de page n’est pas forcément une bonne idée : d’un clic le client peut altérer ou casser le design. Si son rôle est de simplement administrer son site, alors Gutenberg – avec éventuellement quelques champs additionnels comme ceux proposés par ACF, sera alors tout indiqué.

Quand va-t’il arriver dans WordPress ?

Gutenberg a été annoncé pour la première fois au WordCamp Europe 2017 à Paris par Matt Mullenweg, le créateur de WordPress. Mais c’est fin 2016 que l’on apprenait que certaines équipes travaillaient sur un concept de nouvel éditeur.

Gutenberg va arriver cette année, en 2018, très probablement avec l’été, dans la version estampillée 5.0. La prochaine mise à jour va concerner la mise en conformité avec la loi RGPD au printemps, et ensuite ce sera au tour de Gutenberg.

Nous mettrons à jour cet article dès que nous aurons une date définitive !

Est-ce que le passage de l’éditeur classique à Gutenberg est difficile ?

Beaucoup soulèvent cette inquiétude, pour eux-même et pour leurs clients. Un changement aussi radical ne va-t’il pas créer de la confusion ? Devrons-nous tout réapprendre ?

Rassurez-vous. Même si l’éditeur et l’interface d’édition changent, cela ne va pas altérer vos contenus existants. De plus elle a été largement simplifiée : finie la grosse barre d’outils de TinyMCE : elle n’apparait que lorsque vous éditez du texte et s’adapte en fonction du contexte.

Clairement, l’éditeur est plus spacieux, et pour écrire il suffit de faire comme d’habitude : écrire des paragraphes, sauter des lignes, ajouter des titres…

Le changement radical est l’approche par blocs : chaque paragraphe, titre, citation est un bloc à part entière que l’on peut personnaliser et déplacer – par exemple changer la couleur de fond, ce qui était impossible avant.

De plus cela permet l’apparition de nouveaux blocs comme le bouton, le séparateur et la mise en avant de texte. Avez-vous conscience qu’à l’heure actuelle il est impossible de faire un bouton simplement ? Vous concèderez qu’il fallait que ça change.

Bref, vous verrez donc qu’après 5 minutes on se sent comme chez soi : on prend ses marques rapidement et on apprécie l’espace aéré pour écrire. C’est un peu comme le mode sans distraction, mais directement dans l’interface, sans devoir basculer d’un mode à l’autre !

Comment je peux essayer Gutenberg ?

Pour l’instant vous le trouverez sur le répertoire des extensions WordPress, il vous suffit donc de l’installer sur l’un de vos sites en local afin de vous familiariser et le tester.

Bien entendu, d’ici la version 5.0, Gutenberg sera intégré dans le coeur de WordPress et non plus comme une extension à part entière.

Si vous souhaitez pousser vos tests plus loins, j’ai conçu une extension qui vous propose de nouveaux blocs, comme la Google Map, le produit WooCommerce, le bouton ajouter au panier, l’espace publicitaire, le bloc information, le bloc présentation d’extension, qui s’appelle Advanced Gutenberg Blocks.

Quel est l’objectif à long terme de Gutenberg ?

On peut se demander quel est l’objectif final de Gutenberg, et s’il va en rester là.

Pour l’instant rien n’est sûr mais à long terme voici l’évolution potentielle de Gutenberg :

1. Gutenberg devient cette année le nouvel éditeur visuel de WordPress ;
2. D’ici quelques temps il pourrait évoluer et devenir un réel constructeur de page ;
3. Enfin, il prendrait encore de l’importance pour devenir un constructeur de site, un peu comme le font Wix et SquareSpace par exemple ;

Mais tout cela ne va pas arriver du jour au lendemain, ce qui laissera largement le temps à chacun de s’adapter sans être complètement perdu. Le but est d’améliorer l’expérience utilisateur et moderniser les outils sans dérouter les utilisateurs du CMS.

À propos de la rétrocompatibilité

Beaucoup s’interrogent sur les effets négatifs suite à la mise à jour en version 5.0. WordPress a toujours porté une attention particulière à la rétrocompatibilité et dans la grande majorité des cas les mises à jours, mineures comme majeures, se passent toujours très bien.

Cette version 5 ne devrait pas faire exception à la règle. Cependant c’est un assez gros changement dans le coeur de WordPress et du coup il vaut mieux prendre ses précautions avant toute mise à jour, à savoir une sauvegarde de ses fichiers ainsi que de la base de données, c’est plus sûr.

Sachez tout de même que même si l’éditeur change, les fonctions historiques comme the_title(), the_content() ainsi que la boucle WordPress restent inchangées.

A l’arrivée de Gutenberg il va y avoir 3 solutions pour vous :

• On met à jour vers 5.0 avec Gutenberg ;
• On met à jour mais on s’équipe de Classic editor, l’extension officielle qui désactive Gutenberg et remet l’éditeur TinyMCE ;
• On reste sur la branche 4.9 ;

Optez pour la solution qui vous convient le mieux.

Bien entendu, n’attendez pas le dernier moment pour contrôler que tout fonctionne ou pas, je vous conseille, peut-être un mois avant la sortie, d’essayer une version beta et de contrôler qu’il n’y a pas d’erreur flagrante avec les extensions que vous utilisez.

Des contributeurs francophones !

Gutenberg c’est le fruit de plusieurs mois de travail acharné, par des centaines de développeurs. Et parmi eux on retrouve quelques contributeurs francophones comme Riad Benguella, Automatticien, ou encore Jean Baptiste Audras, développeur pour l’agence française Whodunit, Mathieu Viet et Willy Bahuaud, développeurs indépendants.

Ils ont participé autant sur le développement, des corrections, ainsi que la traduction !

En résumé

Gutenberg arrive très bientôt et va bouleverser, pour le mieux, certaines de nos habitudes. WordPress entre dans une nouvelle génération sans pour autant réduire à néant le travail précédemment accompli.

Malgré un petit temps d’adaptation, je suis persuadé que tout le monde appréciera ce nouvel éditeur pleins de promesses et permettra à tous les rédacteurs de contenu d’apprécier une expérience d’écriture moderne et fluide.

Pour résumer, ou si vous n’avez pas eu le courage de lire tout :

• Gutenberg est le nouvel éditeur visuel de WordPress, qui remplace TinyMCE ;
• Il arrive avec la version 5.0 de WordPress, probablement pour cet été ;
• Gutenberg fonctionne par empilement de blocs personnalisables ;
• Les développeurs de thèmes et extensions peuvent créer leurs propres blocs ;
• Gutenberg est facile à prendre en main car intuitif. Il ne devrait pas dérouter les utilisateurs finaux ;
• Pas de souci de rétrocompatibilité à prévoir : les anciens contenus seront automatiquement convertis ;
• En cas de doute, vous pourrez rester en 4.9 ou installer l’extension Classic Editor sur la 5 pour repasser en éditeur visuel TinyMCE ;

Convaincus par cette nouvelle vision de l’éditeur de WordPress ?