Lightningバージョン15でtheme.json有効化後のグループブロック注意点

2023年3月19日

テーマLightningのバージョン15へのアップデートに伴い、theme.jsonが有効化できるようになりました。

theme.jsonはもともとブロックテーマ（フルサイト編集のできるブロックをベースとしたテーマ）を想定して作成されたファイルですが、従来のクラシックテーマ（非ブロックテーマ）でも設置することでさまざまなメリットが享受できます。

しかしtheme.jsonを設置することによるデメリットもあるわけで、とりわけグループブロックにおいては従来とHTML構造が異なるため注意が必要です。大きく次の2点があげられます。

1. HTML構造が変化する。したがってグループブロックにカスタムCSSを適用している場合は、想定外のデザインになる可能性がある。
2. コンテンツの横幅に変化が生じる（デバイス幅576px未満のスマホ）。

本記事では、テーマLightningでtheme.jsonを有効化した場合のグループブロックのふるまいについて紹介していきます。

Lightning制作元のVektorさんのこちらの記事も参照ください。

Lightningバージョン15でのtheme.json有効化の方法

Lightningバージョン15以上では、テーマカスタマイザーの中でtheme.jsonの有効化をすることができます。

ダッシュボードメニューの 外観＞カスタマイズ＞Lightning機能設定　と進めて”theme.jsonを有効にする”にチェックを入れるだけです。

ちなみに、従来バージョンとの互換性を考慮してデフォルト設定は次の通りとなっています。

• 旧バージョンからのアップデートの場合、デフォルトではtheme.jsonは無効化状態
• バージョン15から新規インストールした場合、デフォルトでtheme.jsonは有効化状態

グループブロックの注意点

theme.jsonを有効化することで、すでに紹介したとおりグループブロックの変化点が大きく２つみられます。

1. HTML構造が変化する。したがってグループブロックにカスタムCSSを適用している場合は、想定外のデザインになる可能性がある。
2. コンテンツの横幅に変化が生じる（デバイス幅576px未満のスマホ）。

以下、詳細に紹介していきます。

HTML構造の変化

これはテーマLightningのみならず、他のすべてのクラシックテーマでも当てはまります。

例として、グループブロックの中に段落ブロックが１つだけ入っている場合のシンプルなHTMLを見てみましょう。

theme.json無効化（従来）の場合

これが従来のグループブロックのHTML構造です。

<div class="is-layout-constrained wp-block-group">
	<div class="wp-block-group__inner-container">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna...
		</p>
	</div>
</div>

このように、div.wp-block-groupの一階層下にdiv.wp-block-group__inner-containerがある、2層構造となっています。段落ブロック（コンテンツ）はこの2層構造の下位に設置されます。

theme.json有効化の場合

<div class="is-layout-constrained wp-block-group">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna...
	</p>
</div>

div.wp-block-group__inner-containerがなくなり、-block-groupの直下に段落ブロック（<p>タグ）がある、シンプルな構造となっています。

従来グループブロックにカスタマイズをする場合、div.wp-group__inner-containerにCSSを適用することが多かったと思いますが、theme.jsonを有効化するとCSSがあたらなくなるのがわかるでしょう。

こちらの記事ではグループブロックおよびその派生ブロックである横並び・縦積みブロックのtheme.jsonありなしのHTML構造について解説しているので参照ください。

コンテンツ幅の変化

今回のLightningバージョン15でtheme.jsonを有効化した場合のコンテンツ幅（段落や画像などの表示幅）が、従来とは異なる挙動となります。

LightningのHTML構造

テーマLightningのコンテンツ部にかかわる基本的なHTML構造を先に確認しておきましょう。

ブロックエディターで入力したコンテンツ部は、上記の赤枠であるdiv.entry-bodyの中に配置されます。しかし、div.entry-bodyもその上の２つのdivもCSSでは横幅が設定されておらず、結果としてdiv..site-body-containerがコンテンツ幅を決めるコンテナ的な役割を果たします。

したがって、div.site-body-containerと配置したコンテンツ自身のCSSにより、コンテンツ幅が決まります。

段落と画像ブロックを配置した場合（グループブロックなし）

コンテンツとして段落ブロックと画像ブロックを設置した事例が以下の通りです。

.site-body-containerには左右paddingが15pxずつ設定されているため、コンテンツ（段落と画像）の幅は (.site-body-containerの幅) – 30px となります。

.site-body-containerの幅は、PCやスマホなどのデバイス幅に応じて変化し、コンテンツ幅は常に.site-body-conatinerの幅から30px分（左右padding15px分）狭くなります。

上の表のとおり、FHD（1920×1020px）のパソコンであればコンテンツ幅は1100px、デバイス幅375pxのiphone Xであればコンテンツ幅は345px (= 375 – 30px)となります。

コンテンツをグループブロックに入れた場合

しかしながら段落ブロックや画像ブロックといったコンテンツをグループブロック内に配置すると、theme.jsonを有効化の場合次のような挙動となります。

デバイス幅576px以上の場合はグループブロック内外でコンテンツ幅に差はありませんが、576px以下のデバイス（すなわちスマホ）の場合、コンテンツ幅はデバイス幅から60pxも狭くなります。デバイス幅375pxのiphone Xの場合、315pxにまで狭くなってしまうのです。

theme.jsonを有効化しない場合は、このようなことはなく、グループブロックありなしでコンテンツ幅に差はみられません。

コンテナ幅、グループブロック幅、コンテンツ幅のCSSで確認

どうしてこのような挙動になってしまうのか、スマホ画面状態（iphone X）のCSSを確認してみましょう。

合わせてグループブロックを幅広化、全幅化したときにどうなるかも確認します。

段落と画像ブロックを配置した場合（グループブロックなし）

すでに紹介したように、コンテナとなる.site-body-containerは左右padding: 15pxとなっているため、その中に入るコンテンツの幅は、(デバイス幅) – 30pxとなります。

iphone Xの場合は、375px-30px=345pxがコンテンツ幅です。

コンテンツをグループブロックに入れた場合

グループブロックの中に入ったコンテンツには、なぜかmax-width:100%-15px×2が与えられるようになります。その結果コンテンツ幅は、コンテナ幅（.site-body-container）の左右padding: 15pxと合わせて、合計60px分デバイス幅よりも狭くなります。

iphone Xの場合は、375px-60px=315pxにまでコンテンツ幅は狭くなってしまうので、結構きゅうくつな印象のサイト表示になってしまいます。

グループブロックの幅広を適用した場合

グループブロックの幅が100%よりも15px分広くなります。その結果コンテンツ幅も15px幅が広い方向に戻って、(デバイス幅) – 45px となります。

iphone Xの場合、375px-45px=330pxがコンテンツ幅です。

グループブロックに全幅を適用した場合

グループブロックの幅がデバイス幅いっぱいに広がり、幅広よりさらに15px分広くなります。その結果コンテンツ幅は、(デバイス幅) – 30px となります。

iphone Xの場合、375px-30px=345pxがコンテンツ幅となり、グループブロックなしの場合と同じとなります。

まとめ

theme.jsonを有効化したときのグループブロックについてまとめると以下の通りです。

１．HTML構造がシンプルになる

従来div.wp-block-groupの一階層下にあったdiv.wp-block-group__inner-containerがなくなり、シンプルな構造となった。これにより、グループブロックにカスタムCSSを適用していた場合、意図通りのデザインでなくなる可能性がある。

２．スマホ（デバイス幅576px未満）のコンテンツ幅が従来より狭くなる

ブロックの構成	コンテンツ幅
グループブロックなし	(デバイス幅) – 30px
theme.json無効時の グループブロック内	(デバイス幅) – 30px
theme.json有効化後の グループブロック内	(デバイス幅) – 60px
theme.json有効化後の 幅広グループブロック内	(デバイス幅) – 45px
theme.json有効化後の 全幅グループブロック内	(デバイス幅) – 30px

したがって、グループブロックを使わない他のコンテンツと幅を揃えようとするならば、グループブロックは全幅化して使うとよい、ということになります。