Add Color picker to be used in block settings

[pinarol]

We need a color picker component to be used in block settings(Button, Cover etc). Button block first iteration will be completed soon so it is about time to make things more specific for the mobile Color picker component.
Could you drop your design proposal here @iamthomasbishop ? I believe you already had some drafts.

[pinarol]

One thing to note: It would be useful to implement the UI as a separate component and then use it in the settings rather than implementing it as a single "settings" component. In this way, we can use it in other places as well like the way on web:

The mobile designs for Cover is not determined yet, I am just putting that as an example.

[iamthomasbishop]

There was a lot of discussion around some of the technical challenges surrounding color pickers, but here are some quick (unfinished) notes on the current state (very much open to iteration) of my mockups.

Ideal Flow

In a perfect world, I'd like to simplify the entry point into one. So for something like a paragraph, you could have a single entry point for "background color" and one for "text color". That would look like this:

...then tapping on one of them would show you a separate color picker component (in a sheet perhaps), which ideally we'd be able to reuse for anything that needs color picking. Example:

If you notice in the solid color example, you have a multi-color "wheel". That would link to a full custom color picker that would look like this, similar to what exists on the web:

Alternate Flow

If we wanted to bring things a little closer to the initial sheet, as was discussed earlier, we would bring the colors list onto the main sheet:

This would take up a bunch more vertical space in the sheet, so I wanted to avoid doing it this way if possible. We'd also need to figure out a way to allow for both solid and gradient colors. There are a couple of proposals (here and here) in the works on core, so maybe this would simplify for us.

[pinarol]

I like the idea of having Solid/Gradient colors in the same component, it is more user friendly. Web also has them together after the latest changes, so there won't be a problem in terms of sharing the API.

However, this time we need to check if we are able to put it in a separate bottom sheet and still keep the settings API same with web. 🤔 Let's first do some experiments in the code and give feedback accordingly.

[iamthomasbishop]

I like the idea of having Solid/Gradient colors in the same component, it is more user friendly. Web also has them together after the latest changes, so there won't be a problem in terms of sharing the API.

Agreed 😄

However, this time we need to check if we are able to put it in a separate bottom sheet and still keep the settings API same with web. 🤔 Let's first do some experiments in the code and give feedback accordingly.

Fair enough. Related, is it possible to take advantage of recent changes on the web side, which now provides a toggle/segmented control for color format (solid, gradient)? It looks like this:

[lukewalczak]

I have some questions regarding to screenshots above, so I would like to ask:

1. How we are going to navigate from main settings directly into color settings and how to navigate back?:
   

2. The same question how to navigate to/from color settings into color picker?