Quand on créé un thème sur mesure, on peut définir une palette de couleurs qui sera disponible pour les réglages de couleurs de tous les blocs.
Déclarer la palette de couleurs de l’éditeur
Cela se fait via la fonction add_theme_support
, en lui passant en premier paramètre editor-color-palette
puis en second un tableau de couleurs. Voici par exemple la déclaration de trois couleurs :
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'Orange', 'textdomain' ),
'slug' => 'orange',
'color' => '#ed7635',
),
array(
'name' => __( 'Grey', 'textdomain' ),
'slug' => 'grey',
'color' => '#3d3d3d',
),
array(
'name' => __( 'White', 'textdomain' ),
'slug' => 'white',
'color' => '#fff',
),
) );
Vous pouvez utiliser le générateur que j’ai développé pour créer facilement cette déclaration.
Synchroniser la palette de couleurs d’ACF
Lorsqu’on créé des blocs sur mesure à l’aide d’ACF, et qu’on utilise le champ Couleur (ou Color Picker), il est plus cohérent qu’il propose les mêmes couleurs que celui de l’éditeur. C’est réalisable facilement grâce à cette petite fonction :
add_action('acf/input/admin_footer', 'prefix_acf_color_picker_from_theme_palette');
function prefix_acf_color_picker_from_theme_palette() {
// Get colors palette registerd in theme support
$color_palette = get_theme_support( 'editor-color-palette' );
if ( ! empty( $color_palette ) ) {
// Get each 'color' value (hex code)
$colors = array_column( $color_palette[ 0 ], 'color' );
?>
<script type="text/javascript">
acf.add_filter('color_picker_args', function( args, field ){
// do something to args
args.palettes = <?php echo json_encode( $colors ); ?>;
// return
return args;
});
</script>
<?php
}
}
En récupérant le tableau de couleurs déclaré dans add_theme_support
, les sélecteurs de couleurs d’ACF seront automatiquement synchronisés avec ceux de l’éditeur, et ce à chaque modification 🎉 !


Encore une ressource précieuse, merci Marie !
Merci pour ton retour et ravie que ça te soit utile 🙂