Explore allowing more layout-specific CSS properties in safe_style_css filter

[andrewserong]

In the Gutenberg repo, I'm exploring a refactor for the Layout block support, that stores layout definitions in theme.json. One of the possibilities for outputting layout styles is to pass the layout definitions through safecss_filter_attr. In order to support the current Layout styles in Gutenberg, if we do this, I believe the following CSS properties would need to be added to the safe_style_css filter:

• display (to support switching between flex, grid and other display modes)

• flex-wrap
• gap (this property now works with both flex and grid layout types)
• column-gap
• row-gap

Logical margin and padding properties such as:

• margin-block-start
• margin-block-end
• margin-inline-start
• margin-inline-end
• padding-block-start
• padding-block-end
• padding-inline-start
• padding-inline-end

Are there any blockers to adding in support for the above properties? All of them (except for display) appear to have precedents in the list of currently supported CSS properties, but I wasn't sure if there is a reason why display isn't already included.

I'm happy to open up a PR that explores adding these in.

For further context, the Gutenberg PR that explores refactoring the Layout block support is: ​https://github.com/WordPress/gutenberg/pull/40875

Trac ticket: https://core.trac.wordpress.org/ticket/56122

[andrewserong]

Update: I've updated the linked pull request (​https://github.com/WordPress/wordpress-develop/pull/2928) to implement each of these CSS properties except for display, so that we can side-step the potential issues raised by exposing that property. For the single use case of outputting display in the Theme JSON class, in the Gutenberg repo, we currently handle allow-listing and output of display directly rather than running it through safecss_filter_attr.

So, I believe the PR is ready now for a final review for 6.1. Thanks @ramonopoly and @peterwilsoncc for taking a look at that PR.

@noisysocks just pinging you in case you get a chance to look at this one, too, since you've been involved with the (semi) related trac ticket for adding support for min() (https://core.trac.wordpress.org/ticket/55966). This one is different, in that it's adding additional CSS properties, but is also a pre-requisite for backporting the Layout block support changes in Gutenberg into core.

I don't know much about the Layout work in GB, but FWIW, this PR is looking pretty good to me. Think we can merge as-is to unblock other layout-related PRs, and consider display separately?

[SergeyBiryukov]

In 54102:

KSES: Allow more layout-related CSS properties.

Adds support for the following CSS properties considered safe for inline CSS:

• flex-wrap
• gap
• column-gap
• row-gap

Extends support for margin and padding to include logical properties:

• margin-block-start
• margin-block-end
• margin-inline-start
• margin-inline-end
• padding-block-start
• padding-block-end
• padding-inline-start
• padding-inline-end

Follow-up to [46235].

Props andrewserong, peterwilsoncc, ramonopoly, bernhard-reiter.
Fixes #56122.

Thanks for the PR! Merged in r54102.

Thank you for merging! Much appreciated 🙇