Twenty Twenty: blocks are too narrow in editor when the Full Width Template is selected

[aljullu]

When selecting the Full Width Template in Twenty Twenty, the page content is up to 1200px wide in the frontend.

However, the editor has a ​CSS rule that forces .wp-block max-width to 610px.

That produces a styles mismatch between the editor and the frontend. This issue is specially visible in blocks that have different layouts depending on the container width, like the WooCommerce Checkout block (see screenshots), but is still reproducible in any other block (see how the paragraph block line breaks do not occur on the same words editor vs. frontend).

[sabernhardt]

Thanks for the report!

The theme's block editor stylesheets would require some adjustments, but the editor still does not reflect the page template (see GB10640, GB8948, etc.)

[karmatosed]

I am coming to this ticket to see how we can progress and wanted to recap.

• Based on the post format styling, there are always going to be some issues. As you raised in the editor, @sabernhardt, those are still outstanding.
• There could be some stylesheet changes, but those wouldn't resolve the issue.

Based on this, I recommend closing this for now and looking to resolve those issues in the core editor. I am happy to be wrong about that recommendation, though.

[aljullu]

Thanks for checking, @sabernhardt and @karmatosed!

I tested, and the issue is still reproducible on my end with Twenty Twenty and WordPress 6.6. Adding a paragraph block to a post with the Full Width template shows the text breaking in different words in the frontend vs. the editor. I think it would need to be fixed in the theme CSS and not in the core editor.

Having said that, I'm fine closing this issue if you prefer, given that it's quite old, and it looks like there haven't been any other reports of this.

[sabernhardt]

When/if the editor adds a body class such as template-full-width for the page template, this is worth revisiting. For now, I do not think it is feasible.