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.

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

Capture d'écran du sélecteur de couleur d'ACF
Capture d’écran du sélecteur de couleur d’ACF
Capture d'écran du sélecteur de couleur de l'éditeur
Capture d’écran du sélecteur de couleur de l’éditeur

Publié par : Marie Comet

Développeuse et intégratrice web indépendante, spécialisée WordPress.

Retrouvez-moi sur :

Répondre à Marie Annuler la réponse

Vous pouvez utiliser les balises code (<code>your code</code>) ou pre (<pre>your code</pre>) pour formatter du code dans votre commentaire.

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

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

  • Béryl

    Encore une ressource précieuse, merci Marie !

    • Marie

      Merci pour ton retour et ravie que ça te soit utile 🙂

at venenatis id eleifend Lorem Praesent non et, facilisis ipsum