Skip to main content

FAQ

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


Objetivo

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

Arquivos


blocks.json

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:
Duplo clique no builder (Inspecionar ativo) — ver Runtime API.

Section + blocks no runtime

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.

CSS

Use seletor descendente para blocks no DOM da section:

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 V2).
  • 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/.