Gradient control doesn't work properly

[maddisondesigns]

Description

The Gradient control is horrible to use, and just doesn't work properly. Clicking on the small dots to try and select a new colour, keeps moving the dot to a new location, rather than showing the colour selector. When you do eventually get the color selector to show, sometimes it just changes the colour at that point, other times it changes the colour of the whole gradient. When you try to adjust the gradient angle using the small circular angle wheel, the popup constantly closes, forcing you to reopen it again.

Vid: https://share.getcloudapp.com/KouYgZ6G

Step-by-step reproduction instructions

• Add a Group block and select it
• Open the Color Panel in the settings sidebar
• Click on Background to display the color popup
• Select the Gradient tab to display the Gradient color picker
• Try to click on the small color selector dots and watch them move instead of showing the color picker
• When you finally manage to display the color picker, select a new color and see if just that point changes color or whether the whole gradient changes color
• Try to change the angle of the Gradient using the using the small circular angle wheel

Screenshots, screen recording, code snippet

No response

Environment info

WP 5.9.1
Twenty Twenty One
Firefox 97.0.1
macOS 12.2.1
No Gutenberg plugin, core only

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

[annezazu]

Noting that I can replicate how difficult this is to use. Thank you for opening!

[stokesman]

A couple PRs have landed and they may have resolved all the problems mentioned here:

• [Gradient Tool]: Fix closing of popover when the angle control is clicked #40735
• CustomGradientBar: Fix insertion and control point positioning to more closely follow cursor #41492

A build of the latter (that also includes the former) can be tested at http://gutenberg.run/41492 if you'd like to confirm @maddisondesigns. If you do try that link, a Cover block is the only one I found that allows gradients.

[maddisondesigns]

@stokesman That new control seems to work a lot better and is more reliable. The angle control also seems to be fixed and doesn't constantly close 👍

One thing I would suggest though is making the position of the colour picker consistent.
When you select a custom colour when using a solid colour, the colour picker appears to the left of the control.

When you select a custom colour when using the gradient control, the colour picker appears over the top of the control.

They should both appear in the same position for consistency.