Repository navigation
Full width of template does not get displayed in Post Editor when Post Content block is in a group #64149
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
- Use an existing template or create a new template
- Add a Post Content block in it, disable "Inner blocks use content width"
- Put the Post Content block in a group and also disable "Inner blocks use content width" on the group
- Create a page that uses this template
- Open this new page from the post editor (not the site editor!)
- Add some blocks, preferrably with a background color
- 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
Activity
richtabor commentedon Jul 31, 2024
I'm able to replicate this as well.
colorful-tones commentedon Sep 10, 2024
I've narrowed down where this is being triggered, but I'm not sure how/why the code is doing what it is doing.
gutenberg/packages/block-editor/src/layouts/constrained.js
Lines 204 to 221 in 07c7821
Peeeet commentedon Sep 23, 2024
Is there a workaround or recommended way to mitigate this? I have found that deleting
layout { contentSize, wideSize }entries from theme.json seems to change this behavior (makes it fill the full width of the post editor - even ignoring horizontal padding and margins) but neither that "fix" nor the results seem ideal...ndiego commentedon Oct 9, 2024
Given that this is not specifically related to WordPress 6.7 and how late we are in the 6.7 release cycle, I am punting this to 6.8.
youknowriad commentedon Dec 3, 2024
Ok, here are my findings today: The dichotomy in rendering is not between "post editor" and "site editor". It's between whether "show template" is used or not (you can check/uncheck it in the preview options).
I think this behavior is actually the expected behavior. This was discussed in length in a previous issue I believe (@jasmussen might remember it) and the idea is that when "show template" is disabled, it's an "abstracted view" that doesn't match entirely what's around the "post content". Some templates might have sidebars, some others might split the view in three columns or two and the post content occupying just a small part of it, other templates might be full width like here. We can't "replicate" that unless the template is actually rendered.
I hope this answers this issue properly. My suggestion is to close this issue as working as intended.
luminuu commentedon Dec 3, 2024
@youknowriad Thank you for your feedback. If this is the expected behaviour, can we then think about having an option to show the contents in full width? I can understand it's working as intended, but I've come across this multiple times now when the user expectiation is "I want to see this in full width", even if it's restricted in the actual front-end view. Sometimes it makes sense to have the contents shown in full width if they're in separate templates. I'm not very much a fan of hard-coding CSS to overwrite this in a plugin, but this is what I've been trying to make it work for the user.
youknowriad commentedon Dec 3, 2024
@luminuu Can you help me understand why the "show template" toggle is not a good solution for this? I want to note that this toggle is enabled by default for "pages" in Gutenberg trunk (next WP version)
jasmussen commentedon Dec 4, 2024
The video demo is compelling because it focuses on just a very specific subset of theme design, where the theme itself uses a centered column, and a use case for a full edge to edge page template is argued for.
However I would agree with Riad that "Show template" is the existing fix for this, for a few reasons, the main being the fact that unless you have "Show template enabled", then the template isn't actually loaded at all. That means for far more complex layouts, notably the multi-column ones that feature a sidebar, and thus toggle off "Inner blocks use content width", the post editor cannot predict at all, what the end result should be: because the template isn't loaded, the post editor doesn't know that the post content is supposed to show up in a column.
These layouts are more common than you think. Which means that if we change this behavior, those themes will have edge-to-edge post content, which is:
So at the core of this issue is the acknowledgement that the post editor is an abstracted editor. It's WYSIWYG when it can be, but what it shows is still just what's inside post content. If you want true full-page WYSIWYG, you have to toggle on "Show template".
youknowriad commentedon Dec 4, 2024
Per the previous comments, I'm going to close this issue as it's working as intended.