WordPress 6 update loses all my Div padding and margins

Will you be able to setup a staging website with the latest WP version so that we could compare the changes and figureout what is changing in the latest version?

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.

I’d like to also add the information that this “fault” also occurs if I paste the markup into a totally different site, that is running WordPress 6, but with a totally different child theme. Therefore it’s probably fair to say it is nothing to do with Astra theme, and is WordPress 6 related?

Base Margin/Padding on those columns comes with wp-block-library-css

but some theme removes this stylesheet and they write thier own block library CSS.

In your current website, I don’t see wp-block-library-css anywhere. all the block column css is coming from theme I guess.

So this could be a theme issue not the WP Core issue.

Themes are responsible for design things. If they are not adding support for blocks then blocks CSS will not be loaded on the page.

Also, if you have custom code that remove block support or any plugin that remove the block support then it could be the problem.

Another issue could be the cache issue. You can disable the cache plugin then test things, as I think WP Rocket might be creating conflicts while generating dynamic and cleaned css for pages.

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.

I would suggest deactivting WP Rocket plugin then check the things without cache and optimization. I feel like things change changing due to optimization only.

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 2 years, 4 months ago by XyZed.

Sorry, I forgot to enclose the markup in code tags, fixed now.

WP rocket have many CSS optmization options. It can generate dynamic css while merging css and can also removed unused css for per page.

Also, when you update the theme you might be seeing old cached css that could create your issue.

All you can do is to disable the WP rocket on both live and staging website then inspect element pages in both website match which css is not removed and from where that css comes from theme or from core.

while your WP rocket is active you can’t find from where your CSS apply the actual margin/padding.

Thank you Vijay. I appreciate the problems that caching can cause. It drives me mad. However, I did say in an earlier reply that I have tested it with all plug-ins disabled, and it is the same.

Also, the second WordPress 6 website that I have tested on in the examples I gave earlier has been upgraded to WordPress 6 for several weeks. And it still does it.

In fact it does it on all of my websites when they are running WordPress 6.

Main website is using Astra pro theme
2nd website is using News Pro theme, Genesis 3.3.5
3rd website uses Metro Pro theme Genesis 3.3.5.
4th website also uses Atra Pro theme

Please accept my apologies if I am fundamentally misunderstanding something ??

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?

After further testing I am confident I know what is causing this issue, but I have no idea why it is happening.

Something changed in WordPress 6 that meant that the code that I have previously used for a long time, and worked in many different versions of WordPress no longer styles the columns. This is a very important issue to me because it breaks my entire site of over 300 articles.

What I’ve discovered by extensive testing on several different sites, with different themes, is that there is now no styling applied to columns unless the markup for the columns is encased in –

<!– wp:columns –>

<!– /wp:columns –>

What is baffling about this is that this markup is supposed to be remarks that are not actually processed by the browser?

I discovered this by taking one of the articles I have, which is broken in WordPress 6 by having no margins or spaces between columns. I then went to the bottom of the page, switched to visual editing, and then added 2 columns, which display perfectly okay.

When I switch back to code editing, I can see the only difference between my previous markup and the markup added by WordPress block editor is that WordPress has added several “remarks”.

I don’t understand why, but clearly columns styling is just not used at all unless the markup is enclosed in these remarks.

Is this a bug? Is there a workaround?

So to summarise, all of my website is made up of 2 and 3 column content. I use the following markup, which I copied from WordPress well over a year ago and has worked through all subsequent WordPress versions up until WordPress 6 –

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

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

</div>
</div>

But this now no longer works unless I had the following remarks –

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

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

• This reply was modified 2 years, 4 months ago by XyZed.

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

You could try opening the Customizer and choosing Additional CSS. Then paste the following styles, which were applied to the columns block in WordPress 5.9:

.wp-block-columns {
  display: flex;
  margin-bottom: 1.75em;
  box-sizing: border-box;
  flex-wrap: wrap !important;
  align-items: initial !important;
}
@media (min-width: 782px) {
  .wp-block-columns {
    flex-wrap: nowrap !important;
  }
}
.wp-block-columns.are-vertically-aligned-top {
  align-items: flex-start;
}
.wp-block-columns.are-vertically-aligned-center {
  align-items: center;
}
.wp-block-columns.are-vertically-aligned-bottom {
  align-items: flex-end;
}
@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }
}
@media (min-width: 782px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*=flex-basis] {
    flex-grow: 0;
  }
}
.wp-block-columns.is-not-stacked-on-mobile {
  flex-wrap: nowrap !important;
}
.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
  flex-basis: 0;
  flex-grow: 1;
}
.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column[style*=flex-basis] {
  flex-grow: 0;
}
:where(.wp-block-columns.has-background) {
  padding: 1.25em 2.375em;
}
.wp-block-column {
  flex-grow: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
.wp-block-column.is-vertically-aligned-top {
  align-self: flex-start;
}
.wp-block-column.is-vertically-aligned-center {
  align-self: center;
}
.wp-block-column.is-vertically-aligned-bottom {
  align-self: flex-end;
}
.wp-block-column.is-vertically-aligned-top, .wp-block-column.is-vertically-aligned-center, .wp-block-column.is-vertically-aligned-bottom {
  width: 100%;
}

A quick test seemed fine, though I cannot be certain it would work for you (now and/or in future releases).

I’m having trouble locating how the styles were changed in 6.0, but I think it checks the content for <!-- wp:columns --> comments before adding the styles in the head element instead of using the wp-block-library-css stylesheet for all blocks.