Add API to configure icon colors #7068

jorgefilipecosta · 2018-05-31T19:42:26Z

Description

This PR allows the icon to configure 3 colors: backgroundColor, iconColor, shadowColor.
If iconColor and shadowColor are not passed they are automatically computed from the
backgroundColor.
This colors right now are being used in the inserter. Shadow color is only used in blocks that have children.

Some discussion points:
Should we use this colors in other places?
Should we try another way for blocks to configure this colors?

Closes: #6998

How has this been tested?

This change is very risky as we are changing how an icon is represented, try to do some smoke testing around Gutenberg in places where we show block icons and see things work as expected.
Register some test blocks that make sure colors work as expected. Test blocks available in https://gist.github.com/jorgefilipecosta/2dd281f9f5f078258f7c8d4ba4cc34cd ( can be pasted in developer console).

Screeshots:

aduth · 2018-05-31T20:19:08Z

blocks/api/utils.js

+ *
+ * @type {Object}
+ */
+const ICON_COLORS = [ '#191e23', '#fefdfe', '#7e70af' ];


Minor: By convention, I've come to expect all module constants to be defined at the top of the file, immediately following dependencies. Should we consider that here?

Where do these colors come from? Are we duplicating from stylesheet variables?

The colors are from the stylesheet variables $dark-gray-900 and $light-gray-100. Before we used a scss importer but with our divisions in packages I'm not certain if this is something we should pursue now.

aduth · 2018-05-31T20:24:24Z

blocks/api/registration.js

+ * @property {string}                    category   Category classification of block,
+ *                                                  impacting where block is shown in
+ *                                                  inserter results.
+ * @property {(Object|string|WPElement)} icon       Slug of the Dashicon to be shown


Thinking at some point we might just want to @typedef a WPIcon, since it's used pretty broadly now.

http://usejsdoc.org/tags-typedef.html

Related: #5965 (comment) (cc @ajitbohra)

Yes, here what we have is (Object|WPIcon) I think when we have generic Icon component in @wordpress/components we should create the type there so the type can be imported from this module to other modules.

Note that the plan is to move away from UI icons for blocks and into custom svgs, so this will become more of a fallback.

aduth · 2018-05-31T20:27:53Z

blocks/api/utils.js

+		icon = { src: icon };
+	}
+
+	if ( icon.backgroundColor && ( ! icon.iconColor || ! icon.shadowColor ) ) {


Should we allow shadow color to be customizable?

Otherwise, we could simplify this to "background" and "foreground". icon.iconColor sounds a bit redundant.

I followed this idea 👍

Otherwise, we could simplify this to "background" and "foreground". icon.iconColor sounds a bit redundant.

In retrospect, we should have done the same for shadowColor as well. Now we have some inconsistency with "Color" as only a suffix for shadow, when it's of the same value type as foreground and background (a hex string).

If we care enough, we could soft-deprecate this via something like:

const icon = { ... }; Object.defineProperty( icon, 'shadowColor', { get() { deprecated( ... ); return icon.shadow; }, } );

jorgefilipecosta · 2018-06-01T15:35:05Z

This PR was updated in rebased taking into account the changes in #7074.

youknowriad · 2018-06-04T10:21:05Z

blocks/api/utils.js

+ */
+export function normalizeIconObject( icon ) {
+	if ( ! icon ) {
+		icon = { src: 'block-default' };


Can we just return?

Updated 👍

youknowriad · 2018-06-04T10:21:26Z

blocks/api/utils.js

+		icon = { src: 'block-default' };
+	}
+	if ( isString( icon ) || icon instanceof Component ) {
+		icon = { src: icon };


youknowriad · 2018-06-04T10:25:58Z

Should we update the Block API docs?

youknowriad · 2018-06-04T10:37:19Z

Not sure, what I'm doing wrong, the colors are not showing up for me. (using the gist)

jorgefilipecosta · 2018-06-04T10:55:47Z

Hi @youknowriad thank you for the review!

Should we update the Block API docs?

I expanded the docs to include this use case.

Not sure, what I'm doing wrong, the colors are not showing up for me. (using the gist)

I'm sorry I missed an update to the gist, with changes applied during the revisions. The Gist was updated and things should work now.

youknowriad

LGTM 👍

Re Docs: Actually, I was referring to these docs https://wordpress.org/gutenberg/handbook/block-api/#icon-optional

jorgefilipecosta · 2018-06-04T11:48:28Z

Re Docs: Actually, I was referring to these docs wordpress.org/gutenberg/handbook/block-api/#icon-optional

I added an updated to this docs 👍

Hi @karmatosed could we have a check regarding the design and UX?

mtias · 2018-06-04T12:59:33Z

Looks good to me, used it to create screenshots for the release post.

karmatosed

I am approving as this does work. I will add a note though we need to do something about checking accessibility issues such as contrast. We can also easily now have a white background with white icon. That's not great and something maybe we should check to fix.

The condition to check SVG icons was not correct. Now we use a more specific function that validates the icon. Test cases were added. Fixes #7139. Regressed in #7068.

maximebj · 2018-06-12T17:22:02Z

I've made a PR for the documentation to add an example with foreground color and shadow color.

By the way, shadowColor doesn't seems to work for me as shown in the screenshot. Any idea why?

Also, the fallback with most readable for the foreground color is not always perfect : sometimes with a dark color, the svg color stays black.

maximebj · 2018-06-12T17:25:29Z

Oh sorry, I just figured out that shadowColor is only for parent block with a stack style.
And is automatically defined (make sense).

To be CSS consistent, how about use color instead of foreground ?

aduth · 2018-06-25T13:45:58Z

To be CSS consistent, how about use color instead of foreground ?

Can you clarify what's meant by consistency here?

jorgefilipecosta added [Type] Enhancement A suggestion for improvement. [Feature] Block API API that allows to express the block paradigm. labels May 31, 2018

jorgefilipecosta self-assigned this May 31, 2018

aduth reviewed May 31, 2018

View reviewed changes

jasmussen mentioned this pull request Jun 1, 2018

Fix issues with new inserter #7074

Merged

jorgefilipecosta force-pushed the add/api-configura-icon-colors branch from c935411 to 34707de Compare June 1, 2018 11:50

mtias added this to the 3.0 milestone Jun 1, 2018

jorgefilipecosta force-pushed the add/api-configura-icon-colors branch 2 times, most recently from 9c476e6 to baa3e0f Compare June 1, 2018 15:34

youknowriad reviewed Jun 4, 2018

View reviewed changes

jorgefilipecosta force-pushed the add/api-configura-icon-colors branch from baa3e0f to 81e037b Compare June 4, 2018 10:54

youknowriad approved these changes Jun 4, 2018

View reviewed changes

Add API configure icon colors.

11a0ace

jorgefilipecosta force-pushed the add/api-configura-icon-colors branch from 81e037b to 11a0ace Compare June 4, 2018 11:38

jorgefilipecosta added the Needs Design Feedback Needs general design feedback. label Jun 4, 2018

jorgefilipecosta requested a review from karmatosed June 4, 2018 11:48

karmatosed approved these changes Jun 4, 2018

View reviewed changes

jorgefilipecosta merged commit aa5cc43 into master Jun 4, 2018

jorgefilipecosta deleted the add/api-configura-icon-colors branch June 4, 2018 14:54

jorgefilipecosta mentioned this pull request Jun 5, 2018

Fix svg block icons #7140

Merged

jorgefilipecosta mentioned this pull request Sep 27, 2021

Replace tinycolor2 with colord on the bocks package. #35165

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add API to configure icon colors #7068

Add API to configure icon colors #7068

jorgefilipecosta commented May 31, 2018

aduth May 31, 2018

aduth May 31, 2018

jorgefilipecosta Jun 1, 2018

aduth May 31, 2018

jorgefilipecosta Jun 1, 2018

mtias Jun 1, 2018

aduth May 31, 2018

jorgefilipecosta Jun 1, 2018

aduth Jul 9, 2019

jorgefilipecosta commented Jun 1, 2018

youknowriad Jun 4, 2018

jorgefilipecosta Jun 4, 2018

youknowriad Jun 4, 2018

youknowriad commented Jun 4, 2018

youknowriad commented Jun 4, 2018 •

edited

Loading

jorgefilipecosta commented Jun 4, 2018

youknowriad left a comment

jorgefilipecosta commented Jun 4, 2018

mtias commented Jun 4, 2018

karmatosed left a comment

maximebj commented Jun 12, 2018

maximebj commented Jun 12, 2018

aduth commented Jun 25, 2018

Add API to configure icon colors #7068

Add API to configure icon colors #7068

Conversation

jorgefilipecosta commented May 31, 2018

Description

How has this been tested?

Screeshots:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgefilipecosta commented Jun 1, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented Jun 4, 2018

youknowriad commented Jun 4, 2018 • edited Loading

jorgefilipecosta commented Jun 4, 2018

youknowriad left a comment

Choose a reason for hiding this comment

jorgefilipecosta commented Jun 4, 2018

mtias commented Jun 4, 2018

karmatosed left a comment

Choose a reason for hiding this comment

maximebj commented Jun 12, 2018

maximebj commented Jun 12, 2018

aduth commented Jun 25, 2018

youknowriad commented Jun 4, 2018 •

edited

Loading