Bricks Builder JSON 生成器

Bricks Builder JSON 创作

生成完整且能够首次粘贴或导入就干净无误的 Bricks 设计 JSON。

默认交付物

在工作区生成一个实际的 .json 文件（除非用户另有要求）。使用现有项目的文件夹约定，否则使用 bricks-json/{type}-{slug}.json。在最终回复中说明：文件路径、使用的 JSON 格式以及执行的验证检查。

工作流程

0. 首先明确输入 — 在编写 JSON 之前先确定两件事：
   • rem 基准 — 确认目标站点上 1rem 等于多少像素。询问用户；如果未指定，默认值为 16px（如果存在 html { font-size: 62.5% } 重置，则为 10px）。所有 rem/clamp() 计算以及从参考中进行的 px→rem 转换都取决于此。 → rem 基准
   • 参考 URL — 如果用户提供了（或指定了资源 URL），则获取它，并通过绝对 URL 引用其图片/视频/SVG/图标。 → 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 内部嵌套 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），每页一个 h1，标题级别降序。
7. 全局类随附 — 元素 _cssGlobalClasses 中列出的任何 id 其完整类对象必须存在于顶层 globalClasses 数组中。
8. 不发明新的设置键 — 仅使用参考文档中记载或 Bricks 源码中存在的键。未知键会被静默忽略，浪费用户的信任。
9. 使用 rem 之前确认 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_*} 与用户输入的字段名称一致）