Blocks

blocks/ — módulos menores editáveis dentro de uma section, reordenáveis pelo lojista.

Pasta: blocks/

Sections são regiões. Blocks são conteúdo dentro da região.

---

Regra mental

SECTION  = região da página
BLOCK    = componente dentro da região

Section	Blocks
Hero	heading, text, button, image
Testimonials	depoimento, depoimento, depoimento
Main product	title, price, variant-picker, buy-buttons

---

Estrutura

blocks/heading/
├── block.jsx
└── schema.json

blocks/group/          ← opcional: bloco contêiner
├── block.jsx
├── schema.json
└── blocks.json

{
  "name": "Título",
  "settings": [
    { "type": "text", "id": "text", "label": "Texto", "default": "Título" },
    {
      "type": "select",
      "id": "size",
      "label": "Tamanho",
      "options": [{ "value": "md", "label": "Médio" }]
    }
  ]
}

---

Section com blocks

// sections/hero/blocks.json
{
  "blocks": [
    { "type": "heading" },
    { "type": "text" },
    { "type": "button" },
    { "type": "image" }
  ],
  "max_blocks": 12
}

A section com blocks habilita área de blocks no inspetor lateral. O lojista adiciona, remove e reordena blocks (painel Itens — arrastar ≡).

No canvas do editor use sempre {children} — nunca monte cards com blocks.map() / block_order (blocks fantasma: drag no canvas não persiste).

A section declara os tipos em sections/{id}/blocks.json. Não importe esse JSON no JSX. Fazer / não fazer.

Implementação: Runtime API — Padrão A.

Bloco contêiner (grupo com filhos): Block Contract e Colunas agrupadas. Não confundir com layoutGroups.

---

Instância persistida (loja)

{
  "type": "hero",
  "settings": { "height": "large" },
  "blocks": {
    "b1": { "type": "heading", "settings": { "text": "Black Friday" } },
    "b2": { "type": "button", "settings": { "label": "Comprar" } }
  },
  "block_order": ["b1", "b2"]
}

---

Block vs Snippet

	Block	Snippet
Editor	Lojista adiciona/reordena	Invisível
Schema	Sim	Não
Pasta	blocks/	snippets/