Sections

Sections são blocos de conteúdo reutilizáveis que os editores podem inserir em qualquer conteúdo através de comandos slash. Use-as para padrões comuns como CTAs, depoimentos, grades de recursos ou qualquer conteúdo que apareça em várias páginas.

Consultar Sections

getSection

O exemplo a seguir busca uma única section por slug:

import { getSection } from "emdash";

const cta = await getSection("newsletter-cta");

if (cta) {
  console.log(cta.title);    // "Newsletter CTA"
  console.log(cta.content);  // PortableTextBlock[]
}

getSections

O exemplo a seguir busca múltiplas sections com filtros opcionais:

import { getSections } from "emdash";

// Get all sections
const { items: all } = await getSections();

// Filter by source
const { items: themeSections } = await getSections({ source: "theme" });

// Search by title/keywords
const { items: results } = await getSections({ search: "newsletter" });

getSections retorna { items: Section[], nextCursor?: string } seguindo o padrão de paginação padrão.

Estrutura da Section

Uma section tem a seguinte forma:

interface Section {
  id: string;
  slug: string;
  title: string;
  description?: string;
  keywords: string[];
  content: PortableTextBlock[];
  previewUrl?: string;
  source: "theme" | "user" | "import";
  themeId?: string;
  createdAt: string;
  updatedAt: string;
}

Tipos de origem

Usar Sections no conteúdo

Os editores inserem sections usando o comando slash /section no editor de texto rico.

O conteúdo Portable Text da section é copiado para o documento. O conteúdo inserido é autônomo: os editores podem personalizá-lo, e alterações posteriores na section não afetam as cópias já colocadas no conteúdo.

Criar Sections

Na interface de administração

1. Navegue até Sections na barra lateral do admin

2. Clique em New Section

3. Preencha:

   • Title - Nome de exibição da section
   • Slug - Identificador de URL (gerado automaticamente a partir do título)
   • Description - Texto de ajuda para editores

4. Adicione conteúdo usando o editor de texto rico

5. Opcionalmente defina palavras-chave para facilitar a descoberta

Via arquivos Seed

O seguinte arquivo seed define duas sections para um tema:

{
  "sections": [
    {
      "slug": "hero-centered",
      "title": "Centered Hero",
      "description": "Full-width hero with centered heading and CTA",
      "keywords": ["hero", "banner", "header"],
      "content": [
        {
          "_type": "block",
          "style": "h1",
          "children": [{ "_type": "span", "text": "Welcome to Our Site" }]
        },
        {
          "_type": "block",
          "children": [{ "_type": "span", "text": "Your tagline goes here." }]
        }
      ]
    },
    {
      "slug": "newsletter-cta",
      "title": "Newsletter CTA",
      "keywords": ["newsletter", "subscribe", "email"],
      "content": [
        {
          "_type": "block",
          "style": "h3",
          "children": [{ "_type": "span", "text": "Subscribe to our newsletter" }]
        }
      ]
    }
  ]
}

Via importação do WordPress

Blocos reutilizáveis do WordPress (tipo de post wp_block) são automaticamente importados como sections:

• Source é definido como "import"
• Conteúdo Gutenberg convertido para Portable Text

Renderizar Sections programaticamente

O exemplo a seguir renderiza o conteúdo de uma section no lado do servidor, fora do editor:

---
import { getSection } from "emdash";
import { PortableText } from "emdash/ui";

const newsletter = await getSection("newsletter-cta");
---

{newsletter && (
  <aside class="cta-box">
    <PortableText value={newsletter.content} />
  </aside>
)}

Recursos da interface de administração

A biblioteca Sections (/_emdash/admin/sections) fornece:

• Visualização em grade com prévias de sections
• Pesquisa por título e palavras-chave
• Filtro por origem
• Cópia rápida do slug para a área de transferência
• Editar conteúdo e metadados da section
• Excluir com confirmação (avisa para sections de tema)

Referência da API

getSection(slug)

Busque uma section por slug.

Parâmetros:

• slug — O identificador único da section (string)

Retorna: Promise<Section | null>

getSections(options?)

Liste sections com filtros opcionais.

Parâmetros:

• options.source — Filtrar por origem: "theme", "user" ou "import"
• options.search — Pesquisar título, descrição e palavras-chave
• options.limit — Tamanho da página (padrão 50, máximo 100)
• options.cursor — Cursor de paginação de um nextCursor anterior

Retorna: Promise<{ items: Section[]; nextCursor?: string }>

REST API

Listar Sections

Liste sections, opcionalmente filtradas por origem ou termo de pesquisa:

GET /_emdash/api/sections
GET /_emdash/api/sections?source=theme
GET /_emdash/api/sections?search=newsletter

Obter Section

Busque uma única section por slug:

GET /_emdash/api/sections/newsletter-cta

Criar Section

Crie uma section com uma requisição POST:

POST /_emdash/api/sections
Content-Type: application/json

{
  "slug": "my-section",
  "title": "My Section",
  "description": "Optional description",
  "keywords": ["keyword1", "keyword2"],
  "content": [...]
}

Atualizar Section

Atualize uma section com uma requisição PUT:

PUT /_emdash/api/sections/my-section
Content-Type: application/json

{
  "title": "Updated Title",
  "content": [...]
}

Excluir Section

Exclua uma section por slug:

DELETE /_emdash/api/sections/my-section

Próximos passos

• Trabalhar com conteúdo - Aprenda sobre o editor de texto rico
• Widget Areas - Para conteúdo dinâmico sincronizado
• Importação de conteúdo - Importar blocos reutilizáveis do WordPress