Skip to content

Instantly share code, notes, and snippets.

@gregoirenoyelle
Created September 13, 2021 13:36
Show Gist options
  • Save gregoirenoyelle/24e1a8dbb4d55f88362aa57d1fc8fe81 to your computer and use it in GitHub Desktop.
Save gregoirenoyelle/24e1a8dbb4d55f88362aa57d1fc8fe81 to your computer and use it in GitHub Desktop.
Custom Color in Gutenberg Blocs
<?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
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment