Synchroniser les palettes de couleurs de l’éditeur et d’ACF

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 🎉 !