Make WordPress Core

Opened 4 months ago

Last modified 3 months ago

#60155 new defect (bug)

Gallery Block issue with aligning individual images

Reported by: pranitdugad's profile pranitdugad Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version:
Component: Editor Keywords: has-testing-info close
Focuses: Cc:

Description

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

Attachments (1)

Gallery-with-one-centered-image.jpg (279.6 KB) - added by sabernhardt 3 months ago.
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)

Download all attachments as: .zip

Change History (5)

This ticket was mentioned in Slack in #core-test by webtechpooja. View the logs.


3 months ago

#2 @webtechpooja
3 months ago

  • Keywords has-testing-info added

#3 @sannevndrmeulen
3 months ago

  • Keywords needs-patch added

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

#4 @sabernhardt
3 months ago

  • Component changed from Bundled Theme to Editor
  • Keywords close added; needs-patch removed
  • Summary changed from Bundled Themes: Gallery Block image alignment issue to Gallery Block issue with aligning individual images

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
3 months ago

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)

Note: See TracTickets for help on using tickets.