Jetpack: Gutenberg Tiled Galleries: "old" circle and square galleries squish the image to fit the width

[mlaetitia]

When checking a gallery created on Jetpack's Tiled Gallery block they now change the images on the thumbnails and squish them.

Can't realy give you the steps to reproduce, this is the code of a gallery that is behaving this way:

<!-- wp:jetpack/tiled-gallery {"className":"aligncenter is-style-square","columns":2,"ids":[2354,2353,2361,2362]} -->
<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-square"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row columns-2"><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img alt="" data-height="1175" data-id="2354" data-link="https://wp20171227.com/2019/04/06/testing-images-and-stuff-in-general/pexels-photo-207962/" data-url="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-207962.jpeg" data-width="1880" src="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-207962.jpeg?resize=1175%2C1175"/></figure></div><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img alt="" data-height="1300" data-id="2353" data-link="https://wp20171227.com/pexels-photo-1732411/" data-url="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-1732411.jpeg" data-width="868" src="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-1732411.jpeg?resize=868%2C868"/></figure></div></div><div class="tiled-gallery__row columns-2"><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img alt="" data-height="1253" data-id="2361" data-link="https://wp20171227.com/pexels-photo-691668/" data-url="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-691668.jpeg" data-width="1880" src="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-691668.jpeg?resize=1253%2C1253"/></figure></div><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img alt="" data-height="1300" data-id="2362" data-link="https://wp20171227.com/pexels-photo-449627/" data-url="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-449627.jpeg" data-width="1733" src="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-449627.jpeg?resize=1300%2C1300"/></figure></div></div></div></div>
<!-- /wp:jetpack/tiled-gallery -->

The exact same gallery if created today:

<!-- wp:jetpack/tiled-gallery {"className":"is-style-square","columns":2,"ids":[2354,2353,2361,2362]} -->
<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-square"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row columns-2"><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img alt="" data-height="1175" data-id="2354" data-link="https://wp20171227.com/2019/04/06/testing-images-and-stuff-in-general/pexels-photo-207962/" data-url="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-207962.jpeg" data-width="1880" src="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-207962.jpeg?resize=1175%2C1175"/></figure></div><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img alt="" data-height="1300" data-id="2353" data-link="https://wp20171227.com/pexels-photo-1732411/" data-url="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-1732411.jpeg" data-width="868" src="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-1732411.jpeg?resize=868%2C868"/></figure></div></div><div class="tiled-gallery__row columns-2"><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img alt="" data-height="1253" data-id="2361" data-link="https://wp20171227.com/pexels-photo-691668/" data-url="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-691668.jpeg" data-width="1880" src="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-691668.jpeg?resize=1253%2C1253"/></figure></div><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img alt="" data-height="1300" data-id="2362" data-link="https://wp20171227.com/pexels-photo-449627/" data-url="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-449627.jpeg" data-width="1733" src="https://wp27122017.files.wordpress.com/2019/01/pexels-photo-449627.jpeg?resize=1300%2C1300"/></figure></div></div></div></div>
<!-- /wp:jetpack/tiled-gallery -->

What I expected

The images to appear in thumbnails without losing their ration. hence, cropped !

What happened instead

The images are being resized - on the post preview and live modes. They appear as they should in the editors.

User report: 2038186-zd

[mlaetitia]

Not sure if you can go there and check the code... So I am attaching it here: https://gist.github.com/mlaetitia/78efa02af8238b4482eaae4f7113f9ae

[sirreal]

Example: p9veV9-Dg-p2

[mahangu]

We should also follow up in 2050217-zen when this is fixed. Same site as OP, but different user.

[lcollette]

I have a user experiencing this issue as well. Internal ref: 2070209-zen

[RealCarFax]

Another user report in #5055489-hc
Using the theme Veni and the square tiles gallery layout.

I was also able to replicate on my own site, see screenshot: https://cloudup.com/cxn73DZnhtT

[Agepeuve]

I got another report of this issue. At first, I thought that it was related to the theme Dyad 2, but I was able to replicate it on Veni too.

2072008-zen

[donpark]

Also see issue #1526 and PR #12732 merged recently and tentatively schedule to ship in 7.5 7.6.

[donpark]

Let me know if this is still happening on WPCOM.

I can't reproduce this on my test site. See https://donparkbiz.wordpress.com/2019/07/08/gutenberg-tiled-gallery-test-2/ showing both Jetpack Tiled Gallery block as well as regular Tiled Gallery block in-use.

[mlaetitia]

I've tested this and it's now working on my test sites - both using the above code or newly created galleries!
Marking as closed !