Make WordPress Core

Opened 2 years ago

Closed 22 months ago

Last modified 6 weeks 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 (12)

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


2 years ago
#1

  • Keywords has-patch added

#2 @sabernhardt
2 years ago

  • Component changed from General to Formatting

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


2 years 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
2 years 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 2 years ago by SergeyBiryukov (previous) (diff)

#5 @ramonopoly
2 years ago

  • Keywords has-unit-tests added

#7 @aristath
2 years ago

  • Milestone changed from Awaiting Review to 6.1

#8 @aristath
23 months ago

Pushed an extra tweak to the patch and now tests pass

#9 @SergeyBiryukov
22 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:


22 months ago
#10

Thanks for the PR! Merged in r54117.

#11 @milana_cap
22 months ago

  • Keywords add-to-field-guide added

#12 @wildworks
6 weeks ago

#56391 was marked as a duplicate.

Note: See TracTickets for help on using tickets.