search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.32k stars 4.12k forks source link

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

Open luminuu opened 1 month ago

luminuu commented 1 month ago

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)

https://github.com/user-attachments/assets/48e943ce-1bbb-4c08-a92a-757c48525df4

Environment info

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

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

richtabor commented 1 month ago

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.

I'm able to replicate this as well.

colorful-tones commented 3 days ago

I've narrowed down where this is being triggered, but I'm not sure how/why the code is doing what it is doing.

https://github.com/WordPress/gutenberg/blob/07c7821b07e5d2b2abaa86f6737dd486da26383e/packages/block-editor/src/layouts/constrained.js#L204-L221