Make WordPress Core

Opened 17 months ago

Closed 12 days ago

Last modified 7 days ago

#60155 closed defect (bug) (wontfix)

Gallery Block issue with aligning individual images

Reported by: pranitdugad's profile pranitdugad Owned by:
Milestone: Priority: normal
Severity: minor Version:
Component: Editor Keywords: has-test-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 17 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 (7)

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


17 months ago

#2 @webtechpooja
17 months ago

  • Keywords has-testing-info added

#3 @sannevndrmeulen
17 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
17 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
17 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)

#5 @karmatosed
12 days ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

I am going to agree with the suggestion to recommend this to be closed. I am unsure what is to be reported upstream here so for now not taking that action, but more than happy to if I can get a direct report to follow. Thank you for the report and if further information becomes available we can always reconsider.

For now, I am closing with the state 'won't fix' as it is the way this functions. I was torn around adding another state but this feels the best fitting.

#6 @wordpressdotorg
7 days ago

  • Keywords has-test-info added; has-testing-info removed
Note: See TracTickets for help on using tickets.