Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#55703 closed defect (bug) (reported-upstream)

Columns block has layout issue with WordPress 6.0 RC

Reported by: marctison75's profile marctison75 Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.0
Component: Editor Keywords:
Focuses: css Cc:


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.

Change History (7)

#1 @nidhidhandhukiya
2 years ago

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.

Last edited 2 years ago by sabernhardt (previous) (diff)

#2 @sabernhardt
2 years ago

  • Component changed from General to Editor

#3 @hellofromTonya
2 years ago

  • Milestone changed from Awaiting Review to 6.0

Moving into the milestone for visibility.

This ticket was mentioned in Slack in #core by chaion07. View the logs.

2 years ago

#5 @chaion07
2 years ago

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


#6 @costdev
2 years ago

  • Milestone 6.0 deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

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

The upstream issue can be found here: GB 40952.

This ticket was mentioned in Slack in #core-editor by marctison75. View the logs.

2 years ago

Note: See TracTickets for help on using tickets.