fix: Gradient background error

[dcalhoun]

What?

Fix a can't find variable result error when setting a background gradient for
a block.

Why?

Fixes #67. The error prevents setting a background gradient, resulting in a broken block.

How?

The current gradient-parser version used by @wordpress/components
contains error-generating code for certain environments. While it is
unclear which specific environments, it does appear to occur for this
project's build environment.

See: rafaelcaricio/gradient-parser#11

Testing Instructions

1. Insert a Group block.
2. Open the block settings.
3. Select the style tab.
4. Set a gradient background for the block.
5. Verify the gradient is set and displayed, without an error in the console.

Accessibility Testing Instructions

N/A, no user-facing changes.

Screenshots or screencast

N/A, no user-facing changes.

[nbradbury]

@dcalhoun I must be doing something wrong. I've uncommented localGutenbergKitPath in local-builds.gradle and pulled this branch but when I try to test the gradient background for a gallery group I see this in the log:

wp.components.CustomGradientPicker failed to parse the gradient with error ReferenceError: result is not defined
2025-02-03 08:27:39.368 16602-16602 GutenbergView           com.jetpack.android.beta             I  wp.components.CustomGradientPicker failed to parse the gradient with error ReferenceError: result is not defined
2025-02-03 08:27:39.402 16602-16602 GutenbergView           com.jetpack.android.beta             I  ReferenceError: result is not defined

[dcalhoun]

@nbradbury given the proposed changes include a dependency version change, you'll need to ensure that updated dependency is installed and your local build is relying upon the development server. Will you let me know if the following resolves the issue?

1. Stop GutenbergKit's dev server if it is running.
2. npm install
3. npm run dev
4. Build the app with the GUTENBERG_EDITOR_URL pointing to your local development server URL.

If the above does not work, try repeating the steps and running rm -rf ./node_modules between steps 1 and 2.

If it continues to fail, please share the version the return of:

cat ./node_modules/gradient-parser/package.json | grep "version"

[nbradbury]

• Stop GutenbergKit's dev server if it is running.

How do I do that?

[dcalhoun]

• Stop GutenbergKit's dev server if it is running.

How do I do that?

You would press Control+C in the terminal session where the development server is running—i.e., wherever you previously ran npm run dev or make dev-server before.

If you are unable to find that session, you could use the following to find the process and kill it:

ps -ax | grep vite
kill -9 <relevant_process_id>

[nbradbury]

That doesn't appear to do anything for me, but perhaps this provides a clue?

[dcalhoun]

That doesn't appear to do anything for me [...]

Is that to say that the steps I outlined did not resolve the issue?

Yes, your screenshot showcases the incorrect version is installed on your machine, which explains why you continue to see the ReferenceError: result is not defined error. The steps I outlined should resolve the incorrect package version installation. Namely, npm install.

Will you please complete the following and share the result?

1. Stop the development server if it is running.
2. git fetch
3. git checkout fix/gradient-background-error
4. rm -rf ./node_modules
5. npm install
6. cat ./node_modules/gradient-parser/package.json | grep "version"

For good measure, will you please also share the result of the following?

node --version && npm --version

[nbradbury]

@dcalhoun I've attached the output of running npm install. Here's the output from node --version && npm --version:

v10.16.1
6.9.0

npm-install.txt

[dcalhoun]

[...] Here's the output from node --version && npm --version:

v10.16.1
6.9.0

@nbradbury you appear to be encountering the same Node.js version issue we've discussed in the past (see p1738079888116949/1738074782.197839-slack-C011BKNU1V5). Node.js v20 is required for the project, and the likely reason the correct package version is failing to install.

I highly recommend configuring nvm to auto-switch Node.js versions when you cd into a directory to avoid this confusion moving forward.

npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@3. I'll try to do my best with it!

For additional insight, the first warning in the npm install log¹ indicates the same issue, where it warns of an incompatible (old) version of npm.

Footnotes

1. I recognize the several warnings make it difficult to note relevant warnings. Unfortunately, this is an upstream issue in the core Gutenberg project. ↩

[kean]

Hey, should I be able to see the "Styles" in the attached demo project?

Preemptively approving because the changes look good.

I also noticed there is still a typo in the testing instructions:

// Current
Launch Xcode and open the ios/Demo-iOS/GutenbergKit.xcodeproj project.

// Should be
Launch Xcode and open the ios/Demo-iOS/Gutenberg.xcodeproj project.

[dcalhoun]

Hey, should I be able to see the "Styles" in the attached demo project?

No, not in its current state. This stems from the fact that the demo editor does not attach to a site. No site → no theme → no theme settings → no style configuration support.

Mocking the relevant endpoints in the demo app and returning reasonable fixture data would improve the development experience. It'd also be helpful to implement handlers for undo/redo, code editor, etc.

I also noticed there is still a typo in the testing instructions:

Thanks for catching this. 🙇🏻‍♂️ I opened #73 to fix the typo via GitHub's web interface.