Title: Updated editor layout support in 6.1 after refactor Author: Isabel Brison Published: October 10, 2022 Last modified: October 11, 2022 --- [ ](https://profiles.wordpress.org/isabel_brison/) [Isabel Brison](https://profiles.wordpress.org/isabel_brison/) 8:29 pm _on_ October 10, 2022 Tags: [6.1 ( 94 )](https://make.wordpress.org/core/tag/6-1/), [dev-notes ( 647 )](https://make.wordpress.org/core/tag/dev-notes/), [dev-notes-6.1 ( 37 )](https://make.wordpress.org/core/tag/dev-notes-6-1/) # Updated editor layout support in 6.1 after refactor WordPress 6.1 brings considerable more flexibility to the layout controls and features to the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor. A new layout type, “constrained”, was added to the already available Flow and Flex layouts types. In addition, layout refactor efforts bring new layout styles, new block level spacing, more semantic class name for layouts, root padding and a method to disable all layout styles all together for themes. ## New “constrained” layout type The new [“constrained” layout type](https://github.com/WordPress/gutenberg/pull/42763) has been split out from the “flow” layout. This means that the “flow” now corresponds only to the base layout configuration. This change moves the content width logic to a new layout type, called **“constrained”** which makes it easier to set blocks to use content width by default. ### What styles does each layout type output? #### Flow layout * Spacing between child blocks with `margin-block-start`, `margin-block-end`; * Left, right and center alignments for child blocks. #### Constrained layout * Spacing between child blocks with `margin-block-start`, `margin-block-end`; * Left, right and center alignments for child blocks; * Width constraints for child blocks (based on settings > layout > contentSize and settings > layout > wideSize from theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.); * Optionally, [left/right/center justification](https://github.com/WordPress/gutenberg/pull/44065) for all child blocks. #### Flex layout (unchanged) * Base flex display rules, defaulting to a horizontal orientation; * Spacing between child blocks with `gap`; * Optionally, left/right/center/space-between justification and horizontal/vertical orientation. ## Layout block support refactor In 6.1, the Layout block support, which powers layout styles for blocks such as Group, Buttons, Social icons, and Columns, has been refactored. Prior to this release, the layout block support would output layout styles at render time for each, and every instance of a block stored in post content or in templates, resulting in redundant styles being output on a site’s frontend as reported in [this Gutenberg issue #41434](https://github.com/WordPress/gutenberg/issues/41434). To address this, [the refactor](https://github.com/WordPress/gutenberg/pull/40875) added the concept of base layout styles by storing a set of layout definitions in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. WordPress theme.json file, that contain the default rules for each of the current layout types. These base layout styles are attached to each of the layout types via a semantic class name with the prefix `is-layout-`, resulting in the following class name-based rules: * `is-layout-flow` (base layout rules associated with the Flow layout used in the Group and other container block) * `is-layout-constrained` (base layout rules associated with the Constrained layout type used in Group and other container blocks that set content and wide sizes) * i`s-layout-flex` (base layout rules associated with the Flex layout type, used in the Buttons, Social Icons, and Columns blocks) Now, when a block that uses the layout support is rendered, one of the above class names will be injected into the block’s output, attaching the base layout styles to that block. The result is that the layout support will now only output a `wp- container-123` classname (where 123 is a semi-random number), and associated styles when a block uses non-default layout attributes. This means a substantial reduction in redundant CSSCSS Cascading Style Sheets. rules for posts or pages containing many Group blocks using the default layout settings. In addition, when the Layout support outputs the `wp-container-123` rules, they are enqueued via the newly added _style engine functions_, so that all the rules are grouped together in the one `style` tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) for output. This further tidies up the CSS output. ### Block spacing enabled at the block level in theme.json A byproduct of the layout refactor is that `blockGap` can now be set at the block level in theme.json and via the global styles UIUI User interface, as gap styles are now also output via the above layout type class names, using direct CSS values, instead of the blockGap CSS variable `--wp--style--block-gap`. For backwards compatibility with themes and blocks that rely on the CSS variable, the value defined for the root `styles.spacing.blockGap` style is also output as a CSS property. **Note:** The Gallery block currently does not support blockGap styles in theme. json as it relies on an ad-hoc approach to gap spacing to factor in widths of the image blocks. ### Semantic class names in Layout support Since WordPress 6.0, the Layout support outputs semantic class names for the layout properties `orientation`, `justifyContent`, and `flexWrap`, resulting in class names such as `is-vertical`,` is-content-justification-left`, and `is-nowrap`. With the changes in WordPress 6.1, combined with layout type-based class names, it is now possible to target a particular configuration of the Group block, e.g., the Stack variation via a rule such as **`.wp-block-group.is-layout-flex.is-vertical`.** These semantic class names are only output for Layout properties that have been explicitly set. ## Root padding By default, root padding, which can be set in Styles > Layout > Padding, is applied to the outermost wrapper element. On the front end that’s `wp-site-blocks`; in the editor it’s `editor-styles-wrapper`. The problem with this approach is that it doesn’t allow for blocks to expand to full viewport width. `useRootPaddingAwareAlignments` changes where left and right padding are applied, so that blocks set to full width can actually span the full viewport width.  ### How does it work? Instead of the wrapper, left and right padding are added to the outermost container block that has a constrained layout set. Then, negative margins of the same value are added to any full width children of that block. Additionally, non-full width children of those full width blocks will also have left and right padding applied to them. This is so that the contents of a full width container block don’t bump against the sides of the viewport. To enable this setting, in theme.json, add `"useRootPaddingAwareAlignments": true` inside the settings object. More background [in Gutenberg ticket #42085](https://github.com/WordPress/gutenberg/pull/42085). ## Disable layout styles theme support By default, WordPress outputs structural layout styles for blocks such as Group, Columns, Social icons and Buttons, as part of the layout block support. Until this point, some themes have been opting out of the generated base layout styles by using an undocumented approach of overriding or removing the `render_layout_support_flag` callback on the `render_block filter`. In WordPress 6.1, base layout styles have been consolidated as part of global styles output, so **the existing approach of opting out of generated layout styles will no longer work.** In its place, themes can now use a new theme support flag, called` disable-layout-styles`. Themes can opt-in to this feature using the following code: ```wp-block-code // Opt in to remove layout styles. add_theme_support( 'disable-layout-styles' ); ``` Using this new theme support flag ensures that the expected behavior is handled explicitly in code. It also allows themes that use this flag to still make use of semantic class names that are injected into layout blocks at render time, such as content justification classes. **Note**: Opting into this feature will remove required styles for blocks such as Group, Columns, Social icons and Buttons, so themes that use this feature will need to supply their own structural layout styles in order for these blocks to render correctly in the editor and on the site’s frontend. In most cases, particularly for blocks-based themes, the generated layout styles are preferable for ensuring the correct rendering of core blocks. For themes that are looking to adjust block spacing, view the handbook entry for [“What is blockGap and how can I use it?”](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#what-is-blockgap-and-how-can-i-use-it). For more detail: Documentation > Block Editor > Explanation > Architecture > [Layout styles](https://developer.wordpress.org/block-editor/explanations/architecture/styles/#layout-styles) _Props to [@andrewserong](https://profiles.wordpress.org/andrewserong/) for co-editing, [@bph](https://profiles.wordpress.org/bph/) and [@webcommsat](https://profiles.wordpress.org/webcommsat/) for review _ [#6-1](https://make.wordpress.org/core/tag/6-1/), [#dev-notes](https://make.wordpress.org/core/tag/dev-notes/), [#dev-notes-6-1](https://make.wordpress.org/core/tag/dev-notes-6-1/) ### Share this: * [ Threads ](https://make.wordpress.org/core/2022/10/10/updated-editor-layout-support-in-6-1-after-refactor/?share=threads) * [ Mastodon ](https://make.wordpress.org/core/2022/10/10/updated-editor-layout-support-in-6-1-after-refactor/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/core/2022/10/10/updated-editor-layout-support-in-6-1-after-refactor/?share=bluesky) * [ X ](https://make.wordpress.org/core/2022/10/10/updated-editor-layout-support-in-6-1-after-refactor/?share=x) * [ Facebook ](https://make.wordpress.org/core/2022/10/10/updated-editor-layout-support-in-6-1-after-refactor/?share=facebook) * [ LinkedIn ](https://make.wordpress.org/core/2022/10/10/updated-editor-layout-support-in-6-1-after-refactor/?share=linkedin) 1. ![](https://secure.gravatar.com/avatar/18f4f7ebdcd48383951a52a88f401bd6460ae74b626016010b1f0604cac90826? s=32&d=mm&r=g) 2. [Jonathan Desrosiers](https://profiles.wordpress.org/desrosj/) 2:03 pm _on_ October 11, 2022 3. ```notranslate add_theme_support( 'disable-layout-styles' ); ``` 4. The disabling aspect feels a bit backwards. Essentially developers are opting- in to opting-out. Adding theme support to remove support for a feature just feels wrong. 5. Was there any reason why something like `add_theme_support( 'layout-styles' )` was not used? This would make opting out become `remove_theme_support( 'layout- styles' )` and feels a bit more natural. 6. * ![](https://secure.gravatar.com/avatar/e65e09083a18b620e48e1317d5790b6b1053bd30d7a10056d6f6568809aac84a? s=32&d=mm&r=g) * [Andrew Serong](https://profiles.wordpress.org/andrewserong/) 11:54 pm _on_ October 11, 2022 * Good question [@desrosj](https://profiles.wordpress.org/desrosj/), in this case the feature was implemented for consistency with the existing opt-out theme supports: `disable-custom-colors`, `disable-custom-font-sizes`, and ` disable-custom-gradients`. I agree it’s a little odd having the opt-in for opting-out, but when folks read through the handbook [theme support page](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#disabling-custom-font-sizes) looking for how to switch things off, I think it’s good that the opt-outs each use a similar pattern. 7. ![](https://secure.gravatar.com/avatar/674eadb427a2f5a5896a80701dc7b16df5c798b052b133094072f5a2ab5884b6? s=32&d=mm&r=g) 8. [pinksharpii](https://profiles.wordpress.org/pinksharpii/) 2:41 pm _on_ November 3, 2022 9. This new is-style-constrained class causes issues for themes without a theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. or a –wp–style–global–content-size defined. They suddenly have no max width because the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. WP CSSCSS Cascading Style Sheets. is so specific it overrides theme CSS. 10. * ![](https://secure.gravatar.com/avatar/bffd352fa7e33a13bc85923e4694e70e89e415875f97dd9aea920fb1a86f83b0? s=32&d=mm&r=g) * [Isabel Brison](https://profiles.wordpress.org/isabel_brison/) 11:41 pm _on_ November 3, 2022 * Hi [@pinksharpii](https://profiles.wordpress.org/pinksharpii/), thanks for your feedback! Could you give an example of a theme on which this issue occurs? The change was tested with Twenty Twenty and Twenty Twenty One and it’s working correctly there. 11. ![](https://secure.gravatar.com/avatar/9039bb1b026b5f62a8a0611d3b77ae95fd41b348188e0907a6f2b314514f6f0c? s=32&d=mm&r=g) 12. [abrenes](https://profiles.wordpress.org/abrenes/) 5:08 pm _on_ November 15, 2022 13. We’ve had an issue with a client’s blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor gallery not displaying correctly due to the upgrade to 6.1. When the block image gallery was added to a page – the global-styles-inline-css would also have this css included: body .is-layout- flex {display: flex;} – but when WP coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. was updated to 6.1– this css style is no longer outputted to the page that has the image gallery added to it. Can’t find any way around it except to install the gutenburg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. – then it displays correctly. 14. * ![](https://secure.gravatar.com/avatar/bffd352fa7e33a13bc85923e4694e70e89e415875f97dd9aea920fb1a86f83b0? s=32&d=mm&r=g) * [Isabel Brison](https://profiles.wordpress.org/isabel_brison/) 3:39 am _on_ November 16, 2022 * Hi [@abrenes](https://profiles.wordpress.org/abrenes/), do you have any other plugins installed which may be interfering with those styles? If not, are you using a theme which may be disabling layout styles? Testing 6.1 with both Twenty Twenty Two and Twenty Twenty Three, without the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/) pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party., I can see those styles being output correctly. 15. ![](https://secure.gravatar.com/avatar/b964ad14efcdb10ccbaf783c2fb21231bcbb78bae335377526efa5b7dead8c9b? s=32&d=mm&r=g) 16. [mpowellifc](https://profiles.wordpress.org/mpowellifc/) 4:47 am _on_ November 23, 2022 17. After an upgrade to 6.1.1 we found that any blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. set with a column width % will break. Coming from 5.8, any page we had set up with a grid layout done with blocks has to be gone over. I can’t imagine this was intended 18. * ![](https://secure.gravatar.com/avatar/bffd352fa7e33a13bc85923e4694e70e89e415875f97dd9aea920fb1a86f83b0? s=32&d=mm&r=g) * [Isabel Brison](https://profiles.wordpress.org/isabel_brison/) 5:23 am _on_ November 23, 2022 * Hi [@mpowellifc](https://profiles.wordpress.org/mpowellifc/), could you please provide more details on what exactly is breaking? Feel free to open a new bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. report in the [Gutenberg repo](https://github.com/WordPress/gutenberg) with the info. 19. ![](https://secure.gravatar.com/avatar/b964ad14efcdb10ccbaf783c2fb21231bcbb78bae335377526efa5b7dead8c9b? s=32&d=mm&r=g) 20. [mpowellifc](https://profiles.wordpress.org/mpowellifc/) 1:42 pm _on_ November 23, 2022 21. Will do thanks! Comments are closed. # Post navigation [← Seeking proposals for Interop 2023](https://make.wordpress.org/core/2022/10/10/seeking-proposals-for-interop-2023/) [Functions and hooks for required fields in WordPress 6.1 →](https://make.wordpress.org/core/2022/10/10/functions-and-hooks-for-required-fields-in-wordpress-6-1/)