Sections

Les sections sont des blocs réutilisables que les éditeurs insèrent via des commandes slash dans n’importe quel contenu. Servez-vous-en pour les CTA, témoignages, grilles de fonctionnalités ou tout motif récurrent.

Interroger les sections

getSection

Charger une section par slug :

import { getSection } from "emdash";

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

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

getSections

Plusieurs sections avec filtres optionnels :

import { getSections } from "emdash";

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

getSections renvoie { items: Section[], nextCursor?: string } selon le modèle de pagination habituel.

Structure

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

Types de source

Sections dans le contenu

Insertion avec /section dans l’éditeur riche :

Le Portable Text de la section est copié dans le document :

• Les changements ultérieurs de la section n’affectent pas ce qui est déjà inséré
• Le contenu inséré peut être personnalisé
• Le contenu reste autonome

Créer des sections

Dans l’admin

1. Ouvrir Sections dans la barre latérale

2. Cliquer sur New Section

3. Renseigner :

   • Title — nom affiché
   • Slug — identifiant URL (souvent auto depuis le titre)
   • Description — aide pour les éditeurs

4. Ajouter le contenu dans l’éditeur riche

5. Facultatif : Keywords pour la recherche

Via fichier seed

Sections dans le seed du thème :

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

Import WordPress

Les blocs réutilisables WordPress (wp_block) sont importés comme sections :

• source vaut "import"
• Le contenu Gutenberg est converti en Portable Text

Rendu côté serveur

En dehors de l’éditeur :

---
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 d’administration

La bibliothèque Sections (/_emdash/admin/sections) propose :

• Vue grille avec aperçus
• Recherche par titre et mots-clés
• Filtre par source
• Copie du slug
• Édition du contenu et des métadonnées
• Suppression avec confirmation (avertissement pour les sections du thème)

Référence API

getSection(slug)

Charge une section par slug.

Paramètre :

• slug — identifiant unique (string)

Retour : Promise<Section | null>

getSections(options?)

Liste les sections avec filtres.

Paramètres :

• options.source — "theme", "user" ou "import"
• options.search — recherche dans titre et mots-clés

Retour : Promise<Section[]> (comme dans la doc anglaise)

API REST

Lister les sections

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

Obtenir une section

GET /_emdash/api/sections/newsletter-cta

Créer une section

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

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

Mettre à jour une section

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

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

Supprimer une section

DELETE /_emdash/api/sections/my-section

Étapes suivantes

• Working with Content — éditeur riche
• Widget Areas — contenu dynamique synchronisé
• Content Import — blocs réutilisables WordPress