Tiled Gallery: Fix block validation errors caused by inconsistent flex-basis style

[aaronrobertshaw]

Fixes #16514
Closes #16543

A change made to the Tiled Gallery last year to fix mosaic and column layouts on AMP pages (#15770) introduced a block validation issue. This was a result of applying a decimal percentage width to columns via an inline flex-basis style. In the actual block content those decimal values were rounded to 12 places whereas the save function allowed 15. This inconsistency meant the two didn't match and caused the error.

This PR is essentially a clone of #16543 with fixes applied so the v3 deprecation runs correctly. I ran into issues rebasing the original PR after the recent Jetpack restructure hence this fresh PR.

Changes proposed in this Pull Request:

• Restrict the percentage columns widths applied as flex-basis inline style to 5 decimal places
• Add deprecation to migrate blocks with a flex-basis style already applied

Does this pull request change what data or activity we track or use?

No change.

Testing instructions:

• On a wpcom site, create a new post, insert a layout grid and tiled galleries within its columns
• Assign one gallery the mosaic block style and another the columns style
• Save the post and reload the editor, you should receive block validation errors
• Sync this PR or apply its diff to your sandbox and sandbox your test site
• Reload the editor again and you should not encounter the block validation error
• In dev tools check the console logs to ensure the deprecation ran and the block successfully migrated

Screenshot

Proposed changelog entry for your changes:

• Bug Fix: Prevent block validation errors for tiled galleries with mosaic or column layouts.

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ❌ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

If you are an automattician, once your PR is ready for review add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.undefined

---

jetpack plugin:

• Next scheduled release: April 6, 2021.
• Scheduled code freeze: March 29, 2021

[glendaviesnz]

This worked for new blocks added after the patch applied, but the block added prior to applying the patch still throws a validation failure after patch applied:

Block validation: Expected attribute 'style' of value 'flex-basis:60.2428555574296%', saw 'flex-basis:60.24285555743%;'

full block content:

`<!-- wp:jetpack/layout-grid {"column1DesktopSpan":6,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":6,"column2TabletSpan":4,"column2MobileSpan":4,"className":"column1-desktop-grid__span-6 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-6 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:jetpack/tiled-gallery {"columnWidths":[[60.2428555574296,39.7571444425704]],"ids":[424,422,420]} -->
<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:60.24285555743%;"><figure class="tiled-gallery__item"><img alt="" data-height="194" data-id="424" data-link="https://mysite.com/tree5-1/" data-url="https://mysite.com/2021/01/tree5-1.jpeg" data-width="260" src="https://mysite.com/2021/01/tree5-1.jpeg" /></figure></div><div class="tiled-gallery__col" style="flex-basis:39.75714444257%;"><figure class="tiled-gallery__item"><img alt="" data-height="168" data-id="422" data-link="https://mysite.com/tree1-1/" data-url="https://mysite.com/2021/01/tree1-1.jpeg" data-width="299" src="https://mysite.com/2021/01/tree1-1.jpeg" /></figure><figure class="tiled-gallery__item"><img alt="" data-height="168" data-id="420" data-link="https://mysite.com/tree6-1/" data-url="https://mysite.com/2021/01/tree6-1.jpeg" data-width="299" src="https://mysite.com/2021/01/tree6-1.jpeg" /></figure></div></div></div></div>
<!-- /wp:jetpack/tiled-gallery --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

[aaronrobertshaw]

This worked for new blocks added after the patch applied, but the block added prior to applying the patch still throws a validation failure after patch applied:

Block validation: Expected attribute 'style' of value 'flex-basis:60.2428555574296%', saw 'flex-basis:60.24285555743%;'

I think that particular message is a bit of a read herring. Looking at the other validation errors they show the new deprecation rounding the flex basis value so the style matches. It looks like I had a data attribute in the deprecation's gallery image save function that shouldn't have been there. Now I've removed that the block's migrate successfully again for me.

Could have sworn I needed that attribute there in previous tests. Would definitely appreciate it if you could give this one another test. Thanks! 🙂

[glendaviesnz]

This tested well for me. Added a tiled added a mosaic and columns tiled gallery in a layout grid and both showed invalid when reloaded. Applied patch and deprecations were applied and resaving and reloading, or adding new tiled galleries didn't result in any more validation errors.

[carlosenamdev]

Thanks Aaron for fixing this, I Approve

[anomiex]

Change itself looks ok. But it needs a master merge for the "Changelogger use" and "Changelogger validity" checks, and a changelogger change file so the former will pass.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello aaronrobertshaw! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D58515-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[aaronrobertshaw]

Thanks @anomiex, I've rebased the PR and added the changelog.

[jeherve]

This tests well for me. Nice work!

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D58515-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

[aaronrobertshaw]

Needed to rebase diff. Build is failing at present. Will revisit committing the diff Monday.

[aaronrobertshaw]

Deployed: rWP222709