ブロックの「全幅」「幅広」選択に対応させる方法（メモ）|Personal WP Customization Notes (PWCN)

公開日：2022(令和4)年5月26日／最終更新日： 2022(令和4)年5月26日

画像やカラム、見出し、カバー、テーブルなどのブロックに追加された、コンテンツの幅を指定できる機能が追加されました。

要件としてはWordPress6.0から、theme.jsonのあるテーマだと思われますが、自身ではいつの間にか追加された感があるので、これ以外の状況でも追加されていたのかもしれません。

この機能は、投稿や固定ページ編集画面でブロックを選択した状態で「配置」のボタンをクリックしたとき、今までの「左寄せ」「中央寄せ」「中央寄せ」のほかに、下の画像のような「なし」「幅広」「全幅」が選択できるというものです。

ブロックの「全幅」「幅広」選択に対応させる方法（メモ）|Personal WP Customization Notes (PWCN)

簡単に試しただけですが、この機能は「WordPressテーマにtheme.jsonを入れるとsupportsLayoutがtrueになってしまう問題について」で紹介されているコードを使えば無効にできるようです。

でも、せっかく使える機能なのでできればそのまま活かしたいという場合には、フロントエンド・バックエンド側それぞれで調整が必要になります。

ただ、サイドバーのないシングルカラムのサイト（テンプレート）ならCSSで簡単に幅を広げたり、画面幅に合わせたり（全幅）することができるのですが、親の親が存在するサイドバー付きのテンプレートでは、サイドバー部分の幅が考慮されず、うまく幅が広がってくれません。

この不都合を解消するために、何とかしてサイドバーありでも幅広、全幅にしたいところですが、そもそもサイドバー部分に被る本文のコンテンツというのは必要なの？と私は結論づけました。

そこで、表示画面・編集画面共に、シングルカラムのテンプレートの時には幅広、全幅の切り替えが可能にし、標準テンプレート（サイドバーあり）の時には選択しても切り替えないようにするようにしました。

特に編集画面側でこの措置をするのに結構苦労しましたので、【HABONE】テーマの場合を例に、配置機能をクラシックテーマでも調整して使えるようにする方法を紹介します。

誰かの参考になれば幸いです。

フロントエンド側の措置

【HABONE】テーマでは、テンプレートの本文部分に以下のクラスを指定しています（投稿・固定ページ共通）。

標準（サイドバーあり）・・・contents
シングルカラム幅狭・・・contents-narrow
シングルカラム幅広・・・contents-full

これを前提にして、以下のような順でCSSを適用させていきます。

まずは、サイドバーありの時には何を選択しても本文内へ納めるようにする
次に、幅広の場合で全幅指定したコンテンツの幅と位置を指定する
最後にカバーブロック内に入れたコンテンツで幅広や全幅を指定した場合でも、本文幅より広げないようにする（これの必要性はどうかというところ）

【HABONE】テーマではalignwide(幅広)は、theme.json内のlayout指定で決めているので触る必要はありませんでしたが、テーマによってはさらにいろいろと調整が必要かと思います。

/***** ブロックの幅調整 *****/
/*** サイドバーありの場合 ***/
/* full wideともコンテンツ幅を最大値にする */
.contents .alignfull{
	margin-left: inherit;
    margin-right: inherit;
	max-width:100%;
}

.contents .alignwide{
	margin-left: inherit;
    margin-right: inherit;
	max-width:100%;
}

/*** サイドバーなしの場合 ***/
/* 全幅 */
.alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
}

/***** カバーブロック内コンテンツの幅を制限 *****/
.contents-narrow .wp-block-cover__inner-container {
    max-width: 880px;
}

.contents-full .wp-block-cover__inner-container {
    max-width: 1260px;
}

フロントエンド側はテスト投稿などを作ってテンプレートを切り替えながらデベロッパーツールなどで変更して調整していけばよいので、本ページをご覧になる方なら多分大丈夫でしょう。

問題はこの先、エディタ側の調整です。これにはおまじないが必要でした．．．（笑）。

エディタ側の措置

標準テンプレートに無理やりbodyクラスを付与する

以下のコードで追加したテンプレートにbodyクラスが付与でき、editor-style.cssでbodyクラスを付与すれば、編集画面側でテンプレートごとに制御ができることはこのページをご覧の方ならご存じでしょう。

【HABONE】テーマでは、標準テンプレートのほかに、シングルカラム、シングルカラムワイドのテンプレートがあり、以下のコードを追加して、カスタムテンプレートのbodyクラスを付与しています。

/***** カスタムテンプレート追加時の設定 *****/
/* ページテンプレートにbodyclassを付与する */
function habone_add_admin_body_class( $classes ) {
global $post;
//template class
	if ( isset( $post->ID ) ) {
		$page_template = get_page_template_slug( $post->ID );
	if ( $page_template == 'template/page_single-wide.php' ) {
		return "$classes  contents-full";
	}
	if ( $page_template == 'template/page_single-narrow.php' ) {
		return "$classes  contents-narrow";
	}
	if ( $page_template == 'template/post-single-wide.php' ) {
		return "$classes  contents-full";
	}
	if ( $page_template == 'template/post-single-narrow.php' ) {
		return "$classes  contents-narrow";
	}
	}
	return $classes;
}
add_filter( 'admin_body_class', 'habone_add_admin_body_class' );

しかし、WordPressでは、標準テンプレートかどうか（single.php、page.php）という判断はしてくれないので、上のコードでは標準テンプレート（single.php page.php）の判別ができません。

したがって、サイドバーがある状態のテンプレート（標準テンプレート）でも、「幅広」「全幅」選択時にエディタ上の幅が変化してしまいます。

編集画面上で幅が広がるのに表示画面では本文内に収まるというのは、ブロックエディタという機能として本末転倒になってしまうのでよくありません。

これを解消するには、何とかして標準テンプレートにもbodyクラスを付与して制御するしかありません。

そこで発想を変えて、上記のコードにカスタムテンプレートがなかったら（つまり標準テンプレートだったら．．）というelse条件を追加したものへ入れ替えます。

/***** カスタムテンプレート追加時の設定 *****/
/* ページテンプレートにbodyclassを付与する */
function habone_add_admin_body_class( $classes ) {
global $post;
//template class
	if ( isset( $post->ID ) ) {
		$page_template = get_page_template_slug( $post->ID );
	if ( $page_template == 'template/page_single-wide.php' ) {
		return "$classes  contents-full";
	}
	if ( $page_template == 'template/page_single-narrow.php' ) {
		return "$classes  contents-narrow";
	}
	if ( $page_template == 'template/post-single-wide.php' ) {
		return "$classes  contents-full";
	}
	if ( $page_template == 'template/post-single-narrow.php' ) {
		return "$classes  contents-narrow";
	}
	else{
		return "$classes  normal-temp";
	}
	}
	return $classes;
}
add_filter( 'admin_body_class', 'habone_add_admin_body_class' );

これで、カスタムテンプレートでなかったら、「normal-temp」というbodyクラスを付加することができました。

editor-style.cssで、「幅広」「全幅」選択時に何も変化しないようにする

上記の措置で通常テンプレート（デフォルトテンプレート）だったら「normal-temp」というクラスが付与されるので、以下のコードをadmin-style.cssへ追加して、標準テンプレートで「幅広」「全幅」を選択しても何も起こらないようにします。

/*** デフォルトテンプレートで幅広選択しても無効にする ***/
body.normal-temp .edit-post-visual-editor__post-title-wrapper > .alignwide, body.normal-temp .block-editor-block-list__layout.is-root-container > .alignwide {
    max-width: 880px!important;
}
/*** デフォルトテンプレートで全幅選択しても無効にする ***/
body.normal-temp .edit-post-visual-editor__post-title-wrapper > .alignfull, body.normal-temp .block-editor-block-list__layout.is-root-container > .alignfull {
    max-width: 880px!important;
}

admin-style.cssがないテーマの場合は、admin-style.cssというcssファイルを追加して読み込むか、以下のコードで適用できます。

function ha_admin_css_include(){
echo '<style>
/*** デフォルトテンプレートで幅広選択しても無効にする ***/
body.normal-temp .edit-post-visual-editor__post-title-wrapper > .alignwide, body.normal-temp .block-editor-block-list__layout.is-root-container > .alignwide {
    max-width: 880px!important;
}
/*** デフォルトテンプレートで全幅選択しても無効にする ***/
body.normal-temp .edit-post-visual-editor__post-title-wrapper > .alignfull, body.normal-temp .block-editor-block-list__layout.is-root-container > .alignfull {
    max-width: 880px!important;
}
</style>';
}
add_action('admin_head','ha_admin_css_include');

上記は通常テンプレート（デフォルトテンプレート）だったら「normal-temp」というクラスを付与した前提ですので、そうでないものを指定したければ「body.normal-temp」の部分を変更してください。

WordPressはFSE(フルサイトエディット)化をどんどんしていて、従来のテーマ（クラシックテーマ）や、クラシックテーマにtheme.jsonなどFSEテーマの要素を含めたハイブリッドテーマでは、制御がどんどんカオスな状態になっていきます。

今回の件については事なきを得ましたが、今後どうなるか．．．不安が残るところです。

思い切ってFSEテーマを作るか、FSE対応の2022テーマを使うかしたほうが良いのかもしれませんね。