L’inspecteur de bloc Paragraphe

Dans Gutenberg, l’inspecteur de bloc associé au bloc Paragraphe propose différents réglages : la taille de la police de caractères, l’ajout d’une Lettrine, les couleurs de fond et de caractères et l’ajout d’une classe css.

Les extensions peuvent aussi ajouter leurs propres réglages.

A savoir : vous pouvez agrandir les images de cet article en cliquant dessus.

Rappel : la barre d’outils permet de modifier la forme visuelle d’un paragraphe : alignement, gras, italique,
lien web et rayé.

Haut de page

L’inspecteur de bloc

L’inspecteur de bloc s’affiche dans la colonne la plus à droite de la page.

  1. cliquer à l’intérieur d’un paragraphe,
  2. cliquer sur l’onglet Bloc en haut de la colonne de droite,
  3. les réglages disponibles pour le bloc Paragraphe s’affichent.
Les réglages de l’inspecteur de bloc Paragraphe

Il est possible de faire apparaître ou disparaître la colonne des réglages qui contient l’inspecteur de bloc :

Cliquer sur l’icône en forme de roue crantée en haut à droite ou taper simultanément au clavier sur les touches CTRL, Majuscule et virgule.

Si un bloc est sélectionné, la colonne des réglages affiche l’onglet Bloc, sinon c’est l’onglet Document qui s’affiche.

Demander l’affichage de la colonne des Réglages
Affichage de la colonne des réglages

Pour faire disparaître la colonne, cliquer de nouveau sur l’icône en forme de roue crantée ou taper simultanément au clavier sur les touches CTRL, Majuscule et virgule.

Disparition de la colonne des réglages
Haut de page

Réglage de la taille du texte

  1. Cliquer en n’importe quel point du paragraphe,
  2. cliquer dans la zone de saisie sous l’option Taille de police,
  3. cliquer sur une des tailles proposées,
  4. tous les caractères du bloc Paragraphe changent de taille.
Choix ‘une taille des caractères d’un bloc Paragraphe
Caractères de taille Énorme

Il est possible de définir précisément la taille des caractères :

  1. Saisir la valeur d’une taille de caractères ou définir la taille en cliquant sur les flèches vers le haut et vers le bas,
  2. la taille de caractères varie en fonction de la taille définie.
Taille de caractères personnalisée

Pour revenir à la taille par défaut (Normal), cliquer sur le bouton Réinitialiser.

Cliquer sur le bouton Réinitialiser
La taille des caractères revient à Normal
Haut de page

Ajouter une lettrine

La lettrine est la première lettre du paragraphe affichée en grand caractère.

  1. cliquer sur le bouton Lettrine,
  2. la première lettre du paragraphe est agrandie, et le texte la contourne.
Ajouter une lettrine

Pour retirer la lettrine, il faut cliquer une nouvelle fois sur le bouton Lettrine.

Retirer la lettrine
Haut de page

Réglages des couleurs

Choisir la couleur d’arrière plan

  1. Cliquer à l’intérieur du bloc dont on veut modifier la couleur d’arrière plan,
  2. cliquer sur l’option Réglages de couleur,
  3. Cliquer sur une des couleurs d’arrière plan,
  4. le bloc s’affiche avec la couleur d’arrière plan sélectionnée.
Changement de la couleur d’arrière plan

Choix d’une couleur personnalisée

  1. cliquer sur le rond multicolore,
  2. composer la couleur en jouant sur les curseurs,
  3. ou en saisissant un format et une valeur (hexa, RGB…).
Utiliser les curseurs pour définir la couleur de fond
Saisir un format et les valeurs correspondantes

Choisir la couleur des caractères

  1. cliquer ou sélectionner à l’intérieur du bloc,
  2. sélectionner une couleur proposée ou personnalisée,
  3. si l’ensemble couleur d’arrière plan / couleur des caractères est peu visible, un avertissement s’affiche,
  4. La couleur de tous les caractères change.
Changer la couleur de tous les caractères du bloc Paragraphe

Revenir à la couleur par défaut

WordPress nous laisse la possibilité de revenir à tout moment aux couleurs par défaut, que ce soit pour l’arrière plan ou les caractères.

  1. Cliquer sur le(s) bouton(s) Effacer,
  2. le bloc Paragraphe retrouve les couleurs par défaut du thème.
Revenir aux couleurs du thème
Haut de page

Classe css aditionnelle

Le css, ou feuille de style en cascade, permet d’affecter un style d’affichage au bloc Paragraphe.

Par exemple, nous avons ajouté à la feuille de style du thème un style bordure_dash qui permet d’entourer un pararaphe par une bordure composée de petits traits d’épaisseur 2 points.

p.bordure_dash {
border: 2px dashed;
}
  1. sélectionner le bloc Paragraphe en cliquant dedans,
  2. cliquer sur l’option Avancé,
  3. indiquer le nom de la classe css dans la zone de saisie.
Indiquer le style css à appliquer au paragraphe
Le paragraphe s’affiche en encadré correspondant au style associé

Voici un exemple de mise en forme de paragraphes reprenant les différents réglages :

Haut de page

Réglages ajoutés par des extensions

Lorsqu’une extension propose des options spécifiques à un ou plusieurs types de blocs, il peut utiliser les inspecteurs de blocs correspondants pour ajouter les réglages correspondants.

Voici un exemple de réglage ajouté par une extension AMP (Accelerated Mobile Page).

Réglage ajouté par une extension

Articles présentant Gutenberg :