[Resolved] Gutenberg editor is left-aligned and reduced width since WordPress 5.9 update

[Wes]

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.

[Ying]

Hi Wes,

Are these blocks are WP blocks and are set to align full?

Let me know 🙂

[Wes]

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.

[Ying]

Do you have sidebar activated on this page?

[Wes]

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.

[Ying]

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!

[Wes]

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.

[Ying]

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

[Wes]

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…)?

[Ying]

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!

[Wes]

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.

[Tom]

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!

[Math]

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.

[Tom]

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.

[Author]

Posts