Gutenberg component CustomGradientPicker fails to parse theme.json gradients using size keywords (e.g., closest-side) (already fixed upstream, needs package update)

[figureone]

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

[figureone]

Screenshot showing error in the editor when choosing the radial gradient with size keyword

[dhruvik18]

@figureone I've created an issue in the Gutenberg repository to address this bug and submitted a PR with a fix:

• Gutenberg Issue: - Update gradient-parser dependency to fix parsing of size keywords in gradients(​https://github.com/WordPress/gutenberg/issues/69782)
• Pull Request: - Update gradient-parser dependency from 0.1.5 to 1.0.2(​https://github.com/WordPress/gutenberg/pull/69783)

[figureone]

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.

[figureone]

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!