Global styles layout settings in the editor clash with the frontend

[Frank Klein]

The theme.json file allows the contentSize and wideSize to be set:

{
  "settings": {
    "layout": {
      "contentSize": "580px",
      "wideSize": "900px"
    }
}

When these are set, blocks like the Group block show the Layout panel. Now the default width can be inherited, or blocks can be made wide.

This all works great in the editor, due to the following autogenerated CSS:

.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > * {
    max-width: 580px;
    margin-left: auto !important;
    margin-right: auto !important;
}

 .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > [data-align="wide"] {
    max-width: 900px;
}

This works well on the frontend for blocks that are restricted to the content size. The following CSS is output:

.wp-container-60dc7f6096866 > * {max-width: 580px;margin-left: auto !important;margin-right: auto !important;}.wp-container-60dc7f6096866 > .alignwide { max-width: 900px;}.wp-container-60dc7f6096866 .alignfull { max-width: none; }.wp-container-60dc7f6096866 .alignleft { float: left; margin-right: 2em; }.wp-container-60dc7f6096866 .alignright { float: right; margin-left: 2em; }

However for wide aligned blocks, none of the relevant CSS is output.

.wp-container-60dc7f6096b14 .alignleft { float: left; margin-right: 2em; }.wp-container-60dc7f6096b14 .alignright { float: right; margin-left: 2em; }

There should be the following CSS:

.wp-container-60dc7f6096b14.alignwide {max-width: 900px;margin-left: auto !important;margin-right: auto !important;}

The issue here comes from the difference between a block-based, and a hybrid theme.

In a block-based theme, all blocks are full-width by default. Wide blocks can only break out of content width restricted blocks.

In a hybrid theme though, the content area is restricted--usually through CSS. But wide elements still need to be able to be wider than this container. The only way to get the desired outcome is to wrap the content in a group using the_content filter hooked in super early.

In addition using the layout controls hardcode alignment margins, which makes it difficult to control these through the theme's styles.

[Frank Klein]

Wrote up a very detailed bug report with a complete explanation on the Gutenberg repository: ​https://github.com/WordPress/gutenberg/issues/33385#issuecomment-893551418