bricks

Création de JSON pour Bricks Builder

Générez des designs Bricks complets sous forme de JSON qui se colle ou s'importe proprement du premier coup.

Livrable par défaut

Produisez un véritable fichier .json dans l'espace de travail (pas du JSON en ligne) sauf si l'utilisateur demande autrement. Utilisez la convention de dossier du projet si elle existe ; sinon bricks-json/{type}-{slug}.json. Dans la réponse finale, indiquez : le chemin du fichier, le format JSON utilisé et les vérifications de validation effectuées.

Workflow

0. Clarifiez d'abord les entrées — réglez deux choses avant d'écrire du JSON :
   • base rem — confirmez ce que vaut 1rem sur le site cible (1rem = ? px). Demandez à l'utilisateur ; par défaut 16px si non spécifié (un reset html { font-size: 62.5% } le met à 10px). Tous les calculs rem/clamp() et toute conversion px→rem depuis une référence en dépendent. → base rem
   • URL de référence — si l'utilisateur en fournit une (ou nomme des URLs d'actifs), récupérez-la et référencez ses images/vidéos/SVG/icônes par URL absolue. → references/external-assets.md
1. Choisissez le format — collage dans le presse-papiers vs importation de modèle vs insertion programmatique → references/json-formats.md
2. Planifiez la structure — arbre sémantique section → conteneur → blocs ; choisissez les éléments dans le catalogue → references/elements.md
3. Stylisez avec les réglages — chaque clé de style _ et sa forme de valeur exacte → references/style-settings.md
4. Câblez les données — balises dynamiques, boucles de requête, filtres si nécessaire (voir table de routage)
5. Validez — liste de contrôle ci-dessous, puis livrez

Référence rapide des formats

Presse-papiers (coller dans le constructeur) — le format par défaut pour les sections et le contenu des pages :

{
  "content": [ /* tableau plat de nœuds d'éléments */ ],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://example.com",
  "version": "2.3.6",
  "globalClasses": [ /* objets de classe complets référencés par _cssGlobalClasses */ ],
  "globalElements": []
}

Nœud d'élément (chaque entrée dans content) :

{
  "id": "abc123",
  "name": "heading",
  "parent": "xyz789",
  "children": [],
  "settings": {},
  "label": "Étiquette optionnelle du panneau de structure"
}

• id : alphanumérique unique de 6 caractères. parent : id du parent, ou 0 pour les éléments racine.
• Le tableau est plat — la hiérarchie réside entièrement dans parent + children (les ids doivent se recouper exactement).
• Les éléments racine sont généralement de type section ; ne jamais imbriquer une section dans quoi que ce soit.

Table de routage des tâches

Tâche	Référence
Sélection du format, stockage presse-papiers/modèle/méta, insertion programmatique	references/json-formats.md
Catalogue des éléments, réglages par élément, éléments imbriquables	references/elements.md
Clés de style, formes de valeurs (couleur/typographie/bordure/ombre/dégradé/transformation), grammaire responsive + survol	references/style-settings.md
Recettes section/grille/flex, cartes, superpositions, sticky, designs complets	references/layout-recipes.md
Balises de données dynamiques {post_title}, arguments, {echo:}	references/dynamic-data.md
ACF (incl. répéteurs, groupes, contenu flexible), Meta Box, JetEngine, Pods, CMB2	references/acf-providers.md
Boucles de requête (hasLoop + query), requêtes article/terme/utilisateur	references/query-loops.md
Filtres à facettes, pagination AJAX, chargement plus, défilement infini, recherche en direct	references/query-filters.md
Conditions d'affichage/masquage (_conditions)	references/conditions.md
Interactions, animations, déclencheurs de défilement (_interactions)	references/interactions.md
Popups (modèles, déclencheurs, limites, AJAX)	references/popups.md
Types de modèles, conditions, import/export, en-tête/pied de page/archive/404	references/templates.md
Composants, classes globales, variables globales, palette de couleurs	references/components-classes.md
Styles de thème, points de rupture, ordre de génération CSS	references/theme-styles.md
Élément formulaire, actions, validation	references/forms.md
Modèles et éléments WooCommerce	references/woocommerce.md
PHP : éléments personnalisés avec contrôles	references/custom-elements.md
PHP : filtres et actions	references/hooks.md
Actifs externes depuis une URL de référence (toute image/vidéo/SVG/icône, lien direct vs ré-hébergement)	references/external-assets.md
Chargement des actifs, permissions du constructeur	references/assets-permissions.md

Exemples prêts à coller (hero, grilles, boucles ACF, archive filtrée, en-tête/pied de page, popup…) : patterns/ — voir patterns/INDEX.md.

Règles non négociables

1. Intégrité de l'arborescence plate — chaque id de children existe en tant que nœud dont le parent renvoie vers lui. Pas d'orphelins, pas de doublons.
2. Formes de valeurs vérifiées uniquement — les couleurs sont des objets ({"hex": "#222"} ou {"raw": "var(--x)"}), les clés de typographie sont des noms de propriétés CSS ("font-size", pas fontSize), les décalages de box-shadow s'imbriquent sous values, les dégradés utilisent colors: [{color, stop}]. En cas de doute, consultez style-settings.md — ne devinez pas les formes.
3. Grammaire responsive — setting:breakpoint:pseudo avec deux-points : _padding:tablet_portrait, _background:hover, _margin:mobile_portrait:hover. Clés de points de rupture par défaut : tablet_portrait (991), mobile_landscape (767), mobile_portrait (478). Le bureau est la clé nue.
4. Les unités sont des chaînes — "3rem", "100%", "24px". Les nombres nus reçoivent px ajouté par Bricks.
5. Discipline d'échelle d'espacement — choisissez une échelle (ou les variables globales du site) et tenez-vous-y sur l'ensemble du design.
6. Structure réelle, pas de remplissage — réglages sémantiques tag sur les sections/blocs (header, nav, article, aside, footer), un h1 par page, niveaux de titres descendants.
7. Les classes globales voyagent avec — tout id listé dans _cssGlobalClasses d'un élément doit avoir son objet de classe complet dans le tableau globalClasses de niveau supérieur.
8. N'inventez pas de clés de réglages — uniquement les clés documentées dans les références ou trouvées dans la source Bricks. Les clés inconnues sont silencieusement ignorées et nuisent à la confiance de l'utilisateur.
9. Confirmez la base rem avant d'utiliser rem — ne jamais supposer silencieusement 1rem = 16px. Demandez à l'utilisateur ; par défaut 16px uniquement s'il ne répond pas. Convertissez toute valeur px extraite d'une référence en utilisant la base confirmée.
10. Référencez les actifs externes par url absolue, jamais par id — lorsqu'une URL de référence ou des URLs d'actifs sont données, résolvez chaque actif en une URL absolue et référencez-le via url/external du contrôle média (les ids de pièce jointe ne se résolvent pas entre sites). Respectez les licences — ne liez pas directement des actifs protégés par le droit d'auteur ou de marque en production. → references/external-assets.md

Liste de contrôle de validation (à exécuter avant la livraison)

• Le JSON s'analyse (python3 -m json.tool file.json ou équivalent)
• Chaque référence parent/children se résout ; ids uniques, alphanumériques de 6 caractères
• source: "bricksCopiedElements" + version présents (format presse-papiers)
• Chaque id de _cssGlobalClasses a un objet correspondant dans globalClasses
• Les formes de valeurs correspondent à style-settings.md (vérification ponctuelle des couleurs, typographie, espacement)
• Les clés responsive utilisent des noms de points de rupture valides
• Boucles de requête : hasLoop: true + query.objectType présent ; les filtres pointent vers un id d'élément de requête réel via filterQueryId
• Les balises de données dynamiques existent pour le fournisseur de champ indiqué (ex. {acf_*} correspond aux noms de champs de l'utilisateur)