Block Kit | EmDash CMS Everything

EmDashs Block Kit ermöglicht es Sandboxed-Plugins, ihre Admin-UI als JSON zu beschreiben. Der Host rendert die Blöcke — vom Plugin bereitgestelltes JavaScript wird nie im Browser ausgeführt.

Wie es funktioniert

Benutzer navigiert zu einer Admin-Seite des Plugins
Der Admin sendet eine page_load-Interaktion an die Admin-Route des Plugins
Das Plugin gibt eine BlockResponse mit einem Array von Blöcken zurück
Der Admin rendert die Blöcke mit der BlockRenderer-Komponente
Wenn der Benutzer interagiert (Button klickt, Formular absendet), sendet der Admin die Interaktion zurück an das Plugin
Das Plugin gibt neue Blöcke zurück und der Zyklus wiederholt sich

// Plugin Admin-Route Handler
routes: {
  admin: {
    handler: async (ctx, { request }) => {
      const interaction = await request.json();

      if (interaction.type === "page_load") {
        return {
          blocks: [
            { type: "header", text: "My Plugin Settings" },
            {
              type: "form",
              block_id: "settings",
              fields: [
                { type: "text_input", action_id: "api_url", label: "API URL" },
                { type: "toggle", action_id: "enabled", label: "Enabled", initial_value: true },
              ],
              submit: { label: "Save", action_id: "save" },
            },
          ],
        };
      }

      if (interaction.type === "form_submit" && interaction.action_id === "save") {
        await ctx.kv.set("settings", interaction.values);
        return {
          blocks: [/* ... aktualisierte Blöcke ... */],
          toast: { message: "Settings saved", type: "success" },
        };
      }
    },
  },
}

Blocktypen

Typ	Beschreibung
`header`	Große fette Überschrift
`section`	Text mit optionalem Zubehörelement
`divider`	Horizontale Linie
`fields`	Zweispaltige Label/Wert-Raster
`table`	Datentabelle mit Formatierung, Sortierung, Paginierung
`actions`	Horizontale Reihe von Buttons und Steuerelementen
`stats`	Dashboard-Metrik-Karten mit Trendindikatoren
`form`	Eingabefelder mit bedingter Sichtbarkeit und Submit
`image`	Blocklevel-Bild mit Beschriftung
`context`	Kleiner gedämpfter Hilfetext
`columns`	2-3 Spalten-Layout mit verschachtelten Blöcken

Elementtypen

Typ	Beschreibung
`button`	Aktionsbutton mit optionalem Bestätigungsdialog
`text_input`	Einzeilige oder mehrzeilige Texteingabe
`number_input`	Numerische Eingabe mit Min/Max
`select`	Dropdown-Auswahl
`toggle`	Ein/Aus-Schalter
`secret_input`	Maskierte Eingabe für API-Schlüssel und Tokens

Builder-Helfer

Das @emdash-cms/blocks-Paket exportiert Builder-Helfer für saubereren Code：

import { blocks, elements } from "@emdash-cms/blocks";

const { header, form, section, stats } = blocks;
const { textInput, toggle, select, button } = elements;

return {
  blocks: [
    header("SEO Settings"),
    form({
      blockId: "settings",
      fields: [
        textInput("site_title", "Site Title", { initialValue: "My Site" }),
        toggle("generate_sitemap", "Generate Sitemap", { initialValue: true }),
        select("robots", "Default Robots", [
          { label: "Index, Follow", value: "index,follow" },
          { label: "No Index", value: "noindex,follow" },
        ]),
      ],
      submit: { label: "Save", actionId: "save" },
    }),
  ],
};

Bedingte Felder

Formularfelder können basierend auf anderen Feldwerten bedingt angezeigt werden：

{
  "type": "toggle",
  "action_id": "auth_enabled",
  "label": "Enable Authentication"
}

{
  "type": "secret_input",
  "action_id": "api_key",
  "label": "API Key",
  "condition": { "field": "auth_enabled", "eq": true }
}

Das api_key-Feld erscheint nur, wenn auth_enabled eingeschaltet ist. Bedingungen werden clientseitig ohne Roundtrip ausgewertet.

Probieren Sie es aus

Verwenden Sie den Block Playground, um interaktiv Block-Layouts zu erstellen und zu testen.