SOLVED: Overflow Error with Gutenberg Blocks fullwidth Alignement

Browser: Chrome latest
OS: Windows 11

When settings Gutenberg Blocks to fullwidth alignment, in some cases (I guess with nested group blocks with images), there is a overflow on the frontend. The overflow seems to match exactly the scrollbar width.

When switching to a native WP Theme, this problem does not appear, so it seems a Bricks Thing.

see short video

Hope this can be fixed soon.
Thanks

Hi,
Thanks so much for your report!

I reproduced the issue and added it to our bug tracker.

Best regards,
timmse

Hi,
We’ve fixed this issue in Bricks 1.8.6, now available as a one-click update in your WordPress Dashboard.

Please let us know if you are still experiencing issues.

Best regards,
timmse

thanks a lot. It works now !

Hi!

I still have some issues with gutenberg data in 1.9.7.1. In my Bricks page template, the wordpress post content is in a container.

In gutenberg :

Result on the frontend :

Thanks for your help.

Hi Didier,
Based on the screenshot, I can only say that one or the other style seems to be missing. Does the problem only occur with this block group, or can you reproduce it on another page? If so, please tell me the steps so that I can reproduce it as well.

Hi Timmse,
In my Bricks Page template, the wordpress content is placed in a container with a 1360px max width.

I created another page edited with Guternberg. I just inserted this default Gut pattern :

Here’s the preview in Gutenberg :

Result on frontend :

The inspector shows that the issue is caused by “alignwide” and “alignfull” classes css styles.

image
image

When i deactivate these styles in the inspector, the content is ‘properly’ displayed:

I created another page with a simple structure based on gutenberg ‘group’, ‘stack’ and ‘row’ blocks with different width settings.

Editing in gutenberg, i have this:

Rendered on frontend with Bricks :

Rendered on frontend with Wordpress :

Why so much difference between backend and frontend when working with gutenberg?

Also note that nested blocks in ‘stack’ block are shrinked to 840px in Gutenberg editor.