bricks

Bricks Builder JSON オーサリング

初回でペーストまたはインポートしたときにクリーンに動作する、完全な Bricks デザインを JSON として生成します。

デフォルトの成果物

ユーザーが特に指定しない限り、インライン JSON ではなく、ワークスペースに実際の .json ファイルを生成します。プロジェクトにフォルダー規約が存在する場合はそれに従い、存在しない場合は bricks-json/{type}-{slug}.json とします。最終的な応答では、ファイルパス、使用した JSON 形式、実行した検証チェックを明記します。

ワークフロー

0. 最初に入力を明確にする — JSON を書き始める前に、次の 2 つを確定します。
   • リム基準値 (rem base) — ターゲットサイトで 1rem が何ピクセルに相当するかを確認します。ユーザーに質問し、指定がない場合はデフォルトの 16px とします（html { font-size: 62.5% } リセットがある場合は 10px）。すべての rem/clamp() の計算や、参考値からの px→rem 変換は、この基準値に依存します。 → リム基準値
   • 参照 URL — ユーザーが参照 URL（またはアセット URL の名前）を提供した場合は、それを取得し、画像/動画/SVG/アイコンを絶対 URL で参照します。 → references/external-assets.md
1. 形式を選択 — クリップボードペースト vs テンプレートインポート vs プログラムによる挿入 → references/json-formats.md
2. 構造を計画 — 意味論的なセクション → コンテナ → ブロックツリー。カタログから要素を選択 → references/elements.md
3. 設定でスタイルを適用 — すべての _ スタイルキーとその正確な値の形状 → references/style-settings.md
4. データを配線 — 動的タグ、クエリループ、必要に応じてフィルター（ルーティングテーブルを参照）
5. 検証 — 以下のチェックリストを実行し、成果物を提供

形式クイックリファレンス

クリップボード（ビルダーに貼り付け） — セクションやページコンテンツのデフォルト：

{
  "content": [ /* 要素ノードのフラット配列 */ ],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://example.com",
  "version": "2.3.6",
  "globalClasses": [ /* _cssGlobalClasses で参照される完全なクラスオブジェクト */ ],
  "globalElements": []
}

要素ノード（content 内の各エントリ）：

{
  "id": "abc123",
  "name": "heading",
  "parent": "xyz789",
  "children": [],
  "settings": {},
  "label": "オプションの構造パネルラベル"
}

• id: 一意の 6 文字の英数字。parent: 親の id、ルート要素の場合は 0。
• 配列は フラット — 階層は完全に parent + children に依存します（id は完全に相互参照する必要があります）。
• ルート要素は通常 section であり、section を何かの内部にネストすることはありません。

タスクルーティング

タスク	リファレンス
形式選択、クリップボード/テンプレート/メタストレージ、プログラムによる挿入	references/json-formats.md
要素カタログ、要素ごとの設定、ネスト可能要素	references/elements.md
スタイルキー、値の形状（色/タイポグラフィ/枠線/シャドウ/グラデーション/変形）、レスポンシブ + ホバー文法	references/style-settings.md
セクション/グリッド/フレックスレシピ、カード、オーバーレイ、スティッキー、完全デザイン	references/layout-recipes.md
動的データタグ {post_title}、引数、{echo:}	references/dynamic-data.md
ACF（リピーター、グループ、フレキシブルコンテンツを含む）、Meta Box、JetEngine、Pods、CMB2	references/acf-providers.md
クエリループ（hasLoop + query）、投稿/ターム/ユーザークエリ	references/query-loops.md
ファセットフィルター、AJAX ページネーション、もっと読み込む、無限スクロール、ライブ検索	references/query-filters.md
表示/非表示条件 (_conditions)	references/conditions.md
インタラクション、アニメーション、スクロールトリガー (_interactions)	references/interactions.md
ポップアップ（テンプレート、トリガー、制限、AJAX）	references/popups.md
テンプレートタイプ、条件、インポート/エクスポート、ヘッダー/フッター/アーカイブ/404	references/templates.md
コンポーネント、グローバルクラス、グローバル変数、カラーパレット	references/components-classes.md
テーマスタイル、ブレークポイント、CSS 生成順序	references/theme-styles.md
フォーム要素、アクション、バリデーション	references/forms.md
WooCommerce テンプレートと要素	references/woocommerce.md
PHP: コントロール付きカスタム要素	references/custom-elements.md
PHP: フィルターとアクション	references/hooks.md
参照 URL からの外部アセット（任意の画像/動画/SVG/アイコン、ホットリンク vs 再ホスト）	references/external-assets.md
アセット読み込み、ビルダー権限	references/assets-permissions.md

ペースト準備完了の例（ヒーロー、グリッド、ACF ループ、フィルター付きアーカイブ、ヘッダー/フッター、ポップアップ…）： patterns/ — patterns/INDEX.md を参照。

絶対ルール

1. フラットツリーの整合性 — すべての children id は、その parent が逆参照するノードとして存在します。孤立または重複は禁止です。
2. 検証済みの値の形状のみ — 色はオブジェクト（{"hex": "#222"} または {"raw": "var(--x)"}）、タイポグラフィキーは CSS プロパティ名（"font-size"、fontSize ではない）、box-shadow のオフセットは values の下にネスト、グラデーションは colors: [{color, stop}] を使用します。不明な場合は style-settings.md を確認し、形状を推測しないでください。
3. レスポンシブ文法 — コロン区切りで setting:breakpoint:pseudo： _padding:tablet_portrait、_background:hover、_margin:mobile_portrait:hover。デフォルトのブレークポイントキー： tablet_portrait (991)、mobile_landscape (767)、mobile_portrait (478)。デスクトップはベアキーです。
4. 単位は文字列 — "3rem"、"100%"、"24px"。裸の数値は Bricks によって px が追加されます。
5. スペーシングスケールの規律 — スケール（またはサイトのグローバル変数）を選択し、デザイン全体でそれを守ります。
6. 実際の構造、フィラーなし — セクション/ブロックの意味論的な tag 設定（header、nav、article、aside、footer）、ページごとに 1 つの h1、見出しレベルは降順。
7. グローバルクラスは一緒に含める — 要素の _cssGlobalClasses にリストされているすべての id は、トップレベルの globalClasses 配列に完全なクラスオブジェクトが存在する必要があります。
8. 設定キーを発明しない — リファレンスに記載されているか、Bricks ソースにあるキーのみを使用します。不明なキーは静かに無視され、ユーザーの信頼を損ないます。
9. rem を使用する前にリム基準値を確認 — 決して 1rem = 16px と黙って想定しないでください。ユーザーに質問し、回答がない場合のみデフォルトの 16px とします。確認された基準値を使用して、参照から取得した px 値を変換します。
10. 外部アセットは絶対 url で参照し、id では参照しない — 参照 URL またはアセット URL が指定された場合、すべてのアセットを絶対 URL に解決し、メディアコントロールの url/external を介して参照します（添付 id はクロスサイトで解決されません）。ライセンスを尊重し、著作権で保護された/ブランドアセットを本番環境にホットリンクしないでください。 → references/external-assets.md

検証チェックリスト（提供前に実行）

• JSON がパースできる（python3 -m json.tool file.json または同等のコマンド）
• すべての parent/children 参照が解決可能、id が一意で 6 文字の英数字
• source: "bricksCopiedElements" + version が存在する（クリップボード形式の場合）
• すべての _cssGlobalClasses id が globalClasses に一致するオブジェクトを持つ
• 値の形状が style-settings.md と一致する（色、タイポグラフィ、スペーシングをスポットチェック）
• レスポンシブキーが有効なブレークポイント名を使用している
• クエリループ: hasLoop: true + query.objectType が存在する、フィルターが filterQueryId を介して実際のクエリ要素 id を指している
• 動的データタグが指定されたフィールドプロバイダーに存在する（例： {acf_*} がユーザーのフィールド名と一致する）