Columns block has layout issue with WordPress 6.0 RC

[marctison75]

I've tested multiple sites that I managed with WordPress 6.0 RC, and I see that it changes and breaks the layout of the columns block on the front-end.

The gutter between the columns is now very small.

The columns are now stacked on tablet while the setting says "Stack on mobile". With WP 5.9, the columns are 50% 50% on tablet (iPad portrait 768px). With WP 6.0 they are 100% which breaks the design of my websites.

You can reproduce this issue with the Twenty Twenty-One or the Twenty Twenty theme, Kadence, and Blocksy.

With Twenty Twenty-Two, the gutter stays the same, but there is the same issue with the columns stacking on tablet.

[nidhidhandhukiya]

Hello @marctison75,
I also able to face this issue.
This is happen because if you check in 5.9 there is a space related css
CSS :-
@media (min-width: 782px) {

.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-
child){margin-left: var(--wp--style--block-gap,2em);
}

}

This css is missing in our latest update that's why this gutter spacing is looking different between both columns.
If we need to make it same so adding this css can solve this issue.

[sabernhardt]

Related change:
​https://github.com/WordPress/gutenberg/pull/37436

[hellofromTonya]

Moving into the milestone for visibility.

[chaion07]

Hello @marctison75 and thank you for reporting this. We reviewed this ticket during a ​recent bug-scrub session. Based on the feedback received we feel the need to create another ticket on on the upstream Gutenberg repository. We hope this will result in more visibility and more people can look into it for a possible solution. @peterwilsoncc has volunteered to create the ticket and currently looking to issues labelled for the column blocks.

Props to @peterwilsoncc

Cheers!

[costdev]

This will need to be addressed in the Gutenberg repository and backported.

The upstream issue can be found here: ​GB 40952.