カスタムフィールドのブロックエディター設定をフィールド毎に上書きする

ブロックエディターのHTML（.js-block-editor）の data-settings 属性に JSON 形式で個別で設定を上書きすることが可能です。

<div 
  class="js-block-editor"
  data-settings='\{"features":\{"textItalic":false,"customClass":true\}\}'
>
</div>

上記の例では、テンプレートエンジンに変数として解決されないようにするため、波括弧をエスケープしています。@verbatimブロックを利用することでも同様の回避が可能です。

ブロックエディターの基本的な使い方は、ブロックエディターの基本を参照してください。

設定可能なオプション

キー	型	マージ方式	概要
`features`	`Partial<FeaturesSetting>`	浅いマージ	テキスト装飾・カスタムクラスなど機能 ON/OFF
`blockMenus`	`BlockMenuOverride`	専用スキーマ	「ブロックを追加」メニューの allow / deny / 完全置換
`fontSize`	`FontSizeItem[]`	配列差し替え	フォントサイズ選択肢
`fontFamily`	`FontFamilyItem[]`	配列差し替え	フォントファミリー選択肢
`customClass`	`CustomClassItem[]`	配列差し替え	テキストに当てるカスタムクラス選択肢
`imageSizes`	`ImageSizesItem[]`	配列差し替え	画像サイズ選択肢
`colorPalette`	`string[]`	配列差し替え	カラーピッカーのパレット

マージ方式の意味:

浅いマージ — 指定したキーだけベース値を上書き、未指定キーはベース値を維持
配列差し替え — ベース値を破棄し、指定した配列で完全に置き換え
専用スキーマ — キー固有の解釈ロジック

未指定のキーはベース値が維持されます。null を渡したキーは「指定なし」と同じ扱いです。

`features`

テキストメニューに表示する装飾機能や、カスタムクラス選択 UI の表示有無を切り替えます。

型: Partial<FeaturesSetting> マージ方式: 浅いマージ

キー	型	内容
`textItalic`	`boolean`	斜体
`textUnderline`	`boolean`	下線
`textStrike`	`boolean`	取り消し線
`textCode`	`boolean`	インラインコード
`textMarker`	`boolean`	マーカー（ハイライト）
`textColor`	`boolean`	文字色
`fontSize`	`boolean`	フォントサイズ選択 UI
`fontFamily`	`boolean`	フォントファミリー選択 UI
`textSubscript`	`boolean`	下付き文字
`textSuperscript`	`boolean`	上付き文字
`customClass`	`boolean`	カスタムクラス選択 UI
`tableBgColor`	`boolean`	テーブルセル背景色
`imageDefaultLightbox`	`boolean`	画像挿入時にデフォルトで拡大表示（Lightbox）を有効にするか

例:

{
  "features": {
    "textItalic": true,
    "textColor": true,
    "fontSize": false
  }
}

指定したキーだけベース値を上書きします。例の場合、textItalic textColor fontSize 以外は編集画面設定が利用されます。

`blockMenus`

「ブロックを追加」メニュー（スラッシュコマンドおよびブロックメニュー）を上書きします。

解釈順序:

blocks が配列 ?
  ├─ Yes → blocks の内容だけがメニューになる（base / allow / deny は無視）
  └─ No  → base メニューを取得
            └─ allow があれば identifier が含まれるものだけ残す
            └─ deny があれば identifier が含まれるものを除外

`blockMenus.allow`

型: string[]（識別子の配列。識別子の形式は識別子を参照）

ベースメニューから「リストに含まれる識別子だけ」を残します。

{ "blockMenus": { "allow": ["paragraph", "heading2", "heading3", "bulletList"] } }

`blockMenus.deny`

型: string[]（識別子の配列）

ベースメニューから「リストに含まれる識別子」を除外します。

{ "blockMenus": { "deny": ["heading1", "image", "linkButton"] } }

allow と deny を併用した場合は、まず allow でフィルタしてから deny で除外します。

`blockMenus.blocks`

型: BlockMenuEntry[]

指定した場合、ベース・allow・deny を完全に無視し、この配列だけがメニューになります（完全置換）。

キー	必須	内容
`type`	◯	ブロックタイプ名。存在しない type のエントリは無視される
`label`		メニューに表示するラベル。省略時は type のデフォルトラベル
`icon`		Material Symbols のアイコン名。省略時は type のデフォルトアイコン
`class`		このエントリを選んだとき、生成されるブロックに当てる class
`group`		メニューのグループ見出し

配列順序と group の挙動:

配列順がそのままメニューの並び順になる
group を省略すると直前エントリの group を引き継ぐ。最初のエントリで省略すると その他 グループに入る
同じ identifier（type + class）を複数書いた場合は後勝ち（最後のエントリの内容で上書きされ、配置順も最後の位置に揃う）
同じ type を class 違いで複数並べることが可能。メニューには別エントリとして並ぶ
type が空文字または非文字列のエントリは無視される

例:

{
  "blockMenus": {
    "blocks": [
      { "type": "paragraph",  "label": "本文",      "group": "テキスト" },
      { "type": "heading2",   "label": "中見出し",  "group": "テキスト" },
      { "type": "heading3",   "label": "小見出し",  "group": "テキスト" },
      { "type": "paragraph",  "label": "リード文",  "class": "lead", "group": "テキスト" },
      { "type": "image",      "label": "画像",      "group": "メディア" },
      { "type": "linkButton", "label": "ボタン",    "group": "メディア" }
    ]
  }
}

`fontSize`

フォントサイズ選択 UI の選択肢を差し替えます。

型: FontSizeItem[] マージ方式: 配列差し替え

例:

{
  "fontSize": [
    { "label": "小",   "value": "0.875rem" },
    { "label": "標準", "value": "1rem" },
    { "label": "大",   "value": "1.25rem" }
  ]
}

機能の表示自体は features.fontSize で制御します。

`fontFamily`

フォントファミリー選択 UI の選択肢を差し替えます。

型: FontFamilyItem[] マージ方式: 配列差し替え

例:

{
  "fontFamily": [
    { "label": "ゴシック", "value": "sans-serif" },
    { "label": "明朝",     "value": "serif" }
  ]
}

機能の表示自体は features.fontFamily で制御します。

`customClass`

テキストに当てるカスタムクラス選択 UI の選択肢を差し替えます。

型: CustomClassItem[] マージ方式: 配列差し替え

例:

{
  "customClass": [
    { "label": "強調",       "value": "is-emphasis" },
    { "label": "注意書き",   "value": "is-caution" }
  ]
}

機能の表示自体は features.customClass で制御します。

`imageSizes`

画像ブロックのサイズ選択 UI の選択肢を差し替えます。

型: ImageSizesItem[] マージ方式: 配列差し替え

例:

{
  "imageSizes": [
    { "label": "幅いっぱい", "value": "100%" },
    { "label": "中",         "value": "50%" },
    { "label": "小",         "value": "25%" }
  ]
}

`colorPalette`

文字色／背景色などカラーピッカーで表示するパレットを差し替えます。

型: string[]（CSS の色値） マージ方式: 配列差し替え

例:

{
  "colorPalette": ["#000000", "#ffffff", "#ef4444", "#3b82f6"]
}

識別子

blockMenus.allow および blockMenus.deny で指定する文字列は 識別子（identifier） です。識別子の形式は次のいずれか。

形式	マッチ対象	例
`type`	class なしの該当ブロック	`paragraph`、`heading2`
`type.class`	指定 class が当たっているブロック	`paragraph.lead`、`heading2.section-title`

識別子は厳密マッチです。heading2 は class なしの見出し2 にしかヒットしません。ベースに class="section-title" 付きで登録された見出し2 を制御したい場合は heading2.section-title のように完全な形で書きます。

ベースメニューに登録されているブロックの identifier は、管理画面の「ブロックエディター設定」で登録した内容と BLOCK_DEFINITIONS から決まります。

利用できる type 一覧

blockMenus.blocks[].type および識別子の type 部分で指定できる主なタイプの一覧は次の通りです。

type	内容
`paragraph`	段落
`heading1`〜`heading6`	見出し（レベル別）
`bulletList`	箇条書き
`numberedList`	順序付きリスト
`blockquote`	引用
`codeBlock`	コードブロック
`image`	画像
`file`	ファイル
`linkButton`	リンクボタン
`table`	テーブル
`horizontalRule`	水平線
`columns1` / `columns2` / `columns3`	カラム（1〜3 列）

存在しない type を指定した blocks エントリは無視されます。

注意事項

メニュー絞り込みは「入力候補」の制限であり、コンテンツ構造の保証ではありません。 メニューから除外したブロックタイプも、Markdown ショートカット（## で見出し、- で箇条書き、> で引用など）や TipTap のキーボードショートカット（Cmd+Alt+1〜6 での見出し化など）からは作成できる場合があります。
data-settings 属性に渡す JSON が JSON.parse できないと、上書きは適用されずベース設定で動作します。属性値の引用符の入れ子に注意してください
識別子の判定は厳密マッチです。type のみで書いた識別子は class 付きブロックには当たりません
blocks で指定したエントリの type が存在しない場合、そのブロックは無視されます。スペルミス・対応 type 一覧との不整合に注意してください

カスタムフィールドのブロックエディター設定をフィールド毎に上書きする

設定可能なオプション

`features`

`blockMenus`

`blockMenus.allow`

`blockMenus.deny`

`blockMenus.blocks`

`fontSize`

`fontFamily`

`customClass`

`imageSizes`

`colorPalette`

識別子

利用できる type 一覧

注意事項

イントロダクション

入門

コア概念

フロントエンド開発

機能ガイド

リファレンス

アップデート

拡張・カスタマイズ

ツール