WordPress 6 update loses all my Div padding and margins

Many thanks for your reply. I might be able to do something like that, I’d have to look into it. But, I have done some tests myself and I wonder if this might help?

I created a small page with a mix of 2 and 3 columns using the wp-block-columns markup that I described before. I pasted the markup into 2 new posts, first on my main site running WordPress 5.9.3, and second on a different website running WordPress 6.

When I previewed both posts, sure enough the one using WordPress 5.9.3 displays the columns correctly, but the one running WordPress 6 has no padding or margins on any of the columns, and they virtually all just merge into one as demonstrated on my previous screenshot.

I then took the source code from both of these previews, and carefully compared them using a very useful tool called Winmerge. What I found is that my main site running WordPress 5.9.3, which displays the columns okay, calls the following stylesheet

<link rel=’stylesheet’ id=’wp-block-library-css

But the source code from WordPress 6 does not. Am I right in assuming that this stylesheet contains the CSS for the wp-block-columns?

I suspect currently that this is the cause. If you can confirm that please, could you also speculate on why it would not be called from WordPress 6?

I might add that I am assuming that very few people use this particular markup inserting it manually in code mode rather than compiling in block editor. I have an explanation as to why I have, but at this point, unless asked, I won’t complicate things further by explaining.

Hi Vijay. Thank you for your continued support. It’s very much appreciated. Presumably both different themes do the same thing then? However, if a theme writes its own wp-block-library-css it seems unlikely that it would replace the block columns css with css that doesn’t style the <div class=”wp-block-columns”> at all – and leave them displaying “broken”.

Also, my current Astra theme is used on both the sites I mentioned, and is the exact same version on both the sites. But it is only when using WordPress 6 that the stylesheet is no longer called. Nothing in Astra has changed, only WordPress has changed, and it is only when WordPress changes that this fault occurs.

In other words, 2 websites using Astra theme displaying the exact same HTML markup, one using WordPress 5.9.3 calls the block library CSS, but the one running WordPress 6 does not. Yet nothing has changed in the Astra theme, only WordPress has changed.

Thank you vijay. I’ve tested with all plug-ins deactivated, and cleared all cache’s including CDN cache and browser cache.

Would WP rocket cache alter the source code of the page?

I wonder if you or someone can create a new post, and in code editor mode paste in the following markup to see if you can replicate this issue?

If it displays properly, with healthy spaces between all of the columns, especially the 2nd and 3rd set of columns (on desktop of course because they get stacked on a mobile) then presumably this shows the issue may be my theme or something else. But if it displays them all of the columns way too close together then this would indicate it may be WordPress 6?

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

This is part 2 of a series of articles about the dangers of modern white goods appliances and how you can improve appliance safety in your home. Read part 1 first (<a href="https://www.whitegoodshelp.co.uk/how-dangerous-are-our-appliances/">How dangerous are our appliances?</a>) for a full understanding of these very real dangers.

This is not just a shallow list of do's and don'ts. It's an in depth look by an experienced engineer, accompanied by reasons and explanations.

</div>
<div class="wp-block-column">
<h2>1: Make the effort to be more aware</h2>
If you are reading these articles you are already being proactive. Part 1 shows that substantially more fires are caused by white goods appliances than you think. Only a fraction are nationally reported. It also states that in a large percentage of cases a user could have avoided an incident if they'd been more aware, or had used the appliance exactly as instructed in the user manual. Not in all cases, but in a very significant percentage. In a way that's good news. We can proactively avoid many of the dangers. Help make others aware too by sharing these articles.

</div>
</div>

<hr>

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

<img src="https://www.whitegoodshelp.co.uk/wordpress/wp-content/uploads/2016/11/Charger-risk.jpg" alt="Charger fire risk" class="alignleft size-full wp-image-22420" width="220" height="195"> Take proper notice of all incidents, not just for white goods. Ensure you don't make the same mistakes. For example there are a lot of reports about things catching fire whilst charging. We might not be able to prevent it (apart from avoiding cheap and possibly counterfeit ones). But if we are properly aware of the risks we <em>can</em> make sure we never charge a product on or next to a flammable surface or object.

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

We can also make sure we never leave something charging totally unattended. This photo shows how my daughter left something charging at our house the other day when we all went out. It would most likely have been fine - but if by any chance it had caught fire it would have set the curtains (and house) on fire.

Do not overload the wall socket by plugging too many appliances in <a href="https://www.whitegoodshelp.co.uk/extension-leads-cables/">Extension leads and cables with appliances</a>

</div>
</div>

<hr>

<div class="wp-block-columns">
<div class="wp-block-column">
<h2>2: Don't risk leaving appliances running</h2>
<img src="https://www.whitegoodshelp.co.uk/wordpress/wp-content/uploads/2013/05/Risk-2.png" alt="Take Risk?" class="alignleft size-full wp-image-12086" width="120" height="80"> You could lose your kitchen or entire house in the "unlikely" event of your washing machine, dryer or dishwasher catching fire if no one is at home. With no one around it would be free to keep burning and do as much damage as possible. Kitchens, garages, or entire houses can be gutted by appliance fires and thousands are. Any pets left in the house can be killed (<a href="https://www.whitegoodshelp.co.uk/dishwasher-fire-risks-real-pet-dogs-killed/">dishwasher fire risks - pet dogs killed</a>).

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

The same applies if you are all in bed. I have an in-depth article on this subject here - <a href="https://www.whitegoodshelp.co.uk/is-it-safe-to-leave-washing-machine-on/">risks involved in leaving a washing machine, tumble dryer or dishwasher running when out or in bed</a>. Some appliances <em>have</em> to be left on all the time so there's little we can do about that - but not washing machines, dryers and dishwashers. Leaving one of these appliances running when out of the house or in bed is merely a convenience. It's never a necessity. So why take any risk - no matter how small you may perceive it? The chances of something happening are arguably very low, but the consequences are catastrophically high. I for one will not take that type of gamble (in just 1 year 13,000 fires were caused by white goods appliances in the UK).

</div>
</div>

• This reply was modified 1 year, 9 months ago by XyZed.

I’ve just tested it on the Twenty Twenty-Two default theme. On this theme none of the columns work at all, all the content is displayed like it is on a mobile phone with each column just stacked. However, I can see in the source code that it does call <link rel='stylesheet' id='wp-block-library-css"

So this seems to indicate that the stylesheet is only not called on WordPress 6 when combined with any of 3 totally different themes.

What I’m struggling to understand is, what has changed in WordPress 6 that has interfered with all these 3 disparate themes’s ability to use the WP block library stylesheet.

I can say for certain that it is something that has changed in WordPress 6, and not in any of the themes. Of course whether this is a bug with WordPress 6, or they have just change something that has affected how the themes work because of poor programming on the theme?

Has anyone else tried this code? As I have got the same results in 4 different themes, and also not using any theme at all other than the default WordPress one, it has to be a bug.

To summarise, a couple of years ago I used the <div class="wp-block-columns"> markup on over 300 articles on my WordPress site. I copied all of the markup directly from 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 <div class="wp-block-columns"> markup no longer styles the block columns, and all columns lose their margins and padding.

If I look at the WordPress 6 block editor columns markup, it has changed, and now has the markup enclosed in several “remarks” – eg. `<!– 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.

I would very much appreciate some help.

Andy