FAQ

Cookbook — section com blocks repetíveis e accordion acessível.

Quero uma seção FAQ com perguntas editáveis. Qual é a implementação recomendada?

Referência: seu tema (adaptado do cookbook) + blocks/faq-item/

Índice: Cookbooks

---

Contratos utilizados

• Section Contract
• Block Contract
• Schema Contract
• Fields text, richtext
• @corvex/runtime — PUBLIC_EDITOR_INTEGRATION: SectionBlockCanvas + {children} (mesma árvore no builder, /preview e vitrine)

---

Objetivo

FAQ Section
└── FAQ Item Block (repetível)
    ├── question (text)
    └── answer (richtext)

O lojista adiciona/remove/reordena blocks no painel Itens do editor (≡ drag). Tema: Runtime API — blocks.

---

Arquivos

sections/faq/
├── section.jsx
├── schema.json
├── blocks.json
└── styles.css

blocks/faq-item/
├── block.jsx
└── schema.json

theme.json → sections: ["faq"], blocks: ["faq-item"]

---

blocks.json

{
  "blocks": [{ "type": "faq-item" }],
  "max_blocks": 24
}

Coloque blocks.json na pasta da section. O Editor usa esse arquivo para saber quais blocks o lojista pode adicionar — ver Block Contract.

corvex build (≥ 2.3.4) anexa o JSON no bundle. Não importe blocks.json no section.jsx e não declare propriedade estática no componente. Nome do inspector = schema.json → name. Section Contract — fazer / não fazer.

---

Block settings (block.settings)

O block recebe settings como namespace — não props flat na raiz:

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

export default function FaqItemBlock({ settings = {} }) {
  …
  <BlockInlineText
    fieldKey="question"
    tag="span"
    value={settings.question || 'Pergunta'}
  />
}

Duplo clique no builder (Inspecionar ativo) — ver Runtime API.

---

Section + blocks no runtime

import { SectionBlockCanvas, SectionChrome } from '@corvex/runtime';

export default function FaqSection({ children, settings = {} }) {
  return (
    <SectionChrome label="FAQ" settings={settings}>
      <SectionBlockCanvas className="faq-section__list">
        {children}
      </SectionBlockCanvas>
    </SectionChrome>
  );
}

No canvas do editor, use sempre {children} — a plataforma monta cada faq-item block e persiste drag-and-drop. Ver Runtime API — Padrão A.

children são os blocks instanciados; cada instância da FAQ mantém sua própria árvore.

---

Acessibilidade (accordion)

Cada block gerencia seu estado local (useState) — múltiplas FAQs na página não conflitam.

<button
  type="button"
  aria-expanded={open}
  aria-controls={panelId}
  onClick={() => setOpen((v) => !v)}
>
  {question}
</button>
<div id={panelId} role="region" hidden={!open}>
  …
</div>

---

CSS

Use seletor descendente para blocks no DOM da section:

.faq-section__list .cx-block {
  width: 100%;
  min-width: 0;
}

---

Comportamento no Editor

• Inspector da section: título (text).
• Painel “Blocks”: adicionar faq-item, reordenar, até max_blocks.
• No canvas, com inspecionar ativo, arrastar um item persiste a mesma ordem do painel.
• Inspector do block: pergunta + resposta rich text.

---

Cuidados

• Não usar document.querySelector global.
• Não aninhar blocks dentro de blocks (não suportado no contrato atual).
• Empty state quando children ausente.

---

Checklist

• blocks.json na pasta da section
• Block registrado em theme.json → blocks[]
• block.settings no componente do block
• {children} uma vez dentro de SectionBlockCanvas
• corvex validate passa

Código completo: seu tema (adaptado do cookbook) e blocks/faq-item/.