ブロックエディターを幅広・全幅に対応させる方法

デフォルトでは、ブロックエディターは幅広や全幅には対応していません。

サイトでよく見る、「全幅背景がついたコンテンツ」が、グループブロックの登場によりとてもやりやすくなったので、ぜひとも幅広・全幅は使えるようにしたいですね。

テーマ側で設定が必要

幅広・全幅の対応はテーマの設定が必要です。functions.php に以下の設定を追記します。

add_theme_support( 'align-wide' );

なお、add_theme_supportはafter_setup_theme、もしくはinitの関数内で使用する必要があります。今使用しているテーマが自作の場合は上記の関数内に入れて、テーマディレクトリのテーマなどを使用している場合は、子テーマを作って、子テーマ内のfunctions.phpに以下のように記入しましょう。

if ( ! function_exists( 'gutenberg_docs_theme_setup' ) ) {
	function gutenberg_docs_theme_setup() {
		add_theme_support( 'align-wide' );
	}
}
add_action( 'after_setup_theme', 'gutenberg_docs_theme_setup' );

幅広の場合は.alignwide、全幅には.alignfullというクラスが対象のブロックに追加されます。

なお、このテーマ設定の追加だけではクラスがつくだけで、CSSは自分で準備する必要があります。この追加するCSSは先述した子テーマで作るか、[外観]→[カスタマイズ]→[追加CSS]で追加しましょう。

幅広・全幅が使えるブロック

幅広・全幅はすべてのブロックで使用できるわけではありません。

使用できるブロックは以下のとおりです。

一般ブロック

• 画像
• ギャラリー
• 音声
• カバー
• 動画
• ファイル

フォーマット

• 表
• プルクオート

レイアウト要素

• グループ
• カラム
• メディアと文章

ウィジェット

• アーカイブ
• カレンダー
• カテゴリー
• 最新の記事
• 最新のコメント
• RSS
• 検索
• タグクラウド

埋め込み

すべて対応

---

共通のCSSは.alignwide、.alignfullそれぞれに作っておいて、個別に調整をするのが一番効率がいいのかなと思います。

.alignwide {
	~~~
}
.wp-block-group.alignwide {
	~~~
}

といった具合でしょうか。

参考までに、TwentyTwentyというテーマの中ではかなり細かく.alignwideや.alignfullが設定されていました。

https://github.com/WordPress/twentytwenty/blob/master/style.css

幅広や全幅に対応することで、より表現の幅も広がるので、ぜひトライしてみてください。