Global Styles: Can't open Colour Picker by clicking on colour circle

[noisysocks]

Description

In Global Styles one can't open the Colour Picker by clicking on the colour circle. You need to first click on the ellipsis and then press Edit which is confusing since the colour circles are interactive but do nothing. It's okay for editing the name to be buried but changing the colour should be quicker.

Step-by-step reproduction instructions

1. Go to Site Editor → Global Styles
2. Click Colors
3. Open a pallette
4. Click on one of the colour circles

Expected result: The colour picker should open.
Actual result: Nothing happens.

Screenshots, screen recording, code snippet

Kapture.2022-09-14.at.10.08.05.mp4

Environment info

No response

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

[noisysocks]

@ramonjd said this might be due to dynamic ref resolution in theme.json which he was looking at in #43249.

[ramonjd]

@ramonjd said this might be due to dynamic ref resolution in theme.json which he was looking at in #43249.

Actually, looking at this again, I was thinking of an entirely different case. So I don't think this is a bug.

This would be a good feature enhancement however.

While backtracing I noticed that the onChange event for palette options is empty:

gutenberg/packages/components/src/palette-edit/index.js

Line 466 in 1a108a4

onChange={ () => {} }

Maybe there's a good place from which to trigger the ColorPicker component?

[ramonjd]

I know @pbking has a PR up to enable edit mode all the time.

Just in case, I have an alternative that opens edit mode and selects the color over at #45681

Happy to close mine. Sorry I didn't see #45657 before starting.