Amp-wp: Discovery surrounding UI for color palettes

[MackenzieHartung]

We need to look into how best to display the option of selecting a color palette within the editor. Please consider, the need for customized colors to be utilized alongside a selected palette.

[cathibosco]

The following sequence of mockups reflect common practices in some visual editors. These may be useful to us here as we discover the need for custom colors and creative palettes.

• Includes the option to save custom color to the default color palette - per story(?)
• Includes an option for users to set up background media from the start (with a permanent background layer in the element stack)
• Includes the screensaver for loading Background Media from the start of each page
• Suggests we consider re-naming the Color Background section to Color Layer
• Color Layer Palette is open by default on start
• The addition of custom (or cool options like "neon", "eco", "business", "metallics") color palettes via an interaction in the Color Layers Palette
  
  
  
  

[cathibosco]

Reusing the font selection process when choosing and previewing creative color palette options might be a more graceful path forward:
Default Color Palette needs a better name as well. 🤪

This drop down might be a better Color Palette Option

[cathibosco]

Here is an example:

1. Editor using the creative palette called Vivid Colors (it's the default while editing this story)
2. Editor has picked 2 custom (brand) colors to use along side this creative palette
3. This could stay default for the story...
4. This story could be saved as a template in the future potentially...
   

[cathibosco]

This relates to ticket #2699

[cathibosco]

Color Palettes - I can create a style guide with actual colors if these palettes work well.

Classic = Default
Vivid
Pastel
Corporate
Nature
Neon
Material

[cathibosco]

Panel View with dropdown... to discuss:

[cathibosco]

@dero and I reviewed some concepts noted above and recommend breaking this work into 3 technical stages:

1. Palette Selector Make it possible for editors to choose from a dropdown selection of palettes
2. Make it possible to preview the colors for each palette with a Palette Preview by adding the colors to the dropdown menu item as a preview.
3. Make it possible to add custom colors to the Custom Palette

[cathibosco]

[dero]

@cathibosco How do you think the users should _remove_ the custom colors?

[cathibosco]

@dero
Currently the rectangular box (visual indicator) shows the "active" color.

Currently we have a second level of visual indicator(s) showing the "active color" when the color is "in the palette" with circle and checkmark.

The active color is changed by adding a new custom color or by clicking on different color in the palette.
The active color is removed when an editor uses the "clear" button all background color is removed.

It would be intuitive to have a + (plus- see mock ups) as the next possible color at the end of a palette
It would be intuitive to have the first color in all palettes be "null" for NO background color

That might leave room for a remove color from palette in place of the clear button - but that is confusing and potentially frustrating.

or

The ability to drag a color off a palette to remove it would be useful.

or with right click remove color from palette... although that is not possible or baked in yet.

Check this out:

[cathibosco]

Also - The checkmark is not necessary if we have a WordPress blue outline on the "active" color. It will make it more useful and intuitive for the editor to manage their work to be able to visually see the color better too. :

[cathibosco]

See how https://miro.com has a nice simple color tool. You can drag colors off the palette and the additional custom colors pile up at the end of the default palette. They do not have multiple palettes to chose from however.

[cathibosco]

Here is a collection of palettes we can consider.... I can begin to formally create each color collection that we want to include. These cover a wide range of use cases.

[dero]

@MackenzieHartung We propose to break the technical implementation into two stages per https://github.com/ampproject/amp-wp/issues/3067#issuecomment-526227863. In this stage we would extend the color picker to include a palette select box.

I propose we create a new ticket to handle the palette preview in the dropdown as well as all functionality related to custom colors handling.

[swissspidy]

@dero Can you create these two new issues you proposed? Then I think we can close this one.

[dero]

@MackenzieHartung @swissspidy Updated the existing ticket for palettes implementation to cover for the first stage of implementation and created a new issue for the second stage.

I believe we can close this issue now.