ブロックでページを構築する

blocks フィールドは、順序付けられたページのコンポジションを保存します。各項目には、ブロックタイプ、保持されているスキーマバージョン、安定したキー、そのバージョンで宣言されたフィールドが記録されます。エディターは、コンテンツエディターでブロックを追加したり並べ替えたりします。Astro ルートは、各ブロックタイプをコンポーネントにマッピングします。

ブロックタイプを定義する

ブロックタイプは、それを使用するコレクションフィールドより前に定義します。シードは、番号付きのすべてのバージョンと、アクティブな currentVersion ポインターを保持します。

次のシードは Hero と Feature grid のブロックを定義し、それらを Pages の layout フィールドで使えるようにします。

{
  "$schema": "https://emdashcms.com/seed.schema.json",
  "version": "1",
  "blockTypes": [
    {
      "slug": "hero",
      "label": "Hero",
      "category": "Layout",
      "currentVersion": 1,
      "versions": [
        {
          "version": 1,
          "fields": [
            { "slug": "heading", "label": "Heading", "type": "string", "required": true },
            { "slug": "body", "label": "Body", "type": "portableText" },
            { "slug": "image", "label": "Image", "type": "image" },
            { "slug": "link_label", "label": "Link label", "type": "string" },
            { "slug": "link_url", "label": "Link URL", "type": "url" }
          ]
        }
      ]
    },
    {
      "slug": "feature_grid",
      "label": "Feature grid",
      "category": "Layout",
      "currentVersion": 1,
      "versions": [
        {
          "version": 1,
          "fields": [
            { "slug": "heading", "label": "Heading", "type": "string" },
            {
              "slug": "items",
              "label": "Items",
              "type": "repeater",
              "validation": {
                "subFields": [
                  { "slug": "title", "label": "Title", "type": "string", "required": true },
                  { "slug": "description", "label": "Description", "type": "text" }
                ]
              }
            }
          ]
        }
      ]
    }
  ],
  "collections": [
    {
      "slug": "pages",
      "label": "Pages",
      "fields": [
        { "slug": "title", "label": "Title", "type": "string", "required": true },
        {
          "slug": "layout",
          "label": "Layout",
          "type": "blocks",
          "validation": {
            "allowedTypes": ["hero", "feature_grid"],
            "maxItems": 20
          }
        }
      ]
    }
  ]
}

allowedTypes の順序が、ブロックピッカーの順序を決めます。許可されたタイプを後から削除すると、EmDash はそれをサーバー管理の retiredTypes リストに移動します。既存のブロックは引き続き編集できますが、エディターはそのタイプを追加したり複製したりできません。

Astro コンポーネントを作成する

各コンポーネントは value、index、blockKey を受け取ります。値には _type、_version、_key が含まれるため、ブロックスキーマが進化するときに、コンポーネントは保持されているバージョンを絞り込めます。

Hero コンポーネントは、表示するすべての値を保存されたブロックから読み取ります。

---
import { sanitizeHref } from "emdash";
import { Image, PortableText, type BlockComponentProps } from "emdash/ui";
import type { PageLayoutBlock } from "../../../emdash-env";

type HeroBlock = Extract<PageLayoutBlock, { _type: "hero" }>;
type Props = BlockComponentProps<HeroBlock>;

const { value } = Astro.props;
---

<section class="hero">
  <div>
    <h1>{value.heading}</h1>
    {value.body && <PortableText value={value.body} />}
    {value.link_url && <a href={sanitizeHref(value.link_url)}>{value.link_label}</a>}
  </div>
  {value.image && <Image image={value.image} />}
</section>

許可されたタイプごとにコンポーネントを作成します。マークアップとスタイルはコンポーネントが制御し、コンテンツとメディアはブロックの値が提供します。

コンポジションをレンダリングする

defineBlockComponents を使用すると、生成されたフィールドのユニオン内のすべての _type に対して、コンポーネントを 1 つずつ必須にできます。そのマップをページルートの <Blocks> に渡します。

---
import { decodeSlug, getEmDashEntry } from "emdash";
import { Blocks, defineBlockComponents } from "emdash/ui";
import type { PageLayoutBlock } from "../../../emdash-env";
import FeatureGrid from "../../components/blocks/FeatureGrid.astro";
import Hero from "../../components/blocks/Hero.astro";

const slug = decodeSlug(Astro.params.slug);
if (!slug) return Astro.rewrite("/404");

const { entry: page, cacheHint } = await getEmDashEntry("pages", slug);
if (!page) return Astro.rewrite("/404");
Astro.cache.set(cacheHint);

const components = defineBlockComponents<PageLayoutBlock>({
  hero: Hero,
  feature_grid: FeatureGrid,
});
---

<Blocks value={page.data.layout} components={components} />

<Blocks> は、コンテンツ、スキーマ、メディア、ネットワークのクエリを一切実行しません。渡された配列を、保存された順序でレンダリングします。ブロックコンポーネントが他のデータを必要とする場合は、そのコンポーネントが明示的にアプリケーションのクエリを実行できます。

コンポーネントが見つからない場合の処理

開発中は、マッピングされていないタイプがあると、目に見えるプレースホルダーとコンソール警告が出力されます。プレースホルダーには _type の名前が表示されますが、保存されたブロックの値は出力されません。

本番環境では、マッピングされていないタイプは、fallback コンポーネントが指定されていればそれをレンダリングします。指定されていなければ、何も出力しません。

---
import MissingBlock from "../../components/blocks/MissingBlock.astro";
---

<Blocks value={page.data.layout} components={components} fallback={MissingBlock} />

本番コンテンツで使用されるブロックタイプを有効化またはアクティブ化する前に、レンダラーのサポートをリリースしてください。

ブロックスキーマを変更する

互換性のある変更は、アクティブなバージョンを修正します。オプションのフィールドの追加、デフォルト値の追加、バリデーションの緩和では、バージョン番号は同じままです。保存済みのブロックには、次に書き込まれるときにデフォルト値が適用されます。

破壊的な変更は、非アクティブなバージョンを作成します。フィールドの削除、フィールドタイプの変更、必須フィールドの追加、バリデーションの厳格化は、破壊的な変更です。

古いバージョンは、リビジョン、下書き、メディアの追跡、保存済みのコンテンツのために引き続き利用できます。ブロックタイプと保持されているバージョンには、完全削除の操作はありません。

サポートされるネストされたフィールド

ブロック定義は、string、text、url、number、integer、boolean、datetime、select、multiSelect、portableText、image、file、repeater をサポートします。

ブロック定義の内部では、参照、JSON、スラグ、ネストされたブロック、カスタムウィジェット、物理インデックス、一意性、サブフィールドごとのローカライズはサポートされません。blocks フィールド自体は、必須、一意、検索可能、インデックス付きにすることも、カスタムのフィールドウィジェットを割り当てることもできません。

フィールドのバリデーションと保存される値のルールの詳細は、blocks フィールドのリファレンスを参照してください。シードの競合とエクスポートの動作については、シードファイルを参照してください。