Currently there are multiple colour picker components across various packages:
ColorPicker
ColorPaletteControl
ColorPalette
GradientPicker (Components)
GradientPicer (Block-Editor)
GradientPickerControl
PanelColorGradientSettings
and more...
Not only is this very confusing for anyone wanting to take advantage of core components for custom blocks, and amazingly none of them are particularly great and very appealing to use.
Looking at 3rd party React libraries, along with other page builder solutions such as Cwcily (Gold Standard IMO) and Bricks, these have much nicer colour pickers.
Currently with the WordPress Panel Color Picker enabled with block supports, there are 2 popovers which appear to choose a custom colour which feels clunky and not a nice editing experience.
Cwicly achieves this with a single panel, including an eyedropper , global colours, custom colours, and alpha controls
Now compared with this in WordPress:
Fair to say this isn't ideal and I think we can definitely do better than this.
Picking a colour should be intuitive and simple; as should knowing which color control to use within custom block development.
There is also no documentation on the majority of the color pickers above.
What is your proposed solution?
If possible, it would be nice to see a complete review of the colour components across the packages, and redeveloping them to clean up the editing experience and improve overall UX.
I see some possible mockups and discussion around adding an eyedropper were discussed here
It would be great to reduce the number of components down to one or two which are clear, well documented and intuitive to use for both developers and end-users alike.
dozentis
commented
1 year ago
What problem does this address?
Currently there are multiple colour picker components across various packages:
and more...
Not only is this very confusing for anyone wanting to take advantage of core components for custom blocks, and amazingly none of them are particularly great and very appealing to use.
Looking at 3rd party React libraries, along with other page builder solutions such as Cwcily (Gold Standard IMO) and Bricks, these have much nicer colour pickers.
Currently with the WordPress Panel Color Picker enabled with block supports, there are 2 popovers which appear to choose a custom colour which feels clunky and not a nice editing experience.
Cwicly achieves this with a single panel, including an eyedropper , global colours, custom colours, and alpha controls
Now compared with this in WordPress:
Fair to say this isn't ideal and I think we can definitely do better than this.
Picking a colour should be intuitive and simple; as should knowing which color control to use within custom block development.
There is also no documentation on the majority of the color pickers above.
What is your proposed solution?
If possible, it would be nice to see a complete review of the colour components across the packages, and redeveloping them to clean up the editing experience and improve overall UX.
I see some possible mockups and discussion around adding an eyedropper were discussed here
It would be great to reduce the number of components down to one or two which are clear, well documented and intuitive to use for both developers and end-users alike.