Comment personnaliser les couleurs dans l’éditeur de bloc de WordPress ?

---

Oui mais Gutenberg propose trop de personnalisation, donc l’éditeur du site ne respecte pas la charte graphique

Quelqu’un de connu par quelqu’un d’autre

Quel gâchis ! De si belles compositions graphiques ruinées parce qu’une couleur a été changée… C’est oublier un peu vite qu’on peut configurer ce qui est possible (ou pas) dans Gutenberg.

Gutenberg propose effectivement par défaut des options de personnalisation (couleurs, alignements…) qui peuvent donner trop de libertés aux utilisateurs, et nuire à la cohérence graphique du site. Mais des solutions existent !

Beaucoup de concepteurs de sites ont été habitués à l’utilisation du plugin ACF pour personnaliser l’administration de WordPress, configurer les options disponibles pour les utilisateurs et les créateurs de contenus du site. 

Mais pourquoi se priver de Gutenberg alors qu’on peut y transposer le même genre de cadre proposé par ACF, et inclure uniquement ce qui respecte la charte graphique et les mises en pages optimales. Fini les dérives et le WTF visuel.

Pour bien faire et garantir un site harmonieux et bien encadré, on a un programme clés en main pour se former tranquillement à la transition d’ACF vers Gutenberg et pour savoir poser les bonnes limites aux personnalisations graphiques.

---

Voici quand même quelques astuces simples qu’on met en place sur chacun des sites WordPress que l’on pond :

Désactiver les couleurs personnalisées de Gutenberg

Au revoir les sites en mode « sapins de Noël » 🎄

function fantassin_theme_disable_custom_colors() {
  add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'fantassin_theme_disable_custom_colors' );

Changer la palette de couleur de l’éditeur

Et bonjour le respect de la charte graphique 😅

function fantassin_theme_edit_color_palette() {
  $args = array(
    array(
      'name' => __( 'Magenta', 'fts-theme' ),
      'slug' => 'magenta',
      'color' => '#a156b4',
    ),
    array(
      'name' => __( 'Light magenta', 'fts-theme' ),
      'slug' => 'light-magenta',
      'color' => '#d0a5db',
    ),
  );
  add_theme_support( 'editor-color-palette', $args );
}
add_action( 'after_setup_theme', 'fantassin_theme_edit_color_palette' );