Make WordPress Core

Opened 23 months ago

Closed 21 months ago

Last modified 20 months ago

#56122 closed enhancement (fixed)

Explore allowing more layout-specific CSS properties in safe_style_css filter

Reported by: andrewserong's profile andrewserong Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 6.1 Priority: normal
Severity: normal Version: 6.1
Component: Formatting Keywords: has-patch has-unit-tests changes-requested add-to-field-guide
Focuses: Cc:

Description

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

Change History (10)

This ticket was mentioned in PR #2928 on WordPress/wordpress-develop by andrewserong.


23 months ago
#1

  • Keywords has-patch has-unit-tests added

#2 @costdev
23 months ago

  • Keywords changes-requested added

#3 @andrewserong
21 months ago

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.

andrewserong commented on PR #2928:


21 months ago
#4

@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.

ockham commented on PR #2928:


21 months ago
#5

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?

#6 @SergeyBiryukov
21 months ago

  • Milestone changed from Awaiting Review to 6.1

#7 @SergeyBiryukov
21 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

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.

SergeyBiryukov commented on PR #2928:


21 months ago
#8

Thanks for the PR! Merged in r54102.

andrewserong commented on PR #2928:


21 months ago
#9

Thank you for merging! Much appreciated 🙇

#10 @milana_cap
20 months ago

  • Keywords add-to-field-guide added
Note: See TracTickets for help on using tickets.