Custom Color in Gutenberg Blocs

gutenberg-custom-color-block.php

<?php
/**
 * Gamme de couleur
 */
function gn_gamme_couleur() {

	// Ensemble de la gamme
	return array (
	    'black'  => '#000000',
	    'dark-blue' => '#073559', 
	    'light-blue' => '#1061AD', 
	    'dark-red' => '#590805',
	    'light-red' => '#AD1F0C',
	    'light-grey' => '#E5E5E5',
	    'white' => '#FFFFFF'
	);

}

/**
 * Réglages du thème 
 * 
 * @link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/
 */
add_action( 'after_setup_theme', 'gn_setup_color' );

function gn_setup_color() {
	// Disable Custom Colors
	add_theme_support( 'disable-custom-colors' );

	// Appel de la gamme
	$couleur = gn_gamme_couleur();

	// Editor Color Palette
	// Donne has-red-color has-blue-background-color
	add_theme_support( 'editor-color-palette', array(
		array(
			'name'	=> 'Noir', 
			'slug'	=> 'black',
			'color'	=> $couleur['black'],
		),		
		array(
			'name'  => 'Bleu foncé',
			'slug'  => 'dark-blue',
			'color'	=> $couleur['dark-blue'],
		),
		array(
			'name'  => 'Bleu clair',
			'slug'  => 'light-blue',
			'color' => $couleur['light-blue'],
		),
		array(
			'name'  => 'Rouge foncé',
			'slug'  => 'dark-red',
			'color' => $couleur['dark-red'],
		),
		array(
			'name'	=> 'Rouge clair',
			'slug'	=> 'light-red',
			'color'	=> $couleur['light-red'],
		),
		array(
			'name'	=> 'Gris clair',
			'slug'	=> 'light-grey',
			'color'	=> $couleur['light-grey'],
		),		
		array(
			'name'	=> 'Blanc',
			'slug'	=> 'white',
			'color'	=> $couleur['white'],
		),		
	) );
}

/**
 * Ajouter les couleurs pour le front
 * 
 */
add_action('wp_head','gn_color_front', 999);
function gn_color_front() { 

	// Appel de la gamme
	$couleur = gn_gamme_couleur();

	// Mise en place des CSS (notation heredoc)
	$css = <<<CSS

	.has-black-color { color: {$couleur['black']}; }
	.has-black-background-color { background-color: {$couleur['black']}; }

	.has-dark-blue-color { color: {$couleur['dark-blue']}; }
	.has-dark-blue-background-color { background-color: {$couleur['dark-blue']}; }

	.has-light-blue-color { color: {$couleur['light-blue']}; }
	.has-light-blue-background-color { background-color: {$couleur['light-blue']}; }

	.has-dark-red-color { color: {$couleur['dark-red']}; }
	.has-dark-red-background-color { background-color: {$couleur['dark-red']}; }

	.has-light-red-color { color: {$couleur['light-red']}; }
	.has-light-red-background-color { background-color: {$couleur['light-red']}; }

	.has-light-grey-color { color: {$couleur['light-grey']}; }
	.has-light-grey-background-color { background-color: {$couleur['light-grey']}; }

	.has-white-color { color: {$couleur['white']}; }
	.has-white-background-color { background-color: {$couleur['white']}; }

CSS;
	
	// Affiche des CSS dans le head
	printf(
		'<style type="text/css">%s</style>',
		$css
	);
}