Make WordPress Core

Opened 20 months ago

Last modified 10 months ago

#56950 new defect (bug)

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

Reported by: anonymized_14771642's profile anonymized_14771642 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.1
Component: Editor Keywords: reporter-feedback
Focuses: Cc:

Description

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

Attachments (1)

wp-block-image-class.png (335.9 KB) - added by subrataemfluence 20 months ago.
Tested on WP 6.1

Download all attachments as: .zip

Change History (11)

#1 follow-up: @subrataemfluence
20 months ago

  • Keywords reporter-feedback added

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
20 months ago

Tested on WP 6.1

#2 in reply to: ↑ 1 ; follow-up: @anonymized_14771642
20 months ago

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.

Last edited 17 months ago by anonymized_14771642 (previous) (diff)

#3 in reply to: ↑ 2 @subrataemfluence
20 months ago

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.

#4 follow-up: @poena
20 months ago

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?

#5 in reply to: ↑ 4 @anonymized_14771642
20 months ago

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.

Last edited 20 months ago by anonymized_14771642 (previous) (diff)

#6 @phubner
20 months ago

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

#7 follow-up: @poena
20 months ago

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.

#8 in reply to: ↑ 7 @anonymized_14771642
20 months ago

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

#9 @anonymized_14771642
19 months ago

@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

Last edited 19 months ago by anonymized_14771642 (previous) (diff)
Note: See TracTickets for help on using tickets.