Images are centered in editor and aligned left in preview

[TheMinimalistNinja]

Description

When I preview a post with WordPress images that are aligned center with the Gutenberg tool shows up as being aligned left in the preview.

Step-by-step reproduction instructions

Picture should align-center when align-center is selected in the editor

Actual behaviour

Picture aligns left in preview

This is the CSS rule which is causing the issue, which is located in https://www.theminimalistninja.com/wp-includes/css/dist/block-library/style.min.css:

.wp-block-image .aligncenter > figcaption, .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption {
display: table-caption;
caption-side: bottom;
}

As a quick fix, I have added the below to my site via https://support.pipdig.co/articles/wordpress-how-to-add-or-edit-css/

.wp-block-image .aligncenter > figcaption {
display: block !important;
}

After removing this, the image appears in the center - https://pip.click/16189096817.png

WordPress information

• WordPress version: 5.7.1
• Gutenberg version: Unsure where to find this info
• Are all plugins except Gutenberg deactivated? No
• Are you using a default theme (e.g. Twenty Twenty-One)? No

Device information

• Device: Desktop
• Operating system: macOS catalina
• Browser: Firefox
  

[hsingyuc]

@TheMinimalistNinja I couldn't reproduce the issue, may I know which theme you are using?

[steve6375]

I use current latest Astra theme and current latest WP
Steps to reproduce:

1. In any page, add a new Image block
2. Click on Media and select any image
3. Type in a caption in the editor - notice that the caption is shown centred in the editor, but the image is left-aligned
4. Now click on Preview - both image and caption are left aligned
5. Page can be saved - editor always show caption as centred until you actually change its alignment to left by using the caption alignment control.

[TheRadicalDreamer]

I was able to repro here:
#33349

[paaljoachim]

Hey @TheMinimalistNinja

The problem is known, but no solution has been added yet.
Here is an older issue:
#17162 (comment)

I assume we can close your issue, as it is a duplicate of the one I linked to.

[paaljoachim]

Check out the PR here: #35787

An easy way to test the PR is following this method: https://make.wordpress.org/design/2021/03/03/testing-a-gutenberg-pull-request-pr/

[annezazu]

Closing this out as a duplicate based on the above :) Let me know if this needs to be reopened though or if I'm missing something.