[WordPress] 自作テーマでブロックエディタのスタイル設定が一部表示されない時に試したこと

WordPressの自作テーマを使用している際、
ブロックエディタで記事を投稿しようとすると、余白など一部のスタイル設定が表示されない
という問題に遭遇しました。

本記事では、設定が表示されるようになるまでに試した対応をまとめています。

目的とする表示

意図しない表示

ブロックエディタのサイドバーに、一部のスタイル設定しか表示されない状態

目的とする表示

以下のような スタイル設定項目が表示される状態を目指します。
・パディング
・マージン
・ブロックの間隔
・枠線と影
・背景画像
など

対応

WordPress公式テーマの theme.json を自作テーマに配置する

WordPress公式テーマ
wp-content/themes/twentytwentyfive
から theme.json をコピーし、自作テーマのディレクトリ直下に配置します。

※ header.php などで theme.json を読み込む指定は不要です。
テーマディレクトリ直下に配置するだけで、自動的に読み込まれます。

フロントエンドへの影響を防ぐ記述をfunctions.phpに追記する

theme.json をそのまま適用すると、フロントエンド側のスタイルにも影響が出る場合があります。

そのため、以下のようにフロントエンドでは theme.json を無効化し、ブロックエディタ内でのみ有効化します。

それでも影響するスタイルは自作テーマ側のCSSで上書きする

上記対応後も、一部のスタイルがフロントエンドに影響する場合があります。
その場合は、自作テーマのCSSで明示的に上書きします。

例：リンクの装飾を元に戻す場合

theme.json の役割（ブロックエディタで必要な理由）

theme.json は、
ブロックエディタに「このテーマでは、どのスタイル設定を使ってよいか」を伝えるための設定ファイルです。

theme.json があることで、
・余白（パディング・マージン）
・ブロック間隔
・カラーパレット
・フォントサイズ
・レイアウト関連の設定
といった エディタ上の設定項目が有効になります。

自作テーマで theme.json が存在しない、または必要な設定が定義されていない場合、WordPressは「このテーマでは使用できない」と判断し、ブロックエディタのスタイル設定自体を非表示にします。

そのため、「設定が出ない」「壊れているように見える」場合でも、実際には theme.json が不足しているだけ というケースが少なくありません。

公式テーマの theme.json をそのまま使う際の注意点

公式テーマの theme.json は非常に参考になりますが、そのまま流用する場合はいくつか注意点があります。

フロントエンドのデザインに影響する

公式テーマの theme.json には、
・デフォルトの余白
・フォントサイズ
・リンク装飾
・レイアウト制御
などが細かく定義されています。
そのまま適用すると、自作テーマで意図していないデザイン変更が発生する可能性があります。

不要な設定まで読み込まれる

公式テーマはフルサイト編集前提の設計になっていることが多く、
クラシックテーマや独自構成のテーマでは 不要な設定が多く含まれています。
そのため、
・必要な設定だけを残す
・フロントエンドでは無効化する
・CSSで意図したデザインに戻す
といった調整が必要になります。

あくまで「ベース」として使うのが安全

theme.json は、一から書くのが難しい、設定項目の把握が大変 という理由から、「とりあえず動かす」ためにコピーし、その後、自作テーマに合う形に調整していくという進め方が、安全でおすすめです。

まとめ

自作テーマでブロックエディタのスタイル設定が一部しか表示されない場合、
theme.json が存在しない、または内容が不足していることが原因であるケースが多いです。

今回の対応では、

• 公式テーマの theme.json をベースに自作テーマへ配置
• フロントエンドでは theme.json を無効化し、エディタ内のみで使用
• それでも影響するスタイルは自作テーマ側の CSS で上書き

という手順を取ることで、
パディング・マージン・ブロック間隔などのスタイル設定をブロックエディタ上に表示させることができました。

同じように
「自作テーマでブロックエディタのスタイル設定が出ない」「余白設定が表示されない」
といった状況で悩んでいる方の参考になれば幸いです。