bricks

Autoría de JSON para Bricks Builder

Genere diseños completos de Bricks como JSON que se peguen o importen limpiamente al primer intento.

Entregable predeterminado

Produzca un archivo .json real en el espacio de trabajo (no JSON en línea) a menos que el usuario solicite lo contrario. Use la convención de carpetas del proyecto si existe; de lo contrario, bricks-json/{tipo}-{slug}.json. En la respuesta final, indique: la ruta del archivo, el formato JSON utilizado y las comprobaciones de validación realizadas.

Flujo de trabajo

0. Aclarar las entradas primero — acuerde dos cosas antes de escribir el JSON:
   • base rem — confirme a cuánto equivale 1rem en el sitio de destino (1rem = ? px). Pregunte al usuario; por defecto, use 16px si no se especifica (un reinicio html { font-size: 62.5% } lo convierte en 10px). Todos los cálculos de rem/clamp() y cualquier conversión de px→rem a partir de una referencia dependen de esto. → base rem
   • URL de referencia — si el usuario proporciona una URL (o nombra URLs de recursos), obténgala y haga referencia a sus imágenes/video/SVG/iconos mediante URL absoluta. → references/external-assets.md
1. Elegir el formato — pegado en portapapeles vs. importación de plantilla vs. inserción programática → references/json-formats.md
2. Planificar la estructura — árbol semántico de sección → contenedor → bloques; elija elementos del catálogo → references/elements.md
3. Diseñar con configuraciones — cada clave de estilo _ y la forma exacta de su valor → references/style-settings.md
4. Cablear datos — etiquetas dinámicas, bucles de consulta, filtros según sea necesario (consulte la tabla de enrutamiento)
5. Validar — lista de verificación a continuación, luego entregar

Referencia rápida de formatos

Portapapeles (pegar en el constructor) — el predeterminado para secciones y contenido de página:

{
  "content": [ /* arreglo plano de nodos de elemento */ ],
  "source": "bricksCopiedElements",
  "sourceUrl": "https://example.com",
  "version": "2.3.6",
  "globalClasses": [ /* objetos de clase completos referenciados por _cssGlobalClasses */ ],
  "globalElements": []
}

Nodo de elemento (cada entrada en content):

{
  "id": "abc123",
  "name": "heading",
  "parent": "xyz789",
  "children": [],
  "settings": {},
  "label": "Etiqueta opcional del panel de estructura"
}

• id: alfanumérico único de 6 caracteres. parent: id del padre, o 0 para elementos raíz.
• El arreglo es plano — la jerarquía reside enteramente en parent + children (los ids deben referenciarse exactamente de forma cruzada).
• Los elementos raíz suelen ser section; nunca anide una section dentro de nada.

Enrutamiento de tareas

Tarea	Referencia
Selección de formato, almacenamiento de portapapeles/plantilla/meta, inserción programática	references/json-formats.md
Catálogo de elementos, configuraciones por elemento, anidables	references/elements.md
Claves de estilo, formas de valor (color/tipografía/borde/sombra/gradiente/transformación), gramática responsive y hover	references/style-settings.md
Recetas de sección/rejilla/flex, tarjetas, superposiciones, sticky, diseños completos	references/layout-recipes.md
Etiquetas de datos dinámicos {post_title}, args, {echo:}	references/dynamic-data.md
ACF (incl. repetidores, grupos, contenido flexible), Meta Box, JetEngine, Pods, CMB2	references/acf-providers.md
Bucles de consulta (hasLoop + query), consultas de entrada/término/usuario	references/query-loops.md
Filtros facetados, paginación AJAX, cargar más, desplazamiento infinito, búsqueda en vivo	references/query-filters.md
Condiciones de mostrar/ocultar (_conditions)	references/conditions.md
Interacciones, animaciones, disparadores de desplazamiento (_interactions)	references/interactions.md
Ventanas emergentes (plantillas, disparadores, límites, AJAX)	references/popups.md
Tipos de plantilla, condiciones, importación/exportación, encabezado/pie de página/archivo/404	references/templates.md
Componentes, clases globales, variables globales, paleta de colores	references/components-classes.md
Estilos de tema, puntos de interrupción, orden de generación de CSS	references/theme-styles.md
Elemento de formulario, acciones, validación	references/forms.md
Plantillas y elementos de WooCommerce	references/woocommerce.md
PHP: elementos personalizados con controles	references/custom-elements.md
PHP: filtros y acciones	references/hooks.md
Activos externos desde una URL de referencia (cualquier imagen/video/SVG/icono, enlace directo vs. re-hospedaje)	references/external-assets.md
Carga de activos, permisos del constructor	references/assets-permissions.md

Ejemplos listos para pegar (héroe, rejillas, bucles ACF, archivo filtrado, encabezado/pie de página, ventana emergente…): patterns/ — consulte patterns/INDEX.md.

Reglas no negociables

1. Integridad del árbol plano — cada id de children existe como un nodo cuyo parent apunta de regreso. Sin huérfanos, sin duplicados.
2. Solo formas de valor verificadas — los colores son objetos ({"hex": "#222"} o {"raw": "var(--x)"}), las claves de tipografía son nombres de propiedades CSS ("font-size", no fontSize), los desplazamientos de box-shadow se anidan bajo values, los gradientes usan colors: [{color, stop}]. En caso de duda, consulte style-settings.md — no adivine las formas.
3. Gramática responsive — setting:breakpoint:pseudo con dos puntos: _padding:tablet_portrait, _background:hover, _margin:mobile_portrait:hover. Claves de punto de interrupción predeterminadas: tablet_portrait (991), mobile_landscape (767), mobile_portrait (478). El escritorio es la clave simple.
4. Las unidades son cadenas — "3rem", "100%", "24px". Los números simples reciben px añadido por Bricks.
5. Disciplina de escala de espaciado — elija una escala (o las variables globales del sitio) y manténgala en todo el diseño.
6. Estructura real, sin relleno — configuraciones semánticas tag en secciones/bloques (header, nav, article, aside, footer), un h1 por página, niveles de encabezado descendentes.
7. Las clases globales viajan adjuntas — cualquier id listado en _cssGlobalClasses de un elemento debe tener su objeto de clase completo en el arreglo globalClasses de nivel superior.
8. No invente claves de configuración — solo claves documentadas en las referencias o encontradas en la fuente de Bricks. Las claves desconocidas se ignoran silenciosamente y desperdician la confianza del usuario.
9. Confirme la base rem antes de usar rem — nunca asuma 1rem = 16px en silencio. Pregunte al usuario; use 16px solo cuando no responda. Convierta cualquier valor px extraído de una referencia usando la base confirmada.
10. Haga referencia a activos externos mediante url absoluta, nunca id — cuando se proporcione una URL de referencia o URLs de activos, resuelva cada activo a una URL absoluta y haga referencia a él mediante url/external del control de medios (los id de archivos adjuntos no se resuelven entre sitios). Respete las licencias — no enlace directamente activos protegidos por derechos de autor/de marca en producción. → references/external-assets.md

Lista de verificación de validación (ejecutar antes de entregar)

• El JSON se analiza (python3 -m json.tool archivo.json o equivalente)
• Cada referencia parent/children se resuelve; ids únicos, alfanuméricos de 6 caracteres
• source: "bricksCopiedElements" + version presente (formato de portapapeles)
• Cada id de _cssGlobalClasses tiene un objeto coincidente en globalClasses
• Las formas de valor coinciden con style-settings.md (verificar puntualmente colores, tipografía, espaciado)
• Las claves responsive usan nombres de punto de interrupción válidos
• Bucles de consulta: hasLoop: true + query.objectType presente; los filtros apuntan a un id de elemento de consulta real mediante filterQueryId
• Las etiquetas de datos dinámicos existen para el proveedor de campo indicado (por ejemplo, {acf_*} coincide con los nombres de campo del usuario)