![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
#63205 closed defect (bug) (reported-upstream)
Gutenberg component CustomGradientPicker fails to parse theme.json gradients using size keywords (e.g., closest-side) (already fixed upstream, needs package update)
| Reported by: | figureone | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | |
| Component: | Editor | Version: | |
| Severity: | normal | Keywords: | |
| Cc: | Focuses: |
Description
Note: this bug has been fixed in the upstream package, see below.
Reproduce this issue by adding a custom gradient to the active theme.json (settings.color.gradients) that uses a size keyword, e.g.:
{
"gradient": "radial-gradient(closest-side at 15% 20%, red, blue)",
"name": "Red to Blue",
"slug": "red-to-blue"
}
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient#size
When choosing this gradient (e.g., as a background for a Group block), the gradient will render properly, but the picker subcomponents (type, angle, linear picker) will not populate and the javascript console will log an error:
wp.components.CustomGradientPicker failed to parse the gradient with error Error: -side at 15% 20%, red, blue): Missing )
The parser captures the first portion of the size keyword as a named color entity.
This bug is actually fixed in version 1.0.0 of the third party library gradient-parser:
https://github.com/rafaelcaricio/gradient-parser/commit/d0e6c246160e21f6615c6e16e2e5e99e5f4eb93c
https://github.com/rafaelcaricio/gradient-parser/compare/0.1.5...1.0.0
But WordPress has the version pinned to 0.1.5:
https://github.com/WordPress/gutenberg/blob/trunk/packages/components/package.json#L71
Requesting updating the library version to fix this bug. Latest version of the dependency is 1.0.2:
https://www.npmjs.com/package/gradient-parser
Attachments (1)
Change History (6)
#1
@
16 months ago
@figureone I've created an issue in the Gutenberg repository to address this bug and submitted a PR with a fix:
#3
@
15 months ago
Thanks @dhruvik18! Piggybacking here with a related issue, we also noticed gradient-parser does not handle gradients with CSS variables (custom properties), which also causes problems when using theme colors in theme gradients (theme.json). Similar behavior to this issue.
I have created a pull request for gradient-parser to support CSS variables: https://github.com/rafaelcaricio/gradient-parser/pull/26
Let me know if you want me to open another trac ticket for this. It's hard to say if the gradient-parser maintainer will merge this (there are a number of other pull requests open), so I feel like the WordPress community should monitor (or fork) to get this feature into Gutenberg.
#4
@
15 months ago
Aloha @dhruvik18 just noting that the gradient-parser maintainer has merged in CSS variable support and made a ton of other improvements in the library. The latest version is now 1.1.1:
https://github.com/rafaelcaricio/gradient-parser/commits/master/
https://www.npmjs.com/package/gradient-parser
It would be nice to see these available in the Gutenberg color picker component at some point. Thanks!
Screenshot showing error in the editor when choosing the radial gradient with size keyword