Expressions

Une expression est une séquence de jetons qui s'évalue en une seule valeur — le contenu à afficher, l'URL à utiliser ou une condition à tester.

Pensez à une expression comme une recette : chaque ingrédient (jeton) transforme les données un pas plus loin. Vous la lisez de gauche à droite. posts → first → title signifie « obtenir les articles, prendre le premier, extraire le titre ».

Comprendre les jetons

Il existe quatre types de jetons — les briques de base des expressions.

Jetons de propriété : ils accèdent à un champ de votre API GraphQL. Exemples : posts, title, featured_image, author_name. Chaque jeton de propriété demande à l'API une donnée spécifique.

Jetons de filtre : ils transforment les données en utilisant des filtres Liquid. Exemples : upcase (mettre le texte en majuscules), where (filtrer une liste), first (obtenir le premier élément). Les filtres sont toujours appliqués à la sortie du jeton précédent.

Jetons d'état : ils font référence à un état nommé d'un autre composant. Si un autre composant a un état appelé « article sélectionné », vous pouvez le référencer pour réutiliser ses données.

Jetons fixes : ce sont des valeurs codées en dur que vous saisissez vous-même — une chaîne de caractères, un nombre ou un booléen. Utiles pour les valeurs de secours ou le contenu statique.

Comment les jetons se chaînent

Les expressions fonctionnent de gauche à droite. Chaque jeton prend la sortie du jeton précédent comme entrée.

Exemple 1 : chaîne de propriété simple

Author → name

« Obtenir l'objet auteur, puis extraire le champ nom. »

Exemple 2 : propriété + filtre

Title → upcase

« Obtenir le titre, puis appliquer le filtre upcase pour le mettre tout en majuscules. »

Exemple 3 : chaîne complexe

Posts → where (category = "news") → first → title

« Obtenir les articles, filtrer uniquement ceux dont la catégorie est 'news', prendre le premier, et extraire son titre. »

Cette chaîne a quatre jetons :

1. Propriété : posts — récupérer tous les articles
2. Filtre : where — restreindre par catégorie
3. Filtre : first — choisir le premier résultat
4. Propriété : title — obtenir le champ titre

Entrée et sortie des jetons

Chaque jeton a un type de données qu'il attend et un type qu'il produit.

Un jeton de propriété qui renvoie une liste d'articles a un type de sortie « liste d'articles ». Si vous appliquez ensuite le filtre first, il produit « un article » (un objet). Ensuite, vous pouvez utiliser la propriété title, qui produit « chaîne de caractères ».

Lorsque vous construisez une expression dans l'éditeur, Silex vous montre quels jetons sont valides — il ne vous laissera pas appliquer un filtre conçu pour les chaînes à un nombre, par exemple.

Valeurs fixes

Parfois vous avez besoin de saisir une valeur statique — un morceau de texte, un nombre ou un slug d'URL.

Un jeton fixe est simplement du texte ou un nombre que vous tapez. Dans une expression comme :

Posts → where (status = "published")

Le "published" est un jeton fixe — une chaîne codée en dur. Il ne provient pas de votre API ; vous indiquez à Silex « comparer le champ status à cette chaîne exacte ».

États publics vs. privés

Lorsque vous créez un état sur un composant, vous choisissez :

États publics : visibles par les composants enfants de ce composant. Utiles si vous souhaitez qu'un composant parent définisse des données auxquelles les enfants peuvent accéder.

États privés : utilisés uniquement en interne sur ce composant. Ils incluent des états spéciaux comme :

• innerHTML — le contenu HTML de l'élément
• condition — une règle de visibilité (afficher/masquer l'élément)
• condition2 — une seconde condition pour une logique de visibilité plus complexe
• __data — les données de boucle (pour les composants répétitifs)

Construire votre première expression

L'éditeur d'expressions vous montre les jetons disponibles au fur et à mesure que vous tapez. Commencez par une propriété (quelque chose de votre API), puis ajoutez des filtres pour façonner les données, puis utilisez-la dans votre composant.

Si vous souhaitez afficher le titre du premier article de blog, votre expression est :

1. Sélectionnez la propriété posts
2. Ajoutez le filtre first
3. Ajoutez la propriété title
4. Le résultat : posts → first → title, qui produit une chaîne (le titre)

Liez cela à l'état innerHTML du composant et le titre apparaît sur le canevas.

Erreurs courantes

• Chaîner des jetons incompatibles. Un filtre de chaîne ne fonctionnera pas sur un nombre. Silex vous avertira — faites attention aux types d'entrée/sortie.
• Oublier le contexte. Certains jetons n'ont de sens qu'à l'intérieur d'une boucle. L'état condition n'est vérifié que lorsque le composant fait partie d'une boucle.
• Utiliser une valeur fixe quand vous vouliez une propriété. Si vous écrivez "featured_image" comme chaîne fixe, cela affiche le texte "featured_image", pas l'image réelle.
• Construire des expressions trop complexes. Gardez-les simples. Si une expression devient difficile à comprendre, décomposez-la en plusieurs états sur différents composants.

En savoir plus

• Lier les données — étapes pratiques pour créer et utiliser des expressions dans l'éditeur
• Boucles et listes — comment l'état __data répète les composants pour les tableaux
• Conditions — opérateurs de visibilité et comment afficher/masquer en fonction des données
• Filtres — référence complète de tous les filtres Liquid disponibles
• Configuration WordPress — comprendre la structure de données avec laquelle vous travaillerez

---

Quiz

Q1 : Vous souhaitez afficher la version en majuscules d'un titre d'article. De quels jetons avez-vous besoin ?

• A) posts → title → upcase
• B) posts → upcase → title
• C) upcase → posts → title

Réponse

A) posts → title → upcase — Vous récupérez les articles, extrayez le titre (une chaîne), puis appliquez upcase pour le mettre en majuscules. Les jetons de filtre doivent venir après les données qu'ils transforment.

Q2 : Qu'est-ce qu'un jeton fixe ?

• A) Un jeton qui ne change jamais
• B) Une valeur codée en dur que vous tapez (pas provenant de votre API)
• C) Un jeton qui ne peut être utilisé qu'une fois par expression

Réponse

B) Une valeur codée en dur que vous tapez (pas provenant de votre API) — Les jetons fixes sont des chaînes littérales, des nombres ou des booléens que vous saisissez directement, par opposition aux jetons de propriété qui récupèrent des données de votre API GraphQL.

Q3 : Dans l'expression posts → where (status = "published") → first → title, qu'est-ce que "published" ?

• A) Un jeton de propriété
• B) Un jeton de filtre
• C) Un jeton fixe

Réponse

C) Un jeton fixe — Vous comparez le champ status à la chaîne exacte "published". C'est une valeur littérale que vous saisissez, pas que vous récupérez de l'API.

Q4 : Pourquoi Silex vous empêche-t-il d'appliquer un filtre de chaîne à un nombre ?

• A) C'est une limitation technique
• B) Le filtre n'aurait pas de sens ou produirait une erreur
• C) Silex veut simplifier l'interface

Réponse

B) Le filtre n'aurait pas de sens ou produirait une erreur — Les filtres sont conçus pour des types de données spécifiques. Un filtre de mise en majuscules attend du texte ; l'appliquer à un nombre n'a pas de sens sémantique et échouerait.

Q5 : Vous souhaitez que le titre du premier article soit visible par les composants enfants. Devriez-vous créer un état public ou privé ?

• A) Privé (car il n'est utilisé que pour ce seul composant)
• B) Public (car les composants enfants ont besoin d'y accéder)
• C) L'un ou l'autre fonctionne de la même manière

Réponse

B) Public (car les composants enfants ont besoin d'y accéder) — Les états privés sont uniquement pour le composant lui-même. Les états publics sont exposés aux enfants pour qu'ils puissent les référencer. Pour que les données soient disponibles en aval, rendez-les publiques.