block.jsonとは？　コードを書く前に知っておきたい定義ファイルについて紹介

WordPressのblock.jsonについて知りたい方向けに、block.jsonの基礎知識を紹介します。この記事を読めばblock.jsonを編集してブロックのカスタマイズができるようになります。

block.jsonとは？

block.jsonとは、WordPressのブロックエディタで利用するブロックタイプを定義するメタデータファイルです。サーバーサイドとクライアントサイドの両方にブロックタイプを登録する際に利用されます。

block.jsonの構造

block.jsonを編集することで、ブロックごとの機能をカスタマイズできます。ここでは、標準ブロックの段落(paragraph)ブロックを例に解説します。（ソースの引用元：https://github.com/WordPress/WordPress/blob/master/wp-includes/blocks/paragraph/block.json）

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "core/paragraph",
	"title": "Paragraph",
	"category": "text",
	"description": "Start with the basic building block of all narrative.",
	"keywords": [ "text" ],
	"textdomain": "default",
	"attributes": {
		"align": {
			"type": "string"
		},
		"content": {
			"type": "rich-text",
			"source": "rich-text",
			"selector": "p",
			"__experimentalRole": "content"
		},
		"dropCap": {
			"type": "boolean",
			"default": false
		},
		"placeholder": {
			"type": "string"
		},
		"direction": {
			"type": "string",
			"enum": [ "ltr", "rtl" ]
		}
	},
	"supports": {
		"splitting": true,
		"anchor": true,
		"className": false,
		"color": {
			"gradients": true,
			"link": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"spacing": {
			"margin": true,
			"padding": true,
			"__experimentalDefaultControls": {
				"margin": false,
				"padding": false
			}
		},
		"typography": {
			"fontSize": true,
			"lineHeight": true,
			"__experimentalFontFamily": true,
			"__experimentalTextDecoration": true,
			"__experimentalFontStyle": true,
			"__experimentalFontWeight": true,
			"__experimentalLetterSpacing": true,
			"__experimentalTextTransform": true,
			"__experimentalWritingMode": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		},
		"__experimentalSelector": "p",
		"__unstablePasteTextInline": true,
		"interactivity": {
			"clientNavigation": true
		}
	},
	"editorStyle": "wp-block-paragraph-editor",
	"style": "wp-block-paragraph"
}

$schema

$schemaはjsonスキーマのurlです。こちらの値が設定されていると、オートコンプリートや、ツールチップによるガイドの表示、バリデーションなどの開発支援を受けられます。urlのtrunkをwp/6.Xのように変更することで特定のスキーマを指定することもできます。スキーマの内容はgutenbergのリポジトリから確認できます。

apiVersion

apiVersionはブロックが使用するAPIのバージョンです。特に理由がなければ最新のバージョンを設定します。

name

nameはブロックを識別するための一意の文字列です。以下のルールで記述します。

{ "name": "名前空間/ブロックの名前" }

名前空間はプラグイン、もしくはテーマの名前です。nameの値はコメントデリミタに利用されます。

//コメントデリミタの例
<!-- wp:my-plugin/book —!>

title

titleはブロックの表示名です。インサーターなどで表示されます。
UIの都合上、長すぎる名称は避けることが推奨されています。

description

descriptionにはブロックの説明を指定します。翻訳関数で翻訳できます。

keywords

keywordsはブロックの別名を配列で指定します。検索の利便性を上げる目的で利用されます。別名は翻訳の対象です。

textdomain

“プラグインブロックの gettext テキストドメイン。詳細については「プラグインの国際化」の「テキストドメイン」セクションを参照してください。”
引用元：https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-metadata/#text-domain

よくわかりません。必須ではないありません。

attributes

attributesはブロックによって保存されるデータを指定します。

詳しくはhttps://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-attributes/

supports

supportsはエディターの機能を制御するオプションを指定します。管理画面でブロックの外観を制御する場合などは、まずこちらを編集して実現できるか検討すると良いでしょう。詳しいオプションの内容はhttps://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-supports/

editorStyle

editorStyelはブロックタイプエディターのスタイルを定義します。以下を渡せます。

wp_register_script 関数で登録されたスクリプトハンドル
block.json ファイルからの JavaScript ファイルへの相対パス
2つを混ぜ合わせたリスト（詳細はhttps://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-metadata/#wpdefinedasset）

style

styleはブロックタイプのフロントエンドとエディターのスタイルを定義します。フロントエンドだけでなく、エディターでも読み込まれます。editorStyleと同様に、以下を渡せます。

wp_register_script 関数で登録されたスクリプトハンドル
block.json ファイルからの JavaScript ファイルへの相対パス
2つを混ぜ合わせたリスト（詳細はhttps://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-metadata/#wpdefinedasset）

終わりに

block.jsonについて紹介しました。一見すると難しく感じますが、これらを理解していくことでブロックを適切にカスタマイズしていくことができると思います。supportsに変更を加えることで、既存のブロックを簡単にカスマイズできるので、まずは実際に操作してみてどのように変化するのかを確かめてみると良いと思います。block.jsonの設定変更で可能な見た目の制御がわかると、必要最小限のCSSでサイト制作ができるようになると思います。

block.jsonとは？ コードを書く前に知っておきたい定義ファイルについて紹介

目次