Sections

Le Sections sono blocchi di contenuto riutilizzabili che gli editori possono inserire in qualsiasi contenuto tramite comandi slash. Usale per pattern comuni come CTA, testimonianze, griglie di funzionalità o qualsiasi contenuto che appare su più pagine.

Interrogare le Sections

getSection

L’esempio seguente recupera una singola section tramite slug:

import { getSection } from "emdash";

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

if (cta) {
  console.log(cta.title);    // "Newsletter CTA"
  console.log(cta.content);  // PortableTextBlock[]
}

getSections

L’esempio seguente recupera più sections con filtri opzionali:

import { getSections } from "emdash";

// Get all sections
const { items: all } = await getSections();

// Filter by source
const { items: themeSections } = await getSections({ source: "theme" });

// Search by title/keywords
const { items: results } = await getSections({ search: "newsletter" });

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

Struttura della Section

Una section ha la seguente forma:

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

Utilizzare le Sections nel contenuto

Gli editori inseriscono le sections usando il comando slash /section nell’editor di testo ricco.

Il contenuto Portable Text della section viene copiato nel documento. Il contenuto inserito è autonomo: gli editori possono personalizzarlo e le modifiche successive alla section non influenzano le copie già inserite nel contenuto.

Creare Sections

Nell’interfaccia Admin

1. Naviga su Sections nella barra laterale dell’admin

2. Clicca su New Section

3. Compila:

   • Title - Nome visualizzato per la section
   • Slug - Identificatore URL (generato automaticamente dal titolo)
   • Description - Testo di aiuto per gli editori

4. Aggiungi contenuto utilizzando l’editor di testo ricco

5. Opzionalmente imposta parole chiave per facilitare la scoperta

Tramite file Seed

Il seguente file seed definisce due sections per un 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" }]
        }
      ]
    }
  ]
}

Tramite importazione WordPress

I blocchi riutilizzabili di WordPress (tipo di post wp_block) vengono automaticamente importati come sections:

• Source è impostato su "import"
• Il contenuto Gutenberg viene convertito in Portable Text

Renderizzare le Sections programmaticamente

L’esempio seguente renderizza il contenuto di una section lato server, al di fuori dell’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>
)}

Funzionalità dell’interfaccia Admin

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

• Vista griglia con anteprime delle sections
• Ricerca per titolo e parole chiave
• Filtro per origine
• Copia rapida dello slug negli appunti
• Modifica contenuto e metadati della section
• Elimina con conferma (avverte per le sections del tema)

Riferimento API

getSection(slug)

Recupera una section tramite slug.

Parametri:

• slug — L’identificatore unico della section (string)

Restituisce: Promise<Section | null>

getSections(options?)

Elenca le sections con filtri opzionali.

Parametri:

• options.source — Filtra per origine: "theme", "user" o "import"
• options.search — Cerca per titolo, descrizione e parole chiave
• options.limit — Dimensione della pagina (predefinito 50, max 100)
• options.cursor — Cursore di paginazione da un nextCursor precedente

Restituisce: Promise<{ items: Section[]; nextCursor?: string }>

REST API

Elencare le Sections

Elenca le sections, opzionalmente filtrate per origine o termine di ricerca:

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

Ottenere una Section

Recupera una singola section tramite slug:

GET /_emdash/api/sections/newsletter-cta

Creare una Section

Crea una section con una richiesta POST:

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

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

Aggiornare una Section

Aggiorna una section con una richiesta PUT:

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

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

Eliminare una Section

Elimina una section tramite slug:

DELETE /_emdash/api/sections/my-section

Prossimi passi

• Lavorare con i contenuti - Scopri l’editor di testo ricco
• Widget Areas - Per contenuti dinamici sincronizzati
• Importazione contenuti - Importa blocchi riutilizzabili WordPress