Les blocs Gutenberg

Découvrir les blocs Gutenberg

Depuis la version 5 de WordPress, l’édition des contenus et maintenant des thèmes passe par l’utilisation des blocs Gutenberg. Les blocs Gutenberg sont des conteneurs dédiés à l’affichage d’un type de contenu donné. Le bloc Image sert à afficher les images statiques, le bloc Titre permet l’affichage des titres de niveau 1 à 6. Le bloc Paragraphe permet de rédiger et d’afficher du texte.

Mais il existe aussi des blocs permettant d’effectuer une mise en page. Ce sont les blocs Groupe, Colonnes, Rangée, etc. Les modèles de page évoqués dans le chapitre précédent utilisent le bloc Boucle de requête pour afficher une liste de contenu répondant à des critères précis.

Tous les blocs s’exploitent de la même manière, mais chaque type de bloc a, bien sûr, ses particularités, selon son type et son utilisation.

Voici la liste des catégories des blocs disponibles :

Gérer les blocs

1. Insérer un bloc

Nous venons de le voir, c’est avec les blocs Gutenberg que les contenus rédactionnels se composent et que les modèles de page se créent. Il faut pour cela ajouter les blocs de type voulus, y insérer le contenu souhaité et le mettre en forme. Prenons pour exemple la rédaction d’un article.

 Créez un nouvel article ou ouvrez un article existant.

 Pour afficher la liste des blocs, dans la barre supérieure des outils, cliquez sur le bouton Ouvrir/fermer l’outil d’insertion de blocs.

La liste des blocs s’affiche. Les blocs sont classés par catégorie, en voici un extrait :

Au survol de chaque bloc, WordPress affiche un aperçu et une aide. Voici l’exemple pour le bloc Paragraphe.

 Pour insérer le bloc dans le contenu, cliquez sur son nom. Voici un bloc Titre ajouté dans un contenu.

Le point d’insertion clignote dans le bloc ajouté pour y saisir le texte.

 Une autre solution pour insérer un nouveau bloc, est d’utiliser le bouton Ajouter un bloc  affiché en bas de chaque contenu :

Le panneau des blocs s’affiche.

 Cliquez sur le bloc à insérer.

 Vous pouvez utiliser le champ de recherche pour trouver le bloc voulu, ou cliquez sur le bouton Tout parcourir pour afficher tous les blocs classés par catégorie dans le volet de gauche.

 Pour effectuer une recherche sur le nom du bloc voulu, saisissez les premiers caractères de celui-ci dans la zone Rechercher. Dans cet exemple, c’est le bloc Tableau qui est recherché :

Enfin, il est aussi possible d’insérer un bloc en utilisant le menu Options d’un bloc déjà inséré. Le nouveau bloc s’insère avant ou après...

Appliquer une mise en page et des styles aux blocs

Pour chaque bloc inséré dans un contenu rédactionnel ou dans un modèle de page, il est possible et souvent nécessaire d’appliquer une mise en page et des styles. Pour cela, il faut utiliser le volet des réglages. À nouveau, chaque type de bloc à des paramètres communs à d’autres blocs, mais aussi, ses propres réglages.

Voici un bloc Paragraphe sélectionné et le volet des réglages affiché :

Dans le volet Réglages, dans l’onglet Bloc, le type de bloc sélectionné est affiché. Ici, c’est bien un bloc Paragraphe qui est sélectionné. Nous avons accès à des Styles prédéfinis, aux réglages de la Couleur, de la Typographie, des Dimensions, de la Bordure. La section Avancé permet de concevoir vos propres règles CSS.

Voici l’exemple d’un bloc Groupe ayant deux blocs Paragraphe inclus :

Dans le volet Réglages, deux onglets sont disponibles : Réglages  et Styles  :

L’onglet Réglages permet d’appliquer des réglages de mise en page pour le bloc Groupe :

L’onglet Styles permet d’appliquer des réglages de mise en forme pour le bloc Groupe. En voici un extrait :

Voici les réglages disponibles pour les styles...