Cannot center align image within cover

[Andrew-Starr]

Description

With an image inside a cover, setting the image to align center does not center the image.

Step-by-step reproduction instructions

Add a cover block.
Add a smaller image inside the cover.
Set the image alignment property to center.
The image does not align to the center, and is incorrectly left aligned.

Screenshots, screen recording, code snippet

Environment info

Latest WP and Gutenberg.
Issue is also present without Gutenberg active.

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

[Mamaduka]

Thanks for contributing, @Andrew-Starr!

I wonder if this is related to the Cover missing layout support.

If I wrap it into the Group block, I can get image alignments working correctly.

[Andrew-Starr]

I should also mention that the issue seems to only be present with block themes.

With a classic theme, WP core or Gutenberg provides the following block styling that will center align an image wherever it is placed.

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

This styling is not present when a block theme is active.

Instead centering seems to be styled in Gutenberg:

body .is-layout-flow > .aligncenter {
  margin-left: auto !important;
  margin-right: auto !important;
}

The issue with this is that the parent container <div class="wp-block-cover__inner-container"> does not contain the is-layout-flow class.

And in core:

.wp-container-8 > .aligncenter {
  margin-left: auto !important;
  margin-right: auto !important;
}

Similarly here the cover inner container is missing from the generated inline container styling.

[jordesign]

I can no longer recreate this - images within cover blocks can be center aligned in WP6.3.

Closing this issue as no longer reproducible