WordPressのブロックテーマで、きちんと設定しているはずなのに幅「幅広」や「全幅」の指定ができなくなっていろいろやった結果たどり着いた解消方法は、結果的にはテーマを一旦別のものに切り替えてから元に戻すことでした。
恐らくこのページをご覧になっている方は、今困っている方だと思いますので、どうしてなのか?は後から読んでいただくとして、すぐに試してみてください。私の場合は一旦「Twenty Twenty-Four」へ変更した後に元のテーマへ戻して解消しました。ただし、その間にいろいろと触ってしまったので、ひょっとしたら別の要因があるかも知れませんので、メモとして公開しています。
「幅広」「全幅」の指定ができなくなった経緯と原因の考察
不具合に気付いたきっかけは、このサイトのレイアウトを現在の右サイドバーからシングルカラムに変更するため、試しにテストサイトでテンプレートの編集をした時のことです。
「幅広」「全幅」に対応させるためのブロックテーマの設定方法と確認の仕方については後述する「幅広」「全幅」を有効にするためのブロックテーマの設定確認を参照いただくとして、それらがきちんと設定されているかもじっくりと確認したにも関わらず、ブロックエディターで投稿の編集をしようとしてもブロックツールバーのレイアウトに出るはずの「幅広」「全幅」が出ないという現象が発生しました。
いろいろな項目の確認と編集をしても解決せず、一旦Twenty Twenty-Fiveテーマへ変更したものの、それでも解消されず、結構な時間を費やした後に半ばあきらめてTwenty Twenty-Fourへ変更したところ何となく「幅広」と「全幅」が機能する(ブロックツールバーで選択できるようになる)ようになり、現在使用しているテーマに戻したら、先ほどまで出ていた不具合が解消されていました。
最終的に何が原因で何が要因なのかははっきりしませんでしたが、WordPressはパフォーマンス向上を目的として、いろいろなものをキャッシュ(一時保存)して、それを引っ張り出して適用することが多く、キャッシュの方法(仕組みと保存場所)もさまざまなので、何かをきっかけに現在有効にしているテーマのキャッシュがクリアされ、不具合が解消したのだと思われます。
「幅広」「全幅」を有効にするためのブロックテーマの設定確認
ブロックテーマのサイト幅や特定のコンテンツの幅の設定は以下の優先度で行われています。
- サイトエディターのグループなどの右サイドバーにあるレイアウト項目の「コンテント幅を使用するインナーブロック」が有効になっていて、かつ「コンテンツ幅」と「幅広」に指定されている値
- グローバルスタイル(サイトエディターの三日月マークから個別ブロックの選択をして行う個別ブロックの設定)で「コンテント幅を使用するインナーブロック」が有効になっていて、かつ「コンテンツ幅」と「幅広」に指定されている値
- theme.jsonのsetting→layout項目にある「contentSize」「wideSize」に指定した値
つまり「コンテント幅を使用するインナーブロック」が有効になっていて、値が指定されていなければtheme.jsonの値が採用される仕組みになっています。
そしてブロックについては、ブロックツールバーにレイアウト設定がある(下図)ものは、通常のコンテンツ幅であれば位置の設定を行えるのに加えて「幅広」「全幅」が選択できるようになっていて、「幅広」を選べば上記の条件の幅になるようになっています。

逆にこのツールバーボタンがない場合は、幅の調整はできないということなんですね。
さらにちょっと分かりにくいのが「全幅」の際の振る舞いで、親子関係が重要になります。
例えば以下のようにグループ化したコンテンツがあったとすると、
- グループ1
- グループ2
- ブロック1
- ブロック2
- グループ2
ブロック1やブロック2で「コンテント幅を使用するインナーブロック」が有効になっていて、その上階層のグループすべてで「コンテント幅を使用するインナーブロック」が無効になっていれば、ブロック1や2で「全幅」を指定した場合には画面幅いっぱいになります。
逆にグループ1やグループ2で「コンテント幅を使用するインナーブロック」が有効になっている場合は、ブロック1やブロック2の親に当たるグループに最大幅が設定されていることになるため、いくらブロックで全幅を選択しても、親グループの最大幅(ワイド幅)を超えて画面幅いっぱいにすることはできません。
なので、例えば以下のような投稿テンプレートの階層設定にしておけば、あれ?全幅にならないということは少なくなるでしょう。
- グループ1(main) 「コンテント幅を使用するインナーブロック」は無効
- グループ2(article) 「コンテント幅を使用するインナーブロック」は無効
- グループ3 「コンテント幅を使用するインナーブロック」は有効
- タイトル
- アイキャッチ画像
- コンテンツ 「コンテント幅を使用するインナーブロック」は有効
- グループ3 「コンテント幅を使用するインナーブロック」は有効
- グループ4(aside) 「コンテント幅を使用するインナーブロック」は有効
- グループ2(article) 「コンテント幅を使用するインナーブロック」は無効
つまり幅の調整をしたい一番小さな塊(グループ)にだけ「コンテント幅を使用するインナーブロック」を有効にしておけばいいということなんですね。これを理解していないと、例えばコンテンツブロック(投稿本文)で「全幅」を指定したのに画面幅いっぱいにならないことになってしまうので注意しましょう。
そして前述しましたが、「コンテント幅を使用するインナーブロック」を有効にして、コンテンツ幅と幅広に値を指定していない場合には、theme.jsonの値が適用されるようになっているので、最低限theme.jsonの幅の値はきちんと設定されているか確認しておきましょう。









コメントを残す