Colunas agrupadas

Cookbook — bloco contêiner (grupo) com um nível de filhos aninhados.

Quero um grupo que aceita outros blocos dentro, como colunas de rodapé. Qual é a implementação recomendada?

Índice: Cookbooks

---

Contratos utilizados

• Section Contract
• Block Contract — bloco contêiner
• Schema Contract
• @corvex/runtime — SectionBlockCanvas na seção e BlockCanvas no bloco contêiner

Isto não é grupo de layout (layoutGroups / groups/*.json). Grupo de layout organiza seções globais (cabeçalho e rodapé). Bloco contêiner organiza blocos dentro de uma seção.

---

Objetivo

Seção Colunas agrupadas
└── Bloco grupo (contêiner)
    └── Bloco texto (folha)

Um nível extra só. O grupo não lista outro grupo em blocks.json.

---

Arquivos

sections/grouped-columns/
├── section.jsx
├── schema.json
├── blocks.json
└── styles.css

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

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

theme.json: IDs em sections[] e blocks[].

---

Manifest

Seção — só o contêiner:

{
  "blocks": [{ "type": "group" }],
  "max_blocks": 6
}

Grupo — só folhas:

{
  "blocks": [{ "type": "text" }],
  "max_blocks": 12
}

corvex build anexa os dois manifests. Não importe blocks.json no JSX.

---

JSX

Seção: {children} em SectionBlockCanvas.

Grupo: {children} em BlockCanvas. Sem .map de filhos.

import { BlockCanvas } from '@corvex/runtime';

export default function GroupBlock({ settings = {}, children }) {
  const direction = settings.direction === 'row' ? 'row' : 'column';
  return (
    <div className={`group-block group-block--${direction}`}>
      <BlockCanvas className="group-block__canvas">{children}</BlockCanvas>
    </div>
  );
}

---

Theme Defaults

Looks iniciais ficam em templates/*.json, com blocks e block_order dentro do grupo:

{
  "type": "grouped-columns",
  "settings": { "title": "Rodapé em grupos" },
  "blocks": {
    "g1": {
      "type": "group",
      "settings": { "direction": "column" },
      "blocks": {
        "t1": { "type": "text", "settings": { "text": "Join the club" } }
      },
      "block_order": ["t1"]
    }
  },
  "block_order": ["g1"]
}

Bloco sem block_order continua folha.

---

Checklist

• blocks/{id}/blocks.json só no contêiner
• Filho do grupo é folha (sem blocks.json próprio)
• {children} na seção (SectionBlockCanvas) e no grupo (BlockCanvas)
• Template com JSON aninhado, sem banners inventados no JSX
• corvex validate aceita o tema; rejeita grupo dentro de grupo