WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 8 months ago

#46597 closed defect (bug) (fixed)

Grid properties stripped from style attribute after saving post

Reported by: ryelle Owned by: pento
Milestone: 5.2 Priority: normal
Severity: normal Version: 5.0
Component: Editor Keywords: has-patch commit
Focuses: Cc:
PR Number:

Description

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

Attachments (1)

46597.diff (945 bytes) - added by aduth 8 months ago.

Download all attachments as: .zip

Change History (10)

This ticket was mentioned in Slack in #core-editor by peterwilsoncc. View the logs.


9 months ago

#2 @melchoyce
9 months ago

  • Milestone changed from Awaiting Review to 5.2

#3 @birgire
9 months ago

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/

#4 @aduth
8 months ago

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
Version 0, edited 8 months ago by aduth (next)

@aduth
8 months ago

This ticket was mentioned in Slack in #core-editor by aduth. View the logs.


8 months ago

#6 @ianbelanger
8 months ago

  • Component changed from General to Editor
  • Keywords has-patch commit added
  • Version set to 5.0

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.

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


8 months ago

#8 @pento
8 months ago

  • Owner set to pento
  • Status changed from new to accepted

#9 @pento
8 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 45242:

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

Props aduth.
Fixes #46597.

Note: See TracTickets for help on using tickets.