Block Kit | EmDash CMS Everything

EmDash の Block Kit を使用すると、サンドボックス化されたプラグインは管理 UI を JSON として記述できます。ホストがブロックをレンダリングします — プラグインが提供する JavaScript がブラウザで実行されることはありません。

仕組み

ユーザーがプラグインの管理ページに移動
管理画面がプラグインの管理ルートに page_load インタラクションを送信
プラグインがブロック配列を含む BlockResponse を返す
管理画面が BlockRenderer コンポーネントを使用してブロックをレンダリング
ユーザーが操作（ボタンクリック、フォーム送信）すると、管理画面がインタラクションをプラグインに送信
プラグインが新しいブロックを返し、サイクルが繰り返される

// プラグイン管理ルートハンドラ
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: [/* ... 更新されたブロック ... */],
          toast: { message: "Settings saved", type: "success" },
        };
      }
    },
  },
}

ブロックタイプ

タイプ	説明
`header`	大きな太字の見出し
`section`	オプションのアクセサリ要素を持つテキスト
`divider`	水平線
`fields`	2列のラベル/値グリッド
`table`	フォーマット、ソート、ページネーション付きデータテーブル
`actions`	ボタンとコントロールの水平行
`stats`	トレンドインジケータ付きダッシュボードメトリックカード
`form`	条件付き表示と送信を持つ入力フィールド
`image`	キャプション付きブロックレベル画像
`context`	小さなミュートされたヘルプテキスト
`columns`	ネストされたブロックを含む 2-3 列レイアウト

要素タイプ

タイプ	説明
`button`	オプションの確認ダイアログ付きアクションボタン
`text_input`	単一行または複数行のテキスト入力
`number_input`	最小/最大値付き数値入力
`select`	ドロップダウン選択
`toggle`	オン/オフスイッチ
`secret_input`	API キーとトークン用のマスク入力

ビルダーヘルパー

@emdash-cms/blocks パッケージは、よりクリーンなコードのためのビルダーヘルパーをエクスポートします：

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

条件付きフィールド

フォームフィールドは、他のフィールド値に基づいて条件付きで表示できます：

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

api_key フィールドは、auth_enabled がオンに切り替えられたときにのみ表示されます。条件はラウンドトリップなしでクライアント側で評価されます。

試してみる

Block Playground を使用して、ブロックレイアウトをインタラクティブに構築およびテストします。