2026年5月25日

WordPressのblock.jsonとtheme.jsonで管理するブロックテーマのスタイル｜置き場所の使い分けと優先順位

テーマ・デザイン

ブロックテーマのスタイルは、サイト全体とコアブロックの見た目を theme.json に、自作ブロックの対応機能と専用CSSを block.json に、サイト運営者が画面上で変えた内容をグローバルスタイルに、と置き場所を分けて管理します。この記事では、3つの役割の違いと優先順位、ブロックごとのスタイルやスタイルバリエーションの書き方、変更が反映されないときの確認方法を説明します。

なお「blocks.json」と書かれることがありますが、WordPressが読み込むのはブロックごとのメタデータファイルである block.json です。テーマ全体の設定ファイルは theme.json で、こちらとは別物です。

3つの置き場所と役割

スタイルに関わる設定は、主に次の3か所にあります。

theme.json：テーマに1つ置く設定ファイル。settings でエディターに出す選択肢（色、文字サイズ、余白など）を決め、styles でサイト全体と各ブロックの既定の見た目を決める
block.json：ブロック1種類ごとのメタデータ。supports でそのブロックが色や余白の設定欄を持つかを宣言し、styles でスタイルバリエーションを、style や editorStyle で専用のCSSファイルを登録する
グローバルスタイル：サイトエディターの「スタイル」で運営者が変更した内容。テーマごとに wp_global_styles という投稿タイプでデータベースに保存される

考え方としては、theme.json はテーマ作者が決める既定値、block.json はブロック作者が決めるブロックの仕様、グローバルスタイルは運営者による上書きです。自作ブロックを作らないテーマであれば、block.json を書く場面はなく、theme.json だけでコアブロックの見た目を管理できます。

優先順位

WordPressは、コアの既定値、テーマの theme.json、グローバルスタイルの順にデータを重ね、後のものほど優先します。子テーマを使っている場合は、親テーマの theme.json に子テーマの theme.json が重なります。つまり、theme.json を編集しても画面が変わらないときは、グローバルスタイル側に同じ項目の上書きが残っている可能性があります。

block.json で登録したCSSは、theme.json から生成されるスタイルとは別のスタイルシートとして読み込まれます。WordPress 6.6以降、theme.json から出力されるブロックのスタイルは詳細度の低いセレクターで出力されるようになり、テーマやブロックのCSSで上書きしやすくなっています（2026年10月現在）。

theme.jsonでコアブロックの見た目を決める

作業は子テーマで行い、編集前に theme.json のコピーを取っておきます。WordPress 6.6以降のテーマでは version に3を指定します。次の例は、ボタンブロックと引用ブロックの既定の見た目を決め、ボタンの既存のバリエーション「アウトライン」の色も変えています。

{
	"$schema": "https://schemas.wp.org/wp/6.6/theme.json",
	"version": 3,
	"styles": {
		"blocks": {
			"core/button": {
				"border": { "radius": "4px" },
				"color": {
					"background": "var:preset|color|primary",
					"text": "var:preset|color|base"
				},
				"variations": {
					"outline": {
						"border": { "color": "var:preset|color|primary" },
						"color": { "text": "var:preset|color|primary" }
					}
				}
			},
			"core/quote": {
				"border": {
					"left": { "color": "var:preset|color|primary", "width": "4px", "style": "solid" }
				},
				"spacing": { "padding": { "left": "1.25rem" } }
			}
		}
	}
}

var:preset|color|primary は、settings.color.palette で定義した primary という色を参照する書き方です。パレットに primary と base が定義されていないと色が付かないので、パレットの定義とあわせて確認します。ブロック名は core/button のように名前空間付きで書き、キーの綴りを間違えるとエラーは出ずに無視されるだけなので、エディターで $schema を使った補完と検証を有効にしておくと誤りに気付けます。

新しいスタイルバリエーションを追加する

ブロックに選択肢として出るスタイルバリエーションを新しく作るなら、WordPress 6.6以降はテーマの styles フォルダーに、対象ブロックを指定したJSONファイルを置く方法が使えます。ファイル内の blockTypes に列挙したブロックで、そのバリエーションが選べるようになります。

{
	"$schema": "https://schemas.wp.org/wp/6.6/theme.json",
	"version": 3,
	"title": "濃い背景",
	"slug": "section-dark",
	"blockTypes": [ "core/group", "core/columns" ],
	"styles": {
		"color": {
			"background": "var:preset|color|contrast",
			"text": "var:preset|color|base"
		}
	}
}

このファイルを styles/section-dark.json として保存すると、グループブロックとカラムブロックのスタイル選択欄に「濃い背景」が加わります。blockTypes を書かないJSONファイルは、サイト全体のスタイルバリエーション（配色セットなど）として扱われるため、用途に応じて書き分けてください。

block.jsonで自作ブロックのスタイルを管理する

自作ブロックでは、block.json の supports で、エディターにどの設定欄を出すかを宣言します。たとえば color を宣言すると背景色と文字色の設定欄が出て、theme.json のパレットから色を選べるようになります。ブロック側で色の設定欄を用意しなくても、テーマのパレットや設定と連動する点が利点です。

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "mytheme/notice",
	"title": "お知らせボックス",
	"category": "design",
	"supports": {
		"color": { "background": true, "text": true, "link": true },
		"spacing": { "padding": true, "margin": true },
		"typography": { "fontSize": true }
	},
	"styles": [
		{ "name": "info", "label": "情報", "isDefault": true },
		{ "name": "warning", "label": "注意" }
	],
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

styles に書いたバリエーションを選ぶと、ブロックの外側の要素に is-style-warning のようなクラスが付きます。見た目そのものは style に登録したCSSで、このクラスを対象に書きます。style のCSSはエディターと表示側の両方で、editorStyle はエディターだけで読み込まれます。ブロックを登録するときは、block.json があるフォルダーを register_block_type() に渡せば、これらのファイルもまとめて登録されます。

コアブロックに専用CSSを足す

theme.json で書けない細かな指定（疑似要素や複雑なセレクターなど）は、ブロックごとのCSSファイルとして登録すると、ブロックテーマの既定の設定では、そのブロックがページで使われたときだけ読み込まれます。子テーマの functions.php に次のように書きます。

<?php
add_action( 'init', function () {
	wp_enqueue_block_style(
		'core/quote',
		array(
			'handle' => 'mytheme-quote',
			'src'    => get_stylesheet_directory_uri() . '/assets/blocks/quote.css',
			'path'   => get_stylesheet_directory() . '/assets/blocks/quote.css',
			'ver'    => wp_get_theme()->get( 'Version' ),
		)
	);
} );

get_stylesheet_directory() は子テーマのフォルダーを指します。親テーマのファイルを参照したい場合は get_template_directory() を使います。

反映されないときの確認

theme.json や block.json を変更しても見た目が変わらないときは、次の順で確認します。

グローバルスタイルの上書き：サイトエディターの「スタイル」で同じ項目が変更されていないか。変更履歴から元に戻せるほか、既定値に戻す操作もあります
JSONの構文：カンマの過不足や閉じ括弧の漏れがあると、ファイル全体が読み込まれないことがあります。エディターの検証やJSONの整形ツールで確認します
キャッシュ：theme.json の内容はWordPress内部でキャッシュされます。開発中は wp-config.php に define( 'WP_DEVELOPMENT_MODE', 'theme' ); を書くと再生成されやすくなります。本番では外してください。ページキャッシュやCDNのキャッシュも削除します
ブロックの登録：block.json の変更は、ビルドが必要な構成ならビルド後のファイルに反映されているか、name が既存の投稿に保存されているブロック名と一致しているかを確認します

クラシックテーマでも theme.json を置けばエディターの設定を制御できますが、テンプレートの作り方や読み込まれるスタイルはブロックテーマと異なります。クラシックテーマから移行する場合は、まず子テーマで theme.json の settings から試すと影響を確かめやすくなります。

まとめ

読み込まれるのは「blocks.json」ではなく、ブロックごとの block.json とテーマ全体の theme.json
サイト全体とコアブロックの既定の見た目は theme.json の styles.blocks、自作ブロックの設定欄と専用CSSは block.json に書く
優先順位はコアの既定値、テーマ（親→子）、グローバルスタイルの順。theme.json が効かないときはグローバルスタイルの上書きを疑う
新しいスタイルバリエーションは、6.6以降なら styles フォルダーに blockTypes 付きのJSONを置いて追加できる
作業は子テーマで行い、JSONの構文とキャッシュを確認しながら進める