Personnaliser les couleurs de la palette Gutenberg • Formation WordPress Capitaine WP

Gutenberg propose plein de composants de réglages dont la palette de couleurs. Il est possible de la personnaliser afin de la limiter à la charte du site, via un petit hook à placer dans votre functions.php.

Suivez la formation en vidéo !

Pour visionner cette vidéo vous devez acheter cette formation.
Déjà achetée ? Connectez-vous !

Acheter Connexion

Sommaire du cours

La palette de couleurs
Personnaliser la palette de couleurs
Désactiver le choix de couleur personnalisée
Récupérer les couleurs du Customizer

La palette de couleurs

Gutenberg nous permet de réutiliser facilement les composants de l’interface visuelle, dont les différents champs de réglages comme la réglette (range), les interrupteur on/off, mais aussi la palette de couleur.

Cette dernière est très bien conçue et elle est même personnalisable. Voici la palette de couleurs par défaut :

L’idée est de définir un set de couleurs qui collent à la charte graphique du site. Voici la palette spéciale Capitaine WP :

Personnaliser la palette de couleurs

Pour cela c’est tout simple, il suffit de placer ce hook dans le fichier functions.php de votre thème (parent ou enfant) :

<?php 
function mytheme_setup_theme_supported_features() {

	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' ),
			array( 'name' => 'yellow', 'slug'  => 'yellow', 'color' => '#FFC334' ),
			array( 'name' => 'red', 'slug'  => 'red', 'color' => '#B54D4D' ),
			array( 'name' => 'grey', 'slug'  => 'grey', 'color' => '#f8f8f8' ),
			array( 'name' => 'ui', 'slug'  => 'ui', 'color' => '#232634' ),
			array( 'name' => 'ui-dark', 'slug'  => 'ui-dark', 'color' => '#2F3344' ),
			array( 'name' => 'ui-light', 'slug'  => 'ui-light', 'color' => '#575D74' ),
		)
	);
}
add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

Vous pouvez définir autant de couleurs que vous le souhaitez, mais résistez tout de même à l’envie d’en mettre 50.

Désactiver le choix de couleur personnalisée

Si vous ne voulez pas que votre utilisateur s’amuse à détruire toute l’harmonie de votre charte, vous pouvez désactiver le dernier cercle « couleur personnalisée » afin de limiter la sélection aux couleurs définies juste avant.

Retirer le choix de la couleur personnalisée

Pour cela il suffit d’ajouter la ligne suivante dans le même hook :

<?php 
function mytheme_setup_theme_supported_features() {

	// ...
  
	add_theme_support( 'disable-custom-colors' );

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

Récupérer les couleurs du Customizer

Pour terminer, il est possible de récupérer les couleurs définies dans le Customizer WordPress (Apparence > Personnaliser).

Merci à Thomas Villain pour l’astuce !

<?php

// Example of custom color defined in the Customizer

$wp_customize->add_setting('primary_color', array(
	'default'             => '99CC00',
	'sanitize_callback'   => 'sanitize_hex_color',
	'capability'          => 'edit_theme_options',
	'type'                => 'theme_mod',
	'transport'           => 'refresh', 
));
$wp_customize->add_control( new WP_Customize_Color_control($wp_customize, 'primary_color_ctrl', array(
	'label'      => __('Primary color', 'your-textdomain'),
	'section'    => 'colors',
	'settings'   => 'primary_color',	
)));


// Gutenberg Custom color palette

add_theme_support( 'editor-color-palette', array(
    array(
        'name' => esc_html__( 'Primary color', 'your-textdomain' ),
        'slug' => 'primary-color',
        'color' => get_theme_mod('primary_color', '#99CC00'),
    ),
    array(
        'name' => esc_html__( 'Secondary color', 'your-textdomain' ),
        'slug' => 'secondary-color',
        'color' => get_theme_mod('secondary_color', '#606060'),
    ),
));

Ces fonctions sont très pratiques pour personnaliser la charte et limiter les possibilités de vos utilisateurs !