Block Kit | EmDash CMS Everything

Il Block Kit di EmDash permette ai plugin sandboxati di descrivere la loro UI admin come JSON. L’host renderizza i blocchi — nessun JavaScript fornito dal plugin viene mai eseguito nel browser.

Come funziona

L’utente naviga verso una pagina admin del plugin
L’admin invia un’interazione page_load alla route admin del plugin
Il plugin restituisce una BlockResponse contenente un array di blocchi
L’admin renderizza i blocchi usando il componente BlockRenderer
Quando l’utente interagisce (clicca un pulsante, invia un form), l’admin invia l’interazione al plugin
Il plugin restituisce nuovi blocchi e il ciclo si ripete

// Gestore route admin plugin
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: [/* ... blocchi aggiornati ... */],
          toast: { message: "Settings saved", type: "success" },
        };
      }
    },
  },
}

Tipi di blocchi

Tipo	Descrizione
`header`	Grande intestazione in grassetto
`section`	Testo con elemento accessorio opzionale
`divider`	Linea orizzontale
`fields`	Griglia a due colonne etichetta/valore
`table`	Tabella dati con formattazione, ordinamento, paginazione
`actions`	Riga orizzontale di pulsanti e controlli
`stats`	Schede metriche dashboard con indicatori di tendenza
`form`	Campi input con visibilità condizionale e submit
`image`	Immagine a livello blocco con didascalia
`context`	Piccolo testo di aiuto attenuato
`columns`	Layout a 2-3 colonne con blocchi annidati

Tipi di elementi

Tipo	Descrizione
`button`	Pulsante azione con dialogo di conferma opzionale
`text_input`	Input testo singola o multipla linea
`number_input`	Input numerico con min/max
`select`	Selezione dropdown
`toggle`	Interruttore on/off
`secret_input`	Input mascherato per chiavi API e token

Helper di costruzione

Il package @emdash-cms/blocks esporta helper di costruzione per codice più pulito：

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" },
    }),
  ],
};

Campi condizionali

I campi form possono essere mostrati condizionalmente in base ai valori di altri campi：

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

Il campo api_key appare solo quando auth_enabled è attivato. Le condizioni sono valutate lato client senza round-trip.

Provalo

Usa il Block Playground per costruire e testare interattivamente i layout dei blocchi.