Archived topic
Gutenberg editor is left-aligned and reduced width since WordPress 5.9 update
13 replies · Started by Wes on January 25, 2022
In the WordPress 5.9 update released today, the Gutenberg editor is now left-aligned and showing at a reduced width (full-width blocks do not stretch). It seems to be caused by this code inserted via #generate-block-editor-styles-inline-css.
body .wp-block,
html body.gutenberg-editor-page .editor-post-title__block,
html body.gutenberg-editor-page .editor-default-block-appender,
html body.gutenberg-editor-page .editor-block-list__block {
max-width: calc(1200px - 140px - 140px);
}
If I disable that rule, the editor shows as expected.
Before Fix

After Fix

Note this is only evident on displays wider than 1500px or so. GeneratePress + Premium are both fully updated.
edit: Corrected images, which were previously swapped.
Hi Wes,
Are these blocks are WP blocks and are set to align full?
Let me know :)
I'm very sorry but I just noticed my images were backwards. I must have copied them in the wrong order. I've fixed that now.
Yes, the blocks are set to align full. Here's a better image showing that.

As you can see, it's being limited by that max-width style I quoted above.
Do you have sidebar activated on this page?
Nope, sidebars are disabled site-wide.
Unmentioned previously, but I have this same problem on another GeneratePress site as of WP 5.9. I'm holding off on updating any more sites until I can resolve the issue.
Please let me know if you need a live example.
Hum... any chance you can provide admin access to the site so I can take a look at the backend?
Please use private info field for login details. Thanks!
I've created an admin user for you on an in-development site. See attached for details.
Note that this site uses top-level group blocks of full width. Please let me know if you have any questions.
Hi Wes,
We would recommend set the Content container to full width if you are using any align full blocks on the page.
Can you give it a try:
https://www.screencast.com/t/fqqePq7vIKtN
Thank you, that does appear to fix the problem. I see that's a per-page setting. Is it possible to apply this site-wide, so I don't need to apply it to every page (on every site...)?
Yes, you can use a layout element to achieve this:
https://docs.generatepress.com/article/layout-element-overview/
But we'll still try to fix this issue for non-full-width page editor as well.
Thanks for reporting this to us!
Thanks for your help Ying. I'll evaluate the Layout element as a fix, but would look forward to a hotfix from your team as well.
I'll mark this thread as resolved for now, but if you use threads for tracking bugs do feel free to revert that. Thanks.
Hi there,
Here's a temporary fix until we release 3.1.2:
add_action( 'enqueue_block_editor_assets', function() {
wp_add_inline_style( 'generate-block-editor-styles', '.wp-block[data-align="full"] {max-width: none;}' );
}, 20 );
We'll be releasing 3.1.2 this week after some more time goes by to find any other issues.
Thanks!
Hi Tom,
Just want to bring to your attention while this resolves the alignment issue, the following code you provided to fix Block Editor Width causes the full-screen layout to revert back to left-aligned.
add_action( 'enqueue_block_editor_assets', function() {
global $generate_elements;
foreach ( $generate_elements as $element ) {
if ( 'layout' === $element['type'] ) {
$content_width = get_post_meta( $element['id'], '_generate_content_width', true );
if ( $content_width ) {
$admin_css = 'body .wp-block{max-width: ' . absint( $content_width ) . 'px !important;}';
wp_add_inline_style( 'generate-block-editor-styles', $admin_css );
}
}
}
}, 100 );
Not a big deal right now, but thought you should know.
Thank you.
Thanks for the heads up! That makes sense as that CSS is using !important. You may be able to remove that without re-introducing the bug.
Once we release 3.1.3 with the fix you can remove that function and it should all go back to normal.