J'ai essayé… Gutenberg

Gutenberg, le nouvel éditeur par défaut de WordPress, prévu pour être intégré dans la version 5 de WordPress, ne manque pas de susciter des réactions, parfois épidermiques - mais qu'en est-il réellement ? J'ai testé pour vous cet outil, je vous livre mes impressions.

Cet article prend 9 minutes à lire et comporte 2162 mots.

Depuis de mois, on en entend parler, partout, sur tous les blogs sérieux dédiés à WordPress. Depuis des mois, son nom est dans toutes les bouches. On aime, on n’aime pas. On en veut, on n’en veut pas. Il va arri­ver. Il arrive. Enfin, bien­tôt. En fait, il est déjà là, à votre porte (ou plutôt dans les exten­sions dispo­nibles du dépôt WordPress). Et c’est… Gutenberg, le nouvel éditeur.

Bon, d’ac­cord, ils veulent tout chan­ger. Ils veulent nous impo­ser ce nouvel éditeur. Ils veulent…  Ils, c’est bien sûr Matt et ses acolytes. Et nous, en bons fran­çais bien râleurs et indis­ci­pli­nés, si ils veulent nous l’im­po­ser, eh bien nous, forcé­ment, on en veut pas. Pour rien au monde. Même si WordPress nous en parle dans une page dédiée, en fran­çais, rien que pour nous donc 😉 Une page où tout est expli­qué, bien mieux que je ne pour­rais vous l’ex­pli­quer. Il y a même des images, c’est pas peu dire !

L’annonce du chan­ge­ment a provo­qué un tollé dans la commu­nauté WordPress fran­çaise. Si l’on trouve bien heureu­se­ment des articles vantant les quali­tés du nouvel éditeur, on en trouve plus encore pour le criti­quer – à tort ou à raison.

On trouve des conseils parfois peu avisés sur des sites consi­dé­rés comme des sites d’ex­perts, tel celui qui propose comme solu­tion possible de rester sur la version 4.9 de WordPress plutôt que de passer à la version 5, le jour venu. Quand on sait que chaque version (majeure ou mineure) corrige des failles de sécu­rité et  des bugs, il est (très) diffi­cile de prendre au sérieux l’au­teur de l’article.

De plus, bien des critiques n’ont plus lieu d’être, elles valaient pour les toutes premières versions de l’édi­teur qui a énor­mé­ment évolué en un temps record avec une liste kilo­mé­trique de modi­fi­ca­tions à chaque nouvelle version.

La version 2.7 par exemple permet d’ou­vrir un lien dans un nouvel onglet (ou une nouvelle fenêtre), le bouton qui sert à créer le lien sert aussi à le suppri­mer (le lien, pas le texte) en même temps qu’elle intro­duit un raccourci clavier pour bascu­ler de l’édi­teur visuel à l’édi­teur en mode texte (Ctrl  + Maj  + Alt  + M – je vous l’ac­corde, ce n’est pas facile à compo­ser ou à rete­nir) et qu’elle permet la pagi­na­tion (c’est une fonc­tion­na­lité de WordPress, mais elle n’avait pas encore été implé­men­tée dans Gutenberg).

Au final, c’est peut-être pas plus mal que notre bon vieil éditeur auquel on est habi­tués. Peut-être même que c’est mieux. Alors, on se la joue fran­çais ou on le teste, cet éditeur ? Je ne sais pas pour vous, mais moi, j’ai bien envie d’es­sayer. Allez, on se lance !

Introduction à Gutenberg

Pourquoi ce nom ?

Même si vous n’êtes pas féru d’Histoire, vous avez déjà entendu parler de Johannes Gutenberg, qui a révo­lu­tionné l’im­pri­me­rie en inven­tant les carac­tères mobiles. Voila le pour­quoi du nom du nouvel éditeur : il va révo­lu­tion­ner l’édi­tion dans WordPress, donc dans 30% des sites en ligne à ce jour.

Comment ? Tout simple­ment en ne prenant plus le texte comme un entité de base, mais comme un tout composé d’élé­ments.

Auparavant, vous écri­viez un article, tout comme les impri­meurs gravaient une page entière sur une plaque de bois avant de l’im­pri­mer. En utili­sant Gutenberg, vous travaille­rez sur des blocs, tout comme Gutenberg qui utilisa des carac­tères réuti­li­sables et inter­chan­geables pour compo­ser une page.

Un peu de technique

Des blocs, donc. L’idée n’est pas nouvelle, elle est utili­sée depuis long­temps par les construc­teurs de page. Mais Johannes Gutenberg intro­duit le construc­teur de page dans le cœur même de WordPress – et çà, c’est une (petite) révolution.

On travaille donc avec des blocs. Ces blocs sont réuti­li­sables. Ils sont tous créés de la même manière, et il est possible d’étendre les capa­ci­tés de l’édi­teur en créant de nouveaux types de blocs.

Créer une fois pour utili­ser partout, ce n’est pas sans rappe­ler le carac­tère mobile de Johannes Gutenberg.

Installation de l’éditeur Gutenberg

Pour le moment, Gutenberg n’est pas inté­gré dans WordPress (oui, oui, je sais, il devait l’être… mais au moins, on a tout notre temps pour nous faire à l’idée qu’un jour, il va vrai­ment falloir s’y mettre).

Pour ceux qui ne sont pas à l’aise avec les exten­sions, j’ai rédigé un article (Installer, acti­ver, mettre à jour et suppri­mer une exten­sion WordPress)  que je vous invite à lire.

Ça y est ? Vous avez installé et activé Gutenberg ? Parfait ! Vous avez une entrée supplé­men­taire dans le menu d’administration :

Menu Gutenberg
Menu Gutenberg

Et là, vu que j’écris mon article direc­te­ment avec ce nouvel éditeur, forcé­ment, je commence à râler : mon image est suppo­sée être centrée. Ce qui est le cas dans l’édi­teur. Mais pas dans le rendu final. À voir si c’est unique­ment avec Twenty Seventeen (oui, j’ai testé Gutenberg sur une instal­la­tion de test, je ne l’ai pas installé sur un blog en produc­tion !) ou si le problème est récurrent.

Prise en main de Gutenberg

Grosso modo, pour le moment, je le trouve bien sympa, mais un peu limité, c’est vrai. Ce n’est pas gagné, je sens que je vais batailler.

Mais bon. Je découvre l’édi­teur, je ne le connais pas encore très bien. Il va me falloir lire la docu­men­ta­tion – en anglais – et peut-être même cher­cher sur le web. On verra plus tard.

L’interface est agréable, claire, aérée, un peu du Medium like.

Interface de l'éditeur
Interface de l’éditeur

La barre laté­rale de l’édi­teur (à droite) corres­pond plus ou moins à celle de l’édi­teur actuel, mais des éléments précé­dem­ment placés sous l’édi­teur se retrouvent dans cette barre, comme l’ex­trait par exemple.

La prise en main est intui­tive. On clique dans l’édi­teur, et la saisie commence.

On peut choi­sir le type de bloc à utili­ser (titre, para­graphe, image…) via le petit [icon name=« plus-circle »] dès que l’on est en mode édition.

La barre d’ou­tils (adap­tée au type de bloc en cours d’édi­tion) se posi­tionne juste au dessus du bloc courant, elle n’est pas visible lorsque l’on écrit, mais il suffit de passer la souris sur le bloc pour qu’elle appa­raisse. Les réglages avan­cés sont acces­sibles via l’el­lipse verti­cale [icon name=« ellipsis‑v »] située à droite du bloc.

outils d'édition
outils d’édi­tion

Si vous n’ai­mez pas la barre d’édi­tion flot­tante, vous pouvez la coller en haut de la fenêtre d’édi­tion en cliquant sur l’el­lipse verti­cale en haut à droite puis sur Fixer la barre d’ou­tils en haut. Positionnée en haut, elle reste visible tant que vous êtes en mode édition (autre­ment dit, tant que vous ne quit­tez pas le bloc).

barre d'outils en haut
barre d’ou­tils en haut

Dans la barre d’ou­tils fixée en haut de l’édi­teur (celle par défaut), vous avez un icone d’in­for­ma­tion ; en cliquant dessus, vous aurez le résumé de votre article : le nombre de mots, de titres, de para­graphes… mais aussi la structure-même de l’ar­ticle basée sur la hiérar­chie des titres (pour mémo, de h1 à h6).

Résumé de l'article
Résumé de l’article

Comme j’écris au fur et à mesure de ma décou­verte, je rema­nie, je change l’ordre de mes paragraphes.

Et là, nouvelle limi­ta­tion, on ne peux pas faire un copier coller, il faut passer par les petites flèches à gauche des blocs. C’est d’un pratique, je vous fais pas un dessin 🙁 À quand le drag’n drop des construc­teurs de page ? Et voilà, enfin ! Depuis la version 2.6.0 il est possible de dépla­cer des blocs soit en utili­sant les flèches à gauche des blocs, soit en glis­sant / dépo­sant (une petite main : vous indique que vous pouvez saisir le bloc).

Et… on peut aussi copier / coller, mais il faut se posi­tion­ner dans le bloc, sélec­tion­ner tout avec les touches Ctrl  et A  ou un triple clic – soit quatre clics avec le premier qui permet de se posi­tion­ner dans le bloc.

Ne cher­chez pas à enre­gis­trer votre brouillon, il s’en­re­gistre auto­ma­ti­que­ment à inter­valles régu­liers. Mais si vous cliquez sur Planifier, vous pour­rez l’en­re­gis­trer, oups, le publier. Ce qui n’était pas mon intention 🙁

L’astuce, c’est de cocher l’op­tion En attente de relec­ture, dans la barre laté­rale droite de l’édi­teur. Et là, vous récu­pé­rez le bouton Enregistrer le brouillon entre deux sauve­gardes auto­ma­tiques. Dépêchez-vous si vous tenez à cliquer dessus, il y a des sauve­gardes auto­ma­tiques à tout bout de champ !

Bilan de cet essai rapide : pas mal, inté­res­sant, mais peut mieux faire. Même pour écrire un article de blog, ce n’est pas encore tout à fait au point dans sa version de base. Mais en compa­rant avec les toutes premières versions, que de chemin parcouru !

Prochaine étape, aller cher­cher dans le dépôt WordPress s’il y aurait, par le plus grand des hasards…

Des extensions à Gutenberg

C’est bien connu, il y a des milliers d’ex­ten­sions pour person­na­li­ser WordPress et y ajou­ter des fonc­tion­na­li­tés (et pour en enle­ver parfois).

Petit détour par le dépôt donc. Bonne surprise, il y a des exten­sions. Et pas qu’un peu. La plupart compa­tibles avec la dernière version de WordPress. Je vais pouvoir faire mon marché.

Le mot clé pour cette recherche ? Je vous le donne en mille… et puis non, je vais pas vous vexer quand même, faites un petit effort, vous allez trou­ver tous seuls comme des grands 😉

Et voilà, encore une fois, je sens que je vais râler… ça vient… ça y est, je râle : par défaut, l’édi­teur de lien n’est pas aussi complet que celui de l’édi­teur clas­sique, impos­sible de mettre un lien en ouver­ture dans un nouvel onglet. On verra plus tard.

La plus inté­res­sante me semble Advanced Gutenberg Blocs – je l’ai d’ailleurs installée.

Cette exten­sion permet d’af­fi­cher une exten­sion (eh oui !), juste en entrant son nom dans la boîte de dialogue de la barre laté­rale de l’éditeur.

bloc d'affichage d'extension
bloc d’af­fi­chage d’extension

Elle permet aussi d’af­fi­cher des vignettes pour l’aperçu d’un article ou d’un site, pour insé­rer une notice, un produit WooCommerce, une publi­cité, un témoi­gnage, une carte Google Maps… un couteau suisse en quelque sorte.

bloc d'affichage des notices
bloc d’af­fi­chage des notices

Il y a égale­ment 5 exten­sions par Gutenkit, chacune permet­tant une action bien précise : une pour les tables de prix, une pour les port­fo­lios, une pour tweeter…Vous les trou­ve­rez faci­le­ment en saisis­sant guten­kit au lieu de guten­berg dans le dépôt WordPress – ou en suivant le lien en début de paragraphe.

Il y a pour finir l’anti-gutenberg, Classic Editor, l’arme ultime pour les réfrac­taires à la nouveauté, qui vous permet de récu­pé­rer l’édi­teur clas­sique de WordPress, en complé­ment à Gutenberg ou pour rempla­cer Gutenberg. Utile pour certaines exten­sions qui n’ont pas migré vers Gutenberg pour l’édi­tion de Custom Post Types par exemple.

Vous ne trou­vez pas votre bonheur dans le dépôt WordPress, et la mise en page est trop limi­tée pour votre usage habi­tuel ? Pas de problème, utilisez…

Les constructeurs de page compatibles avec Gutenberg

Beaver Builder a annoncé il y a déjà quelque temps sa compa­ti­bi­lité avec l’édi­teur de blocs dès la version 2.1 (de Beaver Builder) qui vient de sortir. Nous avons donc main­te­nant un construc­teur de page compa­tible Gutenberg.

J’ai testé, on passe d’un éditeur dans l’ad­mi­nis­tra­tion de WordPress à un éditeur 100% WYSIWYG. Et il est possible de passer de l’un à l’autre depuis Gutenberg, avec à chaque fois une conver­sion qui n’af­fecte pas – a priori – le rendu visuel. À tester plus avant… ce que je ne manque­rai pas de f aire.

Les équipes derrière WPBakery Visual Composer, siteOrigin Page Builder, Elementor et Divi Builder travaillent elles aussi à rendre leur construc­teur de page compa­tible avec Gutenberg.

Alors si vous avez besoin de mises en pages complexes, vous pour­rez toujours faire appel à ces construc­teurs de pages plutôt que de râler après les limi­ta­tion de l’édi­teur par défaut.

Bilan

Rien n’est jamais tout blanc ou tout noir. On va du gris (très) clair au gris (très) foncé. Tellement clair qu’on pour­rait se méprendre et le prendre pour du blanc, ou à l’in­verse… vous avez saisi.

L’avenir de l’édi­tion dans WordPress ? Peut-être, mais pour l’heure, je ne suis pas réel­le­ment encore convaincu. C’est clair, intui­tif, agréable, ça a un goût prononcé de revenez‑y, mais pour vrai­ment rempla­cer notre bon vieil éditeur il va encore falloir amélio­rer l’ensemble.

Sans parler des exten­sions direc­te­ment liées à l’édi­teur WordPress actuel, qui ne seront pas toutes mise à jour pour une utili­sa­tion avec Gutenberg : une exten­sion qui a des dizaines de milliers d’ins­tal­la­tions actives à tout inté­rêt à suivre le mouve­ment, voire à l’an­ti­ci­per comme l’ont fait les construc­teurs de pages, mais une exten­sion qui a quelques centaines, voire quelques milliers d’uti­li­sa­teurs sera-t-elle mise à jour ?

Tout dépen­dra de l’équipe de déve­lop­pe­ment (souvent un seul déve­lop­peur), du temps dispo­nible, de l’op­por­tu­nité en termes de renta­bi­lité ou de visi­bi­lité… autant dire que ce n’est pas gagné.

Et quant à rempla­cer les construc­teurs de pages (mais ce n’est pas – à court terme – le but recher­ché par Gutenberg) à moins d’avoir des besoins de mise en page très, très basiques, la ques­tion ne se pose même pas.

Pour ma part, je vais conti­nuer à tester, tenter de créer un bloc person­na­lisé,  lire la docu­men­ta­tion offi­cielle et offi­cieuse… tout un programme. Et, de fait, je me dis que si je créais un blog aujourd’­hui, je pren­drais certai­ne­ment Gutenberg comme éditeur – pour ne pas avoir à migrer mes articles le jour où il devien­dra l’édi­teur par défaut, et parce que fina­le­ment, il a des atouts non négli­geables face à l’édi­teur actuel.

Et vous, êtes-vous passé à Gutenberg, ou envisagez-vous d’y passer ? N’hésitez pas à parta­ger votre expé­rience, à poser vos ques­tions dans les commentaires.

Retour en haut
Les cookies que nous utilisons sont indispensables au bon fonctionnement de ce site. Il n'y a aucun pistage publicitaire et les données statistiques recueillies sont anonymisées.
J'ai compris