Lightning 15系アップデートでの theme.json 対応について

Lightning 15系 より テーマ内に theme.json が利用出来るようになりました。

theme.json とは

テーマに関する様々な設定情報を記載してあるファイルで、基本的にはブロックテーマと呼ばれるフルサイト編集に対応したテーマ（ベクトル製であれば X-T9 ）向けのファイルです。ただし、従来のテーマにおいても theme.json があった方が最新のWordPressの便利な機能が使えるため、Lightning でも theme.json の利用を選択できるようにしました。

theme.json を追加する事によっていくつか弊害も発生するのですが（後述）、以下（WordPress 6.1 以降）をはじめメリットの方が多いため、導入に向けて調整をおこなっています。

各ブロックにマージンが指定できるようになる

画像ブロックで枠線・角丸が指定できるようになる

ブループブロック・カラムブロックでマージン、ブロックの間隔、枠線、角丸 が指定できるようになる

他 theme.json を経由するフィルターフックを活用してカラーパレットなどありとあらゆる各種設定が可能になります。

theme.json の有効・無効の切り替え機能の仕様について

有効・無効の仕様は以下のようになっています。

• 既存サイトで Lightning をアップデートしただけでは theme.json は有効になりません。
• 新規に Lightning をインストール・有効化 した場合は theme.json が有効になります。
• 外観 > カスタマイズ > Lightning 機能設定 からtheme.json の有効・無効を切り替える事ができます。
• 一旦有効にすると、テーマをアップデートしても有効化状態は維持されます。

子テーマに theme.json を配置した時の挙動について

今回実装した 外観 > カスタマイズ > Lightning 機能設定 からの有効化・無効化は親テーマに対する制御です。

子テーマのディレクトリ内に theme.json がある場合は、カスタマイズ画面から無効化しても有効化されたままになります。

子テーマ内に theme.json がある状態で、親テーマの theme.json が無効の場合誤動作の原因となりますので、子テーマに theme.json がある場合は 親テーマの theme.json は有効に設定してください。

theme.json の有無による HTML の挙動の違いについて

theme.json が有効な場合の大きな仕様の違いとして、従来グループブロックのインナーに .wp-block-group__inner-container クラスの div が自動的に出力されていましたが、theme.json がある事によってこの div が出力されなくなります。

Lightning 標準及び 弊社プラグインにおいては対応調整を進めていますので表示に影響は出ませんが、ユーザー独自に追加したCSSで .wp-block-group__inner-container に対して装飾をつけている部分については表示が崩れる可能性がありますので、事前に確認よろしくお願いいたします。

そのほか theme.json の有無で調整している部分に関しましては こちら を参照ください。

事前テストのお願い及び既存サイトをアップデートする上での注意点

従来のサイトで普通にアップデートしても theme.json は有効化されないので特に問題は発生しないはずですが、できるだけテスト環境で事前にご確認ください。