About the problem that supportsLayout is set to true when theme.json is added to a WordPress theme.

tomoki_shimomura

tomoki shimomura

Posted on May 30, 2022

About the problem that supportsLayout is set to true when theme.json is added to a WordPress theme.

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;
 }
);
Enter fullscreen mode Exit fullscreen mode

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.

💖 💪 🙅 🚩
tomoki_shimomura
tomoki shimomura

Posted on May 30, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024

Modern C++ for LeetCode 🧑‍💻🚀
leetcode Modern C++ for LeetCode 🧑‍💻🚀

November 29, 2024