Formation « Créer des blocs avec Gutenberg »

Personnaliser les couleurs de la palette Gutenberg

Lecture : 2 minutes • 0

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.

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 :

Palette de couleur

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 :

Palette de couleur personnalisée

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
functions.php
<?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
functions.php
<?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
functions.php
<?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 !

0

Questions, réponses et commentaires

    Laisser un commentaire