bricks

Criação de JSON para Bricks Builder

Gere designs completos para o Bricks como JSON que cola ou importa perfeitamente na primeira tentativa.

Entregável Padrão

Produza um arquivo .json real no workspace (não JSON inline), a menos que o usuário solicite o contrário. Use a convenção de pastas do projeto, se existir; caso contrário, use bricks-json/{tipo}-{slug}.json. Na resposta final, informe: o caminho do arquivo, qual formato JSON você usou e as verificações de validação executadas.

Fluxo de Trabalho

0. Esclareça as entradas primeiro — resolva duas coisas antes de escrever o JSON:
   • base rem — confirme a quanto equivale 1rem no site alvo (1rem = ? px). Pergunte ao usuário; o padrão é 16px se não for especificado (um reset html { font-size: 62.5% } torna 10px). Todos os cálculos de rem/clamp() e qualquer conversão px→rem a partir de uma referência dependem disso. → base rem
   • URL de referência — se o usuário fornecer uma (ou nomear URLs de ativos), busque-a e referencie suas imagens/vídeo/SVG/ícones por URL absoluta. → references/external-assets.md
1. Escolha o formato — colagem via área de transferência vs importação de modelo vs inserção programática → references/json-formats.md
2. Planeje a estrutura — seção semântica → container → árvore de blocos; escolha elementos do catálogo → references/elements.md
3. Estilize com configurações — cada chave de estilo _ e sua forma de valor exata → references/style-settings.md
4. Conecte dados — tags dinâmicas, loops de consulta, filtros conforme necessário (veja a tabela de roteamento)
5. Valide — checklist abaixo, então entregue

Referência Rápida de Formatos

Área de transferência (colar no builder) — o padrão para seções e conteúdo de página:

{
  "content": [ /* array plano de nós de elemento */ ],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://exemplo.com",
  "version": "2.3.6",
  "globalClasses": [ /* objetos de classe completos referenciados por _cssGlobalClasses */ ],
  "globalElements": []
}

Nó de elemento (cada entrada em content):

{
  "id": "abc123",
  "name": "heading",
  "parent": "xyz789",
  "children": [],
  "settings": {},
  "label": "Rótulo opcional do painel de estrutura"
}

• id: alfanumérico único de 6 caracteres. parent: id do pai, ou 0 para elementos raiz.
• O array é plano — a hierarquia vive inteiramente em parent + children (os ids devem se referenciar exatamente).
• Elementos raiz geralmente são section; nunca aninhe uma section dentro de algo.

Roteamento de Tarefas

Tarefa	Referência
Seleção de formato, armazenamento em área de transferência/modelo/meta, inserção programática	references/json-formats.md
Catálogo de elementos, configurações por elemento, aninháveis	references/elements.md
Chaves de estilo, formas de valor (cor/tipografia/borda/sombra/gradiente/transform), gramática responsiva + hover	references/style-settings.md
Receitas de seção/grid/flex, cards, sobreposições, sticky, designs completos	references/layout-recipes.md
Tags de dados dinâmicos {post_title}, argumentos, {echo:}	references/dynamic-data.md
ACF (incl. repetidores, grupos, conteúdo flexível), Meta Box, JetEngine, Pods, CMB2	references/acf-providers.md
Loops de consulta (hasLoop + query), consultas de post/termo/usuário	references/query-loops.md
Filtros facetados, paginação AJAX, carregar mais, scroll infinito, pesquisa ao vivo	references/query-filters.md
Condições de mostrar/esconder (_conditions)	references/conditions.md
Interações, animações, gatilhos de scroll (_interactions)	references/interactions.md
Popups (modelos, gatilhos, limites, AJAX)	references/popups.md
Tipos de modelo, condições, importação/exportação, cabeçalho/rodapé/arquivo/404	references/templates.md
Componentes, classes globais, variáveis globais, paleta de cores	references/components-classes.md
Estilos de tema, breakpoints, ordem de geração CSS	references/theme-styles.md
Elemento de formulário, ações, validação	references/forms.md
Modelos e elementos WooCommerce	references/woocommerce.md
PHP: elementos personalizados com controles	references/custom-elements.md
PHP: filtros e ações	references/hooks.md
Ativos externos de uma URL de referência (qualquer imagem/vídeo/SVG/ícone, hotlink vs re-hospedagem)	references/external-assets.md
Carregamento de ativos, permissões do builder	references/assets-permissions.md

Exemplos prontos para colar (hero, grids, loops ACF, arquivo filtrado, cabeçalho/rodapé, popup…): patterns/ — veja patterns/INDEX.md.

Regras Inegociáveis

1. Integridade da árvore plana — cada id em children existe como um nó cujo parent aponta de volta. Sem órfãos, sem duplicatas.
2. Apenas formas de valor verificadas — cores são objetos ({"hex": "#222"} ou {"raw": "var(--x)"}), chaves de tipografia são nomes de propriedades CSS ("font-size", não fontSize), deslocamentos de box-shadow aninham sob values, gradientes usam colors: [{color, stop}]. Quando estiver em dúvida, consulte style-settings.md — não adivinhe formas.
3. Gramática responsiva — configuração:breakpoint:pseudo com dois pontos: _padding:tablet_portrait, _background:hover, _margin:mobile_portrait:hover. Chaves de breakpoint padrão: tablet_portrait (991), mobile_landscape (767), mobile_portrait (478). Desktop é a chave simples.
4. Unidades são strings — "3rem", "100%", "24px". Números simples recebem px anexado pelo Bricks.
5. Disciplina na escala de espaçamento — escolha uma escala (ou as variáveis globais do site) e mantenha-a em todo o design.
6. Estrutura real, sem preenchimento — configurações de tag semânticas em seções/blocos (header, nav, article, aside, footer), um h1 por página, níveis de cabeçalho descendentes.
7. Classes globais acompanham — qualquer id listado em _cssGlobalClasses de um elemento deve ter seu objeto de classe completo no array globalClasses de nível superior.
8. Não invente chaves de configuração — apenas chaves documentadas nas referências ou encontradas na fonte do Bricks. Chaves desconhecidas são silenciosamente ignoradas e desperdiçam a confiança do usuário.
9. Confirme a base rem antes de usar rem — nunca presuma silenciosamente que 1rem = 16px. Pergunte ao usuário; use 16px como padrão apenas quando ele não responder. Converta quaisquer valores px obtidos de uma referência usando a base confirmada.
10. Referencie ativos externos por url absoluta, nunca por id — quando uma URL de referência ou URLs de ativos forem fornecidas, resolva cada ativo para uma URL absoluta e referencie-o via url/external do controle de mídia (ids de anexo id não resolvem entre sites). Respeite o licenciamento — não faça hotlink de ativos protegidos por direitos autorais/marca em produção. → references/external-assets.md

Checklist de Validação (execute antes de entregar)

• O JSON é válido (python3 -m json.tool arquivo.json ou equivalente)
• Toda referência parent/children é resolvida; ids são únicos, alfanumérico de 6 caracteres
• source: "bricksCopiedElements" + version presentes (formato de área de transferência)
• Cada id em _cssGlobalClasses tem um objeto correspondente em globalClasses
• Formas de valor correspondem a style-settings.md (verifique cores, tipografia, espaçamento por amostragem)
• Chaves responsivas usam nomes de breakpoint válidos
• Loops de consulta: hasLoop: true + query.objectType presente; filtros apontam para um id de elemento de consulta real via filterQueryId
• Tags de dados dinâmicos existem para o provedor de campo informado (ex.: {acf_*} corresponde aos nomes de campo do usuário)