Catégories
CMS Gutenberg Wordpress

Gutenberg, l’éditeur WordPress qui simplifie les publications

Depuis la version 5.0 de WordPress, l’éditeur par défaut des articles a laissé la place à Gutenberg, un éditeur de blocs simplifiant grandement la création de contenus. Dans sa version simple, il permet de se substituer aux page builder tout en élargissant les options de l’éditeur classique.

Prise en main

Gutenberg est un éditeur de blocs. Là où l’éditeur classique fonctionnait globalement comme un logiciel d’édition de texte, la manière de créer une publication avec Gutenberg se rapproche beaucoup plus de la structure HTML d’une page web. En effet, que ce soit pour Gutenberg ou l’architecture d’une page, la création des blocs s’agence comme une succession de boites imbriquées les unes dans les autres. Cette structure permet de faciliter les mises en page en colonne et la hiérarchie des différents éléments. Imaginons que chaque bloc est une boite et que lorsque nous les groupons ensemble, nous les mettons dans une autre plus grande qui les contient toutes deux. Définir un style au groupe, par exemple la couleur de fond, permet en une seule manipulation de l’appliquer sur toutes les boites du groupe. Pour reprendre l’exemple des boites, seule la plus grande aura une couleur tandis que les autres seront transparentes. Visuellement, toutes les boites du groupe seront de la couleur de celle qui les englobe toutes.

Mise en page avec gutenberg

Exemple de mise en page réalisée avec Gutenberg. Chaque couleur est une boite héritant des caractéristiques de la boite qui la contient.

Chaque bloc étant indépendant, il est possible de créer des templates, de les réagencer et de les supprimer très simplement par le biais des contrôles ou du menu d’option.

Les Blocs et leurs options

Zones de controle de Gutenberg

Titre général :

Ce premier champ permet d’entrer le nom de la publication. C’est celui qui sera utilisé pour le titrage de la page, mais aussi dans l’interface et les menus.

Icônes + :

Cette icône, présente dans le menu de Gutenberg, permet l’ajout d’un bloc dans la publication. Lorsqu’elle est cliquée, vous pouvez choisir le type de bloc à ajouter. Une description ainsi qu’une photo d’exemple s’affichent au survol de la souris.

Menu d’option :

Placé en haut de page, ce menu regroupe les options générales de l’éditeur

Options du bloc :

Cette barre d’option regroupe les paramétrage du bloc sélectionné

Panneaux de paramétrage :

Il affiche les paramètres du bloc ou du document en fonction de l’onglet sélectionné.

Options communes aux blocs :

Les blocs possèdent tous diverses options de réglages dont certaines sont communes à une grande partie des blocs. Elles se trouvent en cliquant sur la dernière icône du menu.

Les options communes aux blocs

Masquer les réglages du bloc

Cette option permet de simplifier la vue en masquant le panneau d’options à droite

Dupliquer

Permets de dupliquer le bloc sélectionné.

Insérer avant/insérer après

Insère un bloc non défini avant ou après l’élément sélectionné (cliquer sur + pour le définir)

Modifier en HTML

Cette option affiche le code HTML de l’élément pour pouvoir le modifier à l’aide de balise

Ajouter des blocs réutilisables

Permets d’ajouter des blocs préenregistrés en tant que template

Grouper

Permets de grouper les blocs entre eux. Cette option est utile pour définir des styles communs à un groupe de bloc.

Retirer le bloc

Cette option supprime le bloc sélectionné

Manettes de placement

Lorsqu’un bloc est sélectionné, un widget apparaît à sa gauche, il permet de réorganiser le bloc dans la page en le faisant monter ou descendre d’un rang. En maintenant le bouton de la souris enfoncé sur les pointillés, il est possible de le réorganiser.

Bloc de Titre

Se comportant comme un bloc classique, le bloc de titre permet cependant de choisir les balises de titrage afin de hiérarchiser le texte (de h2 à h6, par ordre d’importance. La balise h1 est réservée au titre de la publication).

Bloc de paragraphe

Ce bloc se comporte comme un éditeur de texte classique.

Bloc d’images

Ce bloc permet de gérer l’ajout d’image dans la publication. La barre d’outils permet de gérer l’affichage de celle-ci au sein de la page. Le widget présente aussi les options d’importations sous forme de boutons.

Blocs de mise en page

Lors de la création d’un nouveau bloc, cliquer sur l’accordéon Mise en page permet de dévoiler les options du même nom de Gutenberg. Parmi elles, les options Colonnes et Média & Texte permettent de dynamiser les publications simplement.

Colonnes

Ce bloc permet d’arranger les éléments en deux ou trois colonnes suivant différents ratios symbolisés par les icônes au centre du bloc. Une fois la mise en page choisie, les colonnes sont créées et prêtes à accueillir tout type de bloc. Pour cela il suffit de cliquer sur +.

Choix de mise en page

Médias & Texte

Ce bloc est conçu spécifiquement pour accueillir une image et un texte côte à côte. La barre d’option permet de gauche à droite : de transformer le bloc en un autre, de modifier la largeur du bloc par rapport à la page, de faire basculer l’image à gauche ou à droite et enfin de gérer l’alignement vertical du texte.

Module Médias & texte

Option de réglage de la publication

Le panneau de droite possède deux onglets. Bloc permet de paramétrer les options du bloc sélectionné tandis que Document permet de régler certains paramètres de la publication en elle-même. C’est dans cet onglet que seront renseignées entre autres la visibilité de la publication, les catégories ainsi que l’image mise en avant.

Voilà qui conclut cet aperçu des possibilités de Gutenberg. Cet article ne fait qu’effleurer l’ensemble des options de ce module, mais j’espère qu’il vous aura donné l’envie d’aller plus loin dans ses possibilités.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *