Sections

Les Sections sont des blocs de contenu réutilisables que les éditeurs peuvent insérer dans n’importe quel contenu via des commandes slash. Utilisez-les pour des modèles courants tels que les CTA, les témoignages, les grilles de fonctionnalités ou tout contenu qui apparaît sur plusieurs pages.

Interroger les Sections

getSection

L’exemple suivant récupère une section unique par 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’exemple suivant récupère plusieurs sections avec des filtres optionnels :

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 retourne { items: Section[], nextCursor?: string } suivant le modèle de pagination standard.

Structure de Section

Une section a la forme suivante :

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

Utiliser les Sections dans le contenu

Les éditeurs insèrent des sections en utilisant la commande slash /section dans l’éditeur de texte enrichi.

Le contenu Portable Text de la section est copié dans le document. Le contenu inséré est autonome : les éditeurs peuvent le personnaliser, et les modifications ultérieures de la section n’affectent pas les copies déjà placées dans le contenu.

Créer des Sections

Dans l’interface d’administration

1. Accédez à Sections dans la barre latérale de l’admin

2. Cliquez sur New Section

3. Remplissez :

   • Title - Nom d’affichage de la section
   • Slug - Identifiant d’URL (généré automatiquement à partir du titre)
   • Description - Texte d’aide pour les éditeurs

4. Ajoutez du contenu en utilisant l’éditeur de texte enrichi

5. Définissez éventuellement des mots-clés pour faciliter la découverte

Via les fichiers Seed

Le fichier seed suivant définit deux sections pour un 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" }]
        }
      ]
    }
  ]
}

Via l’importation WordPress

Les blocs réutilisables WordPress (type de publication wp_block) sont automatiquement importés en tant que sections :

• Source est défini sur "import"
• Le contenu Gutenberg est converti en Portable Text

Rendre les Sections de manière programmatique

L’exemple suivant rend le contenu d’une section 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>
)}

Fonctionnalités de l’interface d’administration

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

• Vue en grille avec des aperçus de sections
• Recherche par titre et mots-clés
• Filtre par source
• Copie rapide du slug dans le presse-papiers
• Modifier le contenu et les métadonnées de la section
• Supprimer avec confirmation (avertit pour les sections de thème)

Référence de l’API

getSection(slug)

Récupérer une section par slug.

Paramètres :

• slug — L’identifiant unique de la section (string)

Retourne : Promise<Section | null>

getSections(options?)

Lister les sections avec des filtres optionnels.

Paramètres :

• options.source — Filtrer par source : "theme", "user" ou "import"
• options.search — Rechercher dans le titre, la description et les mots-clés
• options.limit — Taille de la page (par défaut 50, max 100)
• options.cursor — Curseur de pagination d’un nextCursor précédent

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

REST API

Lister les Sections

Lister les sections, éventuellement filtrées par source ou terme de recherche :

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

Obtenir une Section

Récupérer une section unique par slug :

GET /_emdash/api/sections/newsletter-cta

Créer une Section

Créer une section avec une requête POST :

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

Mettre à jour une section avec une requête PUT :

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

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

Supprimer une Section

Supprimer une section par slug :

DELETE /_emdash/api/sections/my-section

Prochaines étapes

• Travailler avec le contenu - En savoir plus sur l’éditeur de texte enrichi
• Widget Areas - Pour un contenu dynamique synchronisé
• Importation de contenu - Importer des blocs réutilisables WordPress