Wp-calypso: Cover Block throws an error when selecting a focal point

[guicmazeredo]

Steps to reproduce

1. Create a Cover Block and set an image.
2. Click on the image and select a different focal point in the block settings.
3. Publish the page.
4. Refresh the browser and the following error message will display: this block contains unexpected or invalid content

I recorded this video to show the steps described above:

https://d.pr/v/f5AIMp

It was a simple site. @gwwar helped me identify the cause of this issue

[glendaviesnz]

This is a strange one. Seems like it could be some sort of rounding issue as I was only able to replicate it on a simple site with focal points that didn't create a rounded % background position, ie. thanks to javascripts funky math 0.07 x 100 = 7.000000000000001, and if you set one of the focal point positions to 7% you will get the block validation error and block markup looks like:

<!-- wp:cover {"url":"https://.../2019/10/clock.jpg","id":12,"focalPoint":{"x":"0.07","y":"0.07"}} -->
<div class="wp-block-cover has-background-dim" style="background-image:url(https://.../2019/10/clock.jpg);background-position:7.000000000000001% 7.000000000000001%"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

but 0.08 x 100 = 8, so if you set focal point to 8% you don't get the block validation error and markup looks like:

<!-- wp:cover {"url":"https://.../2019/10/clock.jpg","id":12,"focalPoint":{"x":"0.08","y":"0.08"}} -->
<div class="wp-block-cover has-background-dim" style="background-image:url(https://.../2019/10/clock.jpg);background-position:8% 8%"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

And with the unrounded focal point the block save method doesn't include the background position or inner container, and the post content version shown in the validation errors shows 7% and not the 7.000000000000001% that is in the actual saved post content:

It only happens on Simple Sites, I can't replicate the issue on a local WP install. Doesn't seem to be a KSES issue though as none of the attributes are stripped from the post content that I can see.

Will look further into it tomorrow.

[gwwar]

ie. thanks to javascripts funky math

All floating point representations will have rounding errors due to how we represent the numbers with binary. I think it'd probably be okay if we attempted to round to an integer percentage.

http://fabiensanglard.net/floating_point_visually_explained/

[glendaviesnz]

I think it'd probably be okay if we attempted to round to an integer percentage

Would be nice to know why it causes a validation issues on simple sites only, but I will try adding in rounding of the percentage and see if that fixes it on simple sites at least.

[mmtr]

Seems to be caused by the style attributes being optimised with csstidy during the safecss_filter_attr call (performed as part of the KSES flow).

[mmtr]

Issue already reported in https://github.com/WordPress/gutenberg/issues/18665 but was not completely solved by https://github.com/WordPress/gutenberg/pull/18765. I added extra steps to reproduce there (https://github.com/WordPress/gutenberg/issues/18665#issuecomment-566097929).

In any case, the @gwwar's auto-fix invalid blocks (https://github.com/Automattic/wp-calypso/pull/38397) prevents this issue from being visible to users, but errors are still displayed on browser console.

[glendaviesnz]

Another PR has been added to fix the remaining issue that @mmtr pointed out -https://github.com/WordPress/gutenberg/pull/19183

[mmtr]

This will be definitely solved once WP.com is updated to Gutenberg 7.2.0. In the meantime, #38397 is autofixing the invalid blocks so the issue is not visible to users.