theme.json があるテーマでの カバーやグループブロック内の要素の 全幅 / 幅広対応調査

[kurudrive]

問題点

現状 theme.json のあるテーマ（ https://github.com/vektor-inc/lightning/tree/feature/theme-json ）だと、インナーブロックで幅広や全幅が使えない

WordPress/gutenberg#37036

これだと、

https://patterns.vektor-inc.co.jp/vk-patterns/online-semminar-page-free/

みたいに、カバーブロックの中に 幅広 要素を配置してはみ出す みたいなレイアウトができない。

対応案

本来はコアの「theme.json があったらインナーブロックの幅指定を無効化する」という機能を無効化するのが理想ですが、ちょっと難しいのではないかと思い、
共通余白のように 独自のUIを追加して、クラスに alignfull や alignwide を追加するようにするのが妥当ではないかと思いますがどうでしょう？

ただ、

• できればコアで使えるようになった時にそのまま移行できるように保存attribute名はコアに揃えたい
• だがしかしコアと同じattribute名だと、コアの幅指定機能と同じく無効化が効いてしまったりしないだろうか？

とか思ったりする今日この頃です。

出来そうかどうか検証よろしくお願いいたします (￣人￣)

[kurudrive]

@shimotmk 明日これ優先で一度調査よろしくお願いいたします。

[shimotmk]

一旦 わかったこと

コアの考え方 全幅 (Full width) ≠ 画面幅
Full widthの場合はmax-widthがnoneになる
ブラウザ幅全体というわけではなく親要素の幅いっぱい

WordPress/gutenberg#29335
WordPress/gutenberg#33374

特にこの辺りでレイアウトが決まらないことが懸念されているっぽい

共有したCSSに準拠しているかどうかはわかりませんが、例を挙げましょう。幅が50％の列ブロック内のグループブロック内に画像ブロックがあり、「ワイド」または「フル」を適用するとします。画像ブロックで何が起こるべきですか？
WordPress/gutenberg#33374 (comment)

ブロックテーマになった時にSingularテンプレートなどでPost Contentに対してContent幅やWideができ、インナーブロックで幅広や全幅が使えないコンテンツ内ではその幅が適応される。

該当のソースコード
https://github.com/WordPress/gutenberg/blob/bf405a3f1280cade6b9f480c973261b987d5fd53/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js#L16-L36

カバーブロック内で全幅にしたければインナーブロックをグループ化すれば全幅は使える、なぜ幅広が使えないかわからない。

[shimotmk]

@kurudrive
block_editor_settings_allのフックでsupportsLayoutをfalseにすることでインナーブロックでも幅の設定が出来ることがわかりました

コード

add_filter( 'block_editor_settings_all',
	function ( $editor_settings ) {
		$editor_settings['supportsLayout'] = false;
		return $editor_settings;
	}
);

メモ
theme.jsonがあるかどうか判断している関数
https://github.com/WordPress/wordpress-develop/blob/ed1f411c564f79d003de8babb485884d0a71caa2/src/wp-includes/class-wp-theme-json-resolver.php#L398-L415

supportsLayoutを設定している変数$editor_settings
https://github.com/WordPress/wordpress-develop/blob/ed1f411c564f79d003de8babb485884d0a71caa2/src/wp-admin/edit-form-blocks.php#L201

最終的に$editor_settingsをjsonに変換してwp_add_inline_scriptで読み込んでいる
https://github.com/WordPress/wordpress-develop/blob/ed1f411c564f79d003de8babb485884d0a71caa2/src/wp-admin/edit-form-blocks.php#L277-L296

$editor_settingsを整形する前の関数get_block_editor_settingsでフィルターフックがある
https://github.com/WordPress/wordpress-develop/blob/ed1f411c564f79d003de8babb485884d0a71caa2/src/wp-includes/block-editor.php#L300-L423

[kurudrive]

@shimotmk うぉー！ありがとー！

[shimotmk]

完了のようなのでcloseします