• Paru le 21 mars 2018 - mis à jour le 28 avril 2018

J’ai essayé… Gutenberg

2387 mots - 10mn

J’ai essayé… Gutenberg

1024 680 Tout sur WordPress

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 susci­ter des réac­tions, parfois épider­miques – mais qu’en est-il réel­le­ment ? J’ai testé pour vous cet outil, je vous livre mes impres­sions.

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’accord, 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’imposer, 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’expliquer. 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’experts, 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’auteur de l’article.

De plus, bien des critiques n’ont plus lieu d’être, elles valaient pour les toutes premières versions de l’éditeur 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’ouvrir 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’éditeur visuel à l’éditeur en mode texte ( Ctrl  + Maj  + Alt  + M – je vous l’accorde, 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’essayer. 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’imprimerie 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’édition 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’imprimer. 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évo­lu­tion.

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’éditeur 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 :

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’éditeur. 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écur­rent.

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’éditeur, 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’éditeur (à droite) corres­pond plus ou moins à celle de l’éditeur actuel, mais des éléments précé­dem­ment placés sous l’éditeur se retrouvent dans cette barre, comme l’extrait par exemple.

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

On peut choi­sir le type de bloc à utili­ser (titre, para­graphe, image…) via le petit dès que l’on est en mode édition.

La barre d’outils (adap­tée au type de bloc en cours d’édition) 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’ellipse verti­cale : située à droite du bloc.

outils d'édition

outils d’édition

Si vous n’aimez pas la barre d’édition flot­tante, vous pouvez la coller en haut de la fenêtre d’édition en cliquant sur l’ellipse verti­cale en haut à droite puis sur Fixer la barre d’outils 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’outils en haut

Dans la barre d’outils fixée en haut de l’éditeur (celle par défaut), vous avez un icone d’information ; 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’article basée sur la hiérar­chie des titres (pour mémo, de h1 à h6).

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

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’enregistre auto­ma­ti­que­ment à inter­valles régu­liers. Mais si vous cliquez sur Planifier, vous pour­rez l’enregistrer, oups, le publier. Ce qui n’était pas mon inten­tion 🙁

L’astuce, c’est de cocher l’option En attente de relec­ture, dans la barre laté­rale droite de l’éditeur. 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’extensions 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’éditeur de lien n’est pas aussi complet que celui de l’éditeur 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 instal­lée.

Cette exten­sion permet d’afficher 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’affichage d’extension

Elle permet aussi d’afficher 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’affichage 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 para­graphe.

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’éditeur clas­sique de WordPress, en complé­ment à Gutenberg ou pour rempla­cer Gutenberg (mais pour le moment, autant ne pas instal­ler l’extension).

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, utili­sez…

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’éditeur 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’administration 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’affecte 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’éditeur 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’inverse… vous avez saisi.

L’avenir de l’édition 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’éditeur 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’installations actives à tout inté­rêt à suivre le mouve­ment, voire à l’anticiper comme l’ont fait les construc­teurs de pages, mais une exten­sion qui a quelques centaines, voire quelques milliers d’utilisateurs 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’opportunité 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’éditeur par défaut, et parce que fina­le­ment, il a des atouts non négli­geables face à l’éditeur 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 commen­taires.

Si vous avez trouvé une faute d’orthographe, veuillez sélec­tion­ner le texte en ques­tion et appuyer sur Ctrl + Entrée.

Laisser une réponse

La modération des commentaires est activée. Votre commentaire peut prendre un certain temps avant d'apparaître.

    Partager…

    Rapport de faute d’orthographe

    Le texte suivant sera envoyé à nos rédacteurs :