Gallery Block issue with aligning individual images

[pranitdugad]

In Themes earlier than twenty Twentyone, when images are added in the gallery block and if alignment is added on them, the Gallery block structure breaks.
Video Url - ​https://drive.google.com/file/d/1RjgXCK8C9OLejMf6dqS_9WcaKvz4FK1S/view?usp=sharing

[sannevndrmeulen]

Reproduction Report

This report validates that the issue can be reproduced.

Environment

• Web Server: nginx
• PHP: 7.3.5
• WordPress: 6.4.2
• Browser: Google Chrome
• Theme: Twenty Twenty-One

Actual Results

• ✅ Error condition occurs (reproduced).

Supplemental Artifacts

​https://imgur.com/a/Mn9hZv9

[sabernhardt]

This is not a bug to fix in each theme. If it should change, the report would belong on the ​Gutenberg repository.

Gallery block styles define the images' layout, but the markup for an aligned image block is different for classic themes (such as Twenty Ten to Twenty Twenty-One) than for block themes (such as Twenty Twenty-Two to Twenty Twenty-Four). When an image block has a special alignment in classic themes, the block assigns the .wp-block-image element to a div and set the alignment class on a figure within the div instead of having only the figure (which has all the classes). Meanwhile, the ​block styles use figure.wp-block-image for any theme.

<figure class="wp-block-image size-large">
    <img src="image.jpg" alt="">
    <figcaption class="wp-element-caption">no alignment</figcaption>
</figure>

<div class="wp-block-image">
    <figure class="aligncenter size-large">
        <img src="image.jpg" alt="">
        <figcaption class="wp-element-caption">centered image in a classic theme</figcaption>
    </figure>
</div>

I do not understand why the markup needed to be different, and trying to align an Image block inside a Gallery can have unexpected results, but it may be best to leave it unchanged. I can even think of one desirable situation where setting one image to center alignment can make that image full width, with smaller images around it in two or three columns.

[sabernhardt]

using the current markup and styles to create a special layout of one larger image between four smaller images by selecting Center alignment for the large image (Twenty Twenty, WordPress 6.4)