[wp-trac] [WordPress Trac] #48881: Fix inline SVG error with wp_admin_css_color

[WordPress Trac]

#48881: Fix inline SVG error with wp_admin_css_color
---------------------------------+-------------------------------------
 Reporter:  KZeni                |      Owner:  (none)
     Type:  defect (bug)         |     Status:  new
 Priority:  normal               |  Milestone:  Awaiting Review
Component:  Administration       |    Version:
 Severity:  normal               |   Keywords:  has-patch needs-testing
  Focuses:  css, administration  |
---------------------------------+-------------------------------------
 To get to the point, `url-friendly-colour` in `wp-
 admin/css/colors/_admin.scss` currently has:

 `@return '%23' + str-slice( '#{ $color }', 2, -1 );`

 but both Firefox and Safari (possibly others) are having an issue with CSS
 generated based on this (at least inline SVG assets).

 Safari (and possibly others) doesn't like the fact that `'` is used to
 wrap the str-slice color value since inline SVG assets are using `'` to
 wrap the parameters/attributes so it then breaks the SVG's syntax by
 having that value use `'` within itself being wrapped in a `'`.

 Then, Firefox (and possibly others) doesn't like the fact that `#` is used
 within an inline SVG since it's expecting `%23` as with the rest of the
 SVG being encoded.

 I've found that switching this out for:

 `@return '%23' + str-slice( %23{ $color }, 2, -1 );`

 resolves these issues experienced by both of these web browsers (and
 possibly others.) I haven't tested thoroughly for any potential side-
 effects, but I don't foresee all that much given how little it seems like
 `url-friendly-colour` is used (with this then just resolving browser
 issues for its current usage.)

 Btw, I came across this with the Admin Color Schemer plugin (with it
 patched for PHP 7.x per the approved code on its GitHub; not sure why it
 hasn't been pushed out to WP.org yet... the dev should maybe do that.
 Either way, this plugin is using WP's own `_admin.scss` and it's not
 creating compliant results, currently, and this should resolve that
 issue.)

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48881>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform