Utiliser ChatGPT pour créer des palettes de couleurs sur mesure dans l’éditeur de site (FSE)

Dans cet article qui est le premier d’une longue série, je vous montre comment utiliser chatGPT dans un thème qui repose sur des blocs (FSE).

Version de ChatGPT

Dans ce tutoriel, j’utilise la version 4 de chatGPT. Elle est payante mais je réalise tellement de chose avec que je n’ai jamais regretté.

Concernant le travail dans un thème qui repose sur des blocs, les tests que j’ai pu faire dans la version gratuite ne sont pas encore au point. Et ici, je mets l’accent sur les réglages du fichier theme.json, qui est le fichier central d’un thème FSE.

Extraire les couleurs de mon logo

Pour cet exemple, je veux récupérer les couleurs de mon logo de démonstration (je sais, encore lui. Je l’aimais bien cette boulangerie). J’utilise le service en ligne Adobe Color, accessible via un compte utilisateur. Il n’est pas nécessaire d’être abonné à une suite Adobe pour l’avoir.

Après l’extraction, je m’attèle à ajuster les teintes pour qu’elles soient sur mesure (voir la vidéo ci-dessous). Je conserve uniquement les codes hexadécimaux, ces séquences de six ou trois caractères précédées d’un #.

Préparer le prompt pour créer la palette de couleurs

Avec ChatGPT, la clé réside dans la construction du dialogue. Une première expérience peut s’avérer frustrante si l’on n’appréhende pas l’importance de la formulation des prompts. Mon conseil : commencez par demander à ChatGPT comment affiner vos prompts.

Voici le prompt que j’utilise :

Salut,
Tu es un expert WordPress en FSE.
1. J'ai besoin de créer une palette de couleurs dans le fichier theme.json.
2. Pour toutes les couleurs sauf le noir et le blanc, nomme-les "Primaire 1", "Primaire 2", etc.
3. N'oublie pas d'inclure le transparent à la fin.
4. Je connais bien le fichier theme.json; je souhaite uniquement le code correctement formaté.

Voici les couleurs hexadécimales :

- #04588C
- #FFFFFF
- #000000
- #F28F16
- #F20505

Pour résumer :

• Je suis poli. Je me dis qu’à force de travailler avec des IA, nous risquons de modifier profondément notre manière de demander des choses. Et je souhaite pas devenir rustre.
• Je donne le contexte « Tu es un expert… ». Apparemment, cette approche
• La structure pour le nommage des couleurs est précisée.
• Je spécifie ma familiarité avec le fichier theme.json pour éviter les explications superflues.
• Les couleurs sont listées clairement. ChatGPT maîtrise parfaitement le Markdown.

Amélioration du prompt

La réponse de ChatGPT inclut tout le fichier theme.json. Je lui demande donc de me fournir uniquement le tableau de la palette :

Super. Peux-tu juste me donner le tableau "palette" ?

Il suffit ensuite d’intégrer ce code dans l’objet « settings » > « color » :

"palette": [
  {
    "slug": "primaire-1",
    "color": "#04588C",
    "name": "Primaire 1"
  },
  {
    "slug": "white",
    "color": "#FFFFFF",
    "name": "Blanc"
  },
  {
    "slug": "black",
    "color": "#000000",
    "name": "Noir"
  },
  {
    "slug": "primaire-2",
    "color": "#F28F16",
    "name": "Primaire 2"
  },
  {
    "slug": "primaire-3",
    "color": "#F20505",
    "name": "Primaire 3"
  },
  {
    "slug": "transparent",
    "color": "rgba(255, 255, 255, 0)",
    "name": "Transparent"
  }
]

Intégration du code dans le fichier theme.json

Pour modifier mes thèmes FSE, j’utilise Visual Studio Code, un éditeur gratuit qui offre un excellent support pour le fichier theme.json. Comprendre ce fichier est crucial pour intégrer efficacement toutes les configurations générées avec ChatGPT.

Autre prompt pour créer une palette spécifique à un bloc

Je demande également à ChatGPT de créer une palette pour le bloc de paragraphe, profitant ainsi du niveau de personnalisation que permettent les thèmes FSE. Voici le prompt spécifique :

J'ai besoin d'une palette spécifique pour le bloc paragraphe, incluant uniquement :
- #04588C
- #FFFFFF
- #000000
Pour "#04588C", utilise le même slug que précédemment.

Et voici ci-dessous le résultat final que je vais coller dans l’objet blocks, qui est un sous-objet de settings. Je précise « résultat final » car les premières réponses fournies étaient erronées, orientées vers l’objet styles — celui-ci étant destiné à ajouter des styles à un bloc, comme son nom l’indique, plutôt qu’à y configurer des réglages (ou « settings » en anglais).

J’ai choisi de conserver cette erreur dans la vidéo, car elle représente une leçon importante. Le choix de Microsoft de nommer son IA « Copilot » est particulièrement judicieux. L’IA nécessite la supervision d’un pilote, c’est-à-dire nous. Cette interaction incarne une forme d’intelligence qui, sans tomber dans les grands débats philosophiques, requiert une pertinence dans l’échange pour délivrer des résultats justes et parfois stupéfiants. Cet apprentissage continu avec l’IA enrichit notre approche et affine notre capacité à collaborer efficacement avec ces outils avancés.

"core/paragraph": {
  "color": {
    "palette": [
      {
        "slug": "primaire-1",
        "color": "#04588C",
        "name": "Primaire 1"
      },
      {
        "slug": "white",
        "color": "#FFFFFF",
        "name": "Blanc"
      },
      {
        "slug": "black",
        "color": "#000000",
        "name": "Noir"
      }
    ]
  }
}

Démonstration en vidéo

Voir la vidéo de ma playlist YouTube dédiée à l’éditeur de site qui résume tout l’article.

Quelques liens

• Ma chaîne Youtube @gregoirenoyelle dans laquelle je compte publier beaucoup de tutoriels sur le FSE.
• La première formation intégrale sur le FSE (Editeur de site).
• Nos meetups mensuel WP Paris.
• Notre association parisienne WP Paris (la refonte du site en FSE est en cours) qui représente WordPress à Paris.