Abschnitte (Sections)

Sections sind wiederverwendbare Inhaltsblöcke, die Redakteur:innen per Slash-Befehl in jeden Inhalt einfügen können. Nutzen Sie sie für CTAs, Testimonials, Feature-Grids oder wiederkehrende Muster.

Sections abfragen

getSection

Eine Section per Slug laden:

import { getSection } from "emdash";

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

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

getSections

Mehrere Sections mit optionalen Filtern:

import { getSections } from "emdash";

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

getSections liefert { items: Section[], nextCursor?: string } im üblichen Paginierungsmuster.

Datenstruktur

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

Quelltypen

Sections in Inhalten

Einfügen mit /section im Rich-Text-Editor:

Der Portable-Text der Section wird in das Dokument kopiert:

• Änderungen an der Section betreffen bereits eingefügte Inhalte nicht
• Eingefügter Inhalt ist anpassbar
• Inhalt bleibt eigenständig

Sections anlegen

Im Admin

1. Sections in der Seitenleiste öffnen

2. New Section klicken

3. Ausfüllen:

   • Title — Anzeigename
   • Slug — URL-Kennung (oft automatisch aus dem Titel)
   • Description — Hilfetext für Redakteur:innen

4. Inhalt im Rich-Text-Editor bearbeiten

5. Optional Keywords für die Suche

Per Seed-Datei

Sections im Theme-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" }]
        }
      ]
    }
  ]
}

WordPress-Import

Wiederverwendbare WordPress-Blöcke (wp_block) werden als Sections importiert:

• source ist "import"
• Gutenberg-Inhalt wird zu Portable Text konvertiert

Sections serverseitig rendern

Außerhalb des Editors:

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

Admin-UI

Die Sections-Bibliothek (/_emdash/admin/sections) bietet:

• Rasteransicht mit Vorschauen
• Suche nach Titel und Keywords
• Filter nach Quelle
• Slug kopieren
• Bearbeiten von Inhalt und Metadaten
• Löschen mit Bestätigung (Hinweis bei Theme-Sections)

API-Referenz

getSection(slug)

Lädt eine Section per Slug.

Parameter:

• slug — Eindeutige Kennung (string)

Rückgabe: Promise<Section | null>

getSections(options?)

Listet Sections mit Filtern.

Parameter:

• options.source — "theme", "user" oder "import"
• options.search — Suche in Titel und Keywords

Rückgabe: Promise<Section[]> (wie in der englischen Referenz dokumentiert)

REST-API

Sections auflisten

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

Section abrufen

GET /_emdash/api/sections/newsletter-cta

Section erstellen

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

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

Section aktualisieren

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

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

Section löschen

DELETE /_emdash/api/sections/my-section

Nächste Schritte

• Working with Content — Rich-Text-Editor
• Widget Areas — Synchroner dynamischer Inhalt
• Content Import — WordPress wiederverwendbare Blöcke