Image Block: Image with aligncenter class no longer centered when used in a nested block

[ocean90]

Description

When you add an image block into a group or column and set the alignment to center the image is no longer centered. It's only centered if the block is added on the top-level.

This was likely introduced by #38613 and/or #38657 while the top-level alignment is working due to changes in #38947.

This style is now no longer applied:

gutenberg/packages/block-library/src/image/style.scss

Lines 59 to 62 in e863928

	.aligncenter {
	margin-left: auto;
	margin-right: auto;
	}

Only this, which has no effect:

gutenberg/packages/block-library/src/image/style.scss

Lines 15 to 17 in e863928

	&.aligncenter {
	text-align: center;
	}

@youknowriad, @jasmussen What would be the correct fix here?

Step-by-step reproduction instructions

1. Add a group block, set some background color
2. Add an image block into the group block
3. Resize the image so it's smaller than the group block width
4. Change image alignment to center
5. Notice that the image is not centered

Screenshots, screen recording, code snippet

Environment info

• Gutenberg 12.7 and trunk

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

[youknowriad]

I think we need to add a generic aligncenter style to the "flow" layout (like we do for left/right alignments). Potentially we could remove the styles that are specific to the image block if we can (or keep them for classic blocks only)

[ocean90]

But since aligncenter now also has display: table assigned, setting margin has no effect on the element. It needs to be display: block to make it work but that again breaks the caption if set. Am I missing something?

I guess I did something wrong when I tried it the first time. margin-left/margin-right will work.