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
| Origem | Descrição |
|---|---|
theme | Definido no seed, gerido pelo tema |
user | Criado no admin pelos editores |
import | Importado do WordPress (blocos reutilizáveis) |
Seções no conteúdo
Inserção com /section no editor de texto rico:
-
Digite
/section(ou/pattern,/block,/template) -
Pesquise ou navegue pelas seções
-
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
-
Abra Sections na barra lateral
-
Clique em New Section
-
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
-
Adicione conteúdo no editor rico
-
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
- Working with Content — editor de texto rico
- Widget Areas — conteúdo dinâmico sincronizado
- Content Import — blocos reutilizáveis WordPress