Formation « Créer des blocs avec Gutenberg »

Configurer Gutenberg pour votre thème avec theme.json ou add_theme_support

Lecture : 4 minutes • 2

Gutenberg propose plusieurs nouveaux paramètres rattachés au thème et qui permettent aux développeurs d’activer / désactiver certaines fonctionnalités et d’en personnaliser d’autres.

Ces quelques fonctions sont très utiles à connaitre surtout si vous créez vos propres thèmes sur mesure, ou même si vous voulez simplement modifier la configuration d’un existant.

Aujourd’hui, il existe 2 méthodes pour ajouter ces configurations :

  • La première est d’ajouter des fonctions add_theme_support dans le fichier functions.php du thème
  • La seconde, qui est la solution moderne, est d’ajouter les paramètres dans le fichier theme.json.

Pour chaque exemple, je vous montrerais les 2 cas.

Conseil

Si possible, utilisez la méthode du theme.json qui est la méthode officielle et la plus moderne. Toutefois, add_theme_support ne sera pas dépréciée avant un moment, donc il n’y a pas d’urgence à changer.

Voici la syntaxe classique de la fonction add_theme_support, que l’on place en général dans le hook after_setup_theme :

PHP
mon-theme/functions.php

Je vous invite à consulter également la documentation officielle dans le handbook :

Documentation Theme support

Et concernant la syntaxe plus moderne, voici à quoi peut ressemble le theme.json :

JSON
mon-theme/theme.json

Là aussi, vous trouverez une documentation bien fournie sur le handbook :

Documentation Theme.json

Alignement large et pleine page

Gutenberg propose une option permettant d’afficher des images en pleine largeur, qui débordent alors de la zone de contenu initiale.

Des blocs plus large que le contenu

Bien entendu, tous les thèmes ne sont pas conçus pour cette fonctionnalité. C’est pour cela qu’il faut l’activer via :

JSON
theme.json

Ou alors :

PHP
functions.php

Il faudra alors ajouter un peu de CSS pour faire déborder l’image en question.

Pour en savoir plus à ce sujet, consultez le cours Blocs larges et Full Width.

Personnaliser la palette de couleurs

Les palettes de couleurs que l’on peut retrouver dans le bloc paragraphe par exemple proposent par défaut un set de couleur qu’il est possible de personnaliser grâce à une petite configuration toute simple.

Palette de couleur personnalisée

D’ailleurs les thèmes comme TwentyNineteen proposent déjà leur propre palette. Voici le code à ajouter dans theme.json :

JSON
theme.json

Ou si vous n’avez pas theme.json, ça se passe dans functions.php :

PHP
functions.php

Là aussi, pour en savoir plus, consultez mon cours Personnaliser les couleurs de la palette Gutenberg.

Désactiver le bouton couleur personnalisée

A la fin de la palette se trouve un bouton « couleur personnalisée » qui ouvre un ColorPicker. D’ici, vous pouvez choisir parmi les millions de couleurs que l’oeil peut percevoir.

Vous le sentez mal ? Bien sûr, vos utilisateurs vont s’en servir allègrement et transformer votre site en une guirlande scintillante.

Retirer le choix de la couleur personnalisée

Pour éviter ça, utilisez ce code :

JSON
theme.json

Ou alors :

PHP
functions.php

Personnaliser les tailles de texte dans le paragraphe

Lorsque vous ajoutez un paragraphe, une option permet de choisir la taille du texte : petit, moyen, grand, énorme…

Le sélecteur de tailles de paragraphe dans Gutenberg

Afin de contrôler au mieux cette option, vous allez pouvoir choisir les tailles correspondantes. Si vous utilisez theme.json :

JSON
theme.json

Et sinon :

PHP
functions.php

Dans les version beta de Gutenberg, il y avait la présence d’un groupe de boutons S/M/L/XL, d’où l’utilité des shortName. Mais ce bouton à disparu lors de la sortie officielle.

Désactiver la personnalisation de la taille de texte

Pour faire suite à l’astuce précédente, vous pouvez également désactiver le choix de taille, ce qui peut s’avérer utile si vous ne voulez pas que vos utilisateurs jouent avec.

Pour cela ajoutez :

JSON
theme.json

Ou bien :

PHP
functions.php

Ajouter une feuille de style pour l’éditeur dans l’admin

Comme avec Tiny MCE, vous pouvez insérer une feuille de styles pour ajouter votre propre CSS à l’admin, afin de personnaliser le rendu de Gutenberg, afin qu’il colle au mieux à ce qui sera affiché en front.

Ajoutez ces deux lignes, et pensez à créer un fichier style-editor.css à la racine de votre thème.

PHP
functions.php

Activer les styles pour thème sombre

Si votre thème est sur fond sombre, vous allez vouloir reporter les styles dans votre interface d’administration, mais voilà, ça ne va pas s’intégrer correctement à l’interface de Gutenberg.

Heureusement, les développeurs ont pensé à tout et ont fait une feuille de style spéciale pour les apparences sombres. Ajoutez simplement :

PHP
functions.php

Désactiver la feuille de styles par défaut des blocs Gutenberg

WordPress va automatiquement charger des styles de base pour tous les blocs natifs afin que leur apparence soit correcte sur votre site.

De cette manière, vous n’avez pas à apporter des styles pour chacun d’entre-eux. Sans ça, votre bloc colonne par exemple ne pourrait pas s’afficher correctement.

Par contre, ce seront uniquement des styles de base (non-opiniated). Si vous souhaitez que les blocs natifs adoptent la couleur du thème, vous pouvez ajouter cette ligne :

PHP
functions.php

Autoriser les embeds Responsives

Et enfin, une dernière fonction plutôt utile, c’est la prise en charge du responsive pour les embeds.

Si vous vous souvenez, les embeds étaient assez mal intégrés avec TinyMCE, dans le sens où ils ne prenaient pas toute la largeur disponible. Il fallait alors faire quelques ajouts dans votre CSS. Désormais ce n’est plus utile, il vous suffit d’ajouter :

PHP
functions.php

Mine de rien, Gutenberg nous propose pas mal de choses pour personnaliser et intégrer parfaitement Gutenberg dans nos thèmes. Cependant cela demande un peu plus de travail qu’auparavant.

Certaines de ces fonctions vous seront utiles lorsque vous déciderez de migrer votre site vers WordPress 5.0 et de maximiser vos chances d’assurer la compatibilité !

À vous de choisir les fonctionnalités à mettre dans vos thèmes ! Personnellement je mets toujours les couleurs personnalisées, les embeds responsive et les styles de blocs de base afin de gagner du temps.

2

Questions, réponses et commentaires

  1. ostaladaFab

    Le 26 juillet 2022

    Bonjour,

    Merci beaucoup pour cette formation. WP 5.9 et le full-site editing m’a fait me questionner sur mon utilisation (peut être trop systématique) d’ACF, au détriment de l’ergonomie. Bref, Merci beaucoup :).

    Ce commentaire juste pour alerter sur une coquille. Au niveau du paragraphe “Personnaliser les tailles de texte dans le paragraphe”, dans le code du theme.json, l’objet fontSizes doit être intégré à un objet typography (et non directement à settings).

    1. Maxime BJ

      Le 27 juillet 2022

      Merci pour ton commentaire ! Je viens de corriger la petite erreur. En effet, il faut placer le bloc dans typography pour que les polices soient bien prises en compte. Merci pour ta contribution !

Laisser un commentaire