Maintenant que vous avez vu comment créer des pages, des articles et les organiser, nous allons pouvoir entrer dans le vif du sujet en expliquant le fonctionnement de l’éditeur de bloc de WordPress : Gutenberg.
Pour commencer, il faut savoir que ce système de mise en page de blocs créé et intégré nativement dans WordPress est plutôt récent (2018), avant vous n’aviez accès en tout et pour tout qu’à un simple éditeur de texte permettant de mettre en place des mises en forme plutôt limités : texte, médias, mise en forme du texte et… voilà
L’éditeur de blocs de WordPress Gutenberg est un outil puissant et modulable qui s’offre à vous et que nous allons découvrir dès maintenant !
Les blocs
Les blocs sont des éléments de contenu que vous allez pouvoir ajouter à votre page ou article et que vous allez personnaliser.
Cela peut-être :
- Du texte
- Des médias
- Des éléments de design
- Des widgets
Comme l’éditeur Gutenberg se veut modulable, vous allez pouvoir ajouter autant de blocs que vous le souhaitez, les ordonner, les modifier, les trier, bref, vous avez totalement la main libre sur ce que vous voulez faire de ces blocs.
L'éditeur de blocs de WordPress
Présentation de l'interface
L’interface de gestion des blocs se segmente en 3 parties :
- À gauche, le choix des blocs
- Au centre, votre page ou article à mettre en forme
- À droite, des propriétés ou paramètres à modifier pour personnaliser les blocs
Donnons maintenant quelques détails sur le fonctionnement de chacune de ces parties.
Gestion des blocs
La partie de gauche s’ouvre en appuyant sur le bouton bleu avec un “+”, tout en haut à gauche de votre écran. Vous allez donc voir apparaître une nouvelle colonne sur votre écran avec 3 rubriques :
- Blocs
- Compositions
- Médias
Dans “Blocs”, vous retrouvez l’ensemble des blocs qui sont disponibles à l’intégration. Pour info, certains blocs sont natifs à WordPress, d’autres sont ajoutés par votre thème et certains peuvent aussi être ajoutés par des plugins.
Dans cet exemple, j’ai une installation très simple de WordPress, sans plugin et avec le thème “Twenty twenty”.
Avec ces blocs, vous allez donc pouvoir ajouter tout type de contenus, n’hésitez donc pas à les parcourir (en vous aidant de la barre de recherche) et à les tester simplement pour voir le genre de contenu que cela va vous permettre d’ajouter.
Il y a ensuite l’onglet “Composition”, qui vous propose de nombreuses catégories. Les compositions sont en fait des mises en forme construites à partir de blocs. C’est donc pour vous simplifier le travail et vous éviter d’avoir à créer vos pages de zéro.
En dernier, on retrouve la rubrique “Médias” qui vous propose simplement une catégorie « Médias », avec les photos et documents que vous avez déjà importé sur WordPress et une catégorie “Openverse”. En cliquant dessus, vous allez voir apparaître des images.
Openverse est un outil mis à disposition par WordPress afin de vous permettre d’avoir facilement des images libres de droit pour votre site web. Si vous trouvez votre bonheur, vous pouvez donc utiliser ces images, mais rien ne vous empêche d’importer les vôtres.
L'interface d'édition
L’interface d’édition de votre page et/ou l’article, se situent au centre de l’écran. Cela vous donne une idée de l’aspect final de votre page.
Cette interface vous propose une vraie interaction afin de pouvoir modifier et organiser votre contenu facilement.
Vous allez pouvoir bouger, modifier et supprimer des blocs et du contenu très facilement.
Encore une fois, le meilleur apprentissage est la pratique, donc faites des tests !
Gestion des paramètres
Enfin, on termine avec la colonne de droite qui va vous permettre de modifier les paramètres de vos blocs. Attention, cette colonne doit être réglée sur “Bloc” tout en haut et vous devez avoir sélectionné un bloc dans l’interface d’édition afin d’en voir les paramètres.
Ici, par exemple, j’ai sélectionné un bloc “Paragraphe” dans mon interface d’édition, donc je peux maintenant modifier la taille ou la couleur de mon paragraphe.
Maintenant que nous avons appréhendé de manière un peu technique l’interface Gutenberg, je vais vous donner 2 exemples afin de pouvoir mettre en place votre contenu.
Comment créer du contenu ?
Méthode simple
La première méthode repose sur l’utilisation des compositions. Pour rappel, on se rend dans la colonne de gestion des blocs, puis on sélectionne “Compositions”. Pour l’exemple, j’ai choisi une composition se trouvant dans “Appel à action” et me permettant d’insérer une table de prix structuré en 3 colonnes.
Une fois que la composition a été ajoutée à votre page, vous n’avez plus qu’à cliquer sur chaque élément que vous souhaitez modifier et en changer les propriétés dans le panneau de droite.
Ainsi, vous pouvez en quelques clics et sans aucune compétence en développement, passer d’une mise en forme à l’autre :
À votre tour d’importer une composition et de la modifier afin de l’adapter à votre site, ou simplement pour essayer !
Méthode avancée
Si les compositions vous donnent une bonne base de travail, vous préférez peut-être tout faire vous-même afin de ne pas être perdu en important directement des dizaines d’éléments dans votre mise en forme.
Afin de créer des mises en forme complexes, prenez simplement en compte que vous devrez vous servir du bloc “Colonnes”.
À la différence des autres blocs qui vous permettent d’ajouter du contenu, les blocs “Colonnes” vont agir comme un conteneur de contenu, vous permettant de structurer votre page.
En ajoutant le bloc “Colonnes”, on vous proposera donc plusieurs variantes, à vous de choisir celle qui vous convient le mieux. Dans cet exemple, j’ai choisi la variante 33 / 66.
Vous avez maintenant votre structure de page coupée en deux parties, une prenant un tiers de la page et l’autre les deux tiers. Il ne vous reste plus qu’à y ajouter d’autres blocs en faisant des glissés-déposés.
En ajoutant simplement un bloc “Image”, un bloc “Paragraphe” et en modifiant leurs paramètres, on peut donc arriver facilement à une mise en forme comme celle-ci (toujours sans avoir écrit une seule ligne de code):
Barre d'outils
Un dernier point qu’il me semble important de voir pour cette initiation à Gutenberg est la barre d’outil. En effet, lorsque vous cliquez sur n’importe quel bloc, une barre apparaît au-dessus du bloc en question. Cette barre est très importante, car elle est contextuelle et les outils qui vous sont proposés dans cette barre sont adaptés au bloc sur lequel vous venez de cliquer.
Prenons un exemple avec la mise en forme que nous venons de faire juste avant.
Notre mise en forme comporte un bloc “Image” et un bloc “Paragraphe”. Si je clique sur le bloque “Image, j’ai la barre d’outil suivante qui apparaît :
La partie contextuelle de la barre d’outil se trouve au centre, on a donc de gauche à droite les icônes qui nous permettent de faire les actions suivantes :
- Gérer l’alignement de l’image
- Gérer la légende
- Insérer un lien sur l’image
- Recadrer l’image
- Ajouter du texte sur l’image
- Ajouter un filtre à l’image
En comparaison pour le bloc “Paragraphe”, on a la barre d’outil suivante qui apparaît :
La partie contextuelle de la barre d’outil nous permet d’effectuer les actions suivantes :
- Gérer l’alignement du texte
- Mettre le texte en gras
- Mettre le texte en italique
- Insérer un lien dans le texte
- Un menu déroulant avec tout un tas d’autre outils pour barrer, ajouter un exposant ou un indice ou même du code
Pensez donc à vérifier le contenu de la barre d’outil à chaque fois que vous souhaitez modifier un bloc de contenu, ce que vous cherchez à faire peut s’y trouver !
Il est temps de construire
Ceci était le premier article mettant en avant l’éditeur Gutenberg. Je pense que vous avez maintenant les bases pour mettre en place des articles et des pages avec des mises en forme simples, comme pour toutes les interfaces logiciel, il y aura sûrement un petit temps d’adaptation, mais c’est en pratiquant que vous allez progresser !
Comme vous avez pu le voir, l’interface de Gutenberg est très complète, il y a donc plusieurs points qui n’ont pas été traités dans cet article, cela ne vous empêche pas d’explorer, de faire des tests afin de profiter pleinement de l’éditeur de blocs qui, comme vous avez pu le voir, est simple, flexible et surtout vous permet de créer un site web sans écrire une seule ligne de code !
Enfin, pensez que les blocs qui vous sont proposés dépendent de plusieurs facteurs (version de WordPress, thème et plugins) et qu’il vous appartient donc d’ajouter ou de modifier ce qui est installé sur votre site WordPress pour avoir de meilleurs outils à disposition.
