[wp-trac] [WordPress Trac] #53563: Global styles layout settings in the editor clash with the frontend

[WordPress Trac]

#53563: Global styles layout settings in the editor clash with the frontend
--------------------------+-----------------------------
 Reporter:  Frank Klein   |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/53563>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform