The default margin for .wp-block-image disappears after WordPress 6.1

[anonymized_14771642]

So, I have a few websites running on WordPress, and one of them has just been updated automatically to the 6.1 update, and I noticed that the images don't have any space with the text below them.

After inspecting them, I found out that the margin for .wp-block-image was no longer there.

By default, it was:

.wp-block-image {

margin: 0 0 1em;

}

But after 6.1, it's gone.

Check out the screenshots just to be clear.

​https://i.imgur.com/L9EjpTY.png
​https://i.imgur.com/Qq6bbYQ.png

[subrataemfluence]

Hi @winandarreza , welcome to Trac. Thank you for reporting.

In order to reproduce the issue, I upgraded one of my existing website to 6.1 and created a new post. For me, it did not come up like yours. I could see the CSS class as it was in the previous version. Please see the screenshot.

It would be nice if you send me exactly what steps you followed.

[subrataemfluence]

Tested on WP 6.1

[anonymized_14771642]

Replying to subrataemfluence:

Hi @winandarreza , welcome to Trac. Thank you for reporting.

In order to reproduce the issue, I upgraded one of my existing website to 6.1 and created a new post. For me, it did not come up like yours. I could see the CSS class as it was in the previous version. Please see the screenshot.

It would be nice if you send me exactly what steps you followed.

Sorry I forgot to add details. The issue is not within the editor (while editing), rather it's when the post is published. I see you trying to replicate the issue while on the editing mode, not on the published post itself. Can you try to publish the post and see if the problem still exist on the published post?

The first image (the one below the title) has the margin element, while the later images (the smaller ones) don't.

I've never used any plugins on my site, literally none, so it's not a plugin issue. And I never used the Classic Editor either, so it's not converted into block editor.

[subrataemfluence]

Replying to winandarreza:
Thank you for more details. This will definitely help!

Replying to subrataemfluence:

Hi @winandarreza , welcome to Trac. Thank you for reporting.

In order to reproduce the issue, I upgraded one of my existing website to 6.1 and created a new post. For me, it did not come up like yours. I could see the CSS class as it was in the previous version. Please see the screenshot.

It would be nice if you send me exactly what steps you followed.

Sorry I forgot to add details. The issue is not within the editor (while editing), rather it's when the post is published. I see you trying to replicate the issue while on the editing mode, not on the published post itself. Can you try to publish the post and see if the problem still exist on the published post?

Also, take a look at this one: ​https://escapiso.com/things-to-do-indonesia/

The first image (the one below the title) has the margin element, while the later images (the smaller ones) don't.

I've never used any plugins on escapiso.com, literally none, so it's not a plugin issue. And I never used the Classic Editor either, so it's not converted into block editor.

[poena]

Hi!

If you look at ​https://escapiso.com/things-to-do-indonesia/,
the first image which has the margin is created with:

<figure class="wp-block-image size-full"><img decoding="async" width="960" height="540" src=""></figure>

While the images below uses an extra div:

<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="640" height="360" src=""></figure></div>

This div that was used around the centered image block was removed in WordPress 6.0.
The .wp-block-image is now placed on the figure element.

Can you test if resaving the post removes the div and if that solves the issue?

[anonymized_14771642]

Replying to poena:

Hi!

If you look at ​https://escapiso.com/things-to-do-indonesia/,
the first image which has the margin is created with:

<figure class="wp-block-image size-full"><img decoding="async" width="960" height="540" src=""></figure>

While the images below uses an extra div:

<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="640" height="360" src=""></figure></div>

This div that was used around the centered image block was removed in WordPress 6.0.
The .wp-block-image is now placed on the figure element.

Can you test if resaving the post removes the div and if that solves the issue?

The first image was inserted into the post when the post was published, which is March 4th, 2022, before WordPress 6.0.

While the latter images were inserted into the post after WordPress 6.0.

And unfortunately no, I updated the post and the issue still persists.

However, when I switched to the Twenty Twenty-Two and Twenty Twenty-Three themes, the issue is fixed.

So, I guess this is a theme problem? Should I report to StudioPress to let them know that their theme needs updating to comply with 6.1?

UPDATE: I just contacted StudioPress and they said it's a WordPress Core issue, not Genesis issue.

[phubner]

Just wanted to +1 this. Our contributors just ran across this issue when our site updated to 6.1.

[poena]

I am not able to test with Genesis, but maybe there is a difference between block themes (site editor themes) and "classic" themes that we can continue testing.

[anonymized_14771642]

Replying to poena:

I am not able to test with Genesis, but maybe there is a difference between block themes (site editor themes) and "classic" themes that we can continue testing.

Just to let you know, Genesis Framework is now open source and free to download: ​https://www.studiopress.com/get-genesis/

And here is the Genesis Sample Theme: ​https://github.com/studiopress/genesis-sample/releases/download/3.4.1/genesis-sample.3.4.1.zip

[anonymized_14771642]

@subrataemfluence @poena @phubner

I just did an experiment, and it seems that the issue appears only when the image is aligned center. When no alignment has been made, the margin below the image reappears.

This explains why some images are displayed properly (I didn't centered them).

Check out the screenshots.

​https://prnt.sc/JXvT-RkZA2B3
​https://prnt.sc/2qeQJuHwZR62

[mrfoxtalbot]

Related to #55839?