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

# 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](https://docs-loja.usecorvex.com.br/cookbook/overview.md)

***

## Contratos utilizados

* [Section Contract](https://docs-loja.usecorvex.com.br/reference/contracts/section.md)
* [Block Contract](https://docs-loja.usecorvex.com.br/reference/contracts/block.md)
* [Schema Contract](https://docs-loja.usecorvex.com.br/reference/contracts/schema.md)
* Fields [`text`](https://docs-loja.usecorvex.com.br/schema/fields/text), [`richtext`](https://docs-loja.usecorvex.com.br/schema/fields/richtext)
* `@corvex/runtime` — [PUBLIC\_EDITOR\_INTEGRATION](https://docs-loja.usecorvex.com.br/reference/runtime-api.md): `SectionBlockCanvas` + `{children}` (mesma árvore no builder, `/preview` e vitrine)

***

## Objetivo

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
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](https://docs-loja.usecorvex.com.br/reference/runtime-api.md#blocks-—-adicionar,-remover-e-reordenar).

***

## Arquivos

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

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "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](https://docs-loja.usecorvex.com.br/reference/contracts/block.md).

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

***

## Block settings (`block.settings`)

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

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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](https://docs-loja.usecorvex.com.br/reference/runtime-api.md#edição-inline-—-duplo-clique-no-canvas).

***

## Section + blocks no runtime

```jsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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](https://docs-loja.usecorvex.com.br/reference/runtime-api.md#padrão-a-—-blocks-renderizados-com-children).

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

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

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


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