Centered images broken inside innerBlocks for WordPress 6.2

[smerriman]

Description

For any custom block that uses innerBlocks, when you center an image inside the innerBlocks, it does not appear centered, either in the editor or on the front-end.

Step-by-step reproduction instructions

Install a default theme, e.g. Twenty Twenty-Two.

Add any custom block that uses innerBlocks - for example, the first one here: https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/

Insert the block, then insert an image inside, and attempt to center it. It won't be centered in the editor, nor if you view the result on the front-end.

From an initial inspection, it looks like the CSS for centered images has changed to only center images within is-layout-flow, or something along those lines, which doesn't exist for other blocks.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.2, no Gutenberg plugin

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[smerriman]

Note that the same applies to some core blocks too; e.g. if you add a Media + Text block, and insert a (secondary) image within the Text column.

[mrfoxtalbot]

Could this be related to #49549 ?

[ndiego]

I am able to replicate this issue using the Media & Text block. See the linked gif below: https://d.pr/i/ev9FJL

However, as a temporary solution, if you wrap the image in a Group block, the alignments do work as expected.

[t-hamano]

I too can reproduce this problem.

Perhaps this problem has existed for some time and is related to a change in the markup of the image block.

According to this article, the HTML differs depending on the presence or absence of theme.json. Therefore, the classic theme with traditional markup will not reproduce this problem.

I think we need to define a centered style to accommodate the new markup.

Twenty Twenty One (Classic Theme)

HTML structure: div.wp-block-image > figure.aligncenter > img

Twenty Twenty Three (Block Theme)

HTML structure: figure.wp-block-image.aligncenter > img

[mrfoxtalbot]

This is still relevant and is also being discussed in Trac and I found an example of someone experiencing this issue in the support forums.