Wp-calypso: Gutenberg: Spacer block (attribute pruning)

Created on 5 Oct 2018 · 5Comments · Source: Automattic/wp-calypso

See #27294

As the most used block ;) let's make sure that we can insert this and it's serialized appropriately in post content

Status

Awaiting fix in core
Awaiting fix in D19247-code

[Goal] Gutenberg [Type] Task

Source

gwwar

All 5 comments

Tested in current wpcalypso environment and it seemed to work as expected. I addd, resized, deleted, and reloaded a page with the spacers.

spacer-in-calypso mov

dmsnell on 5 Oct 2018

After reloading the page I discovered the problem - it appears as though Gutenberg is pruning attributes from the block on save.

Invalid reloaded block
Note the missing aria attribute

<!-- wp:spacer {"height":242} -->
<div style="height:242px;" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Valid new block

<!-- wp:spacer {"height":63} -->
<div style="height:63px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Tested in a separate Gutenberg/WordPress environment and the save/load loop was fine without breaking. I tested with Gutenberg from master@{two weeks ago} as well and it was still fine so this appears to be happening on the dotcom side.

Confirmed that the database has the malformed content. Looking for some filter on save.

dmsnell on 5 Oct 2018

❤1

This is likely very similar to core's issue of filtering a saving post's HTML when a user isn't admin (unfiltered_html capability). See:

The main reasons for some input to be filtered:

Using aria-* attributes.
Using data-* attributes.
Using certain inline styles, notably url(), based on this mask.

The proper fix is to be done in core WP (kses). A core ticket for CSS's url() has been opened, but further work in kses is needed in order to whitelist aria- and data- wildcards.

mcsf on 9 Oct 2018

❤1

@dmsnell just a note that I'm seeing a similar issue with Audio block after uploading and saving (tested with business plan because audio uploads aren't included in free).