Sezioni

Le sezioni sono blocchi riutilizzabili che gli editor inseriscono con comandi slash in qualsiasi contenuto. Usale per CTA, testimonianze, griglie di funzionalità o pattern ricorrenti.

Interrogare le sezioni

getSection

Carica una sezione per slug:

import { getSection } from "emdash";

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

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

getSections

Più sezioni con filtri opzionali:

import { getSections } from "emdash";

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

getSections restituisce { items: Section[], nextCursor?: string } secondo il pattern di paginazione standard.

Struttura

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

Tipi di origine

Sezioni nel contenuto

Inserimento con /section nell’editor rich text:

Il Portable Text della sezione viene copiato nel documento:

• Le modifiche successive alla sezione non influenzano ciò che è già inserito
• Il contenuto inserito è personalizzabile
• Il contenuto resta autonomo

Creare sezioni

Nell’admin

1. Aprire Sections nella barra laterale

2. Cliccare New Section

3. Compilare:

   • Title — nome visualizzato
   • Slug — identificatore URL (spesso auto dal titolo)
   • Description — testo di aiuto per gli editor

4. Aggiungere contenuto nell’editor rich text

5. Opzionale: Keywords per la ricerca

Tramite file seed

Sezioni nel seed del 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" }]
        }
      ]
    }
  ]
}

Importazione WordPress

I blocchi riutilizzabili WordPress (wp_block) vengono importati come sezioni:

• source è "import"
• Il contenuto Gutenberg diventa Portable Text

Rendering lato server

Fuori dall’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>
)}

Interfaccia admin

La libreria Sections (/_emdash/admin/sections) offre:

• Vista griglia con anteprime
• Ricerca per titolo e parole chiave
• Filtro per origine
• Copia slug
• Modifica di contenuto e metadati
• Eliminazione con conferma (avviso per sezioni del tema)

Riferimento API

getSection(slug)

Carica una sezione per slug.

Parametro:

• slug — identificatore univoco (string)

Restituisce: Promise<Section | null>

getSections(options?)

Elenca le sezioni con filtri.

Parametri:

• options.source — "theme", "user" o "import"
• options.search — ricerca in titolo e parole chiave

Restituisce: Promise<Section[]> (come nella documentazione in inglese)

REST API

Elencare le sezioni

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

Ottenere una sezione

GET /_emdash/api/sections/newsletter-cta

Creare una sezione

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

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

Aggiornare una sezione

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

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

Eliminare una sezione

DELETE /_emdash/api/sections/my-section

Passi successivi

• Working with Content — editor rich text
• Widget Areas — contenuto dinamico sincronizzato
• Content Import — blocchi riutilizzabili WordPress