Gallery issue on WordPress 5.9 on iPhone

[droidspirit]

Hello,

the gallery will not be displayed correct on iPhone on WordPress 5.9.

I have created 2 sandbox-installation to test this issue and I have made a video to show the issue:

​https://youtu.be/xI13dmMBXDs

From 00:00 to 01:25 I have created a new post with a gallery on WordPress 5.8.3. Everything looks good on Android device and iPhone device.

From 01:25 to 03:04 I have created a new post with a gallery on WordPress 5.9. On Android devices it looks fine, but on iPhone the gallery will not displayed correct. The images are displayed one below the other on iPhone.

At 03:25 you will see, that the sourecode how the gallery works is different between WordPress 5.8.3 and WordPress 5.9.

You can test it on my sandboxes here:

Username: rb
Password: victoriousseal

Wordpress 5.9
​http://ba9vjwt.myraidbox.de/

Wordpress 5.8.3
​https://b10zrzp.myraidbox.de/

Thank you and best regards
Andre

[andrewserong]

Thanks for opening this issue @droidspirit, and for sharing the video and links. From the video you shared, it looks like the CSS styling to make the gallery image's figure element full width is coming from a theme's stylesheet that targets that element (with a class name that appears to only be applied in iOS?)

@media (max-width: 767px)
.td-md-is-ios .tagdiv-type figure {
  width: auto !important;
}

The gallery block's markup was updated in WordPress 5.9 to support image blocks as inner blocks, and to bring the markup in line with the W3C WAI guidelines on the grouping of images, which involved switching over to using the figure element via the image block. It was a breaking change in 5.9, so some themes will need to be updated to reflect the new markup in order to be fully compatible with 5.9.

Here are a couple of links for further context (the first one includes some suggestions for targeting selectors):

​https://make.wordpress.org/core/2021/08/20/gallery-block-refactor-dev-note/
​https://www.w3.org/WAI/tutorials/images/groups/

[droidspirit]

Hi Andrew,

thank you for the explanation.

I have talked with the theme developer and added the following custom code in my site:

.td-md-is-ios .tagdiv-type .wp-block-gallery figure{
width: calc(50% - var(--gallery-block--gutter-size, 16px)/2)!important;
}

With this changing the gallery works fine on iOs. The theme developer will also update this on its next theme update.

Best regards
Andre

[andrewserong]

Okay, great. Thanks for confirming, Andre!