About the problem that supportsLayout is set to true when theme.json is added to a WordPress theme.
tomoki shimomura
Posted on May 30, 2022
I was once asked to do something about the fact that I could not select full width or wide in the inner block when I inserted theme.json, so I did some research on theme.json.
Here is a note about it.
Conclusion
I found that I can set full width and wide in innerblock even if the theme.json is used in the theme.
add_filter( 'block_editor_settings_all',
function ( $editor_settings ) {
$editor_settings['supportsLayout'] = false;
return $editor_settings;
}
);
Core code
Function determining if theme.json is present
https://github.com/WordPress/wordpress-develop/blob/ed1f411c564f79d003de8babb485884d0a71caa2/src/wp-includes/class-wp-theme-json-resolver.php#L398-L415
Variable $editor_settings that sets supportsLayout
https://github.com/WordPress/wordpress-develop/blob/ed1f411c564f79d003de8babb485884d0a71caa2/src/wp-admin/edit-form-blocks.php#L201
Finally $editor_settings is converted to json and read by wp_add_inline_script
https://github.com/WordPress/wordpress-develop/blob/ed1f411c564f79d003de8babb485884d0a71caa2/src/wp-admin/edit-form-blocks.php#L277-L296
There is a filter hook in the function get_block_editor_settings
before formatting $editor_settings
.
https://github.com/WordPress/wordpress-develop/blob/ed1f411c564f79d003de8babb485884d0a71caa2/src/wp-includes/block-editor.php#L300-L423
Core idea Full width ≠ screen width
In case of Full width, max-width is none.
Full width does not mean the entire browser width, but the width of the parent element.
Core issues.
WordPress/gutenberg#29335
WordPress/gutenberg#33374
Perhaps the concern is that the difference between Gutenberg's editor and the front-end DOM is not WYSWYG (= you get what you see).
If I put in theme.json, the div is not wrapped on the edit screen because it meets the themeSupportsLayout criteria.
https://github.com/WordPress/gutenberg/blob/e12ac149a1ec47518b011dd5d6d26e224429b1cb/packages/block-editor/src/components/block-list/block.js#L131-L153
https://github.com/WordPress/gutenberg/pull/38613
Also, there are issues like how to do it when I add the left and right margin settings.
So I guess I'm disabling the width setting.
*** Also, if you want full width within the cover block, you can use full width by grouping the inner blocks ***
I don't know why the width can't be used.
Others that have been helpful
The following were also helpful regarding width
https://snow-monkey.2inc.org/2020/01/06/snow-monkey-v9/#co-index-6
https://wordpress.tv/2019/12/21/toru-miki-things-to-be-learn-for-theme-developers/
https://speakerdeck.com/waviaei/gutenberg-yi-jiang-falsetemazuo-cheng-nixiang-kete-jin-xue-bubekikoto?slide=71
There is a comment by hamano in the SWELL repository
https://github.com/loos/SWELL/issues/239#issuecomment-1128692201
I was able to do it, albeit by forcing it from js to supportsLayout:false by writing it like this.
However, when the edit screen appears, it is not possible to specify full width or wide, and inserting some kind of block would allow me to set the width.
Personally, at this point (2022/5/30), I feel that putting theme.json in the classic theme is bubba-jacking.
Posted on May 30, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.