wordpress-formations-gutenberg

WordPress – Gutenberg editor

WordPress – Gutenberg editor

Pourquoi Gutenberg

Gutenberg est un nouvel éditeur pour WordPress. Il porte le nom de Johannes Gutenberg, qui a inventé une presse à caractères mobiles il y a plus de 500 ans. Le point clé de cette mise à jour, c’est qu’elle ouvre de nouvelles perspectives pour l’avenir. Actuellement, l’utilisateur peut modifier son contenu, mais c’est le thème WordPress qui va gérer les autres éléments de chaque page (header, footer, sidebar, etc.). Pour de nouveaux utilisateurs WordPress, ces éléments de l’interface d’administration sont loin d’être facilement compréhensibles au premier abord, comme par exemple ces actions :

  • créer un menu ;
  • ajouter un widget ;
  • personnaliser un thème avec le Customizer ;
  • changer un contenu dans le header ou le footer ;
  • etc.

Le vrai objectif de Gutenberg est de rendre plus fluide et administrable l’intégralité de son site et de ses contenus. A terme, Gutenberg devrait ainsi unifier l’interface d’administration de WordPress avec le principe des blocs, et donc au passage de se débarrasser d’anciennes interfaces et API comme par exemple celles des Widgets et des Shortcodes.

Une des frustrations courantes des utilisateurs de WordPress est justement d’avoir une interface centrée sur la rédaction de contenus textes alors que le web est maintenant focalisé sur des contenus enrichis (vidéo, images, galeries, tableaux, boutons, contenu en pleine largeur, etc.). L’autre frustration courante était d’avoir un rendu visuel en backoffice A, et un rendu complètement différent en front-office B.

Gutenberg essaye ainsi de résoudre ces deux problématiques à la fois (vous pourrez d’ailleurs trouver ici un article anglais qui en parle très bien). La version 5.0 de ce nouvel éditeur n’est donc que la 1ère étape. La phase 2 est d’ailleurs déjà en route, et l’objectif est d’aller bien plus loin dans les mois et années à venir avec de nombreux projets visant à intégrer bien plus ce nouvel éditeur dans l’ensemble du backoffice de WordPress.

L’éditeur actuel est en effet incomplet, et il a le vilain défaut de mélanger une interface classique WYSIWYG (une interface comme n’importe quel logiciel de bureautique) avec des API supplémentaires :

  • Celle des shortcodes comme « [je_suis_un_shortocde] »;
  • L’API View des shortcodes (dont quasiment personne ne parle et/ou ne connaît l’existence) ;
  • Les autres menus de WordPress pour gérer tout le reste (notamment le Customizer, les widgets ou encore les menus dont on a déjà parlé).Si vous regardez à la fois l’éditeur Gutenberg et l’éditeur visuel actuel côte à côte (cliquez pour agrandir), vous pouvez voir que Gutenberg a un plus grand espace d’écriture, en particulier sur les petits écrans. Pour les gens qui écrivent sur des ordinateurs portables, Gutenberg va être un beau changement de rythme ! Il est vraiment centré sur « l’écriture » et essaie de fournir un environnement moins distrayant.
    Comparer Gutenberg vs éditeur actuel

    Comparer Gutenberg vs éditeur actuel

    Dans l’éditeur Gutenberg de WordPress, vous pouvez cliquer sur « Paramètres d’article » pour supprimer la barre latérale droite. Et bien que cela vous donne accès à encore plus de votre écran, il est à mi-chemin avec le mode d’écriture sans distraction actuellement disponible. Nous avons essayé d’utiliser Shift+Alt+W pour le lancer dans l’éditeur Gutenberg mais cela ne semble pas encore fonctionner. Il se pourrait qu’ils ne l’aient pas encore ajouté. Mais nous sommes presque sûrs qu’ils le feront, car il y a probablement pas mal de gens qui l’utilisent.

    Cacher les paramètres d'article dans Gutenberg

    Cacher les paramètres d’article dans Gutenberg

    Pour basculer entre le mode éditeur visuel et l’éditeur de texte (code), il y a maintenant un menu déroulant en haut à gauche. Vous remarquerez qu’il y a maintenant des commentaires HTML au début et à la fin de chaque bloc. Par exemple, ce qui suit vous permet de créer un bloc de texte.

    <!-- wp:core/text --> <!-- /wp:core/text -->

    Ceci vous permet de créer les blocs directement à partir du mode éditeur de texte. Cependant, il ajoute aussi beaucoup plus d’encombrement que ce à quoi vous êtes probablement habitué si vous éditez dans ce mode.

    éditeur texte gutenberg

    Éditeur de texte de Gutenberg

    Lorsque vous mettez en surbrillance un bloc, il existe des options pour le déplacer facilement vers le haut ou vers le bas à l’aide des flèches, le supprimer ou aller dans les paramètres du bloc. Ceci est très similaire aux contrôles disponibles sur Medium.

    Travailler avec les blocs de Gutenberg

    Travailler avec les blocs de Gutenberg

    Nous avons également été surpris par la qualité de son fonctionnement sur mobile dès sa sortie. Si vous avez besoin de faire une insertion rapide d’image ou d’ajouter un paragraphe avant de publier un message en déplacement, il semble que Gutenberg va rendre cela très facile.

    Éditeur mobile de Gutenberg

    Éditeur mobile de Gutenberg

    Une des premières choses que vous remarquerez probablement est que la barre d’outils TinyMCE que vous avez l’habitude de voir depuis des années a disparu. Elle est maintenant remplacée par un menu déroulant si vous cliquez sur le bouton « Insérer ». Eh bien, c’est parce qu’il semble que Gutenberg essaie de se débarrasser de sa dépendance à l’intégration de TinyMCE. Ou pas ?

    TinyMCE n'est plus

    TinyMCE n’est plus

    Voici ce qu’en dit Matt Mullenweg.

    « Ce que nous essayons de faire, c’est de le décaler pour que vous n’ayez à apprendre les blocs qu’une seule fois et une fois que vous apprenez le bloc image, il peut être dans un message, dans une barre latérale, dans une page, dans un type de message personnalisé, et cela fonctionnera exactement de la même manière. Tout est intégré avec lui, disons un plugin qui apporte vos photos de Google ou votre Dropbox, cela fonctionnera maintenant partout. » — Matt Mullenweg (src: WP Tavern)

    Cependant, Andrew Roberts, le chef de projet de l’équipe TinyMCE, nous a également contacté et a clarifié quelques points concernant ce qui se passe avec TinyMCE et Gutenberg.

    Je fais partie de l’équipe Gutenberg depuis le début. Il s’agit d’un effort conjoint. Il est probablement intéressant de noter que le moteur d’édition TinyMCE est le moteur qui alimente le composant « éditable » qui, à son tour, alimente la plupart des blocs. Le bloc Table par exemple. Il est probable que cela se poursuivra dans un avenir prévisible. De plus, le bloc texte classique est essentiellement l’éditeur TinyMCE. L’importance qu’on lui accorde dépend probablement de la rétroaction de la communauté. Il y a en fait une Pull request (#1394) en cours d’exécution qui fait essentiellement de Gutenberg une enveloppe pour l »ancien’ éditeur afin que les extensions et boutons TinyMCE existants fonctionnent. Reste à voir si cela est inclus. Quoi qu’il en soit, il est probable que les équipes du coeur de WP et de TinyMCE travailleront ensemble pour s’assurer qu’une expérience utilisateur de type traitement de texte continue de vivre dans WordPress. Même si cela finit par devenir une extension. Dans le même ordre d’idées, l’une des raisons pour lesquelles nous avons travaillé sur le projet Gutenberg avec l’excellente équipe de Gutenberg a été d’apporter ces concepts à la communauté TinyMCE au cours des 12 prochains mois. Cela vous permettra d’intégrer des concepts d’édition basés sur des blocs dans votre propre application personnalisée. — Andrew Roberts

    Voici ci-dessous quelques nouveaux blocs que nous trouvons plutôt cools.

    Bloc de table et bloc de colonnes de texte

    Les tables simples sont beaucoup plus simples maintenant, car vous pouvez les insérer sous forme de blocs dans l’éditeur. Auparavant, vous deviez utiliser une extension tierce ou du code HTML. Actuellement, vous ne pouvez ajouter qu’un tableau 2×2 avec l’option d’insertion et vous ne pouvez pas le styliser sans aller dans la vue texte. Cela dit, nous supposons que vous serez capable de faire toutes ces choses à partir de l’éditeur visuel.

    Tables Gutenberg

    Tables Gutenberg

    Ils ont également ajouté la possibilité d’ajouter des blocs de colonnes de texte réactifs, ce qui est génial ! Actuellement, vous pouvez choisir entre une mise en page à 2, 3 ou 4 colonnes. Les colonnes réactives dans WordPress ont toujours été un casse-tête dans le passé et nécessitaient généralement une extension tierce pour fonctionner correctement.

    Colonnes Gutenberg

    Colonnes Gutenberg

    Bloc HTML en direct

    Ils ont aussi ce que nous appelons un bloc HTML en direct. Vous pouvez insérer votre code et voir un aperçu à l’intérieur du bloc. C’est en fait une idée plutôt sympa et pourrait même éviter à certains d’entre nous d’avoir à basculer entre les modes éditeur visuel et éditeur de texte.

    Bloc HTML dans l'éditeur Gutenberg

    Bloc HTML dans l’éditeur Gutenberg

    Glisser/Déposer pour les Images

    À partir de Gutenberg 0.5.0, vous pouvez maintenant glisser/déposer des images directement dans un bloc d’images, comme vous avez l’habitude de le faire avec l’éditeur visuel. Cependant, il y a un effet de fondu lors de cette opération, ce qui est assez étrange. Nous pourrions facilement voir cela comme un problème.

    Glisser/déposer les images

    Glisser/déposer les images

    Vous pouvez également ajouter des classes CSS supplémentaires à certains blocs.

    Ajouter classe CSS

    Ajouter classe CSS

    Blocs récents

    Avec tous les blocs en cours de construction dans l’éditeur Gutenberg, et probablement beaucoup d’autres à venir, ils ont ajouté des « blocs récents » pour essayer d’accélérer le processus d’insertion.

    Blocs récents

    Blocs récents

    Options de texte de couverture

    À partir de Gutenberg 0.9.0, ils ont également introduit de nouveaux styles visuels et des options pour le texte de couverture. Vous pouvez facilement changer la taille de la police, la transformer en Drop Cap, et changer la couleur avec leur nouveau composant de palette de couleurs personnalisées.

    Texte de couverture Gutenberg

    Texte de couverture Gutenberg

    Autocomplétion avec le Slash

    Une fonctionnalité intéressante ajoutée dans Gutenberg 1.1.0 est la possibilité d’utiliser l’autocomplétion pour insérer des blocs. Pour ceux d’entre nous qui utilisent Slack au quotidien, il s’agit d’une façon très familière de formater rapidement le contenu comme vous le souhaitez. Avoir la possibilité de minimiser les clics et d’utiliser davantage le clavier est toujours une bonne chose !

    Autocomplétion Gutenberg

    Autocomplétion Gutenberg (Src Img: WordPress.org)

    Table des matières et support des ancres

    Ils ont également ajouté une table des matières sur la barre latérale. Ce sont des liens cliquables qui vous permettent de passer facilement à une section de votre article. Cela peut s’avérer utile lors de l’écriture d’un long contenu.

    Vous avez des problèmes de temps d’indisponibilité et de WordPress ? Kinsta est la solution d’hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités
    Table des matières Gutenberg

    Table des matières Gutenberg

    Une autre fonctionnalité que vous pouvez maintenant utiliser sur les blocs est l’ancrage. C’est en fait assez excitant et quelque chose qui est nécessaire dans le coeur depuis longtemps. L’ajout d’ancres vous permet ensuite de créer un lien direct vers une certaine section ou en-tête de l’article. C’est idéal pour le partage, ainsi que pour créer des sauts aux menus dans les SERPs.

    Support des ancres dans Gutenberg

    Support des ancres dans Gutenberg

    Compteur de mots et de blocs

    La plupart d’entre nous sont habitués à voir le nombre total de mots au bas de l’éditeur WYSIWYG. Eh bien, dans Gutenberg 1.2.1 ils ont ajouté ceci dans un petit popup d’information que vous pouvez voir rapidement. Vous pouvez voir le nombre total de mots, le nombre de blocs et le nombre de titres.

    Compteur de mots et de blocs dans Gutenberg

    Compteur de mots et de blocs dans Gutenberg

    Placement des blocs de citation et nouvelles options d’alignement

    Au lieu d’avoir le bloc de citation standard que nous utilisons depuis des années, ils ont aussi un nouveau placement de citations. Et oui, les citations sont différentes. Il est également agréable de voir quelques variations sur le positionnement des blocs. Pendant des années, l’éditeur visuel standard vous a donné la possibilité d’aligner à gauche, d’aligner au centre, d’aligner à droite et de ne pas assigner d’alignement. Avec l’éditeur Gutenberg de WordPress, vous pouvez aussi aligner en largeur (voir ci-dessous), et aligner en pleine largeur.

    Citation en pleine largeur dans Gutenberg

    Citation en pleine largeur dans Gutenberg

    Bouton

    Il y a aussi une méthode intégrée pour ajouter un simple bouton. Bien qu’il n’y ait pas encore beaucoup d’options ici, c’est agréable à voir, car de nombreux blogueurs et éditeurs ont besoin de moyens plus faciles pour ajouter des appels à des actions à leurs blogs. Pour l’instant, vous devez utiliser le HTML ou compter sur une extension tierce de boutons/code.

    Bouton de Gutenberg

    Bouton de Gutenberg

    Options d’intégration

    Si vous vouliez des options d’intégration plus facilement accessibles, eh bien, votre souhait est enfin réalisé ! Gutenberg rend l’intégration de contenu multimédia super facile, qu’il s’agisse de YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Slideshare, Reddit, et bien d’autres encore.  Alors que vous pouviez intégrer tous ces éléments avant, beaucoup ne s’en rendaient pas compte parce qu’il n’y avait aucune mention dans l’éditeur visuel. Combiné avec la nouvelle expérience de bloc et les options d’alignement, nous ne sommes pas sûrs de ce qui pourrait vraiment être mieux fait. Bien qu’ils devront peut-être réorganiser les choses à l’avenir, car cela pourrait facilement s’encombrer.

    Options d'intégration Gutenberg

    Options d’intégration Gutenberg

    Avantages de l’éditeur Gutenberg de WordPress

    Voici quelques avantages que nous voyons avec l’éditeur actuel de Gutenberg.

    • Se débarrasser *d’une certaine* dépendance à TinyMCE est une bonne choseà notre avis. Nous aimerions voir une intégration plus étroite entre le coeur, les développeurs de thèmes, les extensions et l’éditeur.
    • Pour les rédacteurs qui préfèrent la nouvelle expérience d’édition de style Medium, ils vont probablement adorer l’éditeur Gutenberg de WordPress.
    • Gutenberg offre une expérience moins distrayante avec plus d’espace à l’écran..
    • Les blocs sont amusants à utiliser et les nouvelles options d’alignement sont un pas en avant pour les écrans à plus grande résolution et les sites réactifs sur toute la largeur.
    • Fonctionne déjà très bien sur mobile, et à l’avenir, nous pourrons voir les gens l’utiliser beaucoup plus. Vous avez besoin de faire un montage rapide sur votre téléphone en déplacement ? Pas de problème.
    • La possibilité pour les développeurs de thèmes et d’extensions de créer leurs propres blocs personnalisés.
    • Plus facile à utiliser pour les débutants.