Dés le retour du WordCamp Europe, (euh en fait, une bonne semaine après …) j’ai installé et testé rapidement Gutenberg, le nouvel éditeur, qui fait beaucoup parler de lui en moment.
Gutenberg est le nom sympa donné au nouvel éditeur de WordPress, censé remplacer l’actuel WYSIWYG normalement d’ici WordPress 5.0. L’éditeur est en version béta, disponible sous la forme d’un plugin sur le répo officiel.
Bon, il est prévu pour le core si le nombre d’utilisateurs dépasse les 100000. On n’y est pas encore.
Concrètement, j’ai testé l’éditeur comme un utilisateur lambda, en me concentrant sur l’UI et l’UX, et en inspectant un peu le markup produit, que ce soit dans le mode texte de l’éditeur (toujours accessible) ou sur le devant du site.
Voici donc un aperçu assez général de l’éditeur.
L’UI / UX
Franchement, c’est beau. L’interface est clean, avec beaucoup d’espace vide. On respire.
Quand on y regarde à deux fois, on se rend compte que ce n’est pas juste un éditeur de contenu, dans le sens ou même les boites métas (‘excerpt’ par exemple) ont disparu pour laisser place à des panneaux sur la droite, un peu comme le customizer. Toute la zone à l’intérieur de la page est donc chamboulée, pas juste la zone réservée à l’éditeur WYSIWYG.
La zone d’édition du contenu est hyper aérée et simple à utiliser. Quand vous créez un article, vous êtes invités à entrer un titre, puis en dessous, vous pouvez directement taper votre texte tranquillement dans un premier bloc texte. Appuyez deux fois sur entrée, et ça vous crée un autre bloc texte. Vous disposez aussi de petites flèches sur le côté qui vont vous permettre de modifier l’ordre de vos blocs. Super nice.
J’apprécie particulièrement les options de styles qui apparaissent au dessus du bloc texte sur lequel on travaille. C’est bien mieux que les boutons du WYSIWYG. Petit truc sympa aussi, c’est que ces boutons disparaissent quand vous écrivez. Distraction-free mode. Il suffit de bouger la souris et ils reviennent.
Le bouton du bloc texte qui permet aussi de changer le type de bloc est très sympa. Vous pouvez choisir entre une liste, un bloc préformaté, un titre ou un blockquote très rapidement.
Vous pouvez ajouter des blocs de contenus de différents types en cliquant simplement le “+”, et l’éditeur supporte pas mal de type de blocs différents déjà. Vous pouvez donc créer un bloc image, un bloc de code, un bouton, des widgets, des embeds, etc… Bien sympa.
Chaque bloc dispose d’options de styles qui apparaissent au-dessus du bloc, mais aussi d’autres options dans la barre latérale à droite. Pour l’instant, par exemple, vous pouvez uniquement ajouter un drop cap dans un bloc texte, ou régler le texte alternatif d’une image, mais cette zone va sûrement accueillir d’autres options. On n’est qu’en 0.2 !
Bref, entrer du contenu est hyper simple, et ajouter des images/embeds et autres goodies ne demande qu’un clic sur le bouton ‘Insert +’. La possibilité de modifier l’ordre des blocs et les options spécifiques à chaque bloc apparaissant juste au-dessus ou dans la barre latérale rendent l’édition de contenu ultra intuitive. Franchement, je suis conquis.
Le markup
Quand on jette un œil dans l’éditeur texte, on voit de drôles de commentaires HTML. Ces commentaires disparaissent en front. Pour être honnête, je n’ai pas encore regardé le code 🙁 . Je ne vais donc pas épiloguer la-dessus dans cet article.
Toujours est-il que le markup en front est assez propre, et des classes CSS bien pratiques sont ajoutées pour les blockquotes et certains autres blocs. Les développeurs de thèmes devront donc faire attention à inclure ces classes CSS dans leur feuille de styles, sinon certains éléments de Gutenberg pourront avoir un style inattendu.
Le balisage HTML produit est simple et sémantique, mais certains sont étranges. Par exemple, l’élément ‘Cover Image’ crée une <section> nichée dans une autre <section>. C’est très bof bof. Le bloc ‘Blockquote’ crée des paragraphes vides dans l’élément <blockquote>, ce qui va poser des problèmes de marges.
Il y a donc des quacks, mais on est loin de la soupe de <div> servie par les page-builders.
Gutenberg et les page-builders
Les page-builders. Tiens, parlons-en. Je déteste les page builders. Voilà, c’est dit.
Votre admin rame parce que ça charge des caisses de JS, votre front rame parce que ça charge des caisses d’HTML ( divitis !) et de JS, le CSS est dégueux, parfois hyper dur à surcharger (merci les sélecteurs ultra-trop spécifiques et le !important).
MAIS, non, les page-builders ne sont pas morts.
Simplement parce qu’en l’état, Gutenberg ne permet pas de faire des mises en pages plus complexes, comme une image à gauche et du texte à droite, bien divisé en deux colonnes. Il permet juste de mieux gérer les blocs de contenus, de les réordonner, et évite l’utilisation de shortcodes et embeds comme avant.
Gutenberg est “juste” une nouvelle UI/UX pour éditer votre contenu.
DONC, pour faire des belles front pages bien complexes, il faudra toujours un builder (ou mon alternative clean et native que je vous présenterai dans un autre article 😉 #tease).
Alors, c’est bien ou c’est pas bien ?
Concrètement, je trouve Gutenberg vraiment top et je pense qu’il faut aussi garder à l’esprit ce qui fait la force de WordPress.
WARNING ! HIGHLY OPINIONATED PERSONAL TOUGHT INCOMING. YOU MAY AGREE OR NOT. PLEASE DON’T TAKE IT AS FACE VALUE OR AS A PERSONAL ATTACK.
Je deteste les builders, pas parce que ce ne sont pas de bons outils, mais simplement parce qu’ils rajoutent énormément de complexité à WordPress et les “petits” utilisateurs sont vite désarmés devant toute cette complexité.
WordPress est une plateforme qui est censée faciliter la publication de contenu. N’importe qui peut installer WordPress, installer un thème gratuit ou garder le Twenty Seventeen (qui est très bien), et publier du contenu facilement avec l’éditeur WYSIWYG. C’est le postulat de départ.
<rant>
C’est quand on achète un thème “premium” que ça pose problème. Ces thèmes présentent des supers démos, qui nécessitent l’utilisation d’un builder bien spécifique qui est livré avec, avec des sliders bien spécifiques qui sont livrés avec, et vantent des millions de super features dont vous avez trop trop besoin incluses.
La démo est super belle alors, alors on achète, on installe, ça crée trois nouveaux types de contenu personnalisés et une longue page d’options qui viennent polluer l’admin et on est invités à télécharger et installer les plugins requis.
Requis ? Comment un thème peut EXIGER l’utilisation de certains plugins pour fonctionner correctement ? Ca fonctionne pas out-of-the-box ? Ben non.
Et puis tant qu’à faire, on est invité, pour “gagner du temps”, à installer le contenu de démo, qu’on aura plus qu’à personnaliser. Sans nous prévenir que certains éléments du contenu de démo nécessite d’ajouter des classes CSS spéciales, qui sont bien sûr non-documentées, ou alors il faut carrément ajouter du CSS personnalisé dans le customizer. Comme si tous les utilisateurs pouvaient faire ça.
WordPress c’est facile ? Qui a dit ça ? Bien sûr que non ! C’est le bazar, j’y comprends rien ! Je veux juste changer mon numéro de téléphone sur ma page de contact !
Utilisateur débutant ayant acheté un thème premium parce qu’il avait un super look
</rant>
Désolé, j’ai dérivé.
Bref, les builders ont je pense encore de beaux jours devant eux, mais Gutenberg rend l’édition de contenu ultra intuitive, et je pense que c’est le but du jeu, finalement. Donc pour moi, si l’objectif est de rendre plus simple l’édition de contenu, il est atteint. Ou du moins, on est sur la bonne voie. J’aime.
Et vous ? Vous aimez ?
PS: Si vous avez aimé ce article et êtes intéressé pour apprendre à développer pour WordPress en utilisant les meilleures pratiques, jetez-un oeil à WPCookBook ! C’est un vrai livre de recettes WordPress pour apprendre à développer pour WordPress proprement et exploiter au maximum tous les outils et APIs mis à notre disposition. Inscrivez-vous pour être notifié de sa publication !