Grid properties stripped from style attribute after saving post

[ryelle]

When resizing a Media and Text block, something like style="grid-template-columns:9% auto" is added to the rendered markup. If you're not admin (don't have unfiltered_html?), this is stripped by saving (in safecss_filter_attr, I think), which then causes the block to not match and appear "invalid".

This can also be reproduced with plain content, using the HTML block:

1. Use an "author" level user
2. Add an HTML block
3. Add the content <div style="grid-template-columns:9% auto">Testing</div>
4. Save the post and reload the page
5. The style attribute has been stripped

[birgire]

I can reproduce this, via author user role, for:

<div style="grid-template-columns:9% auto">Testing</div>

I also noticed the same removal of display: grid;.

Out of curiosity I had a look at possible other grid CSS properties and here's the list so far:

grid
grid-column
grid-row
grid-area
grid-gap
grid-column-gap
grid-row-gap
grid-template
grid-template-areas
grid-template-columns
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid-column-start
grid-column-end
grid-row-start
grid-row-end
justify-self
justify-items
justify-content
align-self
align-items
align-content
place-self
place-content

I might have missed some?

These are unsupported in safecss_filter_attr().

Useful References:

​https://www.w3.org/TR/css-grid-1/
​https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
​https://css-tricks.com/snippets/css/complete-guide-grid/

[aduth]

At a minimum, I'd expect the safecss_filter_attr to include those style properties produced by blocks shipped with core. To this end, I've audited the save implementations of ​existing blocks, and discovered the following properties:

• background-color (button, cover, paragraph, pullquote)
• background-image (cover)
• background-position (cover)
• border-color (pullquote)
• color (button, paragraph, pullquote)
• font-size (paragraph)
• grid-template-columns (media-text)
• height (spacer)
• max-width (image)
• text-align (heading, paragraph, quote, subhead, verse)
• width (image)

Cross-referenced against the ​default `safe_style_css` set, here's what's missing:

• background-position
• grid-template-columns

[ianbelanger]

The patch applies cleanly to trunk and appears to fix the issue of background-position and grid-template-columns being removed for users with the Author role.

[pento]

In 45242:

KSES: Add background-position and grid-template-columns as safe CSS properties.

Props aduth.
Fixes #46597.