< Retour au blog

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

Publié le

dans la catégorie

, ,

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 le fichier theme.json, ou 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', ), ) );
Langage du code : PHP (php)

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() { $colors = ''; // 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' ); } // Try to get color palette from theme.json if ( false === $color_palette && class_exists( 'WP_Theme_JSON_Resolver' ) ) { $settings = WP_Theme_JSON_Resolver::get_theme_data()->get_settings(); if ( isset( $settings['color']['palette']['theme'] ) ) { $color_palette = $settings['color']['palette']['theme']; if ( ! empty( $color_palette ) ) { // Get each 'color' value (hex code) $colors = array_column( $color_palette, 'color' ); } } } if ( ! empty( $colors ) ) { ?> <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 } }
Langage du code : PHP (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

3 réponses à “Synchroniser les palettes de couleurs de l’éditeur et d’ACF”

Répondre à Béryl Annuler la réponse

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.