bricks

Bricks Builder JSON-Erstellung

Vollständige Bricks-Designs als JSON generieren, das beim Einfügen oder Importieren sofort sauber funktioniert.

Standardergebnis

Erstelle eine tatsächliche .json-Datei im Workspace (kein Inline-JSON), sofern der Benutzer nichts anderes wünscht. Verwende die Ordnerkonvention des Projekts, falls vorhanden; andernfalls bricks-json/{typ}-{slug}.json. Gib in der endgültigen Antwort an: den Dateipfad, das verwendete JSON-Format und die durchgeführten Validierungsprüfungen.

Arbeitsablauf

0. Eingaben zuerst klären — zwei Dinge vor dem Schreiben des JSON festlegen:
   • rem-Basis — bestätigen, was 1rem auf der Zielseite entspricht (1rem = ? px). Frage den Benutzer; Standard ist 16px, falls nicht angegeben (ein html { font-size: 62.5% } Reset macht es zu 10px). Die gesamte rem/clamp()-Berechnung und jede px→rem-Umrechnung basierend auf einer Referenz hängt davon ab. → rem-Basis
   • Referenz-URL — wenn der Benutzer eine angibt (oder Asset-URLs nennt), rufe sie ab und referenziere ihre Bilder/Videos/SVGs/Icons über absolute URLs. → references/external-assets.md
1. Format auswählen — Zwischenablage einfügen vs. Vorlagenimport vs. programmatisches Einfügen → references/json-formats.md
2. Struktur planen — semantischer Abschnitt → Container → Blöcke Baum; Elemente aus dem Katalog auswählen → references/elements.md
3. Mit Einstellungen stylen — jeder _-Style-Key und seine exakte Wertform → references/style-settings.md
4. Daten verdrahten — dynamische Tags, Query Loops, Filter nach Bedarf (siehe Routing-Tabelle)
5. Validieren — Checkliste unten, dann ausliefern

Format-Kurzreferenz

Zwischenablage (im Builder einfügen) — der Standard für Abschnitte und Seiteninhalte:

{
  "content": [ /* flaches Array von Elementknoten */ ],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://example.com",
  "version": "2.3.6",
  "globalClasses": [ /* vollständige Klassenobjekte, die von _cssGlobalClasses referenziert werden */ ],
  "globalElements": []
}

Elementknoten (jeder Eintrag in content):

{
  "id": "abc123",
  "name": "heading",
  "parent": "xyz789",
  "children": [],
  "settings": {},
  "label": "Optionaler Strukturpanel-Label"
}

• id: eindeutig, 6-stellig alphanumerisch. parent: ID des Elternteils oder 0 für Root-Elemente.
• Das Array ist flach — die Hierarchie lebt vollständig in parent + children (IDs müssen exakt übereinstimmen).
• Root-Elemente sind normalerweise section; verschachtle niemals eine section innerhalb von etwas anderem.

Aufgaben-Routing

Aufgabe	Referenz
Formatauswahl, Zwischenablage/Vorlagen/Meta-Speicher, programmatisches Einfügen	references/json-formats.md
Elementkatalog, pro-Element-Einstellungen, verschachtelbare Elemente	references/elements.md
Style-Keys, Wertformen (Farbe/Typografie/Rahmen/Schatten/Verlauf/Transformation), responsive + Hover-Grammatik	references/style-settings.md
Abschnitts-/Grid-/Flex-Rezepte, Karten, Overlays, Sticky, vollständige Designs	references/layout-recipes.md
Dynamische Daten-Tags {post_title}, Argumente, {echo:}	references/dynamic-data.md
ACF (inkl. Repeater, Gruppen, Flexible Content), Meta Box, JetEngine, Pods, CMB2	references/acf-providers.md
Query Loops (hasLoop + query), Beitrags-/Begriffs-/Benutzerabfragen	references/query-loops.md
Facettenfilter, AJAX-Paginierung, "Mehr laden", unendliches Scrollen, Live-Suche	references/query-filters.md
Ein-/Ausblendebedingungen (_conditions)	references/conditions.md
Interaktionen, Animationen, Scroll-Trigger (_interactions)	references/interactions.md
Popups (Vorlagen, Trigger, Grenzen, AJAX)	references/popups.md
Vorlagentypen, Bedingungen, Import/Export, Kopf-/Fußzeile/Archiv/404	references/templates.md
Komponenten, globale Klassen, globale Variablen, Farbpalette	references/components-classes.md
Theme-Stile, Breakpoints, CSS-Generierungsreihenfolge	references/theme-styles.md
Formularelement, Aktionen, Validierung	references/forms.md
WooCommerce-Vorlagen und -Elemente	references/woocommerce.md
PHP: benutzerdefinierte Elemente mit Steuerelementen	references/custom-elements.md
PHP: Filter und Aktionen	references/hooks.md
Externe Assets von einer Referenz-URL (beliebiges Bild/Video/SVG/Icon, Hotlink vs. erneutes Hosting)	references/external-assets.md
Asset-Laden, Builder-Berechtigungen	references/assets-permissions.md

Einfügebereite Beispiele (Hero, Grids, ACF-Schleifen, gefiltertes Archiv, Kopf-/Fußzeile, Popup…): patterns/ — siehe patterns/INDEX.md.

Nicht verhandelbare Regeln

1. Flache Baumstruktur-Integrität — jede children-ID existiert als ein Knoten, dessen parent zurückverweist. Keine Waisen, keine Duplikate.
2. Nur verifizierte Wertformen — Farben sind Objekte ({"hex": "#222"} oder {"raw": "var(--x)"}), Typografie-Keys sind CSS-Eigenschaftsnamen ("font-size", nicht fontSize), box-shadow-Offsetteile werden unter values verschachtelt, Verläufe verwenden colors: [{color, stop}]. Bei Unsicherheit style-settings.md prüfen — keine Wertformen erraten.
3. Responsive Grammatik — setting:breakpoint:pseudo mit Doppelpunkten: _padding:tablet_portrait, _background:hover, _margin:mobile_portrait:hover. Standard-Breakpoint-Keys: tablet_portrait (991), mobile_landscape (767), mobile_portrait (478). Desktop ist der bloße Key.
4. Einheiten sind Strings — "3rem", "100%", "24px". Bloße Zahlen erhalten von Bricks ein px angehängt.
5. Abstandsskalen-Disziplin — wähle eine Skala (oder die globalen Variablen der Seite) und bleibe während des gesamten Designs dabei.
6. Echte Struktur, kein Füllmaterial — semantische tag-Einstellungen an Abschnitten/Blöcken (header, nav, article, aside, footer), eine h1 pro Seite, absteigende Überschriftenebenen.
7. Globale Klassen mitnehmen — jede ID, die in _cssGlobalClasses eines Elements aufgeführt ist, muss ihr vollständiges Klassenobjekt im obersten globalClasses-Array haben.
8. Keine erfundenen Einstellungs-Keys — nur Keys, die in den Referenzen dokumentiert oder in der Bricks-Quelle gefunden wurden. Unbekannte Keys werden stillschweigend ignoriert und verbrauchen das Vertrauen des Benutzers.
9. Die rem-Basis vor der Verwendung von rem bestätigen — niemals stillschweigend 1rem = 16px annehmen. Frage den Benutzer; verwende 16px nur als Standard, wenn er nicht antwortet. Konvertiere alle px-Werte, die aus einer Referenz übernommen wurden, mit der bestätigten Basis.
10. Externe Assets durch absolute url, niemals durch id referenzieren — wenn eine Referenz-URL oder Asset-URLs angegeben werden, löse jedes Asset in eine absolute URL auf und referenziere es über die Media-Steuerung mit url/external (Attachment-ids lösen sich nicht über verschiedene Sites auf). Respektiere Lizenzen — verlinke keine urheberrechtlich geschützten/Marken-Assets in die Produktion. → references/external-assets.md

Validierungs-Checkliste (vor der Auslieferung ausführen)

• JSON parst (python3 -m json.tool datei.json oder äquivalent)
• Jede parent/children-Referenz löst auf; IDs eindeutig, 6-stellig alphanumerisch
• source: "bricksCopiedElements" + version vorhanden (Zwischenablage-Format)
• Jede _cssGlobalClasses-ID hat ein passendes Objekt in globalClasses
• Wertformen stimmen mit style-settings.md überein (Stichproben Farben, Typografie, Abstände)
• Responsive Keys verwenden gültige Breakpoint-Namen
• Query Loops: hasLoop: true + query.objectType vorhanden; Filter zeigen über filterQueryId auf eine echte Query-Element-ID
• Dynamische Daten-Tags existieren für den angegebenen Feldanbieter (z.B. {acf_*} stimmt mit den Feldnamen des Benutzers überein)