Liste des blocs Gutenberg

Il existe beaucoup de blocs différents dans le nouvel éditeur de WordPress.

Pour aller plus loin

Certaines extensions comme WooCommerce Blocks ou Advanced Gutenberg Blocks ajoutent des fonctionnalités à Gutenberg. Vous pouvez vous aussi créer vos propres blocs avec le plugin Advanced Custom Field si vous n’êtes pas familier avec le JavaScript. Bref, tout ceux-ci ne seront pas traiter dans cet article.

Je vous propose donc de passer en revue tout les blocs ajouter par défaut dans Gutenberg en fonction de leur utilisation.

Note: dernière mise à jour de la liste exhaustive de tous les bloc ci-dessous, le 26 février 2018.

Les blocs textes

Bloc Gutenberg - Paragraphe

Paragraphe

Utilisé pour le texte de labeur, c’est le bloc qui est créer par défaut. Ce sera sans doute le plus utilisé dans vos pages.

Bloc Gutenberg - Paragraphe

Titre

Il sert a hiérarchiser votre contenu, par exemple pour annoncer des sections que vous allez détailler par la suite.

Bloc Gutenberg - Paragraphe

Bouton

Les boutons sont très utilisés notamment pour inciter les visiteurs de votre site à passer à l’action, on les appelle plus communément des Call To Action.

Bloc Gutenberg - Paragraphe

Liste

Faites un inventaire de bénéfices ou lister le classement final d’un tournoi, vous trouverez vite d’autres utilités à ce bloc.

Bloc Gutenberg - Paragraphe

Citation

Rendez à César ce qui lui appartient. Lorsque vous citez un auteur ou une source extérieure à votre site, utilisez le bloc citation.

Les blocs média

Image

Pensez à illustrer vos pages de contenu, certaines personnes ont une meilleure mémoire visuelle.

Son

Vous tenez un podcast ? Partagez votre audio sur votre site WordPress. Téléchargez votre fichier .mp3 et le tour est joué.

Bannière

La bannière permet de superposer du texte avec une image. C’est pratique pour mettre en avant du texte et de l’habiller avec un fond.

Vidéo

Vous vous en doutez vous pourrez insérer facilement des vidéos dans votre page grâce à ce bloc.

Galerie

Mettez en avant plusieurs images grâce au bloc galerie.

Fichier

Vous souhaitez mettre à disposition un fichier à télécharger ? Optez pour le bloc fichier.

Embed

C’est sans doute le plus « magique » de tous les blocs, un copier-coller depuis une URL YouTube et vous comprendrez…

Les blocs de mise en page

Colonnes

La plupart du temps les utilisateurs de WordPress choisissait un Page Builder pour gérer des colonnes dans une page… plus besoin !

Média & texte

Rythmer vos contenus avec des images

Séparateur

Le bloc séparateur vous permet de visuellement marquer un break. Une ligne se dessine, faites comprendre que la suite de votre texte est un autre sujet.

Espacement

Ajuster l’espacement entre vos blocs pour « créer des respirations accidentelles » comme dirait Joffrey ou bien juste aérez votre contenu rendez-le plus lisible.

Les blocs de code