Gutenberg : Le nouvel éditeur livré avec WordPress 5

Dans cette vidéo je vous présente le nouvel éditeur de texte par blocs : Gutenberg. Véritable nouveauté de la mise à jour de WordPress 5.0, Gutenberg permet de mettre facilement en forme ses articles pour les débutants. Voyons tout de suite comment cela fonctionne.

Retranscription texte de la vidéo

WordPress 5, quelques recommandations avant installation

Salut à tous ! C’est Adrien de SEOblaster.fr. Je suis très content de vous retrouver aujourd’hui pour une nouvelle vidéo que l’on va consacrer à Gutenberg, le nouvel éditeur de texte qui nous a été distribué avec l’arrivée de la mise à jour de WordPress 5.0. Gutenberg va changer la manière dont on écrit les articles sous WordPress et remplacer complètement l’éditeur classique que l’on connaît en intégrant un nouveau système, un système de blocs.

Mais avant que l’on voie cela et qu’on rentre dans le vif du sujet, on va juste donner quelques petites directives, un petit peu de bon sens par rapport à cette mise à jour de WordPress 5.0.

Si vous avez un thème qui est peut-être un petit peu ancien, si vous avez beaucoup de plugins sur votre site WordPress, ce que je vous invite à faire, c’est attendre peut-être deux semaines, trois semaines, voire un mois pour vous assurer que l’ensemble de vos plugins et du thème que vous utilisez soient mis à jour, optimisés pour WordPress 5.0. Si vous avez un doute, si ce n’est pas le cas, ne faites pas la mise à jour immédiatement.

WordPress 4.9, une version maintenue jusqu’en 2020

De toute façon, rassurez-vous WordPress 4.9, la version désormais précédente sera maintenue pendant deux années de suite. Dans tous les cas, pas de panique, on ne va pas se précipiter parce que l’arrivée de cette mise à jour et de ce nouvel éditeur peut possiblement provoquer quelques bugs sur vos sites, quelques soucis de mise en page, des choses de ce type-là. Ne vous précipitez pas pour déployer tout de suite WordPress 5.0 et Gutenberg. Vérifiez auparavant la compatibilité de tous ces éléments-là. Une fois que vous avez fait cette vérif de compatibilité, vous pouvez y aller, faites le switch mais en ayant auparavant fait une sauvegarde de votre site, de votre base de données. On va rentrer tout de suite dans le vif du sujet et regarder comment fonctionne cette nouvelle interface en blocs de l’éditeur Gutenberg.

Gutenberg : l’éditeur de texte qui fonctionne avec des blocs

Pour ce faire, je vais commencer au début en utilisant l’article de test qui nous est fourni par WordPress. Qu’est-ce qu’on voit ? C’est qu’au niveau de notre interface WordPress, elle a un petit peu changé. Sur le côté droit de mon écran, je retrouve les propriétés du document mais qui sont présentées différemment avec un système comme ça de petits blocs que l’on va pouvoir collapser et décollapser, plier et déplier assez facilement. Vous allez retrouver vos petits. Il faudra juste faire attention de bien remplir les choses importantes parce que comme vous le voyez, une fois que tout est plié, on a vite fait d’oublier certains éléments, mais rien de grave. Ici à droite, on a les propriétés des blocs. Par exemple là, quand je clique sur un bloc, je vais avoir les propriétés de ce bloc-là qui vont me permettre d’en changer les paramètres.

Qu’est ce qu’un bloc sur Gutenberg?

Un bloc, c’est quoi ? Un bloc, c’est une case qui a une fonction particulière. Là par exemple, j’ai mon bloc de titre qui est le titre de mon article et je vais pouvoir par exemple modifier l’url du titre de mon article, ici avec ce petit bouton « modifier » ou alors là sur le côté droit de l’écran avec la partie Permalien où je peux modifier mon url. Vous voyez, on va retrouver ses petits.

Chaque bloc en fait a une fonction. Par exemple là, on a un bloc Bannière qui nous permet d’avoir une image de fond avec par-dessus une écriture comme ça pour faire une belle bannière. Là, on a un bloc Paragraphe qui nous sert à écrire du texte et ainsi de suite. Là, on a par exemple le bloc Image avec la légende en dessous. Chaque bloc a sa fonction et ça permet de créer très facilement un article qui est structuré, qui est organisé selon ce que l’on veut faire. On peut comme ça créé et des mises en page qui peuvent être jolies ou plus ou moins complexes. Là, pareil, un nouveau bloc que je vous montre, le bloc Liste.

Gutenberg et les balises Hn : moins d’erreur possible pour les débutants

Ces blocs-là, on va créer un nouvel article et on va essayer de jouer un petit peu avec pour comprendre comment ça fonctionne. Par défaut, j’ai le titre de mon article, « Ceci est le titre mon article » qui correspond à ma balise h1.

Ensuite si je veux ajouter un bloc, soit j’appuie là en haut à gauche sur Ajouter un bloc avec le +, soit j’appuie ici sur Ajouter un bloc et je vais pouvoir par exemple mettre un bloc de paragraphe : « Ceci sera l’introduction », vous avez compris. Quand on est avec la souris par-dessus notre bloc, vous voyez qu’en haut on a les propriétés du bloc qui apparaissent, je peux caler mon texte à gauche, à droite, au milieu. Au niveau de mon titre, vous voyez, je peux modifier par exemple l’url de mon titre. Alors là, je ne sais pas pourquoi il me demande de modifier les Permaliens. Ça va m’ouvrir les paramètres des Permaliens alors que je les ai déjà définis. Je pense que c’est un petit bug mais peu importe. Quand on revient dessus, vous voyez qu’on peut modifier l’url comme ça de notre de notre article ou alors sur le côté droit de l’écran, je peux le modifier ici, je choisis l’option qui me convient le mieux. Là, on a ajouté un bloc de texte.

Propriétés des blocs

Comme on l’a vu tout à l’heure, la nouveauté, c’est qu’on a les propriétés du bloc. Par exemple sur mon blog de texte, je vais le caler au milieu et je peux changer les couleurs. Je peux changer la couleur de l’arrière-plan, je peux changer la couleur de texte. Vous voyez que je peux faire ces choses-là vraiment très facilement en quelques clics.

Si je veux rajouter un bloc juste en dessous, il me suffit d’appuyer là sur Ajouter un bloc ou ici Ajouter un bloc et je vais ajouter le nouveau bloc qui m’intéresse, par exemple une image. Je vais prendre une image, cette image-là. Tout de suite, il me met l’image. Je peux l’agrandir, je peux la diminuer, je peux changer la légende et vous voyez que l’image il me l’a mise au-dessus. Si ça ne m’intéresse pas, que je vais la voir en dessous, je vais appuyer sur ma petite flèche ici sur le côté Descendre. Je pourrais faire la mise en page de mon article très facilement.

Les blocs de contenu enrichis (Schema)

Des blocs, vous allez voir, il en existe beaucoup et il va falloir les appréhender. De quelle manière est-ce qu’ils sont rangés ? Il vous propose forcément au départ les blocs que vous utilisez le plus communément, mais vous voyez qu’on a ensuite les blocs communs, les blocs de mise en forme, les blocs de mise en page et plein de choses intéressantes, et aussi des blocs de données structurées par exemple de Yoast. Ça veut dire quoi ? Ça veut dire que des extensions vont pouvoir nous proposer des blocs pré-faits avec certaines fonctions. Je vais vous montrer quelle est l’utilité tout de suite avec les blocs qui nous ont été proposés par Yoast.

Vous remarquez que Yoast est déjà intégré à ce nouvel éditeur Gutenberg parce qu’on a les propriétés de Yoast qui se trouvent là en haut à droite de l’écran quand je clique dessus, elles sont ici. Là, notamment, je peux changer la meta description comme avant. Mais je les retrouve aussi en dessous de manière un petit peu plus classique, comme ça vous n’êtes pas déboussolé.

On va en revenir aux blocs et je vais utiliser un des blocs de Yoast, le bloc par exemple FAQ. Vous allez voir en fait un petit peu toute l’utilité de ces blocs qui sont un petit peu plus avancés. Là, on va créer une FAQ avec le bloc qui nous est fourni par Yoast : « Ceci est ma première question. Voici la réponse ». Je pourrais coller une image comme vous voyez ici avec Ajouter une image, je vais rajouter une question : « Ceci est ma seconde question. Voici la seconde réponse ». On a une mise en page qui est fait, c’est sympa.

Imaginons que je veux y ajouter un titre par-dessus. Je vais mettre titre. Vous voyez que mon titre, il me le propose directement avec la balise h2. Ce n’est pas comme avec l’éditeur classique d’avant où je pouvais me tromper et je pouvais remettre titre 1 qui me remettait une nouvelle balise h1, ce qui n’était pas correcte au niveau du SEO. Là, je vais marquer par exemple FAQ. Ça, c’est mon titre 2, très bien. Mon titre 2, je veux le remonter et je le colle au-dessus. Vous voyez, c’est assez simple. Là, j’ai tous les paramètres de mon bloc.

Possibilité de modifier le type d’un bloc

Imaginons que je ne veuille pas de ce titre 2, je vais modifier le type de bloc. Je vais pouvoir en faire par exemple un paragraphe et il va redevenir du texte, et ainsi de suite. On peut modifier les choses assez facilement. Je vais enlever les paramètres de Yoast, Réglages. Là, je vais le mettre au centre. Ok, on a fait ça très bien mais qu’est-ce qui va nous apporter ce bloc avancé ? Je vais publier l’article, Voir l’article. Ce bloc avancé, il contient des données enrichies avec schémas. Je vais aller sur l’outil de test qui nous est fourni par Google. Je rentre mon url, il va vous [00:08:54]. Là, je vois que tout en bas, j’ai FAQPage et j’ai ma FAQ qui est entièrement balisée avec schémas. Ça, c’est vraiment super.

Imaginez les applications que l’on va pouvoir avoir dans peu de temps quand justement les applis, les nouveaux plugins vont arriver, on va peut-être avoir des blocs qui vont être enrichis avec schéma très facilement. Cela va permettre notamment aux rédacteurs web de proposer des articles qui sont vraiment super complets, parce qu’au niveau de la sémantique, au niveau de toutes ces choses-là, on va pouvoir clairement définir au moteur de recherche de quoi on parle, de quoi elle traite la page. Ce système de bloc, même s’il est un petit peu déroutant au premier abord pour les personnes qui sont habituées à l’éditeur classique, il va nous permettre de faire plein de choses.

Le bloc Média + Texte, nouveauté de Gutenberg

Je vais vous montrer encore un bloc qui est plutôt sympa, c’est le bloc Média + Texte qui se trouve ici, qui va nous permettre par exemple… je vais rentrer une image, je l’ai mon image, de mettre une image et d’à côté pouvoir mettre du texte : « Ceci est un loup blanc ». Par exemple ça, ça va être le titre. Si je vais à la ligne : « Ceci est mon texte blablabla », on va pouvoir faire des mises en page qui sont assez sympas assez facilement, c’est pareil, on va pouvoir tout changer directement avec ce petit système de bloc, monter, descendre. Pour les personnes qui commencent, qui débutent dans WordPress, ça va être plus facile pour elles d’appréhender cette nouvelle interface.

Je vais vous montrer aussi quelque chose qui va peut-être vous paraître sympa au niveau des images. Je vais ajouter un bloc d’image, je vais choisir toujours, pareil, mon image là avec le loup. Par exemple là, j’ai ma légende, je peux l’enlever si je n’en veux pas. Sur le côté, j’ai ma balise Alt que je ne vais surtout pas oublier de remplir parce que c’est important pour mon SEO : « Ceci est un loup blanc » par exemple. Au niveau de notre image, je peux par exemple la mettre en pleine largeur. Vous voyez au niveau de la mise en page comment c’est facile. Imaginons que je veux faire une bannière à partir de cette image, je vais transformer le bloc en bannière : « Ceci est ma bannière ».

Gutenberg : encore en retrait par rapport à Elementor

Vous l’avez compris, la manière dont fonctionne cet éditeur de blocs, ça va être assez facile, assez fabuleux une fois qu’on leur a pris en main. Pour le moment, je vous avoue que sur par exemple les éditeurs classiques de page type Elementor, je préfère Elementor que je trouve plus intuitif, je trouve qu’il répond mieux aux doigts et à l’œil, mais c’est peut-être une question d’habitude. En tout cas, ce système de blocs, il va, je pense, vraiment faciliter les choses pour toutes les personnes qui débutent dans WordPress et qui veulent faire des articles avec un style qui est plutôt sympa.

Conclusion : un éditeur sympa pour les débutants qui doit gagner en maturité

Cette vidéo se termine. Je voulais préciser une dernière chose. Si vous n’arrivez pas du tout à adhérer à cet éditeur de texte avec des blocs comme ça, sachez que vous avez la possibilité de revenir à l’ancienne interface en installant ce plugin Classic Editor. Je vous mettrai l’url dans la description de la page. Vous installez Classic Editor et vous revenez à l’ancienne interface sans aucun problème. Cela vous permet, si vous n’arrivez pas à vous en sortir ou si vous avez des problèmes de compatibilité, de remédier immédiatement à ces soucis-là.

Si cette vidéo vous a plu, n’hésitez pas à mettre un pouce bleu, abonnez-vous à la chaîne. N’hésitez pas également à me faire vos retours, est-ce que vous avez déjà adopté Gutenberg ou pas ? Est-ce que vous avez eu des difficultés ? Est-ce que vous souhaiteriez avoir des changements sur cette interface ? Dites-moi un petit peu tout cela dans les commentaires, ça m’intéresse. En tout cas, j’étais très content d’avoir pu un petit peu vous faire découvrir comme ça en gros comment fonctionne ce nouvel éditeur par bloc. Je vous dis à bientôt pour une prochaine vidéo.

Ciao !

Laisser un commentaire