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.
PS : J’ai publié une extension qui synchronise automatiquement les sélecteurs de couleur d’ACF et de l’éditeur.
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 🙂