Make WordPress Core

Opened 21 months ago

Closed 20 months ago

Last modified 19 months ago

#56353 closed defect (bug) (fixed)

Allow assigning CSS variables in safecss_filter_attr

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

Description

The safecss_filter_attr allows using custom CSS variables like color: var(--color);. However, it does not currently allow assigning values to CSS variables (like --color: #F00) - which is something we do a lot in global-styles and Gutenberg.
We should allow assigning values to CSS variables so we can use this function consistently in Global Styles and the future Style Engine (WIP in Gutenberg)

Change History (11)

This ticket was mentioned in PR #3078 on WordPress/wordpress-develop by aristath.


21 months ago
#1

  • Keywords has-patch added

#2 @sabernhardt
21 months ago

  • Component changed from General to Formatting

This ticket was mentioned in PR #3080 on WordPress/wordpress-develop by ramonjd.


21 months ago
#3

  • Keywords has-unit-tests added

A bit late. https://github.com/WordPress/wordpress-develop/pull/3078 illustrates the solution.

I'm just putting this up there to see the tests pass 😄

## Proposal

CSS custom properties don't pass the tests in safecss_filter_attr() at if ( in_array( $css_selector, $allowed_attr, true ) ) because there's no allowing entry in the allowed_attrs array.

This is a PR to stimulate discussion around whether, and how, we WordPress could be permissive of such properties.

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

#4 @ramonopoly
21 months ago

  • Keywords has-unit-tests removed

Thanks for getting this ticket open @aristath. I think it's a great opportunity to open the discussion and document the pros and cons.

Do any folks have any links to previous threads that cover this issue?

All I could find was #46498, but there's no patch attached.

Last edited 21 months ago by SergeyBiryukov (previous) (diff)

#5 @ramonopoly
21 months ago

  • Keywords has-unit-tests added

#7 @aristath
21 months ago

  • Milestone changed from Awaiting Review to 6.1

#8 @aristath
20 months ago

Pushed an extra tweak to the patch and now tests pass

#9 @SergeyBiryukov
20 months ago

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

In 54117:

KSES: Allow assigning values to CSS variables.

The safecss_filter_attr() function allows using custom CSS variables like color: var(--color). However, it did not allow assigning values to CSS variables like --color: #F00, which is common in Global Styles and Gutenberg.

This commit adds support for assigning values to CSS variables, so that the function can be used consistently in Global Styles and the future Style Engine in Gutenberg.

Follow-up to [50923], [54100].

Props aristath, ramonopoly, SergeyBiryukov.
Fixes #56353.

SergeyBiryukov commented on PR #3078:


20 months ago
#10

Thanks for the PR! Merged in r54117.

#11 @milana_cap
19 months ago

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