Depuis la sortie de la version 5.0 de WordPress, l’éditeur classique a été remplacé par Gutenberg comme éditeur par défaut. Si vous utilisez WordPress, vous devez donc utiliser le nouveau Gutenberg ou revenir à l’éditeur classique pour gérer votre contenu.
Mais pourquoi revenir en arrière alors que le nouvel éditeur de WordPress est plus complet ? Gutenberg également connu sous le nom de “Block Editor” introduit une nouvelle approche basée sur les blocs pour la création de contenu avec plus de flexibilité et de facilité.
Il est donc essentiel pour bien gérer son site WordPress de connaitre au moins les bases d’utilisation de ce nouvel éditeur si on veut pouvoir l’exploiter pleinement. Ça tombe bien, on est la pour ça !
Tout au long de ce guide, nous allons voir les bases de Gutenberg pour gérer vos articles dans votre site WordPress ainsi que plusieurs petites astuces avancées comme la réutilisation des blocs et des modèles.
Qu’est-ce que Gutenberg, l’éditeur de blocs de WordPress ?
En une phrase : Gutenberg est l’éditeur comparativement nouveau de WordPress qui utilise des blocs pour construire des pages et des articles en structurant son contenu et sa mise en page à sa guise. Celui-ci a été introduit avec simplicité et flexibilité. Dans Gutenberg, chaque contenu est un bloc individuel.
Par conséquent, vous pouvez concevoir une page web ou un article avec un mélange de différents types de contenu, y compris du texte, des images, des vidéos, des tableaux, et plus encore. Cet éditeur vous aide à réorganiser, styliser et personnaliser chaque bloc indépendamment, ce qui vous donne un contrôle maximal sur l’apparence de votre site web.
Comprendre les blocs et les modèles
Pour savoir comment fonctionne l’éditeur de blocs Gutenberg, vous devez vous familiariser avec quelques nouveaux termes. Les blocs WordPress et les modèles de blocs sont les deux termes que nous utiliserons le plus dans nos tutos traitant de Gutenberg.
Blocs :
Les blocs dans Gutenberg sont les éléments unitaires utilisés pour créer du contenu. Chaque bloc représente un élément distinct ou un morceau de contenu.
De même, l’éditeur de blocs de WordPress propose des blocs tels que des titres, des galeries, des listes, des citations, des médias intégrés (comme des vidéos ou des tweets), etc.
Au-delà des blocs par défaut, de nombreux plugins permettent d’ajouter de nouveaux blocs à l’éditeur.
Compositions :
Les compositions sont 2 choses :
- un ensemble de blocs regroupés, attachés et réutilisables dans d’autres articles et pages.
- des pans de pages entiers, proposés par la communauté, ou par vous même.
Ils permettent aux utilisateurs de créer des mises en pages sur mesure et de les réutiliser ou il leur plaira.
Vous pouvez par exemple créer un CTA que vous allez pouvoir répeter autant de fois que vous le souhaitez en 1 clic, ou bien encore utiliser des CTA, des formulaires, ou que sais-je, trouvés dans la bibliothèque.
Les compositions peuvent aller de mises en page simples comme une section CTA avec un titre, du texte et des boutons à des conceptions plus complexes comme une section avantages & inconvénients (guide d’achat), des carrousels de témoignages, des sections d’informations, des tableaux de prix, etc…
Comment utiliser Gutenberg ?
L’utilisation de Gutenberg est simple et facile. Sélectionnez un bloc, ajoutez du contenu, personnalisez-le, publiez et votre page est prête !
Parce que vous croyez que ça s’arrête ici ? Aussi facilement que celà ? Rentrons plus en détail sur le fonctionnement de l’éditeur de blocs Gutenberg.
Comment fonctionne l’éditeur de blocs Gutenberg ?
Si vous utilisez WordPress 5.0 ou une version supérieure, ce qui est plus probable, Gutenberg étant l’éditeur par défaut de tout site WordPress à jour. Vous n’avez donc pas besoin d’installer ou d’activer Gutenberg. Ouvrez une nouvelle page ou un nouvel article et il devrait être actif.
Étape 1 : Comment ajouter un bloc dans Gutenberg
L’ajout d’un bloc dans Gutenberg, l’éditeur de blocs par défaut de WordPress, est aussi simple que de mettre une assiette au micro-ondes :
NDLR : Bien qu’on puisse penser qu’un bloc ressemble fortement à un widget, ne les mélangeons pas. Les blocs vous le verrez offrent bien plus de possibilités que les widgets.
Commencez par donner un titre à votre page ou à votre article.
Jusque la je ne pouvais pas faire plus facile, je vous l’accorde.
Essayons de compliquer la chose (ça va pas être facile…)
Voyons comment ajouter un bloc à votre article/page :
2 possibilités s’offre à vous :
- cliquer sur l’icône + qui se trouve dans l’éditeur de contenu.
- taper la barre “/” (slash) dans une zone de texte.
Une boite de dialogue avec de nombreux blocs va s’afficher.
2 possibilités s’offrent à vous une fois de plus :
- Si vous utilisez le “/”, vous aurez la liste des blocs que vous utilisez le plus régulièrement. Vous pouvez également continuer de saisir le nom du bloc que vous recherchez. Pour ajouter des colonnes par exemple, il suffit de saisir /col, ou /colo, ou /colonn, etc… pour voir la sélection s’affiner et vous proposer le bloc colonnes.
- Si vous avez cliquer sur le “+”, dans ce cas vous aurez directement la liste des blocs et tout en bas un lien “Tout parcourir” qui vous permet d’afficher la liste complète des blocs disponibles.
Il ne vous reste plus qu’à cliquer le bloc de votre choix, pas même besoin d’un glisser / déplacé, et le bloc s’ajoutera à l’endroit ou vous l’avez demander.
Il ne vous reste plus alors qu’à le remplir…
Étape 2 : comment ajouter du contenu à un bloc gutenberg
L’éditeur Gutenberg propose un large éventail de blocs pour différents types de contenu. Comme indiqué précédemment, il s’agit de paragraphes, d’en-têtes, d’images, de vidéos, de boutons, de tableaux, et bien d’autres encore. Vous pouvez ajouter divers types de contenu à votre page web à l’aide de ces blocs.
Voici quelques exemples rapides :
Comment créer une galerie photo :
- Choisissez le bloc galerie.
- Téléchargez ou choisissez des images dans la bibliothèque multimédia
et vous obtiendrez une galerie photo sur votre page.
Comment ajouter un titre :
Il vous suffit de sélectionner le bloc de titre et d’ajouter un titre la ou vous en avez envie.
Je vous le répète, mais les possibilités sont nombreuses.
Étape 3 : Comment personnaliser un bloc dans gutenberg
Un aspect très agréable de Gutenberg, c’est la simplicité avec laquelle vous pouvez personnaliser un ou plusieurs blocs à votre sauce. Vous pouvez avoir un texte encadré, sur fond rouge, avec des espaces entre les colonnes, un texte plus grand, etc…
Quand vous sélectionnez un bloc sur votre page, le panneau des options devrait s’ouvrir sur le côté. Dans celui-ci vous devriez trouver toutes les options disponibles pour personnaliser celui-ci : couleur, police, taille, espacements, marges, tout y est.
Et puis, si vous pensez réutiliser ce bloc, sauvegardez le comme modèle. Mais nous allons voir cela au point suivant.
Étape 4 : Comment sauvegarder et réutiliser des blocs dans Gutenberg
Les blocs réutilisables, désormais nommés Synced Patterns, sont l’une des fonctionnalités indispensables introduites avec Gutenberg. Comme je vous le répète depuis le début de ce guide, enregistrer un bloc ou un groupe de blocs avec ses styles personnalisés et de le réutiliser plus tard sur d’autres pages ou articles est devenu un jeu d’enfant. Je vous laisse imaginer le gain de temps…
Comment créer un bloc ou un ensemble de blocs réutilisable avec Gutenberg
- Sélectionner un bloc ou un groupe de bloc. (Nb : pour sélectionner plusieurs blocs, maintenez enfoncée la touche CTRL (pc) ou Contrôle (mac).)
- Cliquer sur l’icône des trois points ( ⋮ ) qui s’affichent à droite dans la barre de menu.
- Cliquer sur le choix “Créer une composition”.
- Donner un nom à sa composition.
- Attribuer une catégorie. (NDLR : je vous recommande d’utiliser les catégories. Plus vous aurez de blocs, plus vous serez contant de pouvoir les retrouver facilement.)
- Dire si nous voulons que ce bloc soit synchronisé en activant l’otpion synced. A savoir que si vous activez cette option, toute modification du bloc sera appliquées à chaque endroit ou le bloc est utilisé. Ce qui est très pratique pour des CTA, mais pas nécéssaire pour des blocs que vous comptez personnaliser sur chaque article/page.
- Cliquer sur le bouton Créer en bas à droite.
Et voilà, votre bloc est prêt à être dupliqué autant de fois que vous le souhaitez.
Comment utiliser un bloc réutilisable
La question paraît bête, mais elle ne l’est pas. Je pense que cela doit être la question que j’ai le plus souvent reçu en coaching. J’ai créer un modèle avec mon bloc réutilisable, mais comment je l’utilise ?
La ou vous souhaitez ajouter votre bloc réutilisable, cliquez sur l’icône + :
- La barre latérale avec tous les blocs va s’ouvrir.
- Cliquez sur l’onglet compositions.
- Cliquez ensuite sur l’onglet mes compositions.
- Une seconde colonne s’affichera avec toutes vos compositions et les catégories s’il y en a.
- Trouvez votre bloc, cliquez dessus et il s’insérera automatiquement dans votre page.
Vous pouvez également si vous le souhaitez, utiliser le formulaire de recherche de la première colonne pour rechercher le nom de votre bloc.
NDLR : Si vous vous sentez suffisament à l’aise avec la touche / et de saisir le nom de votre bloc, vous pouvez totalement l’utiliser. Dans mon exemple ci dessus, je devrais écrire /test pour trouver mon bloc.
Le mot de la fin
Les blocs réutilisables peuvent faire gagner un temps précieux dans l’édition de site, en particulier si vous utilisez fréquemment certains éléments ou certaines mises en page que vous répétez systématiquement sur chacune de vos pages.
Vous l’aurez donc compris, il est important de faire la migration de Classic Editor vers Gutenberg si ce n’est pas déjà fait, et surtout de vous familiariser avec cet éditeur qui n’en est qu’à ses débuts.
Si vous hésitez encore, n’hésitez pas à lire notre analyse : Gutenberg vs Classic Editor
Partagez-nous en commentaire vos avis sur Gutenberg, comment il vous fait gagner du temps, ou n’importe quoi que vous appréciez à son sujet.
