Gradients: errors resulting from clearing or quickly selecting gradient colors in background color

[andrewserong]

Description

While working on a fix for #36640, I noticed a couple of errors being generated via the gradient color picker.

Issues to resolve

1. With a blocks theme active, while I select between gradients, and then click the Clear button (or deselect the gradient) an error is thrown.
2. If I go to select a custom color for one part of the gradient and then pan quickly while selecting colors, the block crashes. (Fixed in: Color Picker: Re-instate debounce and controlled value to fix issue with gradient picker #36941)

Step-by-step reproduction instructions

1. Activate a blocks-based theme (e.g. TwentyTwentyTwo)
2. Add a Group block to a post
3. Add a gradient background color to the block, and see if you can recreate the above two scenarios

Screenshots, screen recording, code snippet

Scenario 1 (error caused by clearing gradient)

Error message:

Fixed: Scenario 2 (failure caused by moving the mouse rapidly across the color picker)

Error message:

Environment info

• Gutenberg trunk
• TwentyTwentyTwo theme
• macOS, Google Chrome Version 96.0.4664.55 (Official Build) (arm64)

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[andrewserong]

The main blocker here (failure caused by moving the mouse rapidly across the color picker) has been resolved as of #36941. I'll leave this issue open for the remaining issue (console error/warning when clearing a gradient).

[andrewserong]

With a blocks theme active, while I select between gradients, and then click the Clear button (or deselect the gradient) an error is thrown.

I have an idea for a fix for this one, I'll put up a PR for it tomorrow 🤞

[andrewserong]

Fix ready for review in: #37051