Riad Benguella 5:29 pm on June 29, 2021
Tags: 5.8 ( 99 ), dev-notes ( 520 ), gutenberg ( 475 )

On layout and content width in WordPress 5.8

WordPress 5.8 introduces Global Settings and Global Styles. They allow theme authors to control and style the available features in the editor and the different blocks using 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..

By using a theme.json file, in addition to the Global styles and settings capabilities, theme authors opt-in into the layout feature for 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. containers.

Layout config

Historically, themes had the responsibility to provide CSSCSS Cascading Style Sheets. styles in order to support aligning content (left, right). With the introduction of the block editor in WordPress 5.0, new alignments has been added to the mix (wide, full). In addition to that, the block editor allowed users to use container blocks (group, columns blocks) which potentially can change how their inner blocks are positioned and aligned. Taking all these variations into consideration has become a very difficult task for theme authors. To address these issues, WordPress 5.8 introduces the layout feature and config.

How do I migrate my theme

Themes that have a centered content area, need to define a layout setting in their `theme.json` file:

{
   "settings": {
       "layout": {
           "contentSize": "800px",
           "wideSize": "1000px"
       }
   }
}

The block-editor will automatically read this config and provide the corresponding styles in the editor. It will allow all alignments to work properly without requiring the `add_theme_support( ‘align-wide’ )` call.

Themes are still required to provide the corresponding styles in the frontend of their sites, something like:

.entry-content > * {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.entry-content > .alignwide {
    max-width: 1000px;
}

.entry-content > .alignfull {
    max-width: none;
}

.entry-content > .alignleft {
    float: left;
	margin-right: 2em;
}

.entry-content > .alignright {
    float: right;
	margin-right: 2em;
}

Note:

It’s not possible for WordPress to generate these styles automatically for all themes because the entry-content className in the example above is not mandatory and may not exist. In the future, with the introduction of the upcoming block themes, these styles won’t be needed anymore.

Nested Blocks

For themes with the layout config enabled, container blocks (like group blocks) do not automatically inherit the layout config. Meaning the blocks added inside the containers will by default take all the available space and not have any wide/full alignments options unless the user defines the wide and content sizes for that particular container block or “inherits” the config from the default layout.

This also means that themers can drop any alignment specific CSS that was added specifically to support nested blocks.

#5-8, #dev-notes, #gutenberg

philhoyt 6:23 pm on June 30, 2021

Meaning the blocks added inside the containers will by default take all the available space and not have any wide/full alignments options unless the user defines the wide and content sizes for that particular container 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. or “inherits” the config from the default layout.

How about blocks which do not have alignment options such as Paragraph? The work around I’ve found is to place a single column block, align that, and then the paragraph block. But this feels clunky.
- Rich Tabor 2:29 pm on July 1, 2021
  
  Agreed. I’ve always thought it interesting that the Heading 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. lets you set wide/full alignment, but the Paragraph block does not.
  - nick6352683 5:00 pm on July 1, 2021
    
    Just put the paragraph(s) into a Group or Cover 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., and set the wide/full alignment there…
    - philhoyt 5:03 pm on July 1, 2021
      
      I already described such a solution as… clunky
  - keithdevon 6:40 pm on July 1, 2021
    
    I’ve been enabling paragraph alignment in editor.js on my recent themes.
- Riad Benguella 11:08 am on July 5, 2021
  
  Good remarks here, I agree that the alignment options seem independent of 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. itself but rather an option that should be added to all blocks depending on their containers instead.
  
  The challenges there is how to do it without having a big impact on the UIUI User interface (block toolbars…). I’d love to explore this further.
James 10:23 am on July 28, 2021

“Themes that have a centered content area” – but what about themes that do not meet this? Many of my themes do not have a centered content area, so therefore the layout{} options are not suitable for my designs.
There is also a 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. in 5.8 it seems. When using 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. then add_theme_support( 'align-wide' ) stop working (with or without layout{}) – for our team this is a showstopper as it breaks various aspects of backend and frontend display, so currently theme.json is not production ready.
- Riad Benguella 11:49 am on July 28, 2021
  hi James, happy to clarify here.
  Many of my themes do not have a centered content area, so therefore the layout{} options are not suitable for my designs.
  
  In this situation, just don’t define any layout on your 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. file. That means the editor will be full width just like your theme.
  When using theme.json then add_theme_support( ‘align-wide’ ) stop working (with or without layout{}) – for our team this is a
  
  That’s not a 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., when using theme.json you’re option-in into the layout config, meaning that theme support flag is not how you define this anymore.
  
  – If you do support wide alignments, define the layout with the corresponding widths.
  - If you’re theme doesn’t have wide alignemnts/center area, drop the layout config like suggested above.
  There’s potentially a third-use case which is not covered declaratively. Your theme doesn’t support wide/full alignments but you want your editor to be “centered”. You can use add a `.wp-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. { max-width: 720px; }` to your editor styles in that case.
  
  I hope this helps.
  - James 8:20 am on July 30, 2021
    
    Thanks for the reply Riad. If using 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. means we must use the layout{} controls, that doesn’t work for at least three of our enterprise clients sites and we won’t be able to move forward using theme.json. The sites have a centered container that has content left aligned but also width restricted. If all blocks are centered, the max-width means they are unaligned in the editor (i.e. a 700px wide paragraph doesnt align next to a 900px heading). Blocks can use wide or full to break out of the container.
    But as soon as we use theme.json without layout{}, all our the blocks wide/full alignment options disappear. Makes no sense to me, as we still have ‘align-wide’ in our functions.
    More on our specific issues: https://github.com/cncf/cncf.io/issues/449
    Similar 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 on GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/: https://github.com/WordPress/gutenberg/issues/33374
    
    Enabling the layout{} and controlling group width also centres content, what if left-align is wanted? https://core.trac.wordpress.org/ticket/53748
    - Frank Wazeter 7:15 pm on October 15, 2021
      
      You can always override the CSSCSS Cascading Style Sheets. on wp-container- that’s generated – it puts in align-left / right margin auto. Although the simplest and probably most flexible option is simply making a full-width group 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. and containerizing the alignment’s wanted.
      - James 2:21 pm on October 16, 2021
        
        I’ll check it out again since its 3 months since last looking at it. But your suggestion doesn’t sound overly practical for 1000+ blogblog (versus network, site) posts to be amended to be put in groups simply to get basic alignment working. We’ve already told the clients that their current designs may not work in future WordPress updates, so we are already preparing for a redesign. But this is the first time in 15 years of creating WordPress sites we’re having to change the design to accommodate WP, and that is not a trend I want to promote.
Kuroweb 11:59 pm on September 10, 2021
Hello,

I’m trying to figure out the benefit of wp-container-xxx with inline-style in the body (especially when it “inherits” the config from the default layout)
```
<div class="wp-container-613be775099b4 wp-block-group"></div>
<style></style>
<div></div>
```
That’s a lot of repeating code in the body and it causes problems of CSSCSS Cascading Style Sheets. selector (for example div + div).

Why not use global styles from the head ? (in the same logic as the colors)
```
"layout": {
"contentSize": "64rem", 
"wideSize": "85rem"
}
```
```
<div class = "wp-container-content-size wp-block-group"></div>

[code]<head>
<style>
.wp-container-content-size  > * {max-width: var(--wp--preset--content-size);}
.wp-container-wide-size  > .alignwide {max-width: var(--wp--preset--wide-size);}
.wp-container-wide-size .alignfull { max-width: none; }
.wp-container-wide-size .alignleft { float: left; margin-right: 2em; }
.wp-container-wide-size .alignright { float: right; margin-left: 2em; }
</style>
</head>
```
It would be interesting to limit the use of inline style and add also a “wide layout” toggle (not only default content size).
- Kuroweb 12:05 am on September 11, 2021
  
  Correction : In my example I should have indicated “.wp-container-content-size” for each style
- Riad Benguella 2:36 pm on September 15, 2021
  
  Hi there, good observation. The use of these 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.) is needed because the “layout” styles are specific to each container 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.. One container can have some given width, while another can have a completely different one. Also we’re working on new kind of layouts (flex, grid…) where these widths/styles don’t make sense at all. Consider these as specific to a given block.
  
  That said, there are some common things (like left, right alignments) and we’ll be looking at ways to avoid the repetition there potentially by introducing classnames like `wp-container-flow` `wp-container-flex`…
  - hozefasmile 2:30 pm on September 17, 2021
    It is just not only the repeating issue, but also the conflicting issue, for example look this code
    
    .wp-container-6144a14de8dd1 > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }
    
    This comes repeating for each group 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.. if we don’t want that margin top or want to change bottom margin, we have to override it by apply !important css to any particular block affected by the above css. Why we repeat this for each group ? why can’t we apply it in global-styles-inline-css ?
  - Riad Benguella 3:04 pm on September 17, 2021
    
    > if we don’t want that margin top or want to change bottom margin, we have to override it by apply !important css to any particular 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. affected by the above css.
    
    Mind noting that block gap is not on WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. yet. And the idea here is that the Group block is getting a “block gap” control on its sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. very soon to tweak this value for each container. Not all groups have the same gap.
  - Kuroweb 1:23 pm on September 21, 2021
    
    I think semantically it would be correct to declare the wp-xxx as an ID, because it is unique:
    
    But shouldn’t that be an option, to authorize or not the customization of elements ? (width, marging, gap, ..).
    
    If I declare 3 widths (fullsize, large size and content size), I expect it to be defined in my global styles. It is the principle of CSSCSS Cascading Style Sheets. to avoid code repetition when we can use classes (limit the use of IDs and !important), which is the case here since we have 2 widths defined by default.
    
    I like Gutunberg for its simplicity and the idea of preparing templates for users, but also the fact that they can start from scratch to create an article without being afraid of doing a “mistake” (starting with a single paragraph).
    
    I provide a graphic charter and they play with it (change the color of a title, a background or a button according to a defined palette, choose the width of a 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. among 3 possible options, ect …). I consider it’s my job to set a vertical rhythm and take care of the margins in the CSS.
    
    So I have no interest in allowing the user to customize everything (if I want him to disfigure the design with a bunch of options and have disgusting CSS I use a page builder ^ ^ )
    
    For the moment I do not use 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. but I am inspired by logic while waiting to see the evolutions (I do not apply anything to “wp-block-group__inner-container” considering that it will no longer exist , I use same logic of “max-width” instead of the “negative margins” approach > https://themehybrid.com/weblog/block-containers-and-wide-full-alignment).
    - Kuroweb 1:24 pm on September 21, 2021
      
      <div id="wp-container-613be775099b4" class="wp-block-group"></div>