Seções

Nesta página

Seções são blocos reutilizáveis que editores inserem com comandos de barra em qualquer conteúdo. Use-as para CTAs, depoimentos, grades de recursos ou padrões recorrentes.

Consultar seções

getSection

Carregar uma seção pelo slug:

import { getSection } from "emdash";

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

if (cta) {
  console.log(cta.title);
  console.log(cta.content);
}

getSections

Várias seções com filtros opcionais:

import { getSections } from "emdash";

const { items: all } = await getSections();
const { items: themeSections } = await getSections({ source: "theme" });
const { items: results } = await getSections({ search: "newsletter" });

getSections devolve { items: Section[], nextCursor?: string } no padrão usual de paginação.

Estrutura

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

OrigemDescrição
themeDefinido no seed, gerido pelo tema
userCriado no admin pelos editores
importImportado do WordPress (blocos reutilizáveis)

Seções no conteúdo

Inserção com /section no editor de texto rico:

  1. Digite /section (ou /pattern, /block, /template)

  2. Pesquise ou navegue pelas seções

  3. Clique para inserir o conteúdo na posição do cursor

O Portable Text da seção é copiado para o documento:

  • Alterações futuras na seção não afetam o que já foi inserido
  • O conteúdo inserido pode ser personalizado
  • O conteúdo permanece autónomo

Criar seções

No admin

  1. Abra Sections na barra lateral

  2. Clique em New Section

  3. Preencha:

    • Title — nome de exibição
    • Slug — identificador de URL (muitas vezes automático a partir do título)
    • Description — texto de ajuda para editores
  4. Adicione conteúdo no editor rico

  5. Opcional: Keywords para pesquisa

Via ficheiro seed

Seções no seed do 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" }]
        }
      ]
    }
  ]
}

Importação WordPress

Blocos reutilizáveis do WordPress (wp_block) são importados como seções:

  • source é "import"
  • Conteúdo Gutenberg é convertido para Portable Text

Renderização no 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>
)}

Interface de administração

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

  • Vista em grelha com pré-visualizações
  • Pesquisa por título e palavras-chave
  • Filtro por origem
  • Copiar slug
  • Editar conteúdo e metadados
  • Eliminar com confirmação (aviso para seções do tema)

Referência da API

getSection(slug)

Carrega uma seção pelo slug.

Parâmetro:

  • slug — identificador único (string)

Retorno: Promise<Section | null>

getSections(options?)

Lista seções com filtros.

Parâmetros:

  • options.source"theme", "user" ou "import"
  • options.search — pesquisa em título e palavras-chave

Retorno: Promise<Section[]> (como na documentação em inglês)

API REST

Listar seções

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

Obter uma seção

GET /_emdash/api/sections/newsletter-cta

Criar uma seção

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

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

Atualizar uma seção

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

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

Eliminar uma seção

DELETE /_emdash/api/sections/my-section

Próximos passos