Ajouter des couleurs personnalisées dans l'éditeur moderne de WordPress

wp-custom-color-gut-after-fonction.php

<?php
// A placer dans le fichier functions.php de votre thème sans le <?php du début
//* Fonction qui se déclenche 'after_setup_theme'
function gn_ajouter_fonction_color_theme_support() {
  /***
   * Remplacer les couleurs par défaut (color et background-color)
   * ici pour 'margenta-fort' cela donnera les classes suivantes:
   * '.has-magenta-fort-background-color' et 'has-magenta-fort-color'
   */ 
    add_theme_support( 'editor-color-palette', array(
        array(
            'name' => __('Magenta Fort', 'genesis-sample' ),
            'slug' => 'magenta-fort',
            'color' => '#a156b4',
        ),
        // Ajouter ici votre autres couleurs en partant de l'exemple sans 'after_setup_theme'
    ) );
  
    // Suppression des couleurs sur mesure
    add_theme_support( 'disable-custom-colors' );
  
add_action( 'after_setup_theme', 'gn_ajouter_fonction_color_theme_support' );

wp-custom-color-gut-css.css

/* Magenta Fort */
.has-magenta-fort-color {
	color: #a156b4;
}

.has-magenta-fort-background-color {
	background-color: #a156b4;
}

/* Magenta grisé et léger */
.has-magenta-grise-leger-color {
	color: #d0a5db;
}

.has-magenta-grise-leger-background-color {
	background-color: #d0a5db;
}

/* Gris très léger */
.has-gris-tres-leger-color {
	color: #eee;
}

.has-gris-tres-leger-background-color {
	background-color: #eee;
}

/* Gris très foncé */
.has-gris-tres-fonce-color {
	color: #444;
}

.has-gris-tres-fonce-background-color {
	background-color: #444;
}

wp-custom-color-gut-fonction.php

<?php
// A placer dans le fichier functions.php de votre thème sans le <?php du début

/***
 * Remplacer les couleurs par défaut (color et background-color)
 * ici pour 'margenta-fort' cela donnera les classes suivantes:
 * '.has-magenta-fort-background-color' et 'has-magenta-fort-color'
 * 
 * Attention, si votre thème le nécessite, ajouter les fonctions 
 * add_theme_support dans un hook sur after_setup_theme
 * Voir le lien pour plus d'information: 
 * @link https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support
 */
add_theme_support( 'editor-color-palette', array(
    array(
        'name' => __('Magenta Fort', 'genesis-sample' ),
        'slug' => 'magenta-fort',
        'color' => '#a156b4',
    ),
    array(
        'name' => __( 'Magenta grisé et léger', 'genesis-sample' ),
        'slug' => 'magenta-grise-leger',
        'color' => '#d0a5db',
    ),
    array(
        'name' => __( 'Gris très léger', 'genesis-sample' ),
        'slug' => 'gris-tres-leger',
        'color' => '#eee',
    ),
    array(
        'name' => __( 'Gris très foncé', 'genesis-sample' ),
        'slug' => 'gris-tres-fonce',
        'color' => '#444',
    ),
) );

// Suppression des couleurs sur mesure
add_theme_support( 'disable-custom-colors' );