Block Editor: Validation fails for Button blocks with gradient backgrounds in 6.7.

[kwight]

Reported by @retnonindya :

When using the 6.7-alpha version of Gutenberg on Horizon, Button blocks with gradient backgrounds will fail validation on editor load. @mmtr noted the following console log:

Block validation: Block validation failed for <code>core/button</code> Content generated by <code>save</code> function: <div class="wp-block-button alignnone"><a>Test</a></div> Content retrieved from post body: <div class="wp-block-button"><a class="wp-block-button__link has-background" style="background:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);" rel="nofollow">Test</a></div>

This is not reproducible on a self-hosted install, so must be related to one of our WP.com integrations.

[mmtr]

On a second look, I noted there are more than one validations errors. One of them seems to highlight the cause of the validation failure: styles generated by the save function are formatted with whitespaces while the ones saved in the post content are missing. I guess we have some kind of styles minification in WP.com that's contributing to this.

Content generated by `save` function:

<div class="wp-block-button"><a class="wp-block-button__link has-background" style="background:linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)">test</a></div>

Content retrieved from post body:

<div class="wp-block-button"><a class="wp-block-button__link has-background" style="background:linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);">test</a></div>`

[mmtr]

This bug ended up being reproducible in core as well, but only on multisite installs. I reported the bug there: WordPress/gutenberg#17938

[kwight]

With 6.7.0 final, which is now on Horizon, this has been fixed for admin users (but remains an issue for non-admins).

[mmtr]

but remains an issue for non-admins

It's working for me when I test with contributors or editors. Seems we run a custom safecss_filter_attr function in WordPress.com which is not affected by the core limitation that only allows () inside url() properties.