wp-block-columns no margins or padding in WordPress 6

[XyZed]

This issue has been recreated in 4 different themes, Twenty Twenty-Two, Astra, & 2 Genesis themes. Also, with all plugins disabled, and all caches cleared.

I've been using the div class="wp-block-columns" markup via the code editor on over 300 articles on my WordPress site. I originally copied all of the markup directly from the WordPress block editor, so it was totally valid markup.

Everything worked fine through several WordPress updates, until WordPress 6. Now, when using WordPress 6, this markup no longer styles the block columns, and all columns merge into one block and lose their margins and padding.

If I look at the current WordPress 6 block editor columns markup, it has changed, and now has the markup enclosed in several “remarks” – e.g.

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->

So this shows that WordPress 6 has changed how it deals with wp-block-columns markup, but has not ensured backward compatibility with the previous markup. This essentially breaks my website, so I am unable to update to WordPress 6.

[sabernhardt]

Hi and thanks for the report!

This report probably belongs on the ​Gutenberg GitHub Repository.

(additional details are in @XyZed's ​support topic)

[XyZed]

Thanks. Does that mean you've moved it there, or should I?

[sabernhardt]

Sorry, I was not clear :)

It would be better if you ​open an issue there, in case they have questions.

[XyZed]

Thank you. Do you think it's a bug? If not, what could it be? I can't upgrade to WordPress 6 until it's resolved.

[sabernhardt]

I think it's a change that did not take a situation like yours into account, not necessarily a bug. So the Fixing WordPress forum, where you opened a topic, might be the most appropriate place for this.

[XyZed]

Replying to sabernhardt:

I think it's a change that did not take a situation like yours into account, not necessarily a bug. So the Fixing WordPress forum, where you opened a topic, might be the most appropriate place for this.

Thank you for your help. I believe it is in fact a bug. WordPress 6 breaks previously valid html markup, that previous versions of WordPress actually created. That can't have been on purpose?

I can't even try to fix it all manually by editing each page (which would take me several days), because as soon as I try adding any of the <!..> remarks that are now essential for columns to work, WordPress 6 starts adding closing remarks - and often in the wrong places, which messes up my pages even more.

I've updated my other thread, but not received a reply so far. I'm very frustrated at the moment because this is a serious issue for me, (site breaks), and I can't seem to get anyone to accept that it's something that needs fixing.

Even adding the CSS markup for wp block columns to either "Customise CSS", or directly in my child theme's CSS does not work. I also can confirm that the CSS stylesheet for wp columns is loaded on broken pages. It's just not used. WordPress 6 just doesn't acknowledge its previous columns markup without all the "remarks".

Andy

[XyZed]

I managed to find a workaround for this from Github. The solution was to add the following to custom CSS -

.wp-block-columns {
  gap: var(--wp--style--block-gap);
}

It appears that the difference between WordPress 6 and previous versions is that it doesn't add any gap between columns if the markup for columns isn't enclosed in specific remarks. But this css adds the gap.