Skip to content

Full width of template does not get displayed in Post Editor when Post Content block is in a group #64149

Open

Description

Description

Based on feedback I got and my own testing, I found that when editing a page in the Post Editor and the template it's using has the Post Content block nested in a group, the content on the Post Editor is not showing in full width, but in a constrainted view. It works all fine in the site editor and the frontend though.

It makes a difference if the post content block is on the top level of the template vs. if the post content block is nested within a group. If the latter is happening, the following code is applied in the post editor:

.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 620px;
    margin-left: auto !important;
    margin-right: auto !important;
}

The 620px is the content size of TT4, where I tested this with. I can reproduce this problem with the Greyd WP theme as well, so it's not happening in the theme but in the editor. In the post editor, it's impossible to assign any of the alignment classes to a top level element.

The reason why the post content block has to be in a group is that this group has to be set to use the main tag, as otherwise the skip link is not going to be generated by WP, as it requires a main tag in the code. For testing, see the Greyd WP theme template "Blank", which has the exact setup that I used this to test with.

Step-by-step reproduction instructions

  1. Use an existing template or create a new template
  2. Add a Post Content block in it, disable "Inner blocks use content width"
  3. Put the Post Content block in a group and also disable "Inner blocks use content width" on the group
  4. Create a page that uses this template
  5. Open this new page from the post editor (not the site editor!)
  6. Add some blocks, preferrably with a background color
  7. Confirm that the blocks are not displayed in full width

Screenshots, screen recording, code snippet

(Video has audio)

CleanShot.2024-07-31.at.18.33.40-converted.mp4

Environment info

  • WordPress 6.6.1
  • Twenty Twenty-Four 1.2
  • Gutenberg 18.8.0 not installed, but it does not make any difference if Gutenberg is installed

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    CSS StylingRelated to editor and front end styles, CSS-specific issues.Related to editor and front end styles, CSS-specific issues.General InterfaceParts of the UI which don't fall neatly under other labels.Parts of the UI which don't fall neatly under other labels.[Feature] LayoutLayout block support, its UI controls, and style output.Layout block support, its UI controls, and style output.[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended

    Type

    No type

    Projects

    • Status

      🏈 Punted to 6.8

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions