En savoir plus - Publicité 2 Publicité 2 En savoir plus - Publicité 2 Publicité 2 En savoir plus - Publicité 2 Publicité 2 En savoir plus - Publicité 2 Publicité 2 Découvrez nos offres pour annonceurs - Publicité 4 Publicité 4 En savoir plus - Publicité 2 Publicité 2 Visitez 3Vision Group - Publicité 3 Publicité 3 banner Publicité 3

Le tutoriel pour maîtriser le nouvel éditeur de WordPress 5



Gutenberg, vous connaissez forcément ce nom ! Si vous ne faites pas partie de la « communauté WordPress », cela vous évoquera sans doute l’illustre inventeur de l’imprimerie au XVe siècle.

Gutenberg Wordpress Plugin

Mais si vous êtes des WordPress Addicts – ce que je soupçonne chez un certain nombre d’entre vous – le nom Gutenberg vous fera penser au nouvel éditeur de contenu de WordPress, prévu pour la version 5.0 du CMS. Cet éditeur visuel sera embarqué dans toutes les nouvelles installations WordPress et remplacera l’éditeur classique que vous connaissez tous et toutes.

Là, on est tenté de se dire : ENFIN ! Car cela fait des années que l’on installe des Page Builders pour palier le manque de flexibilité de l’éditeur classique, qui, disons-le franchement, est un véritable frein dès lors que l’on essaie de faire des mises en page un peu complexes. Donc une évolution de l’éditeur WordPress est la bienvenue !

Cependant, ce changement va mettre un grand coup de pied dans vos habitudes et révolutionner votre expérience utilisateur. Mais rassurez-vous, nous allons vous aider à anticiper l’arrivée de Gutenberg et à vous approprier ce nouvel éditeur de contenu. Dans cet article on va le découvrir ensemble et je vais vous expliquer comment l’utiliser, ainsi vous serez fin prêts à l’accueillir à sa sortie !

On va également voir si Gutenberg tient ses promesses et faire le point sur ses atouts et ses faiblesses par rapport à ses principaux concurrents.

  • 1. Découverte de Gutenberg
    1.1 Présentation de l’interface
    1.2 Présentation des blocs de contenus
  • 2. Forces et faiblesses de Gutenberg
    2.1 Mieux que l’éditeur classique…
    2.2 … mais moins bien qu’un Page Builder !
    2.3 Conclusion
  • Gutenberg et le futur de WordPress

Alors ? Editeur classique, Gutenberg ou Page Builders, lequel d’entre eux obtiendra notre préférence ?

Découverte de Gutenberg

Actuellement, Gutenberg est disponible au téléchargement dans la bibliothèque de plugins WordPress. Pour rappel, voici l’article qui vous explique la procédure à suivre pour installer un plugin.

A partir de la version 5.0 de WordPress, il ne sera plus nécessaire de télécharger Gutenberg, il sera automatiquement intégré à toute nouvelle installation WordPress.

Pour appréhender Gutenberg au mieux, il faut comprendre que, même s’il n’est pas un Page Builder à proprement parler, sa logique est assez similaire car elle repose sur l’utilisation de blocs de contenus. On ajoute des blocs, on y insère différents contenus (textes, images, vidéos, etc.) puis on les dispose dans la page comme on le souhaite – ou presque… Parce que si vous êtes habitués à utiliser des Page Builders, vous allez très vite vous rendre compte que, malheureusement, Gutenberg souffre d’un immense manque de souplesse et que c’en est très frustrant…

Allez, on y va ?

Présentation de l’interface

Je vous propose de créer ensemble une belle page d’accueil pour votre site vitrine, ainsi nous ferons le tour des possibilités offertes par Gutenberg. On va créer une bannière, rédiger une phrase d’accroche, présenter vos prestations et enfin ajouter un bouton d’appel à l’action.

On commence par créer une nouvelle page. Sachez que si vous souhaitez continuer à utiliser l’éditeur classique, c’est possible en cliquant sur la petite flèche vers le bas à droite du bouton Ajouter, ou sur le bouton Editeur classique qui s’affiche au survol d’un article ou d’une page.

Gutenberg Wordpress Éditeur Classique
Gutenberg Wordpress Editeur-Classique-2

Mais ce n’est pas ce qui nous intéresse ici, donc on ajoute une nouvelle page et on arrive directement sur la nouvelle interface d’édition.

Gutenberg Wordpress Interface

Voilà donc à quoi ressemble Gutenberg. Etudions un peu cette interface ensemble :
En haut à gauche, nous pouvons ajouter un nouveau Bloc avec le bouton (+), annuler ou rétablir une action grâce aux flèches, et afficher les informations relatives à la page/article (nombre de mots, de titres, de paragraphes, de blocs) avec le bouton (i).

En haut à droite, nous retrouvons les boutons de publication les plus importants : Enregistrer le brouillon, Aperçu (l’oeil) et Publier.
L’engrenage vous permet de masquer la barre latérale et de passer en pleine largeur et les 3 points déroulent quelques options supplémentaires, notamment la possibilité de passer en aperçu HTML (le raccourci clavier, c’est bien vu, mais c’est dommage qu’il faille appuyer sur 36 touches en même temps…).

Gutenberg Wordpress Code Editor

Dans la barre latérale, dans l’onglet Document, on retrouve tous les réglages liés à la publication et je la trouve plus ergonomique que sur l’ancien éditeur. Les onglets sont par défaut fermés et il vous suffit de dérouler ceux qui vous intéressent : ça prend moins de place et c’est plus « propre ». Un bon point pour Gutenberg.

Dans l’onglet Block, on a accès au descriptif et aux réglages du bloc sélectionné. Chaque bloc de contenu possède ses propres options. Comme vous pouvez le constater sur les captures d’écran ci-dessous, les réglages sont basiques.

Gutenberg Réglages Blocs

Second bon point, la barre du haut et la barre latérale restent toujours visibles à l’écran. Fini le scroll sans fin pour prévisualiser ou mettre à jour lorsque l’on travaille sur de longues pages…

Présentation des blocs de contenus

On va maintenant construire notre page et découvrir les blocs de contenus proposés par Gutenberg. Pour bien comprendre leur fonctionnement, il faut imaginer que les blocs de contenus sont des briques que l’on empile les unes sur les autres pour créer un édifice (votre page, donc) – à la différence près qu’avec Gutenberg on peut déplacer et même supprimer autant de “briques” qu’on veut sans que l’édifice se casse la figure (je vous déconseille de tenter l’expérience avec les briques de votre maison) !

Pour ajouter des blocs, on clique sur le petit (+) en haut à gauche. Par défaut le bloc est ajouté en bas de la page. Si vous sélectionnez un bloc et cliquez sur le (+), le nouveau bloc sera ajouté sous le bloc sélectionné. Vous pouvez voir l’emplacement du bloc que vous êtes sur le point d’ajouter grâce à l’indicateur en bleu.

Gutenberg Emplacement Bloc

Remarque : les boutons pour modifier, supprimer ou déplacer un bloc n’apparaissent qu’au survol des blocs. Ça allège la page et permet d’avoir un rendu propre, mais ce n’est pas très user-friendly, les utilisateurs risquent de passer à côté !

On distingue 5 groupes de blocs de contenus :

  • Communs : ce sont les blocs basiques – les titres, les paragraphes, les listes à puce, les citations, les images, les galeries d’images, etc.
  • Formattage : ce sont les différents formats dans lesquels vous pourrez rédiger vos contenus – classique, HTML, code source, texte préformatté, etc.
  • Mise en page : il s’agit des blocs qui vous permettront de soigner votre mise en page. C’est à mon sens le groupe le plus important, mais il est encore très pauvre pour le moment – séparateur, colonnes, boutons, etc.
  • Widget : vous pourrez, dans ce groupe, retrouver vos widgets WordPress et les intégrer directement dans vos pages / articles.
  • Embed : ce sont des contenus embarqués depuis d’autres plateformes (YouTube, Flickr, Twitter, Tumblr, etc.).

On commence notre page d’accueil ?

Insérons une bannière en haut de notre page d’accueil avec le module Cover Image, qui permet d’insérer facilement du texte sur une image.Lecteur vidéo00:0000:28

Puis ajoutons une phrase d’accroche juste en dessous pour capter l’attention du visiteur, à l’aide du module Headings.Lecteur vidéo00:0000:47

Dans la prochaine vidéo, je vous montre la façon dont on déplace ou supprime un bloc de contenu.Lecteur vidéo00:0000:15

Nous allons ensuite insérer, avec le module Gallery, trois images, dans trois colonnes, afin d’illustrer nos prestations.Lecteur vidéo00:0000:37

On va maintenant présenter nos prestations et découvrir le module Text Columns.Lecteur vidéo00:0000:52

Voyons comment afficher une image et la redimensionner en toute simplicité. Vous pouvez choisir une dimension dans les réglages du bloc à droite ou bien redimensionner directement l’image en saisissant les poignées bleues et en les faisant glisser. Attention avec les tailles des images : ce que vous voyez dans Gutenberg n’est pas forcément ce que vous aurez sur votre site en ligne. Le rendu peut être différent, pensez donc bien à vérifier votre mise en page avant de publier ou de mettre à jour.Lecteur vidéo00:0000:43

Voilà, notre page d’accueil est presque prête ! Il ne manque plus qu’un appel à l’action pour inviter vos visiteurs à vous contacter. On va le créer à l’aide d’un bloc paragraphe que l’on va styliser et d’un bloc bouton.Lecteur vidéo00:0000:59

Pour finir, faisons un petit inventaire des autres blocs les plus utiles : les listes à puces, les titres, les sous-titres et les blocs de citations.Lecteur vidéo00:0000:51

Gutenberg permet également d’ajouter des Widgets directement dans les pages / articles. Vous pouvez afficher vos derniers articles (mais ce n’est pas beau pour l’instant et Gutenberg ne permet pas de personnaliser leur affichage) et vos catégories. Et vous pouvez toujours avoir recours à des shortcodes en utilisant le bloc shortcode disponible dans les widgets.

Gutenberg Liste Articles

Le widget Derniers Articles : il n’est pas folichon folichon…

Publions notre page, maintenant qu’elle est prête. Il faut deux clics pour pouvoir publier une page ou un article. Une sécurité plutôt bien pour les utilisateurs qui débutent, pour les empêcher de commettre des boulettes, de publier sans le vouloir. Mais, qu’on se le dise, c’est très vite agaçant…

Les forces et les faiblesses de Gutenberg

Les forces de Gutenberg

Amélioration de l’expérience de l’utilisateur final

L’éditeur classique se faisait vieillissant et Gutenberg apporte la touche de modernité qu’il lui manquait, notamment grâce à une interface sobre, propre et soignée qui simplifie la publication de contenus. Dans son utilisation, il se rapproche davantage d’un Page Builder que d’un éditeur de texte standard. Il reste simple et efficace pour de la mise en page basique et génère un code propre (oui, parce qu’on y pense tous, aux shortcodes bien sales de Visual Composer).

Gutenberg pourra bien satisfaire les utilisateurs de l’éditeur classique qui n’ont encore jamais goûté aux Page Builders et qui se contentaient jusque là de mises en page simples. Il leur permettra en gros de faire la même chose, mais de manière plus intuitive et agréable. Mais pour les autres, je pense en particulier aux différents professionnels WordPress, eh bien… ce n’est pas gagné.

Les faiblesses de Gutenberg

Manque de souplesse

Bien qu’il s’en inspire, Gutenberg n’est clairement pas un véritable Page Builder, ce qui est à mon sens très limitant. La structure en Rangées / Colonnes et le système du Glisser-Déposer (Drag and Drop) des Page Builders manquent affreusement… on se voit contraint de déplacer les blocs uniquement à l’aide des flèches – manque d’intuitivité et perte de temps – et l’utilisation des colonnes est réservée aux blocs de texte, il n’est pas possible actuellement de les utiliser avec d’autres modules. Gutenberg est moins maniable, moins souple qu’un Page Builder et si ça passe crème sur de petites pages, c’est vite handicapant lorsque les pages s’allongent…

De plus, Gutenberg ne nous permet pas, à l’heure actuelle, de modifier un site en front, c’est-à-dire directement depuis un site en ligne. On ne peut pas voir en direct les modifications apportées, fonctionnalité que la plupart des Page Builders proposent.

Manque de personnalisation des blocs de contenus

De plus, les modules manquent de personnalisation… ils ne proposent que trop peu d’options là où l’on imaginerait un panel riche et complet. On ne peut pas jouer sur les marges des blocs (on n’a donc pas le contrôle sur les espaces blancs et c’est difficile d’aérer ses mises en page)… Les options d’affichage et de personnalisation des différents modules sont vraiment trop sommaires (par exemple, il n’est actuellement pas possible d’afficher une galerie sous forme de diaporama ou de carrousel).

Et le peu d’options disponibles ne sont, à mon sens, pas pertinentes. C’est dommage de permettre aux utilisateurs de créer des pages et des articles « sapin de Noël » en leur offrant la possibilité de changer la taille et la couleur des polices, ainsi que la couleur d’arrière plan des paragraphes. Ce n’est, en soi, pas une mauvaise chose, mais ça implique d’éduquer l’utilisateur afin qu’il respecte la charte graphique définie et les codes du design.

On préfèrerait donc avoir davantage d’options de mise en page que d’options de personnalisation graphique.

Gutenberg : alors, bien ou pas ?

Les nouveautés apportées Gutenberg sont loin d’être pertinentes et les faiblesses de l’ancien éditeur ne sont pas toutes corrigées… A quoi bon s’inspirer des Page Builders si c’est pour passer à côté de leurs plus gros atouts ?

En l’état actuel, Gutenberg est une bonne avancée par rapport à l’éditeur classique, il est plus moderne et plus abouti, mais il est encore bien en dessous de tout ce qui se fait en matière de Page Builders.

Gutenberg et le futur de WordPress ?

Gutenberg en est donc clairement à ses balbutiements. Mais il va peu à peu s’enrichir de nouvelles fonctionnalités et de nouveaux blocs de contenus. Les développeurs de thèmes et de plugins pourront créer des modules et des widgets qui s’intègreront à Gutenberg – de nombreux développeurs travaillent d’ores et déjà à rendre leurs extensions compatibles avec Gutenberg (par exemple Yoast SEO et Advanced Custom Fields sont déjà compatibles).

Gutenberg Et Yoast Seo

Le module Yoast SEO s’affiche sous votre contenu, comme dans l’éditeur classique.

Gutenberg peut donc devenir quelque chose de complet et puissant, mais en attendant, son arrivée prochaine dans le core de WordPress soulève beaucoup de questionnements et d’inquiétude du côté des professionnels de WordPress. Gutenberg va bouleverser les habitudes des concepteurs de thèmes, de plugins, de sites WordPress et des créateurs de contenus, et beaucoup d’entre eux se demandent de quelle manière anticiper cette perte de repères et s’y préparer au mieux. Mais ce n’est pas le sujet de cet article, je vous invite à découvrir cet article de Fabrice pour plus de détails.

N’hésitez pas à nous dire en commentaires ce que vous pensez de l’arrivée prochaine de Gutenberg : vous êtes prêts, impatients, curieux, inquiets… ?

Le célèbre gestionnaire de contenu que l’on ne présente plus a déployé au mois d’aout un nouvel éditeur de texte. Actuellement en version bêta, il sortira avec la nouvelle version de WordPress, la version 5.0. Afin que le grand public puisse tester Gutenberg, les développeurs l’ont rendu disponible avec un plugin.

Alors que vaut ce nouvel éditeur ? Est-il mieux que la version actuelle ? Je le passe au banc d’essai.

Aspect général

Ce nouvel éditeur de texte pour vos articles de blog ou même vos pages est devenu un vrai éditeur WYSIWYG (What You See Is What You Get), c’est-à-dire que vous voyez presque le rendu final de votre contenu. Certes, ce n’est pas un constructeur de pages comme Elementor cependant, il est très bien pensé.

Capture De Gutenberg 1

La première chose que l’on remarque est l’aspect épuré, avec des couleurs claires, peu d’outils ou de boutons. On respire plus et l’on se sent moins oppressé pour écrire son article.

L’affichage peut s’alléger davantage en cliquant sur le bouton avec la roue crantée qui masquera les options disponibles sur la droite de l’écran. Pas de panique, elles réapparaitront en cliquant à nouveau sur le bouton.

Capture De Gutenberg 2

Réglages de l’éditeur Gutenberg

Attardons-nous sur ces réglages. Il est composé de deux onglets : Document & Bloc.

Onglet Document

L’onglet Document n’est pas nouveau, il reprend la configuration des pages et articles que vous aviez avec l’éditeur classique.

Vous pouvez gérer :

  • La visibilité de la page : (public, privé, protégé par un mot de passe),
  • Sa date de publication,
  • La forme de publication (standard, lien, citation, galerie, vidéo ou son),
  • Des cases à cocher pour l’épingler à la page d’accueil ou le mettre en attente de relecture,
  • Le nombre de révisions,
  • L’attribution de catégories et d’étiquettes,
  • L’image de mise en avant ,
  • L’attribut d’article (pour choisir le modèle de mise en page).

D’autres fonctions viennent enrichir cet onglet : Extrait et Discussion.

L’option Extrait permet d’ajouter un extrait à votre texte pour qu’il soit, par exemple, repris dans votre flux RSS. Mais pas seulement, grâce à lui, vous maitrisez ce qui apparaitra sur la page d’accueil de votre blog. Plus de texte coupé n’importe où, vous choisissez la taille et le texte pour votre extrait. Cela donnera surement plus envie à vos lecteurs de lire vos articles.

L’option Discussion permet, en clic de souris, d’activer ou non les commentaires sur votre article. Pratique non ? Il donne également la possibilité d’autoriser ou non les pings et rétroliens sur votre page.

Les pings sur WordPress servent à envoyer un signal indiquant qu’un contenu a été publié ou mis à jour. Les rétroliens sont des liens créés de manière automatique entre deux contenus web.

Descriptions issues de l’excellent livre de Daniel Roch, «Optimiser son référencement WordPress».

Le CMS a bien soigné le design en nous proposant quelque chose de sobre et d’épuré.

Onglet Bloc

L’onglet Bloc permet (vous le verrez dans la suite de l’article et dans la vidéo) de personnaliser ces blocs de contenu en changeant la taille des images, la couleur, etc.

Construire sa page

Ce qui change par rapport à l’éditeur classique est que la construction de sa page ou de son article se réalise sous forme de bloc.

Un bloc = un contenu

Chaque bloc permet d’ajouter une fonctionnalité : du texte, des vidéos, des images, etc. à sa page. C’est là où les développeurs ont bien travaillé, car ils ont ajouté plusieurs fonctionnalités qui manquaient cruellement. Auparavant, l’installation de plugins supplémentaires était obligatoire pour ajouter une vidéo YouTube et lui donner l’aspect désiré, ou encore pour structurer sa page. WordPress a écouté sa communauté et a implémenté toutes ces nouvelles fonctionnalités.

Les différents blocs

WordPress a mis en place environ 60 blocs différents triés par catégories.

  • Les plus utilisés : en gros, vos blocs favoris. Cela permettra un accès plus rapide pour une construction plus simple. Ils ont également implémenté un module de recherche pour trouver votre bloc..
  • Les blocs communs : Il regroupe les blocs liés au contenu (texte, images, vidéos, les titres, les listes, etc.)
  • Formatage : cette catégorie permet d’ajouter à son article du code, des tableaux ou du texte préformaté. Ce ne sera pas la catégorie la plus utilisée par les blogueurs, mais elle a le mérite d’exister et d’éviter l’installation de plugins complémentaires.
  • Éléments de mise en page : Cette catégorie est pour moi «la nouveauté». Elle permet de mettre en forme votre contenu avec, par exemple, des boutons, des séparateurs de texte, des sauts de page ou des colonnes. C’est une véritable révolution comparée à l’éditeur classique.
  • Widgets : Pas de surprise ici. Vous pouvez ajouter certains widgets comme un formulaire, vos menus, etc.
  • Inserts : cette catégorie rend possible l’ajout de contenu externe, facilement et rapidement. Le gestionnaire de contenu a sélectionné des éditeurs de contenu multimédia comme YouTube, Twitter, Facebook ou Spotify pour ne citer qu’eux. Vous avez juste à choisir votre bloc, ajouter le lien associé et l’intégrer à votre contenu.

Le CMS le plus utilisé au monde a ajouté une fonctionnalité intéressante : les blocs réutilisables. La fonction première est de vous faire gagner du temps. Il permet d’enregistrer un bloc de contenu (quel qu’il soit) pour le réutiliser plus tard sur cette page ou sur une autre. Pratique, n’est-ce pas ?

Bloc Edition Dans Wordpress

Les réglages des blocs

Je vous parlais, un peu plus haut dans cet article, de l’onglet bloc. Voyons plus en détail ces réglages à travers l’exemple de blocs très utilisés : les paragraphes, les images et les titres. Bien sûr, chaque bloc est configurable, je vous laisserai les découvrir.

Les paragraphes :

Edition Des Paragraphes
Édition Des Paragraphes Sous Gutenberg

Pas (ou peu) de nouveautés sont présentes dans les réglages du bloc «paragraphe». Ils ont juste repris ce qui était déjà présent auparavant et ils les ont remodelés avec un aspect plus actuel.

WordPress donne la possibilité ici de :

  • Régler la taille du texte,
  • L’ajout d’une lettrine en début de texte, soit de façon simple avec des tailles préenregistrées (S, M, L et XL), en la personnalisant avec le curseur ou en rentrant la taille voulue,
  • Le choix de la couleur de l’arrière-plan et du texte,
  • L’onglet «avancé» permet d’ajouter des classes CSS pour personnaliser encore plus ce bloc (par exemple en changeant la police d’écriture).

Les options situées au-dessus de votre paragraphe permettent, comme avant :

  • L’alignement du texte (gauche, droite, centré),
  • La mise en gras ou italique,
  • L’ajout d’un lien,
  • De barrer du texte

Chaque modification effectuée est visible instantanément dans votre éditeur.

Les titres :

Edition Des Titres
Édition Des Titres

Aucune nouveauté sur le réglage des titres. Vous pourrez modifier ou ajouter :

  • La hiérarchie des titres (de H1 à H6),
  • L’alignement du texte,
  • La mise en exergue (gras, italique, texte barré),
  • Un lien,
  • Une ancre HTML,
  • Une classe CSS

Les images :

Modification Des Images Dans Wordpress
Edition Des Images

Vous pourrez ici affiner un peu plus les réglages liés à vos images. Outre sa disposition (à gauche, centrée, etc.), vous pourrez la redimensionner facilement soit en l’étirant avec votre souris ou lui attribuant une taille définie par vos soins.

Une légende (visible dans votre article) et l’attribut alt (si cher aux référenceurs) seront également personnalisables.

L’ajout d’un lien sur l’image est également possible dans le volet situé à droite de votre écran.

Les réglages supplémentaires

Comme si cela n’était pas suffisant, les développeurs WordPress ont implémenté des réglages supplémentaires qui sont les bienvenus.

Réglages Supplémentaires Dans Wordpress

Ceux-ci, comme montré dans le gif ci-dessus, permettent d’ajouter ou supprimer des blocs, les rendre réutilisables ou encore de les dupliquer.

Le petit plus : les informations du document.

Une nouvelle fonctionnalité que j’apprécie beaucoup, ce sont les informations du document. Rapide à afficher (cliquez sur l’icône i), celle-ci permet de voir en un coup d’œil :

  • Le nombre de mots,
  • Le nombre de titres,
  • Le nombre de paragraphe ou de blocs,
  • L’arborescence du document.
Information Sur La Page Ou L'Article Wordpress Avec Gutenberg

Cette option est très intéressante et permet de bien travailler et de hiérarchiser son contenu pour produire un contenu qualitatif qui plaira à coup sûr à vos lecteurs et au Tout-Puissant Google.

Construction d’une page : la vidéo

Après ce long texte de présentation et d’explication, j’ai réalisé pour vous une vidéo qui résume tout cela et qui montre la construction d’une page. Enjoy !

Pour conclure

Je trouve que WordPress a fait du bon travail avec Gutenberg. Le design est soigné, propre et très actuel, l’outil est simple à prendre en main et donne envie.

J’aurais souhaité qu’ils aillent plus loin avec la construction des pages en forme de bloc en donnant la possibilité, par exemple, de les déplacer les uns à côté des autres, ce qui n’est pas possible actuellement. Dans tous les cas, la version 5.0 de WordPress à venir semble, très prometteuse. Et vous, qu’en pensez-vous ? Est-ce que cet éditeur 2.0 vous séduit ?

Parlez-en dans les commentaires.

Lancez-vous dans une nouvelle aventure avec DoingBuzz

Que vous cherchiez à avancer dans votre carrière ou à élargir vos horizons académiques, DoingBuzz est là pour vous. Découvrez une multitude d'offres d'emploi et de bourses d'études adaptées à votre parcours.

doingbuzz DIRECT