Secciones

Las secciones son bloques reutilizables que las personas editoras insertan con comandos de barra (/section) en cualquier contenido. Úselas para CTAs, testimonios, rejillas de características, etc.

Consultar secciones

getSection

import { getSection } from "emdash";

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

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

getSections

import { getSections } from "emdash";

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

Devuelve { items: Section[], nextCursor?: string }.

Estructura

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;
}

Origen

Origen	Descripción
`theme`	Definido en seed, gestionado por el tema
`user`	Creado en el admin
`import`	Importado de WordPress (bloques reutilizables)

Uso en el contenido

Escriba /section (o /pattern, /block, /template)
Busque o explore secciones
Haga clic para insertar en el cursor

El Portable Text se copia al documento: cambios futuros en la sección no afectan lo ya insertado; el contenido insertado puede personalizarse.

Crear secciones

En el admin

Sections en la barra lateral
New Section
Title, Slug, Description
Contenido en el editor enriquecido
Opcional: keywords

En archivos seed

{
  "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" }]
        }
      ]
    }
  ]
}

Importación WordPress

Los bloques reutilizables (wp_block) se importan como secciones con source: "import".

Renderizado programático

---
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>
)}

Funciones del admin

En /_emdash/admin/sections: vista en cuadrícula, búsqueda, filtro por origen, copiar slug, editar, eliminar (aviso en secciones de tema).

Referencia API

`getSection(slug)`

Parámetro: slug (string). Devuelve: Promise<Section | null>

`getSections(options?)`

Parámetros: source, search. Devuelve: Promise<Section[]>

REST

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

GET /_emdash/api/sections/newsletter-cta

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

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

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

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

DELETE /_emdash/api/sections/my-section