search

material-components / material-design-for-wordpress

Material Design plugin for WordPress
78 stars 22 forks source link

[M3] Color and Background color to support M3 tokens #354

Closed igruszkauy closed 2 years ago

igruszkauy commented 2 years ago

Feature description

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

PatelUtkarsh commented 2 years ago

Using Gutenberg's default color picker, It should display m3 tokens for text and background colors.

@emeaguiar This is different from customizer.

image
mattchungxwp commented 2 years ago

Confirm with @rodydavis : Should we continue to use static palette or generated M3 colors?

rodydavis commented 2 years ago

Use the new generated ones!

PatelUtkarsh commented 2 years ago

QA note: Gutenberg text and background color should show m3 token:

image
felipebochehin87 commented 2 years ago

@igruszkauy @PatelUtkarsh the functionality looks good so far. Tested using https://dev-mdc-web.pantheonsite.io/wp-admin/post.php?post=2665&action=edit

  1. Added a Media & Text block
  2. Clicked on the text
  3. Opened More Settings Menu
  4. Changed color (background and text)
  5. Selected default colors and also custom colors

My questions are (and I'm opening as questions because I'd like to confirm if that's expected before saying it's a bug):

  1. We have a "check" on the selected color, but this check is white. This makes the check invisible when we select the white color. Is it possible (and necessary) to change the color of the check when the selected color is white so that the check is visible?
  2. The custom color is not displayed on the list of colors. Is that expected? Click on Custom color, select a color, collapse the color picker, expand the color picker - the custom color remains applied to the text, but it is not listed in the color picker. Should we display the color and the check on it to show what color is selected?

expanded collapsed

igruszkauy commented 2 years ago

@felipebochehin87 thank you for the questions!

felipebochehin87 commented 2 years ago

Thanks @igruszkauy !!

About my second question: I thought that the custom color was supposed to be displayed along with the other colors, in a circle, just like the others. Now I see, the custom will be displayed on the rectangle. Thanks! :)

And about the first, yeah, I don't see the check when I select white.

igruszkauy commented 2 years ago

Verified via: https://dev-mdc-web.pantheonsite.io/2744-2/

  1. Added a paragraph, I can change the color and background using M3 colorshttps://dev-mdc-web.pantheonsite.io/2744-2/
  2. When updating source color from customizer, the color and background from paragraph are updated image

Known issues that need to be handled by core:

  1. Name of the color to be more user friendly

    image

  2. Color of the font for the name of the color is white and can't be seen when selecting a light color

    image