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

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.

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

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 :

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.

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

Ou alors :

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.

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

Ou si vous n’avez pas theme.json, ça se passe dans 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.

Pour éviter ça, utilisez ce code :

Ou alors :

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…

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

Et sinon :

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 :

Ou bien :

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.

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 :

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 :

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 :

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.