Jetpack: Gutenberg: Tiled Gallery on Layout Grid invalid content

[jartes]

Steps to reproduce the issue

1. Create a new page on a WordPress.com (tested on Free and Premium).
2. Add a Layout Grid block (any layout).
3. Add a Tiled Gallery block in one of the rows.
4. Add images (I added from Media Library)
5. Publish page.

What I expected

I expected the Tiled Gallery is saved correctly.

What happened instead

The block crashes after publishing the page with the following error: This block contains unexpected or invalid content.

[jeherve]

cc @mkaz. Is that an issue that sounds familiar with the Layout Grid block?

@jartes Thanks for the report. If you open your browser's JavaScript console, do you think you could copy the errors that appear there, and paste them here? It may help us narrow down the issue.

Thank you!

[mkaz]

@jeherve I can duplicate on a simple site. I think the Tiled Gallery has a regression, I see the same error when I'm not using the Layout Grid, however the block can recover on its own, so no error is shown to the user. If you look in the JavaScript console, you'll see the block validation error.

So when Tiled Gallery is used inside Layout Grid (and probably other containers) it can't recover on its own and thus invalidates the block.

[mkaz]

I noticed the difference causing the invalidation between saved body content and generated save content was the flex-basis that looks like it was introduced here https://github.com/Automattic/jetpack/pull/15770

cc: @carlosenamdev

[eduardozulian]

Got another user reporting this on 3167723-zen. In this case, however, the issue is with the Jetpack gallery inside a cover block.

[jartes]

@jeherve Those three errors are shown when the editor is loaded:

index.js?m=1591889108h&ver=b9297f431f9b147c945aaa029fa656c5:2 
Block validation: Block validation failed for `jetpack/tiled-gallery` ({name: "jetpack/tiled-gallery", icon: {…}, keywords: Array(7), attributes: {…}, supports: {…}, …}attributes: {align: {…}, className: {…}, columns: {…}, columnWidths: {…}, ids: {…}, …}category: "design"deprecated: (2) [{…}, {…}]description: "Display multiple images in an elegantly organized tiled layout."edit: ƒ a()example: {attributes: {…}}icon: {src: {…}}keywords: (7) ["columns", "images", "photos", "pictures", "square", "circle", "mosaic"]name: "jetpack/tiled-gallery"save: ƒ (e)styles: (4) [{…}, {…}, {…}, {…}]supports: {align: Array(3), customClassName: false, html: false}title: "Tiled Gallery"transforms: {from: Array(2), to: Array(2)}__proto__: Object).

Content generated by `save` function:

<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:61.89438493201585%"><figure class="tiled-gallery__item"><img alt="" data-height="960" data-id="36" data-link="https://jartespremium.wordpress.com/87454642_808172123030906_8723082641215062016_n/" data-url="https://jartespremium.files.wordpress.com/2020/06/87454642_808172123030906_8723082641215062016_n-e1593245557751.jpg" data-width="652" src="https://jartespremium.files.wordpress.com/2020/06/87454642_808172123030906_8723082641215062016_n-e1593245557751.jpg" layout="responsive"/></figure></div><div class="tiled-gallery__col" style="flex-basis:38.10561506798415%"><figure class="tiled-gallery__item"><img alt="" data-height="530" data-id="35" data-link="https://jartespremium.wordpress.com/digitalizando-pequen%cc%83os-comercio/" data-url="https://jartespremium.files.wordpress.com/2020/06/digitalizando-pequencc83os-comercio-e1593245232872.jpg" data-width="800" src="https://jartespremium.files.wordpress.com/2020/06/digitalizando-pequencc83os-comercio-e1593245232872.jpg" layout="responsive"/></figure><figure class="tiled-gallery__item"><img alt="" data-height="1560" data-id="29" data-link="https://jartespremium.wordpress.com/placeholder-image-2/" data-url="https://jartespremium.files.wordpress.com/2020/06/rachel-pfuetzner-0fn7fxv1ewa-unsplash.jpg" data-width="1560" src="https://jartespremium.files.wordpress.com/2020/06/rachel-pfuetzner-0fn7fxv1ewa-unsplash.jpg" layout="responsive"/></figure><figure class="tiled-gallery__item"><img alt="" data-height="1066" data-id="28" data-link="https://jartespremium.wordpress.com/placeholder-image/" data-url="https://jartespremium.files.wordpress.com/2020/06/qi-bin-w4hbafegiac-unsplash.jpg" data-width="1600" src="https://jartespremium.files.wordpress.com/2020/06/qi-bin-w4hbafegiac-unsplash.jpg" layout="responsive"/></figure></div></div></div></div>

Content retrieved from post body:

<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:61.894384932016%;"><figure class="tiled-gallery__item"><img alt="" data-height="960" data-id="36" data-link="https://jartespremium.wordpress.com/87454642_808172123030906_8723082641215062016_n/" data-url="https://jartespremium.files.wordpress.com/2020/06/87454642_808172123030906_8723082641215062016_n-e1593245557751.jpg" data-width="652" src="https://jartespremium.files.wordpress.com/2020/06/87454642_808172123030906_8723082641215062016_n-e1593245557751.jpg" /></figure></div><div class="tiled-gallery__col" style="flex-basis:38.105615067984%;"><figure class="tiled-gallery__item"><img alt="" data-height="530" data-id="35" data-link="https://jartespremium.wordpress.com/digitalizando-pequen%cc%83os-comercio/" data-url="https://jartespremium.files.wordpress.com/2020/06/digitalizando-pequencc83os-comercio-e1593245232872.jpg" data-width="800" src="https://jartespremium.files.wordpress.com/2020/06/digitalizando-pequencc83os-comercio-e1593245232872.jpg" /></figure><figure class="tiled-gallery__item"><img alt="" data-height="1560" data-id="29" data-link="https://jartespremium.wordpress.com/placeholder-image-2/" data-url="https://jartespremium.files.wordpress.com/2020/06/rachel-pfuetzner-0fn7fxv1ewa-unsplash.jpg" data-width="1560" src="https://jartespremium.files.wordpress.com/2020/06/rachel-pfuetzner-0fn7fxv1ewa-unsplash.jpg" /></figure><figure class="tiled-gallery__item"><img alt="" data-height="1066" data-id="28" data-link="https://jartespremium.wordpress.com/placeholder-image/" data-url="https://jartespremium.files.wordpress.com/2020/06/qi-bin-w4hbafegiac-unsplash.jpg" data-width="1600" src="https://jartespremium.files.wordpress.com/2020/06/qi-bin-w4hbafegiac-unsplash.jpg" /></figure></div></div></div></div>

index.js?m=1591889108h&ver=b9297f431f9b147c945aaa029fa656c5:2 
Block validation: Block validation failed for `jetpack/tiled-gallery` ({name: "jetpack/tiled-gallery", icon: {…}, keywords: Array(7), styles: Array(4), category: "design", …}).

Content generated by `save` function:



md5-aa9d8926c147852fb472bb04b9a49253



Content retrieved from post body:



md5-b7edbf603fd98d8f4eccc06287b22790





md5-c30dbf19f622afc1281908f1c0acf9f4



index.js?m=1591889108h&ver=b9297f431f9b147c945aaa029fa656c5:2 
Block validation: Block validation failed for `jetpack/tiled-gallery` ({name: "jetpack/tiled-gallery", icon: {…}, keywords: Array(7), styles: Array(4), category: "design", …}attributes: {align: {…}, className: {…}, columns: {…}, ids: {…}, imageFilter: {…}, …}category: "design"deprecated: (2) [{…}, {…}]description: "Display multiple images in an elegantly organized tiled layout."edit: ƒ a()example: {attributes: {…}}icon: {src: {…}}keywords: (7) ["columns", "images", "photos", "pictures", "square", "circle", "mosaic"]name: "jetpack/tiled-gallery"save: ƒ wn(e)styles: (4) [{…}, {…}, {…}, {…}]supports: {align: Array(3), customClassName: false, html: false}title: "Tiled Gallery"transforms: {from: Array(2), to: Array(2)}__proto__: Object).

Content generated by `save` function:



md5-3884aad129e71e2ae9f0d2f0d5cde3bf



Content retrieved from post body:



md5-b7edbf603fd98d8f4eccc06287b22790

Thanks!

[hitolonen]

Can replicate the errors on non-WP.com site with Business Plan without layout (Create new Post > Add Tiled Gallery Block).

Tiled Gallery with one image selected from Media library.

/wp-includes/js/dist/blocks.min.js

_Code blocks have the domain and alt codes removed._

Block validation: Block validation failed for `jetpack/tiled-gallery` ( 
Object { name: "jetpack/tiled-gallery", icon: {…}, keywords: (7) […], attributes: {…}, providesContext: {}, usesContext: [], supports: {…}, styles: (4) […], save: save(e), title: "Tiled Gallery", … }
 ).

Content generated by `save` function:

<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:100%"><figure class="tiled-gallery__item"><img data-height="1253" data-id="2117" data-link="https://domain.com/pexels-photo-4555611/" data-url="https://domain.com/wp-content/uploads/2020/07/pexels-photo-4555611.jpeg" data-width="1880" src="https://domain.com/wp-content/uploads/2020/07/pexels-photo-4555611.jpeg" layout="responsive"/></figure></div></div></div></div>

Content retrieved from post body:

<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:100%"><figure class="tiled-gallery__item"><img data-height="1253" data-id="2117" data-link="https://domain.com/pexels-photo-4555611/" data-url="https://domain.com/wp-content/uploads/2020/07/pexels-photo-4555611.jpeg" data-width="1880" src="https://i1.wp.com/domain.com/wp-content/uploads/2020/07/pexels-photo-4555611.jpeg?ssl=1" layout="responsive"/></figure></div></div></div></div> blocks.min.js:3:109688

Block validation: Block validation failed for `jetpack/tiled-gallery` ( 
Object { name: "jetpack/tiled-gallery", icon: {…}, keywords: (7) […], providesContext: {}, usesContext: [], styles: (4) […], title: "Tiled Gallery", description: "Display multiple images in an elegantly organized tiled layout. Serves images using Jetpack's fast global network of servers.", category: "media", transforms: {…}, … }
 ).

Content generated by `save` function:

<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img aria-label="image 1 of 1 in gallery" data-height="1253" data-id="2117" data-link="https://domain.com/pexels-photo-4555611/" data-url="https://domain.com/wp-content/uploads/2020/07/pexels-photo-4555611.jpeg" data-width="1880" src="https://i1.wp.com/domain.com/wp-content/uploads/2020/07/pexels-photo-4555611.jpeg?ssl=1"/></figure></div></div></div></div>

Content retrieved from post body:

<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:100%"><figure class="tiled-gallery__item"><img data-height="1253" data-id="2117" data-link="https://domain.com/pexels-photo-4555611/" data-url="https://domain.com/wp-content/uploads/2020/07/pexels-photo-4555611.jpeg" data-width="1880" src="https://i1.wp.com/domain.com/wp-content/uploads/2020/07/pexels-photo-4555611.jpeg?ssl=1" layout="responsive"/></figure></div></div></div></div> blocks.min.js:3:109688

Block validation: Block validation failed for `jetpack/tiled-gallery` ( 
Object { name: "jetpack/tiled-gallery", icon: {…}, keywords: (7) […], providesContext: {}, usesContext: [], styles: (4) […], title: "Tiled Gallery", description: "Display multiple images in an elegantly organized tiled layout. Serves images using Jetpack's fast global network of servers.", category: "media", transforms: {…}, … }
 ).

Content generated by `save` function:

<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col"><figure class="tiled-gallery__item"><img data-height="1253" data-id="2117" data-link="https://domain.com/pexels-photo-4555611/" data-url="https://domain.com/wp-content/uploads/2020/07/pexels-photo-4555611.jpeg" data-width="1880" src="https://domain.com/wp-content/uploads/2020/07/pexels-photo-4555611.jpeg"/></figure></div></div></div></div>

Content retrieved from post body:

<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:100%"><figure class="tiled-gallery__item"><img data-height="1253" data-id="2117" data-link="https://domain.com/pexels-photo-4555611/" data-url="https://domain.com/wp-content/uploads/2020/07/pexels-photo-4555611.jpeg" data-width="1880" src="https://i1.wp.com/domain.com/wp-content/uploads/2020/07/pexels-photo-4555611.jpeg?ssl=1" layout="responsive"/></figure></div></div></div></div> blocks.min.js:3:109688

[rachelwinspear]

Reported here as well: #3311652-zen

[ersatzpenguin]

I have another report: 14764377-hc

From my testing, the Tiled Gallery block breaks any time it is inside a full-width block. So, a cover block set to full width, or a group block set to full width. Either way. It lets you add the gallery and get it set up, but the moment the editor reloads, it asks about block recovery.

This does not appear to be theme dependent either. It happens in Twenty Twenty and many others.

[wmodes]

Any solution to this? I have this error being thrown with the tiled gallery not within another block.

[jeherve]

@wmodes We've been working on a fix in #16543, but it doesn't quite work yet. Are you experiencing this issue on a self-hosted WordPress site? If so, could you let us know what other plugins are currently active on your site?

Thank you.

[aaronrobertshaw]

A new possible fix is up in https://github.com/Automattic/jetpack/pull/18971. It copies in the changes from https://github.com/Automattic/jetpack/pull/16543 and fixes its deprecation so that runs successfully.