> ## Documentation Index
> Fetch the complete documentation index at: https://docs-loja.usecorvex.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# 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
```

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "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

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
// 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 ≡).

> [!WARNING]
>
> 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](https://docs-loja.usecorvex.com.br/reference/contracts/section.md#fazer-/-não-fazer-section.jsx).

Implementação: [Runtime API — Padrão A](https://docs-loja.usecorvex.com.br/reference/runtime-api.md#padrão-a-—-blocks-renderizados-com-children).

Bloco contêiner (grupo com filhos): [Block Contract](https://docs-loja.usecorvex.com.br/reference/contracts/block.md#bloco-contêiner-grupo) e [Colunas agrupadas](https://docs-loja.usecorvex.com.br/cookbook/grouped-columns.md). Não confundir com `layoutGroups`.

***

## Instância persistida (loja)

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "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/` |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.