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 par­ler, partout, sur tous les blogs sérieux dédiés à Word­Press. Depuis des mois, son nom est dans toutes les bouch­es. On aime, on n’aime pas. On en veut, on n’en veut pas. Il va arriv­er. Il arrive. Enfin, bien­tôt. En fait, il est déjà là, à votre porte (ou plutôt dans les exten­sions disponibles du dépôt Word­Press). Et c’est… Guten­berg, le nou­v­el édi­teur.

Bon, d’ac­cord, ils veu­lent tout chang­er. Ils veu­lent nous impos­er ce nou­v­el édi­teur. Ils veu­lent…  Ils, c’est bien sûr Matt et ses acolytes. Et nous, en bons français bien râleurs et indis­ci­plinés, si ils veu­lent nous l’im­pos­er, eh bien nous, for­cé­ment, on en veut pas. Pour rien au monde. Même si Word­Press nous en par­le dans une page dédiée, en français, rien que pour nous donc 😉 Une page où tout est expliqué, 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’an­nonce du change­ment a provo­qué un tol­lé dans la com­mu­nauté Word­Press française. Si l’on trou­ve bien heureuse­ment des arti­cles van­tant les qual­ités du nou­v­el édi­teur, on en trou­ve plus encore pour le cri­ti­quer – à tort ou à rai­son.

On trou­ve des con­seils par­fois peu avisés sur des sites con­sid­érés comme des sites d’ex­perts, tel celui qui pro­pose comme solu­tion pos­si­ble de rester sur la ver­sion 4.9 de Word­Press plutôt que de pass­er à la ver­sion 5, le jour venu. Quand on sait que chaque ver­sion (majeure ou mineure) cor­rige des failles de sécu­rité et  des bugs, il est (très) dif­fi­cile de pren­dre au sérieux l’au­teur de l’ar­ti­cle.

De plus, bien des cri­tiques n’ont plus lieu d’être, elles valaient pour les toutes pre­mières ver­sions de l’édi­teur qui a énor­mé­ment évolué en un temps record avec une liste kilo­métrique de mod­i­fi­ca­tions à chaque nou­velle ver­sion.

La ver­sion 2.7 par exem­ple per­met d’ou­vrir un lien dans un nou­v­el onglet (ou une nou­velle fenêtre), le bou­ton qui sert à créer le lien sert aus­si à le sup­primer (le lien, pas le texte) en même temps qu’elle intro­duit un rac­cour­ci clavier pour bas­culer 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 à com­pos­er ou à retenir) et qu’elle per­met la pag­i­na­tion (c’est une fonc­tion­nal­ité de Word­Press, mais elle n’avait pas encore été implé­men­tée dans Guten­berg).

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

Introduction à Gutenberg

Pourquoi ce nom ?

Même si vous n’êtes pas féru d’His­toire, vous avez déjà enten­du par­ler de Johannes Guten­berg, qui a révo­lu­tion­né l’im­primerie en inven­tant les car­ac­tères mobiles. Voila le pourquoi du nom du nou­v­el édi­teur : il va révo­lu­tion­ner l’édi­tion dans Word­Press, donc dans 30% des sites en ligne à ce jour.

Com­ment ? Tout sim­ple­ment en ne prenant plus le texte comme un entité de base, mais comme un tout com­posé d’élé­ments.

Aupar­a­vant, vous écriv­iez un arti­cle, tout comme les imprimeurs gra­vaient une page entière sur une plaque de bois avant de l’im­primer. En util­isant Guten­berg, vous tra­vaillerez sur des blocs, tout comme Guten­berg qui util­isa des car­ac­tères réu­til­is­ables et inter­change­ables pour com­pos­er une page.

Un peu de technique

Des blocs, donc. L’idée n’est pas nou­velle, elle est util­isée depuis longtemps par les con­struc­teurs de page. Mais Johannes Guten­berg intro­duit le con­struc­teur de page dans le cœur même de Word­Press – et çà, c’est une (petite) révo­lu­tion.

On tra­vaille donc avec des blocs. Ces blocs sont réu­til­is­ables. Ils sont tous créés de la même manière, et il est pos­si­ble d’é­ten­dre les capac­ités de l’édi­teur en créant de nou­veaux types de blocs.

Créer une fois pour utilis­er partout, ce n’est pas sans rap­pel­er le car­ac­tère mobile de Johannes Guten­berg.

Installation de l’éditeur Gutenberg

Pour le moment, Guten­berg n’est pas inté­gré dans Word­Press (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 fal­loir s’y met­tre).

Pour ceux qui ne sont pas à l’aise avec les exten­sions, j’ai rédigé un arti­cle (Installer, activ­er, met­tre à jour et sup­primer une exten­sion Word­Press)  que je vous invite à lire.

Ça y est ? Vous avez instal­lé et activé Guten­berg ? Par­fait ! Vous avez une entrée sup­plé­men­taire dans le menu d’ad­min­is­tra­tion :

Et là, vu que j’écris mon arti­cle directe­ment avec ce nou­v­el édi­teur, for­cé­ment, je com­mence à râler : mon image est sup­posée être cen­trée. Ce qui est le cas dans l’édi­teur. Mais pas dans le ren­du final. À voir si c’est unique­ment avec Twen­ty Sev­en­teen (oui, j’ai testé Guten­berg sur une instal­la­tion de test, je ne l’ai pas instal­lé sur un blog en pro­duc­tion !) ou si le prob­lème est récur­rent.

Prise en main de Gutenberg

Grosso modo, pour le moment, je le trou­ve bien sym­pa, mais un peu lim­ité, c’est vrai. Ce n’est pas gag­né, je sens que je vais batailler.

Mais bon. Je décou­vre l’édi­teur, je ne le con­nais pas encore très bien. Il va me fal­loir lire la doc­u­men­ta­tion – en anglais – et peut-être même chercher sur le web. On ver­ra plus tard.

L’in­ter­face est agréable, claire, aérée, un peu du Medi­um like.

La barre latérale de l’édi­teur (à droite) cor­re­spond plus ou moins à celle de l’édi­teur actuel, mais des élé­ments précédem­ment placés sous l’édi­teur se retrou­vent dans cette barre, comme l’ex­trait par exem­ple.

La prise en main est intu­itive. On clique dans l’édi­teur, et la saisie com­mence.

On peut choisir le type de bloc à utilis­er (titre, para­graphe, image…) via le petit dès que l’on est en mode édi­tion.

La barre d’outils (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 vis­i­ble lorsque l’on écrit, mais il suf­fit de pass­er la souris sur le bloc pour qu’elle appa­raisse. Les réglages avancés sont acces­si­bles via l’el­lipse ver­ti­cale située à droite du bloc.

Si vous n’aimez pas la barre d’édi­tion flot­tante, vous pou­vez la coller en haut de la fenêtre d’édi­tion en cli­quant sur l’el­lipse ver­ti­cale en haut à droite puis sur Fix­er la barre d’outils en haut. Posi­tion­née en haut, elle reste vis­i­ble tant que vous êtes en mode édi­tion (autrement dit, tant que vous ne quit­tez pas le bloc).

Dans la barre d’outils fixée en haut de l’édi­teur (celle par défaut), vous avez un icone d’in­for­ma­tion ; en cli­quant dessus, vous aurez le résumé de votre arti­cle : le nom­bre de mots, de titres, de para­graphes… mais aus­si la struc­ture-même de l’ar­ti­cle 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 remanie, je change l’or­dre de mes para­graphes.

Et là, nou­velle lim­i­ta­tion, on ne peux pas faire un copi­er coller, il faut pass­er par les petites flèch­es à gauche des blocs. C’est d’un pra­tique, je vous fais pas un dessin 🙁 À quand le drag’n drop des con­struc­teurs de page ? Et voilà, enfin ! Depuis la ver­sion 2.6.0 il est pos­si­ble de déplac­er des blocs soit en util­isant les flèch­es à gauche des blocs, soit en glis­sant / déposant (une petite main : vous indique que vous pou­vez saisir le bloc).

Et… on peut aus­si copi­er / coller, mais il faut se posi­tion­ner dans le bloc, sélec­tion­ner tout avec les touch­es Ctrl  et A  ou un triple clic – soit qua­tre clics avec le pre­mier qui per­met de se posi­tion­ner dans le bloc.

Ne cherchez pas à enreg­istr­er votre brouil­lon, il s’en­reg­istre automa­tique­ment à inter­valles réguliers. Mais si vous cliquez sur Plan­i­fi­er, vous pour­rez l’en­reg­istr­er, oups, le pub­li­er. Ce qui n’était pas mon inten­tion 🙁

L’as­tuce, 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écupérez le bou­ton Enreg­istr­er le brouil­lon entre deux sauve­g­ardes automa­tiques. Dépêchez-vous si vous tenez à cli­quer dessus, il y a des sauve­g­ardes automa­tiques à tout bout de champ !

Bilan de cet essai rapi­de : pas mal, intéres­sant, mais peut mieux faire. Même pour écrire un arti­cle de blog, ce n’est pas encore tout à fait au point dans sa ver­sion de base. Mais en com­para­nt avec les toutes pre­mières ver­sions, que de chemin par­cou­ru !

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

Des extensions à Gutenberg

C’est bien con­nu, il y a des mil­liers d’ex­ten­sions pour per­son­nalis­er Word­Press et y ajouter des fonc­tion­nal­ités (et pour en enlever par­fois).

Petit détour par le dépôt donc. Bonne sur­prise, il y a des exten­sions. Et pas qu’un peu. La plu­part com­pat­i­bles avec la dernière ver­sion de Word­Press. Je vais pou­voir faire mon marché.

Le mot clé pour cette recherche ? Je vous le donne en mille… et puis non, je vais pas vous vex­er 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 aus­si com­plet que celui de l’édi­teur clas­sique, impos­si­ble de met­tre un lien en ouver­ture dans un nou­v­el onglet. On ver­ra plus tard.

La plus intéres­sante me sem­ble Advanced Guten­berg Blocs – je l’ai d’ailleurs instal­lée.

Cette exten­sion per­met d’af­fich­er une exten­sion (eh oui !), juste en entrant son nom dans la boîte de dia­logue de la barre latérale de l’édi­teur.

Elle per­met aus­si d’af­fich­er des vignettes pour l’aperçu d’un arti­cle ou d’un site, pour insér­er une notice, un pro­duit WooCom­merce, une pub­lic­ité, un témoignage, une carte Google Maps… un couteau suisse en quelque sorte.

Il y a égale­ment 5 exten­sions par Gutenkit, cha­cune per­me­t­tant une action bien pré­cise : une pour les tables de prix, une pour les port­fo­lios, une pour tweeter…Vous les trou­verez facile­ment en sai­sis­sant gutenkit au lieu de guten­berg dans le dépôt Word­Press – ou en suiv­ant le lien en début de para­graphe.

Il y a pour finir l’an­ti-guten­berg, Clas­sic Edi­tor, l’arme ultime pour les réfrac­taires à la nou­veauté, qui vous per­met de récupér­er l’édi­teur clas­sique de Word­Press, en com­plé­ment à Guten­berg ou pour rem­plac­er Guten­berg. Utile pour cer­taines exten­sions qui n’ont pas migré vers Guten­berg pour l’édi­tion de Cus­tom Post Types par exem­ple.

Clas­sic Edi­tor

Auteur(s) : WordPress.org

Ver­sion actuelle : 1.6.7

Dernière mise à jour : 3 décem­bre 2024

Direct Down­load

98%Éval­u­a­tions 9 000 000+Instal­la­tions WP 4.9+Néces­saire

Vous ne trou­vez pas votre bon­heur dans le dépôt Word­Press, et la mise en page est trop lim­itée pour votre usage habituel ? Pas de prob­lème, utilisez…

Les constructeurs de page compatibles avec Gutenberg

Beaver Builder a annon­cé il y a déjà quelque temps sa com­pat­i­bil­ité avec l’édi­teur de blocs dès la ver­sion 2.1 (de Beaver Builder) qui vient de sor­tir. Nous avons donc main­tenant un con­struc­teur de page com­pat­i­ble Guten­berg.

J’ai testé, on passe d’un édi­teur dans l’ad­min­is­tra­tion de Word­Press à un édi­teur 100% WYSIWYG. Et il est pos­si­ble de pass­er de l’un à l’autre depuis Guten­berg, avec à chaque fois une con­ver­sion qui n’af­fecte pas — a pri­ori — le ren­du visuel. À tester plus avant… ce que je ne man­querai pas de f aire.

Les équipes der­rière WPBak­ery Visu­al Com­pos­er, site­O­ri­gin Page Builder, Ele­men­tor et Divi Builder tra­vail­lent elles aus­si à ren­dre leur con­struc­teur de page com­pat­i­ble avec Guten­berg.

Alors si vous avez besoin de mis­es en pages com­plex­es, vous pour­rez tou­jours faire appel à ces con­struc­teurs de pages plutôt que de râler après les lim­i­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) fon­cé. Telle­ment clair qu’on pour­rait se mépren­dre et le pren­dre pour du blanc, ou à l’in­verse… vous avez saisi.

L’avenir de l’édi­tion dans Word­Press ? Peut-être, mais pour l’heure, je ne suis pas réelle­ment encore con­va­in­cu. C’est clair, intu­itif, agréable, ça a un goût pronon­cé de revenez‑y, mais pour vrai­ment rem­plac­er notre bon vieil édi­teur il va encore fal­loir amélior­er l’ensem­ble.

Sans par­ler des exten­sions directe­ment liées à l’édi­teur Word­Press actuel, qui ne seront pas toutes mise à jour pour une util­i­sa­tion avec Guten­berg : une exten­sion qui a des dizaines de mil­liers d’in­stal­la­tions actives à tout intérêt à suiv­re le mou­ve­ment, voire à l’an­ticiper comme l’ont fait les con­struc­teurs de pages, mais une exten­sion qui a quelques cen­taines, voire quelques mil­liers d’u­til­isa­teurs sera-t-elle mise à jour ?

Tout dépen­dra de l’équipe de développe­ment (sou­vent un seul développeur), du temps disponible, de l’op­por­tu­nité en ter­mes de rentabil­ité ou de vis­i­bil­ité… autant dire que ce n’est pas gag­né.

Et quant à rem­plac­er les con­struc­teurs de pages (mais ce n’est pas — à court terme — le but recher­ché par Guten­berg) à 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 con­tin­uer à tester, ten­ter de créer un bloc per­son­nal­isé,  lire la doc­u­men­ta­tion offi­cielle et offi­cieuse… tout un pro­gramme. Et, de fait, je me dis que si je créais un blog aujour­d’hui, je prendrais cer­taine­ment Guten­berg comme édi­teur — pour ne pas avoir à migr­er mes arti­cles le jour où il devien­dra l’édi­teur par défaut, et parce que finale­ment, il a des atouts non nég­lige­ables face à l’édi­teur actuel.

Et vous, êtes-vous passé à Guten­berg, ou envis­agez-vous d’y pass­er ? N’hésitez pas à partager votre expéri­ence, à pos­er vos ques­tions dans les com­men­taires.