Créer des couleurs sur mesure avec l’éditeur moderne

Dans ce tutoriel nous verrons comment ajouter des couleurs sur mesure dans l’éditeur moderne de WordPress (Gutenberg).

Ajouter des couleurs sur mesure

La première étape est d’ajouter un support dans votre thème avec la fonction add_theme_support('editor-color-palette'). La documentation officielle donne plusieurs exemples.
Dans cette même fonction, dans un tableau (array), j’ajoute mes couleurs sur mesure. Attention, cela va remplacer toutes les couleurs par défaut. Par contre, la possibilité de choisir une couleur sur mesure sera toujours disponible. Pour complètement supprimer cette fonctionnalité, j’ajoute add_theme_support( 'disable-custom-colors');.

Voici le code à placer dans un fichier de fonctions de votre thème (functions.php ou autre):

https://gist.github.com/gregoirenoyelle/7e0da51a5c1c249a7f79ed7368e3c989#file-wp-custom-color-gut-fonction-php

Si le code ne s’affichait pas, le voir en ligne.

Note sur l’ajout de add_theme_support

Attention, si votre thème le nécessite, ajouter les fonctions add_theme_support dans un hook sur after_setup_theme. Dans Genesis, ce n’est pas nécessaire. Ce qui donnerait en raccourci.

https://gist.github.com/gregoirenoyelle/7e0da51a5c1c249a7f79ed7368e3c989#file-wp-custom-color-gut-after-fonction-php

Si le fichier ne s’affichait pas, le voir en ligne.

Ajouter les règles CSS

Dès que l’éditeur va utiliser ces nouvelles couleurs, des classes vont s’ajouter dans les balises. Il s’agira de placer de nouvelle règles CSS en tenant compte de ces nouveaux sélecteurs, en respectant les classes générées respectent logique suivante: ici, pour le nom donné plus haut ‘margenta-fort’ cela donnera respectivement les classes pour la couleur du texte et la couleur d’arrière-plan: .has-magenta-fort-background-color' et 'has-magenta-fort-color'.

https://gist.github.com/gregoirenoyelle/7e0da51a5c1c249a7f79ed7368e3c989#file-wp-custom-color-gut-css-css

Si le code ne s’affichait pas, le voir en ligne.

Se former sur l’éditeur Moderne (Gutenberg)

En plus des tutoriels sur WordPress, j’ai mis en place une formation WordPress à Paris sur l’utilisation d’ACF Pro pour créer des blocs dans l’éditeur moderne (Gutenberg). Elle est prise en charge par l’AFDAS, le pôle emploi ou les OPCA. Pendant 3 jours, en tout petit groupe de 4/5 personnes, nous explorons toutes les facettes de cette nouvelle approche. N’hésitez pas à vous inscrire à la newsletter pour être tenu informé.e des prochaines dates.