Gutenberg propose plusieurs nouveaux paramètres rattachés à la fonction add_theme_support et qui permet aux développeurs de thème d’activer / désactiver certaines fonctionnalités et d’en personnaliser d’autres.
Sommaire du cours
- Alignement large et pleine page
- Personnaliser la palette de couleurs
- Désactiver le bouton couleur personnalisée
- Personnaliser les tailles de texte proposées dans le paragraphe
- Désactiver la personnalisation de la taille de texte
- Ajouter une feuille de style pour l’éditeur dans l’admin
- Activer les styles pour thème sombre
- Activer la feuille de styles par défaut des blocs Gutenberg
- Autoriser les embeds Responsives
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.
Certaines seront même carrément essentielles pour migrer votre site de WordPress 4.x à WordPress 5.0 et bénéficier de toutes les nouveautés offertes par Gutenberg
Comme toujours c’est dans le fichier functions.php
du thème qu’il faudra ajouter ce qu’il va suivre. Vous pouvez prendre exemple sur le nouveau thème TwentyNineteen, fourni avec WordPress 5.0, pour vous inspirer.
Je vous invite à consulter également la documentation officielle dans le handbook :
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 :
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 changer grâce à une petite configuration toute simple.
D’ailleurs les thèmes comme TwentyNineteen proposent déjà leur propre palette. Voici le code à ajouter :
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 :
Personnaliser les tailles de texte proposées 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. Pour cela ajoutez :
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 :
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 :
Activer la feuille de styles par défaut des blocs Gutenberg
Quand vous faites votre thème, il faut désormais penser à styliser tous les blocs Gutenberg susceptibles d’avoir une apparence spécifique. Et cela peut représenter beaucoup de travail puisque les témoignages, boutons et le séparateur proposent à eux seuls plusieurs apparences.
Pour ne pas vous embêter, ajoutez cette ligne afin de profiter en front des styles CSS par défaut prévus par l’éditeur :
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.
0
Questions, réponses et commentaires