Rowling: Image Block Center Alignment Not Working

[mariammcWP]

Quick summary

Center image alignment is not working when using the Image Block on the Rowling theme.

Steps to reproduce

1. Create a post on a site that uses the Rowling theme.
2. Add an image using the Image Block.
3. Adjust the block's settings to make the image alignment centered.
4. Preview or publish the post.

What you expected to happen

The image should be aligned to the center when that option is selected on the Image Block's settings.

What actually happened

The image got aligned to the left side instead.

Browser

Google Chrome/Chromium

Context

Using the same image (and post content), the image alignment works with a default theme like Twenty Twenty Four.

Platform (Simple, Atomic, or both?)

Simple

Other notes

No response

Reproducibility

Consistent

Severity

One

Available workarounds?

No but the platform is still usable

Workaround details

No response

[tanjoymor]

To add to this, it only happens when a link is added to the image. Whether it's the "link to image" option or a custom link.

[tanjoymor]

Just did some more testing and it happens in the Twenty Nineteen and Business themes too. So maybe a broader Classic theme issue?

Except it doesn't happen in Radcliffe 2 or Independent Publisher 2.

[dsas]

On Radcliffe2 then this rule is applied:

.wp-block-image .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

and also

.wp-block-image .aligncenter, 
.wp-block-image .alignleft, 
.wp-block-image .alignright, 
.wp-block-image.aligncenter, 
.wp-block-image.alignleft, 
.wp-block-image.alignright {
  display: table;
}

The same rule isn't there on Rowling, but it does have the below, which comes from rowling's style.css (fbhepr%2Skers%2Sjcpbz%2Qcho%2Qgurzrf%2Sebjyvat%2Sfglyr.pff%3Se%3Qso41344r%231892-og).

.post-content .aligncenter:not(.wp-block-social-links), 
.post-content figure.aligncenter, 
.post-content .aligncenter img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

removing the display:block from there will center the image because then this rule will not be overridden:

.wp-block-image .aligncenter, 
.wp-block-image .alignleft, 
.wp-block-image .alignright, 
.wp-block-image.aligncenter, 
.wp-block-image.alignleft, 
.wp-block-image.alignright {
  display: table;
}

However removing the rule will likely break posts authored in the classic editor.

[dsas]

I'm unsure how far the problem goes - is this just restricted to images? How many themes are affected? So i'm not sure how best to approach a fix yet.