PubliĂ© par le 29 mars 2018 ‱ 89 Commentaires

Au WordCamp Europe 2017, la communautĂ© WordPress a frissonnĂ©. Matt Mullenweg, Le co-fondateur du CMS, a prĂ©sentĂ© en grande pompe ce qu’il adviendra de WordPress trĂšs bientĂŽt.

Une petite révolution, dénommée Gutenberg, en référence à une autre révolution historique, qui a à jamais changé la face du monde.

Personnellement, quand on me parle de révolution, je vois ça :

Gutenberg dans WordPress 5.0

Le chaos. La fureur de la foule. Les barricades. La marĂ©chaussĂ©e Ă  tous les coins de rue. Mais bon, ça, c’est mon petit cĂŽtĂ© 1789.

Si l’on Ă©coute le ton calme de Matt Mullenweg, la rĂ©volution Gutenberg donne plutĂŽt la sensation d’assister Ă  un gentil sit-in de pacifistes, qui prĂŽnent la crĂ©ation de pages web en What You See Is What You Get.

Gutenberg dans WordPress 5.0

L’idĂ©e derriĂšre Gutenberg : crĂ©er un Ă©diteur de pages qui permet de visualiser les changements en temps rĂ©el, et qui serait ainsi plus accessible aux crĂ©ateurs de sites dĂ©butants.

Mullenweg annonçait alors le dĂ©ploiement du nouvel Ă©diteur avec la version 5.0 de WordPress, qui devrait ĂȘtre lancĂ©e fin 2018 ou dĂ©but 2019 : la rĂ©volution est bel et bien en marche, n’en dĂ©plaise aux sceptiques.

Et comme la Marmite a pour vocation d’accompagner ses lecteurs dans les recoins les plus abscons de WordPress, on a voulu tester la version prĂ©liminaire de Gutenberg, disponible en tĂ©lĂ©chargement sur wordpress.org.

Précision préliminaire #1 : Gutenberg, quel avenir ?

Nous avons pris le parti de tester Gutenberg comme un vĂ©ritable constructeur de page, un peu comme j’ai eu l’occasion de le faire pour Visual Composer. Mais il faut garder Ă  l’esprit que Gutenberg n’a pas pour vocation, dans un premier temps, de remplacer les page builders tels qu’on les connaĂźt.

Je dis bien “dans un premier temps” car, au WordCamp Paris 2018, le 9 mars, Riad Benguella, membre de l’équipe de dĂ©veloppement de Gutenberg, a bel et bien annoncĂ© trois Ă©tapes au projet :

  • Dans un premier temps, Gutenberg se cantonnera Ă  ce qu’il fait actuellement : ĂȘtre un Post Editor, c’est-Ă -dire un Ă©diteur de contenu Ă  la maniĂšre du TinyMCE que l’on connaĂźt actuellement.
  • Dans un deuxiĂšme temps, Gutenberg est vouĂ© Ă  devenir un Page Builder, ou constructeur de page, s’inspirant des mythiques Visual Composer ou Beaver Builder, par exemple.
  • Enfin, Gutenberg a pour objectif de se transformer en un vĂ©ritable Site Builder, soit un constructeur de site. Le but : faire de WordPress une alternative OpenSource Ă  des concurrents comme Wix ou SquareSpace.

Pas de jalons annoncĂ©s pour l’heure Ă  ces diffĂ©rentes Ă©tapes, mais ces perspectives donnent un horizon plus large au projet Gutenberg.

Formez-vous Ă  WordPress en 8 semaines

avec la formation à distance la plus généreuse du marché (éligible aux financements)

WPChef, la formation WordPress de référence

Précision préliminaire #2 : Gutenberg et la structure en blocs

Gutenberg, dĂšs aujourd’hui, propose de crĂ©er du contenu sous forme de blocs : il s’agit de la nouvelle unitĂ© de base WordPress.

Or Chris Lema, vĂ©ritable gourou de la communautĂ© WordPress s’il en est, a rĂ©cemment Ă©mis une idĂ©e intĂ©ressante Ă  propos de ce nouvel Ă©diteur : pour lui, il y a une raison au fait que WordPress souhaite passer au “tout bloc”.

Cette raison, ce serait de s’adapter Ă  l’avenir de la crĂ©ation de sites web : la personnalisation du contenu selon le visiteur.
En l’état actuel, WordPress ne permet pas de crĂ©er des pages dynamiques, dont le contenu varie selon le profil de la personne qui le visite.

Or, si Gutenberg tient sa promesse de pouvoir crĂ©er des blocs de contenu aisĂ©ment manipulables et rĂ©utilisables, voilĂ  ce que WordPress 5.0 pourrait devenir : la base d’un assembleur de contenu vraiment pertinent, sous forme de blocs qui changent selon les intĂ©rĂȘts des visiteurs.

Gutenberg Ă©diteur WordPress

Joli point de vue, n’est-ce pas ? Ça donne presque envie de voir la rĂ©volution se lancer.

À noter Ă©galement que nous mettrons Ă  jour cet article au fur et Ă  mesure que de nouvelles fonctionnalitĂ©s seront dĂ©ployĂ©es – et il risque d’y en avoir pas mal dans les mois Ă  venir !

Allez, puisque je vous sens prĂȘts, sereins (mais si, mais si !), lançons-nous donc dans ce test de Gutenberg !

Quels modules et templates pré-intégrés ?

Puisque nous avons dĂ©cidĂ© d’examiner Gutenberg comme un constructeur de page, on est en droit de se demander quels Ă©lĂ©ments structurels et design sont disponibles.

Tour d’horizon des modules prĂ©-intĂ©grĂ©s

Sous la version de Gutenberg que nous avons testĂ©e (2.5), on apprĂ©ciera la diversitĂ© des modules dĂ©jĂ  disponibles. L’interface les classe en plusieurs catĂ©gories :

  • Les “Common Blocks” (blocs communs) : titres, galeries, blocs de texte, listes, vidĂ©os, images seules

  • Les “Formatting” (des blocs plutĂŽt dĂ©diĂ©s aux dĂ©veloppeurs) : vous pouvez notamment y trouver un bloc spĂ©cialement dĂ©diĂ© Ă  l’insertion de code, prĂ©formatĂ© ou non, ou encore des tables.
  • Les “Layout Blocks” (blocs d’agencement) : colonnes, boutons, sĂ©parateurs, barre “read more” – c’est ici que vous trouverez de quoi structurer votre page.
  • Les “Widgets” (classiques de WordPress) : c’est par ici que vous pourrez trouver un bloc pour intĂ©grer une liste de vos catĂ©gories, de vos derniers articles, ou encore un bloc dĂ©diĂ© Ă  un shortcode, qui permettra de bien isoler celui-ci dans votre page. Il y a fort Ă  parier qu’on verra plus de widgets intĂ©grĂ©s Ă  l’éditeur dans les mois Ă  venir.
  • Les “Embeds” : ces blocs vous permettront, en rentrant uniquement l’URL, d’intĂ©grer Ă  votre page un tweet, une playlist Spotify, un post Instagram, une vidĂ©o TED
 et tout type de flux issu d’un site externe. Une fonctionnalitĂ© dĂ©jĂ  possible via l’éditeur visuel historique, mais qu’il fait bon de retrouver chez Gutenberg.

Rien de bien trĂ©pidant donc, mais une organisation assez pratique de ces modules, qui permet de rapidement prendre l’outil en main.

Et les templates pré-intégrés ?

Depuis Gutenberg, vous ne trouverez pas de templates de page prĂ©-intĂ©grĂ©s. En ce sens, ce nouvel Ă©diteur ne se comporte pas (encore) comme un constructeur de page, mais bien comme l’éditeur classique, qui propose de crĂ©er ses publications ex nihilo.

On note cependant une fonction pratique : “Convert to reusable bloc”, qui offre la possibilitĂ© de crĂ©er des blocs rĂ©utilisables, qui fonctionneront comme des mini-templates. Un Ă©lĂ©ment pratique, imitant ce que des constructeurs de page comme Visual Composer permettent dĂ©jĂ  de faire.

Templates Gutenberg
La fonction de mĂ©morisation d’un bloc rĂ©utilisable dans Gutenberg

Quelle maniabilité ?

On ne peut pas parler de Gutenberg sans se poser la question de sa maniabilité.

Il s’agit de l’un des arguments-phares des Ă©quipes WordPress pour prĂ©senter le nouvel Ă©diteur de page comme un incontournable, plus accessible aux grands dĂ©butants grĂące Ă  une interface en WYSIWYG (What You See Is What You Get, soit une visualisation en temps rĂ©el des modifications).

Une interface trÚs agréable

Pour commencer, laissons-nous quelques secondes pour apprĂ©cier l’interface trĂšs aĂ©rĂ©e de Gutenberg, qui nous change de l’éditeur classique.

On retrouve quasiment un mode d’écriture sans distraction, Ă  la façon d’un OmmWriter ou d’un UlysseApp, oĂč la focalisation est faite sur le contenu, et non sur les commandes ou la mise en forme. Pouce en l’air !

Les habituĂ©s des constructeurs de page en glisser-dĂ©poser ne seront sans doute pas déçus par la prise en main de Gutenberg, puisque cette fonctionnalitĂ© est dĂ©sormais supportĂ©e par l’Ă©diteur : super, en termes d’ergonomie !

D’autre part, parlons du fameux WYSIWYG qu’on nous promet. Au clic sur un bloc crĂ©Ă©, on a accĂšs Ă  de nombreuses options de personnalisation, en haut du bloc en question ou bien dans la barre de droite de l’interface.

Et ces modifications sont bien visualisables en temps rĂ©el, tout en restant dans l’administration de WordPress.

Un vrai plus pour Gutenberg, de ce point de vue !

Gutenberg personnalisation du texte
Un exemple des options de personnalisation disponibles pour un bloc de texte

J’ai Ă©galement apprĂ©ciĂ© “l’auto-complete automatique par slash”. Laissez-moi juste vous traduire ça en Français : en cliquant n’importe oĂč dans l’interface, et en tapant un simple /, des propositions de blocs apparaissent.

Il ne vous reste qu’à utiliser les flĂšches de votre clavier, et la touche “EntrĂ©e”, pour choisir celui qui vous convient, et continuer votre rĂ©daction de contenu.

Les inconditionnels de la communication par le logiciel Slack y retrouveront leurs réflexes favoris. Démonstration en image :

Gutenberg autocomplete slash
Ajout d’un titre de niveau 2 grĂące Ă  la mĂ©thode “d’autotocomplĂ©tion par slash”

Anecdotique ? Peut-ĂȘtre pas tant que ça, si on pense au temps qu’on peut gagner sur des pages longues.

Alex vous avait d’ailleurs dĂ©jĂ  parlĂ© des bienfaits des raccourcis de l’éditeur actuel dans une de ses vidĂ©os, vous vous souvenez ?

Mais une interface
 encore en construction

Au moment de ce test, j’ai trouvĂ© que le WYSIWYG de Gutenberg laissait encore Ă  dĂ©sirer.

J’ai eu affaire Ă  quelques cas de figure oĂč le rendu sur mon interface Gutenberg ne n’affichait pas la mĂȘme chose sur l’aperçu ou la page publiĂ©e.

Ça a notamment Ă©tĂ© le cas lorsque j’ai ajoutĂ© une ligne de CSS additionnel pour que mes rangĂ©es se prĂ©sentent en pleine largeur. Si la modification a Ă©tĂ© effectivement prise en compte sur le site


Test Gutenberg WYSIWYG
Mon test de Gutenberg live…


 ce n’était pas le cas sur mon interface Gutenberg, qui m’affichait toujours un contenu centrĂ© et margĂ©.

Gutenberg test WYSIWYG

 qui ne correspond pas du tout Ă  ce que l’éditeur affichait.

Bien sĂ»r, Gutenberg est encore en cours de dĂ©veloppement ; sur ce point, les dĂ©veloppeurs sont d’ailleurs honnĂȘtes, et signalent de nombreux blocs comme “expĂ©rimentaux”.

Prenons donc quelques minutes pour apprĂ©cier la transparence d’une Ă©quipe de professionnels qui travaille dessus d’arrache-pied, et qui savent que le produit fini doit ĂȘtre aux petits oignons, pour contrer les levĂ©es de boucliers qui s’annoncent dans la communautĂ©.

Test Ă©diteur Gutenberg WordPress 5.0

Note : Au sein de la communautĂ© WP, de nombreuses voix se sont Ă©levĂ©es – y compris parmi l’équipe des contributeurs – pour demander de repousser la date de sortie de la version 5.0 de WordPress, ce qui a Ă©tĂ© fait Ă  plusieurs reprises. La raison ? La prĂ©sence de bugs, avec Gutenberg, qui nĂ©cessitent d’ĂȘtre corrigĂ©s. Matt Mullenweg, l’un des crĂ©ateurs de WordPress, a alors rĂ©torquĂ© que ceux qui ne souhaitaient pas utiliser Gutenberg pouvaient trĂšs bien continuer Ă  se servir de l’ancien Ă©diteur de texte grĂące Ă  un plugin dont on va parler juste en-dessous.

Quel passage entre l’éditeur classique et Gutenberg ?

Autre Ă©lĂ©ment de la plus haute importance : qu’en est-il de l’éditeur classique de WordPress, et de sa relation avec le petit nouveau Gutenberg ?

Il vous est toujours possible de repasser en mode â€œĂ©diteur classique”, en sĂ©lectionnant la fonctionnalitĂ© adĂ©quate depuis l’onglet “Pages” de WordPress.

Gutenberg passage TinyMCE

Il existe mĂȘme dĂ©jĂ  un plugin, nommĂ© Classic Editor, qui vous permet de dĂ©sactiver totalement Gutenberg, et de revenir Ă  votre Ă©diteur classique. Ouf.

Toutefois, si vous choisissez de passer de l’un Ă  l’autre, vous rencontrerez peut-ĂȘtre quelques bugs dans le WYSIWYG. Comme celui-ci, qui a eu lieu lorsque je suis revenue en mode Gutenberg, aprĂšs avoir touchĂ© au code HTML dans mon Ă©diteur classique :

Gutenberg bug WYSIWYG
“Ce bloc semble avoir Ă©tĂ© modifiĂ© hors de l’éditeur. Écrasez ces modifications externes, ou convertissez-les en “classique” ou en “HTML personnalisĂ©â€ pour conserver les changements.”

Pour faire simple, pour l’heure, si vous dĂ©sirez mettre les mains dans le code, vous devrez vous asseoir sur l’interface visuelle de Gutenberg.

La raison, expliquĂ©e dans la documentation officielle : Gutenberg priorise le code gĂ©nĂ©rĂ© par “bloc” via son Ă©diteur, plutĂŽt que le HTML classique, qui n’a plus de sens une fois re-rentrĂ© dans l’éditeur.

D’oĂč ce code lorsque l’on passe d’un Ă©diteur Ă  l’autre, qui ressemble un peu Ă  du gloubi-boulga pour mon niveau de connaissance 101 du dĂ©veloppement web.

Gutenberg aperçu code
Un aperçu du code généré par Gutenberg

Bonne nouvelle cependant : si Gutenberg prĂ©sente des erreurs en repassant par l’interface originale, on nous assure que, si l’on y revient, le site ne sera pas totalement cassĂ©.

Normalement, pas de syndrîme “lock-in” en vue. Mais si, le lock-in, vous savez : ce dont Nicolas vous parlait à propos des thùmes Themeforest dans cet article.

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Développeurs WordPress -vs- clients : quelle maniabilité ?

Gutenberg a été pensé, entre autres, pour ouvrir les portes du célÚbre CMS aux grands débutants du web.

LĂ  oĂč les crĂ©ateurs de sites s’orientaient parfois vers Wix, de peur d’affronter le cambouis technique, on devrait dĂ©sormais voir un afflux de nouveaux types de personnes se lancer dans la crĂ©ation de sites WordPress.

Pas de souci de maniabilité pour ceux qui découvriront cette plateforme via sa nouvelle interface.

Toutefois, qu’en est-il de ceux qui s’étaient habituĂ©s Ă  l’ancienne interface ?

  • Les dĂ©veloppeurs et autres fanatiques de code verront grosso modo le passage Ă  Gutenberg comme la dĂ©couverte d’un nouveau type de constructeur de page. À noter en particulier : Advanced Custom Fields est compatible avec Gutenberg, et celui-ci sera l’éditeur par dĂ©faut de tous les Custom Post Types. Certes, le statu quo Ă©tait bien confortable, je vous l’accorde ; mais la phase d’adaptation sera assez rapide. N’hĂ©sitez d’ailleurs pas dĂšs maintenant Ă  vous y former : on vous recommande chaleureusement la formation de Maxime de CapitaineWP sur la crĂ©ation de blocs sur Gutenberg !
  • Pour les clients de ces dĂ©veloppeurs, pas de panique : je vous recommande de faire un point en amont avec eux sur les changements induits par Gutenberg, et de mettre dĂšs Ă  prĂ©sent en place un processus pour Ă©viter toute mĂ©prise. Plugin de duplication de pages et modĂšles d’articles seront les bienvenus ! Mettez dĂšs Ă  prĂ©sent un environnement de test en place. Et surtout, respirez un grand coup : ça va bien se passer.
  • En ce qui concerne les personnes ayant crĂ©Ă© leur site de maniĂšre autonome, idem : familiarisez-vous avez l’interface, et mettez en place des plugins de duplication de pages qui vous permettront de vous en sortir. AprĂšs avoir pris de nouveaux rĂ©flexes, un constat s’impose : la forme change, mais Gutenberg permet toujours de rĂ©diger du contenu
 et il y a de fortes chances pour que ce nouvel Ă©diteur vous plaise !

Quelle expérience utilisateur pour un site utilisant Gutenberg ?

Proposer une meilleure expĂ©rience aux crĂ©ateurs de sites WordPress, c’est bien. Assurer des performances aux visiteurs de ces sites crĂ©Ă©s via Gutenberg, ça reste essentiel.

Influence sur la performance du site

Pour tester la performance d’un site crĂ©Ă© via Gutenberg, j’ai comparĂ© l’article de dĂ©monstration que permet de crĂ©er le plugin (similaire Ă  cette page) avec une version identique mais rĂ©adaptĂ©e dans l’Ă©diteur classique.

  • Article Gutenberg : Chargement en 6.1s pour 40 requĂȘtes (source);
  • Article classique : Chargement en 3,7s pour 39 requĂȘtes (source).

Alors attention, ne tirez pas de conclusions trop hĂątives de cette comparaison !

PremiĂšrement, l’article de dĂ©mo de Gutenberg charge de GROSSES images (2,9Mo) alors que l’article classique se contente de 1,4Mo d’images.

Pourquoi ?

Parce que j’ai dĂ» re-crĂ©er des galeries avec l’Ă©diteur classique et de ce fait, la taille des images chargĂ©es sont rĂ©duites. Les galeries de Gutenberg chargent la taille originale des images, ce qui biaise le test (il faudrait que cela soit corrigĂ© d’ici la sortie officielle).

DeuxiĂšmement, mĂȘme si les outils de mesure sont intĂ©ressants (nous avons utilisĂ© WebPageTest), il ne faut pas oublier la vitesse de rendu constatĂ©e dans le navigateur.

On est d’accord, c’est du pifomĂštre mais au final on ne constate pas vraiment de diffĂ©rence entre un article classique et un article crĂ©Ă© avec Gutenberg.

D’autant plus que si votre site est optimisĂ© avec les recommandations de mon collĂšgue Florian, cela devrait encore moins se sentir.

Optimisation du SEO

Les blocs de modules permettent à un créateur de site lamba de bien gérer ses balises <hn>, et ce de deux maniÚres différentes :

  • D’une part, avec la possibilitĂ© de toujours accĂ©der au code HTML (soit dans un bloc “paragraphe de texte”, soit dans un module dĂ©diĂ© au code directement)
  • D’autre part, avec des blocs dĂ©diĂ©s aux titres, intitulĂ©s “Heading” ou “Subhead”.
Gutenberg balises titres SEO

Sur la barre de droite de l’interface, on est d’ailleurs agrĂ©ablement surpris de voir surgir la structure titulaire de la page de maniĂšre trĂšs claire :

Gutenberg structure SEO
Créez des publications bien structurées avec Gutenberg

Quant aux textes alternatifs de vos images, pas de souci non plus : les blocs d’images gĂ©nĂ©rĂ©s par Gutenberg vont directement chercher dans la BibliothĂšque de MĂ©dias les fichiers que vous souhaitez faire apparaĂźtre.

Vous avez ainsi directement accùs au champ “texte alternatif”, comme d’habitude. Et si vous changez d’avis a posteriori, un seul clic sur l’image suffit à faire apparaütre le texte alternatif dans la barre de droite.

Gutenberg SEO textes alternatifs

DĂ©veloppez votre trafic et augmentez vos ventes

Façonnez le rĂ©fĂ©rencement de votre site WordPress et sortez-le enfin de l’anonymat.

Responsiveness

Rien Ă  signaler du cĂŽtĂ© du responsive dans mes tests effectuĂ©s. Les pages publiĂ©es avec Gutenberg s’adaptent bien Ă  tous les formats, quels que soient les blocs utilisĂ©s.

C’est d’ailleurs le thĂšme que vous avez sĂ©lectionnĂ© qui rĂ©git l’adaptabilitĂ© de vos pages : rien de cela ne changera donc avec Gutenberg.

Quelle adaptation aux thĂšmes et plugins ?

C’est une certitude : tous les thĂšmes sont par dĂ©faut compatibles par Gutenberg.

Toutefois, la balle reste dans le camp de leurs dĂ©veloppeurs : ce seront Ă  eux de s’adapter pour crĂ©er la meilleure interface de crĂ©ation de publications.

En thĂ©orie, ils ne devraient pas y voir un challenge dĂ©mesurĂ©, puisque Gutenberg n’a d’effet que sur le contenu des publications, sans grand changement structurel.

En en parlant avec Alex, voici ce qu’il m’a dit, et qui devrait en rassurer plus d’un :

“Je ne me fais pas de souci pour la communautĂ© de dev face Ă  Gutenberg. S’ils le veulent, il pourront optimiser leurs thĂšmes afin de proposer des options prĂ©cises. Dans le cas contraire, les options par dĂ©faut de Gutenberg seront lĂ .“

C’est d’ailleurs la promesse d’un nouvel eldorado pour ces dĂ©veloppeurs que ce nouvel Ă©diteur : tous n’optimiseront pas leurs thĂšmes actuels pour Gutenberg, et ceux qui le feront sortiront rapidement du lot. OpportunitĂ©s business en vue !

Gutenberg développeurs opportunités

On vous tiendra bien sûr au courant de ceux qui auront conquis notre coeur.

Du cĂŽtĂ© des plugins, on verra surgir une mĂȘme problĂ©matique similaire :

  • Les extensions qui gĂ©nĂšrent des shortcodes ne verront aucun problĂšme au changement d’éditeur, Ă©tant donnĂ© que Gutenberg les supporte. Ces plugins devront sans doute crĂ©er leurs propres blocs pour bien s’intĂ©grer Ă  ce nouveau paradigme.
  • Les extensions qui crĂ©ent des options dans les mĂ©tabox (ces petites boĂźtes sous l’éditeur WordPress, qui rĂ©gissent l’ensemble de la page en construction), devront certainement donner un petit coup de bistouri Ă  leurs interfaces, pour s’adapter Ă  Gutenberg. Mais le nouvel Ă©diteur supporte bien ces mĂ©tabox ! Les plus grands plugins planchent dĂ©jĂ  sur le sujet (ou se sont dĂ©jĂ  adaptĂ©s), comme Yoast SEO, qui a choisi d’en parler avec transparence, pour rassurer les adeptes de sa solution.

Pour les crĂ©ateurs de sites en gĂ©nĂ©ral, il va donc falloir garder Ă  l’oeil vos thĂšmes et extensions prĂ©fĂ©rĂ©es, et intĂ©grer leur adaptation Ă  Gutenberg sous WordPress 5.0 dans vos critĂšres de sĂ©lection.

Quelle évolutivité ?

Difficile de parler de l’évolutivitĂ© d’une solution en cours de dĂ©veloppement. À l’heure oĂč j’écris cet article, tout le support se dĂ©roule sur GitHub.

On y voit des utilisateurs effarĂ©s et affairĂ©s demander de l’aide Ă  l’équipe technique de Gutenberg, qui ne cesse de fermer des discussions, en renvoyant Ă  d’autres questions posĂ©es dans une autre discussion


Oui, ok, c’est un peu le souk pour l’instant ; mais que celui qui n’a jamais entrepris de grands travaux sans mettre le bazar jette la premiĂšre pierre Ă  l’Ă©quipe de Gutenberg !

Pas de panique, communauté WordPress : on vous écoute, et on vous soutient.

Quel rapport qualité/prix ?

Gutenberg sera intĂ©grĂ© par dĂ©faut Ă  l’interface WordPress, et restera donc totalement gratuit.

L’équipe de dĂ©veloppeurs Gutenberg n’a pour l’instant pas communiquĂ© sur l’idĂ©e de crĂ©er des add-ons, mais l’écosystĂšme WordPress commence dĂ©jĂ  Ă  se frotter les mains Ă  l’idĂ©e de proposer des plugins (gratuits, ou payants, d’ailleurs) permettant de mettre en place des blocs spĂ©cifiques.

On pense notamment Ă  celui de Maxime BJ de CapitaineWP : Advanced Gutenberg Blocks, qui permet d’ajouter une myriade de blocs supplĂ©mentaires comme :

  • Des boites de message ;
  • Des produits WooCommerce ;
  • Des boutons d’ajout au panier ;
  • Des cartes Google Maps ;
  • Des publicitĂ©s ;
  • Des tĂ©moignages ;
  • Des aperçus de sites (le prĂ©fĂ©rĂ© d’Alex).

Toujours Ă  ce propos, vous pouvez aussi regarder du cĂŽtĂ© des plugins Block Lab ou Cloud Blocks (attention, ce dernier est en version beta jusqu’Ă  la sortie de WordPress 5.0, donc ne l’utilisez pas sur un site en production, pour plus de prĂ©caution).

Enfin bref, on vous le dit, Gutenberg est une vraie aubaine pour les dev !

Notre avis final

Alors finalement, on en pense quoi, de cette version préliminaire de Gutenberg ?

Les points forts de Gutenberg

  • Une interface de crĂ©ation qui simplifiera la vie des non-initiĂ©s. Parmi ces simplifications, on peut notamment noter le nombre limitĂ© de blocs disponibles, qui permet finalement d’apprendre trĂšs vite Ă  s’en servir.
  • Un WordPress 5.0 qui s’annonce bien plus compĂ©titif par rapport aux autres CMS. Notre plateforme favorite s’attaque effectivement au marchĂ© du WYSIWYG, et compte concurrencer les Wix et autres Squarespace. Un nouveau chapitre prometteur pour les dĂ©veloppeurs de thĂšmes et de plugins.
  • Un Ă©diteur de page gratuit, totalement gratuit, et crĂ©Ă© avec la volontĂ© qu’il le reste, pour toujours.
  • Un code en JavaScript, langage qui permet des temps de rĂ©ponses beaucoup plus rapides. On se trouve donc devant un rendu en front, mais aussi une interface d’administration, beaucoup plus performante.

Les points faibles de Gutenberg

  • Un Ă©diteur encore en cours de construction. VoilĂ  pourquoi on n’a pas tellement envie de lui taper sur les doigts pour l’instant, mais plutĂŽt envie de faire confiance aux Ă©quipes de professionnels qui travaillent d’arrache-pied dessus.
  • Une documentation pour l’instant exclusivement dĂ©diĂ©e aux professionnels de WordPress anglophones, via GitHub et sur wordpress.org. Une consĂ©quence du premier point ici abordĂ©. Mais on fait confiance Ă  la communautĂ© pour fournir, dĂšs la sortie de Gutenberg, une docu totalement traduite en Français, et bien comprĂ©hensible.

Gutenberg : pour qui ?

Bon, soyons clairs : pour l’instant, Gutenberg ne s’adresse qu’à ceux qui souhaitent contribuer Ă  la mise en place d’une interface rĂ©ellement performante, ou qui aiment simplement observer les changements au jour le jour
 autant dire : aux dĂ©veloppeurs aguerris, et aux petits curieux comme vous, chers lecteurs.

Mais Ă  terme, s’il tient ses promesses, l’éditeur Gutenberg pourrait bien changer la donne vis-Ă -vis des crĂ©ateurs de sites-vitrines, de blogs ou de boutiques e-commerce qui souhaitent lancer leur site seul.

À la clĂ© : une interface plus instinctive, qui permet d’éviter au maximum de coder, et qui permet de visualiser les changements en direct.

On verra sans doute Ă©galement des erreurs trĂšs communes, induites par l’éditeur classique, diminuer.

Exit, par exemple, les titres de niveau 2 intégrés par souci de taille, mais qui cassent la structure de la page web.

Quant aux dĂ©veloppeurs freelance et aux webdesigners, je ne doute pas qu’ils trouveront de nouveaux rĂ©flexes face Ă  cet outil, et mettront en place des process fluides avec leurs clients.

Dans ma boule de cristal, j’en vois mĂȘme qui seront heureux de pouvoir crĂ©er, de bout en bout, leurs propres modules.

Comme je vous l’ai expliquĂ© au dĂ©but de cet article, la date de sortie officielle de WordPress 5.0 approche (elle a d’ailleurs Ă©tĂ© repoussĂ©e plusieurs fois). Elle pourrait intervenir avant la fin de l’annĂ©e 2018, ou dĂ©but 2019.

La rĂ©volution arrive, mais pas besoin de s’affoler : la Marmite vous accompagnera tout au long du dĂ©ploiement de ce nouvel Ă©diteur.

En attendant, si vous possĂ©dez la derniĂšre version en date de WordPress (la 4.9.8.), vous pouvez tester la bestiole directement depuis votre Tableau de bord (sauf si vous avez installĂ© et activĂ© l’Ă©diteur classique).

Mais je vous encourage Ă  le faire sur un site de test, on n’est jamais trop prudent.

Autrement, vous avez la possibilitĂ© de retrouver Gutenberg sur la page Extensions > Ajouter, ou en la tĂ©lĂ©chargeant gratuitement ici


Téléchargez Gutenberg


 et, au besoin, si vous ĂȘtes toujours angoissĂ©, n’hĂ©sitez pas Ă  reprendre une bonne dose de Tracy Chapman 😊

Alors, que pensez-vous de Gutenberg et de ce que cela augure pour pour le futur de WordPress ? Dites-nous tout en commentaire !