WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 6 weeks ago

#53563 new defect (bug)

Global styles layout settings in the editor clash with the frontend

Reported by: Frank Klein Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.8
Component: Editor Keywords:
Focuses: Cc:

Description

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.

Change History (5)

#1 @SergeyBiryukov
3 months ago

  • Component changed from General to Editor

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


2 months ago

This ticket was mentioned in Slack in #core by desrosj. View the logs.


2 months ago

This ticket was mentioned in Slack in #core by desrosj. View the logs.


2 months ago

#5 @Frank Klein
6 weeks ago

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

Note: See TracTickets for help on using tickets.