WordPress 6 update loses all my Div padding and margins

Many thanks Stephen. I was very confident your suggestion would work, but sadly it didn’t. I’d already been thinking if I could just get all of the styling code for the columns and add it to my child theme, or to additional CSS as you suggested it would surely work.

It’s a very bizarre problem. I can’t imagine why WordPress would check for remarks instead of the actual markup.

Essentially, it seems like WordPress 6 has abandoned any backward compatibility with the column’s markup.

I ended up in this mess because I was using Genesis theme, and they had the following markup for columns, which I used –

<div class="one-half first">This is an example of a WordPress post, you could edit this to put information about yourself or your site.</div>
<div class="one-half">This is an example of a WordPress post, you could edit this to put information about yourself or your site.</div>
<div class="clearfix"></div>

There was a 3 column version too. But then I moved over to Astra theme. And I found exactly the same issue that I have now. That is, all styling for columns disappeared and it broke my pages..

So what I did was create a blank new post and added 2 and 3 columns using the block editor in WordPress. I then switched to source mode and found that WordPress had created the following markup for 2 columns –

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

</div>
<div class="wp-block-column">

</div>
</div>

I then found that if I placed all <div class="one-half first"> with <div class="wp-block-columns"> and all <div class="one-half"> with <div class="wp-block-column"> my pages were restored and everything looked great.

So I carried out this modification on all 300 pages of my website and it all worked perfectly in WordPress for several months. Then WordPress 6 came out, and the previously perfectly valid markup, that WordPress 5.x.x had created no longer works and breaks all my columns again.

So from my point of view this is something that should never have happened, and oversight? Because previously valid markup, created by WordPress itself, no longer works. Presumably this is not a massively widescale issue because most people use the visual editor? But surely WordPress should not have changed something that breaks previously valid markup?

Many, many thanks for your attention, which is much appreciated.

Hi. Can someone please look into this officially? I’m 100% sure it’s a bug. I’ve been stuck on WordPress 5 for over 2 months now. WordPress 6 has broken previously valid markup, that was previously created by an earlier version of WordPress.

By any standards, that has to be unforeseen or unexpected behaviour. Even adding the <div class="wp-block-columns"> CSS styling to the child theme CSS or in Custom CSS doesn’t work. For some reason WordPress 6 only styles columns if all the markup is surrounded by <!..> comments. If it is not, it does not style them.

I can confirm that the CSS styling for <div class="wp-block-columns"> IS being called on my affected pages –

<link rel='stylesheet' id='wp-block-library-css'...

So this shows that for some unexplained reason, despite valid markup being used, and despite the CSS styling for block columns being loaded, WordPress 6 does not style columns unless the markup is surrounded in loads of <!..> remarks, that I always believed were ignored.

Andy

I managed to find a workaround and fix this, by adding the following css to custom CSS –

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

It seems that for unknown reasons, WordPress 6 does not add any padding between columns unless the markup for wp-columns is encased in specific remarks. Using html remarks, that are normally totally ignored, is apparently a “novel” approach that WordpPress took.

This explains why the CSS suggested by Stephen did not work, because the only thing that was missing was the “gap” between columns.