WordPressテーマにtheme.jsonを入れるとsupportsLayoutがtrueになってしまう問題について
theme.jsonを入れるとインナーブロックで全幅、幅広が選択出来ないことをなんとかしろと言われたことがあったのでtheme.jsonについていろいろ調べました。
それについてメモです。
結論
以下のようにするとtheme.jsonを使用しているテーマでもインナーブロックで全幅、幅広が設定できた。
add_filter( 'block_editor_settings_all', __NAMESPACE__ . '\block_editor_settings_all' );
function block_editor_settings_all( $editor_settings ) {
$editor_settings['supportsLayout'] = false;
return $editor_settings;
}
コアのコード
theme.jsonがあるかどうか判断している関数
supportsLayoutを設定している変数$editor_settings
最終的に$editor_settingsをjsonに変換してwp_add_inline_scriptで読み込んでいる
$editor_settingsを整形する前の関数get_block_editor_settingsでフィルターフックがある
コアの考え方 全幅 (Full width) ≠ 画面幅
Full widthの場合はmax-widthがnoneになる
ブラウザ幅全体というわけではなく親要素の幅いっぱい
コアのissues
WordPress/gutenberg#29335
WordPress/gutenberg#33374
おそらくGutenbergのエディターとフロントエンドのDOMが差が出てくることでWYSWYG(=見たままが得られる)ではないことが懸念されているのではないかと思う。
theme.jsonを入れるとthemeSupportsLayoutの条件に合致しているので編集画面でdivがwrapされない また左右のmargin設定を付けたときにどのようにするかなどの問題が出てくる
なので幅の設定を無効化しているのかなと思う。
*** またカバーブロック内で全幅にしたければインナーブロックをグループ化すれば全幅は使える ***
なぜ幅広が使えないかわからない。
他、参考になったもの
幅については以下も参考になりました。
SWELLのリポジトリーでhamanoさんのコメントがあり
こんな感じで書くとjsからsupportsLayout:falseに無理くりではあるが出来ました。
ただ、編集画面が表示されたときには全幅、幅広は指定することは出来ず、何かしらのブロックを挿入すると幅の設定が出来るようになったりする。
個人的には現時点(2022/5/25)ではクラシックテーマにtheme.jsonを入れるのはババ抜きな気がする。。
Discussion