Update gradient-parser dependency from 0.1.5 to 1.0.2

[dhruvikpatel18]

Closes: #69782

What?

This PR updates the gradient-parser dependency from version 0.1.5 to 1.0.2 to fix an issue with parsing gradients that use size keywords (e.g., closest-side, farthest-corner).

Related to WordPress core ticket #63205

Why?

The current version of the gradient-parser library (0.1.5) fails to properly parse radial gradients that use size keywords like closest-side. This causes the CustomGradientPicker to display an error in the console and prevents the picker subcomponents from populating correctly.

This bug was fixed in version 1.0.0 of the gradient-parser library, and the current latest version is 1.0.2.

Testing Instructions

1. Add a custom gradient to theme.json (settings.color.gradients) that uses a size keyword:

{
  "gradient": "radial-gradient(closest-side at 15% 20%, red, blue)",
  "name": "Red to Blue",
  "slug": "red-to-blue"
}

2. Before the fix:

• Choose this gradient as a background for a block (e.g., Group block)
• Open the gradient picker
• The picker subcomponents (type, angle, linear picker) will not populate
• The JavaScript console will show an error: wp.components.CustomGradientPicker failed to parse the gradient with error Error: -side at 15% 20%, red, blue): Missing )

3. After the fix:

• The gradient picker should properly parse and display the gradient with the size keyword
• No errors should appear in the console
• All picker subcomponents should work correctly

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dhruvikpatel18 <dhruvik18@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

Thanks for the PR!

It's a shame that we lose the size value when we try to adjust it, but I think it's a nice improvement.

I tested by using the following theme.json:

Details

{
	"$schema": "../../schemas/json/theme.json",
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		},
		"color": {
			"gradients": [
				{
					"gradient": "radial-gradient(closest-side at 15% 20%, red, blue)",
					"name": "Radial Gradient Closest Side",
					"slug": "radial-gradient-closest-side"
				},
				{
					"gradient": "radial-gradient(farthest-side at 15% 20%, red, blue)",
					"name": "Radial Gradient Farthest Side",
					"slug": "radial-gradient-farthest-side"
				},
				{
					"gradient": "radial-gradient(circle closest-side at 100px 200px, #f4c14e 0%, #d36950 100%)",
					"name": "Radial Gradient Circle Closest Side",
					"slug": "radial-gradient-circle-closest-side"
				},
				{
					"gradient": "repeating-linear-gradient(#f4c14e 0%, #d36950 50%)",
					"name": "Repeating Linear Gradient",
					"slug": "repeating-linear-gradient"
				},
				{
					"gradient": "repeating-radial-gradient(circle closest-side at 100px 200px, #f4c14e, #d36950)",
					"name": "Repeating Radial Gradient Circle Closest Side",
					"slug": "repeating-radial-gradient-circle-closest-side"
				}
			]
		}
	}
}

f76b8dcbf9ad5672479e2538957981c9.mp4

I have two suggestions to move this PR forward.

First: How did you update the library? It's recommended to use the following commands:

npm uninstall gradient-parser -w packages/components
npm install gradient-parser@latest -w packages/components

See: https://github.com/WordPress/gutenberg/blob/trunk/packages/README.md#updating-existing-dependencies

When I ran these commands, I've got the following file changes which is not the same as this PR:

Diff

diff --git a/package-lock.json b/package-lock.json
index a08638f4b2..d3d699d96a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26572,9 +26572,9 @@
                        "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
                },
                "node_modules/gradient-parser": {
-                       "version": "0.1.5",
-                       "resolved": "https://registry.npmjs.org/gradient-parser/-/gradient-parser-0.1.5.tgz",
-                       "integrity": "sha512-+uPlcVbjrKOnTzvz0MjTj7BfACj8OmxIa1moIjJV7btvhUMSJk0D47RfDCgDrZE3dYMz9Cf5xKJwnrKLjUq0KQ==",
+                       "version": "1.0.2",
+                       "resolved": "https://registry.npmjs.org/gradient-parser/-/gradient-parser-1.0.2.tgz",
+                       "integrity": "sha512-gR6nY33xC9yJoH4wGLQtZQMXDi6RI3H37ERu7kQCVUzlXjNedpZM7xcA489Opwbq0BSGohtWGsWsntupmxelMg==",
                        "engines": {
                                "node": ">=0.10.0"
                        }
@@ -50477,7 +50477,7 @@
                                "deepmerge": "^4.3.0",
                                "fast-deep-equal": "^3.1.3",
                                "framer-motion": "^11.1.9",
-                               "gradient-parser": "^0.1.5",
+                               "gradient-parser": "1.0.2",
                                "highlight-words-core": "^1.2.2",
                                "is-plain-object": "^5.0.0",
                                "memize": "^2.1.0",
diff --git a/packages/components/package.json b/packages/components/package.json
index 1742132ed5..8dfd75bd3c 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -68,7 +68,7 @@
                "deepmerge": "^4.3.0",
                "fast-deep-equal": "^3.1.3",
                "framer-motion": "^11.1.9",
-               "gradient-parser": "^0.1.5",
+               "gradient-parser": "1.0.2",
                "highlight-words-core": "^1.2.2",
                "is-plain-object": "^5.0.0",
                "memize": "^2.1.0",

Second: It would be good to add a change log entry. Something like this:

## Unreleased

### Internal

-   Update `gradient-parser` to version `1.0.2` ([#69783](https://github.com/WordPress/gutenberg/pull/69783)).

### Bug Fixes

[dhruvikpatel18]

@t-hamano Thanks for the suggestions, I've Implemented it, When you have a moment please review it.

[t-hamano]

LGTM 👍