Configurer Gutenberg pour votre thème avec add_theme_support • Formation WordPress Capitaine WP

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.

<?php 
function mytheme_setup_theme_supported_features() {

	// Les fonctions vont dans ce hook
  	add_theme_support( ... );

}
add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

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 :

<?php 
add_theme_support( 'align-wide' );

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 :

<?php 
add_theme_support( 'editor-color-palette',
    array(
		array( 'name' => 'blue', 'slug'  => 'blue', 'color' => '#48ADD8' ),
		array( 'name' => 'pink', 'slug'  => 'pink', 'color' => '#FF2952' ),
		array( 'name' => 'green', 'slug'  => 'green', 'color' => '#83BD71' ),
	)
);

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 :

<?php 
add_theme_support( 'disable-custom-colors' );

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…

Le sélecteur de tailles de paragraphe dans Gutenberg

Afin de contrôler au mieux cette option, vous allez pouvoir choisir les tailles correspondantes. Pour cela ajoutez :

<?php
add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( 'small', 'themeLangDomain' ),
        'shortName' => __( 'S', 'themeLangDomain' ),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => __( 'regular', 'themeLangDomain' ),
        'shortName' => __( 'M', 'themeLangDomain' ),
        'size' => 16,
        'slug' => 'regular'
    ),
    array(
        'name' => __( 'large', 'themeLangDomain' ),
        'shortName' => __( 'L', 'themeLangDomain' ),
        'size' => 36,
        'slug' => 'large'
    ),
    array(
        'name' => __( 'larger', 'themeLangDomain' ),
        'shortName' => __( 'XL', 'themeLangDomain' ),
        'size' => 50,
        'slug' => 'larger'
    )
) );

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 :

<?php 
add_theme_support('disable-custom-font-sizes');

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 
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );

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 
add_theme_support( 'editor-styles' );
add_theme_support( 'dark-editor-style' );

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 :

<?php 
add_theme_support( 'wp-block-styles' );

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 
add_theme_support( 'responsive-embeds' );

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.