Les blocs disponibles par défaut

Une fois la liste des blocs apparue, vous allez pouvoir choisir le type de bloc qui vous intéresse. Nous allons faire un tour de toutes les possibilités qu’offre les blocs par défaut de WordPress.

Pour avoir une vision complète de l’ensemble des blocs offerts par défaut dans WordPress il faut se rendre dans l’outil général d’insertion de bloc. Pour cela nous l’avons vu, il suffit de cliquer soit sur le bouton “+” en haut à gauche, soit sur le bouton “+” à droite de chaque paragraphe vide puis sur “tout parcourir”.

Les réglages des blocs

Après avoir ajouté un bloc, vous verrez qu’il y a différents réglages possibles qui fonctionnent toujours de la même manière quel que soit le bloc.

Lorsque l’on clique sur un bloc, deux espaces de réglages sont disponibles :

• Les réglages principaux situés au-dessus du bloc
• Les réglages complémentaires situés dans la barre latérale

Les réglages principaux identiques sur tous les blocs

En fonction des types blocs, les réglages principaux, situés au-dessus du bloc, proposeront différentes fonctionnalités. Mais certaines options sont disponibles de manière identique pour tous les blocs.

Type de bloc

Tout à fait à gauche, on trouve le symbole du type de bloc. En cliquant sur le symbole, on ouvre une liste de fonctionnalités qui permet de transformer le bloc en un autre forme de bloc.

Déplacer un bloc

Les deux fonctionnalités suivantes permettent de déplacer un bloc dans l’article.

Le premier bouton avec des points permet de déplacer le bloc où on veut dans la page sous forme de “glisser-déposer”.

Le deuxième bouton avec les flèches permet de déplacer le bloc par étape d’un bloc vers le haut ou un bloc vers le bas.

Options de bloc

Le dernier réglage identique sur tous les blocs, quelques soient le type, se situe tout à faire à droite avec le bouton à trois petits points. En cliquant sur les trois petits points, on ouvre une liste de fonctionnalités très utiles ! On vous conseille d’apprendre certains raccourcis clavier, notamment l’option “dupliquer un bloc” qui s’avèrera bien pratique.

Les réglages principaux spécifiques à chaque bloc

Toujours dans la barre supérieure sur chaque bloc, vous pourrez voir ensuite que des réglages spécifiques sont disponibles pour chaque type de bloc.

Voici quelques exemples des réglages principaux que l’on peut trouver pour les blocs les plus utilisés.

Les réglages complémentaires

L’autre espace de réglages se situe dans la barre latérale de l’éditeur d’article. On accède à ces réglages complémentaires en cliquant sur un bloc dans l’article et/ou en cliquant sur l’onglet “Bloc” de la colonne.

Réglages complémentaires communs à tous les blocs

Le seul réglage que l’on retrouvera dans toutes les colonnes blocs est l’onglet “Avancé où l’on pourra :

• Créer une ancre HTML
• Ajouter une classe CSS

À part cet onglet “Avancé” tous les autres réglages situés dans cette colonne “Bloc” sont spécifiquement liés aux types de blocs choisis.

Voici encore une fois quelques exemples de réglages complémentaires avec les blocs les plus utilisés.

Naviguer entre les blocs pour afficher les réglages

La façon la plus simple de naviguer entre les blocs et accéder aux réglages de chaque bloc, est de cliquer sur le bloc en question. Tout simplement.

Cependant, une fois que vous serez familiariser avec l’éditeur d’article Gutenberg, vous allez vite vous rendre compte qu’il est possible d’empiler des blocs à l’intérieur d’autres blocs.

Et la navigation entre les blocs se complique, car il est parfois difficile de cliquer au bon endroit pour afficher les réglages du bloc que l’on veut.

Naviguer dans les blocs empilés

Nous allons voir ensemble comment cela fonctionne et comment naviguer d’un bloc à l’autre lorsqu’ils sont empilés.

L’exemple le plus évident pour illustrer ce concept de blocs empilés, c’est celui du bloc colonne.

Nous allons créer un bloc avec deux colonnes et du contenu à l’intérieur pour pouvoir vous expliquer comment naviguer entre les empilements de blocs.

Ajouter un bloc “Colonnes”

On commence en ajoutant un bloc “Colonnes”, nous avons vu ensemble qu’il avait plusieurs façons d’ajouter un bloc, vous choisissez celle qui vous convient le mieux.

Choisir le format des colonnes

Par défaut, le bloc “Colonnes” propose différents formats de colonnes (format qu’il est possible de modifier par la suite)

Une fois notre bloc avec deux colonnes créé, on voit mieux comment est structuré le bloc : le bloc principal.

Le bloc d’une colonne seule

Insérer du contenu dans chaque colonne

Une fois nos colonnes créées on peut donc y insérer du contenu. Pour cela il suffit de cliquer sur le bouton “+” et de choisir le bloc qui nous intéresse. Ici nous allons ajouter du texte et une image dans chaque colonne.

Nous voilà avec nos deux colonnes et notre contenu à l’intérieur.

Nous allons pouvoir maintenant voir ensemble comment naviguer entre les différents blocs empilés. Le principe est simple, il s’agit de penser les blocs sous forme hiérarchique, parent/enfant.

Utiliser la fonction “vue en liste” pour naviguer entre les blocs empilés

Pour comprendre la structure de notre bloc et pouvoir naviguer entre les différents blocs, le plus simple est d’utiliser la fonction “Vue en liste”.

En cliquant sur l’icône “Vue en liste” apparait la liste de tous les blocs de notre article, dans laquelle on peut naviguer de blocs en blocs. En cliquant sur un élément de la liste, on sélectionne le bloc et on accède aux réglages.

En cliquant sur l’élément “Colonnes” dans la liste, on voit bien la structure de notre bloc :

• Colonnes
  • Colonne 1
    • Paragraphe 1
    • Image 1
  • Colonne 2
    • Paragraphe 2
    • Image 2

Si je veux accéder aux réglages de l’image à l’intérieur de la première colonne, il me suffit de cliquer sur l’élément image dans la liste.

On voit qu’utiliser la fonction “vue en liste” peut être très pratique pour naviguer entre des blocs empilés. Le seul inconvénient est que cette fonction réduit considérablement la place réservée à notre éditeur de contenu.

Améliorer l’affichage avec la “Vue en liste”

Plusieurs options s’offrent à vous pour régler ce problème :

• Opter pour la vue “pleine page”
• Masquer la colonne “réglages”

La vue plein page vous permet de masquer la colonne de gauche d’administration WordPress. Pour cela, il faudra cliquer sur le bouton “Options”, puis sur “Mode plein écran”.

On se retrouve avec un espace d’édition un peu plus important, mais si vous n’avez pas un grand écran d’ordinateur, cela ne reste pas idéal pour continuer à écrire votre article aisément.

Pour améliorer encore le confort d’édition, vous pouvez également masquer la colonne de droite “réglages”. Pour cela il suffit de cliquer sur le bouton “réglages”.

Si le confort d’édition devient intéressant, en revanche ne pas avoir un accès direct aux réglages complémentaires des blocs peut rapidement devenir problématique.

À vous donc de voir quelle est la configuration qui vous convient le mieux.

Reste une autre possibilité, celle de garder la vue d’édition par défaut et de naviguer entre les blocs sans utiliser la fonction “vue en liste”.

Naviguer entre les blocs empilés à travers les réglages principaux

Retrouvons nos deux colonnes et voyons comment il est possible de naviguer entre les blocs empilés en utilisant la barre des réglages principaux des blocs.

Pour rappel, la barre des réglages principaux est la barre supérieure qui apparait lorsque l’on clique sur un bloc.

Ici nous allons cliquer sur le bloc image à l’intérieur de notre colonne.

On voit bien dans la barre supérieure l’icône du bloc sélectionné “Image” (bloc enfant), et à côté l’icône du bloc “Colonne” (bloc parent).

Voilà donc une façon plus directe de naviguer entre des blocs compilés. Le concept est simple : si un bloc est empilé à l’intérieur d’un autre bloc, son bloc “parent” sera affiché de la sorte.

Donc si on veut sélectionner le bloc “colonne” seul, on clique sur l’icône du bloc “parent”.

On passe alors aux réglages du bloc “ColonnE”. Et on voit apparaitre à côté l’icône du bloc parent “ColonneS”.

Si je veux passer au bloc parent supérieur, je vais donc encore une fois cliquer sur l’icône associée.

J’affiche alors les réglages du bloc parent “ColonneS”.

Voilà donc une autre façon de naviguer entre les blocs empilés.

Chacun trouvera des avantages et des inconvénients aux deux, l’une étant plus intuitive quand l’autre aura peut-être l’avantage d’être plus directe et rapide quand on a l’habitude de l’utiliser.