Width-full no longer full width after Gutenberg 13.7.1

[kauaicreative]

This is an issue again after the update Gutenberg 13.7.1

With Gutenberg on left, without on right.

Originally posted by @kauaicreative in #42374 (comment)

[Mamaduka]

Thanks for contributing, @kauaicreative.

Can you provide steps for reproduction? I just tested with Image block, and full width works as expected.

[kauaicreative]

@Mamaduka Images have the same issue for me.
Chrome, Mac
Wordpress 6.0.1
Gutenberg 13.7.1
Twenty Twenty-TwoVersion: 1.2

[kauaicreative]

@Mamaduka Note that the issue only appears on the front end. the editor view is never full width.

[kathrynwp]

@Mamaduka Thanks for having a look.

To replicate:

• WordPress 6.0.1
• Activate Twenty Twenty-Two 1.2
• Activate Gutenberg 13.7.0 (have not tested with other versions of GB)
• Add a Cover block to a static page using the default template
• Set the Cover block to full width
• Look at the page on the front end

Result

With Gutenberg 13.7.0 active, the block is not full width

Expected

The block should be full-width on the front end. With Gutenberg deactivated, it displays as full-width as expected:

I was not able to replicate with Twenty Twenty-One; the full-width cover block remains full width even with Gutenberg active. So this might be related to FSE/block themes.

This issue was also reported here: https://wordpress.org/support/topic/unexpected-lef-and-right-margins/

[kauaicreative]

@kathrynwp It's of interest that, with or without Gutenberg active, the editor always displays left and right margins. It could be argued that the front end showing 100% full width without Gutenberg is the bug. With that said, having 100% full width in a design seems important.

[kauaicreative]

e.g. With Gutenberg on left, without on right. Front end on bottom.
(Also, note that Gutenberg is removing the bottom margin on the group block in the editor.)

[bgardner]

I can confirm this issue, as I noticed the same thing on our Frost website.

Pre-update to Gutenberg 13.7.1:

Post-update to Gutenberg 13.7.1:

[kathrynwp]

@kauaicreative I think in general full-width blocks are intended to be displayed full-width, both in the editor and on the front end. Thanks for the additional screenshots. :)

[tellthemachines]

Seems that an overly-specific CSS rule coming from Core is overriding the negative margins defined by the theme:

The issue has since been fixed on trunk, but the fix hasn't been released yet.

[andrewserong]

@tellthemachines and I have merged a fix for this in #42614 to the release/13.7 branch. It pulls in the fix from #42085 which is due to land in 13.8 (without all the features from the rest of that PR).

We've tagged and pushed a 13.7.2 point release here that includes the fix: https://github.com/WordPress/gutenberg/releases/tag/v13.7.2

I'm just about to wrap up for my week, but let us know if there is more feedback on this issue and we can factor it in to further layout changes in the next release.

[ndiego]

I am going to close this issue now that 13.7.2 has been released with a fix.