Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try making the Inserter category icons grayscale. #16163

Merged
merged 2 commits into from Jun 14, 2019

Conversation

@mapk
Copy link
Contributor

commented Jun 13, 2019

Description

Fixes #14180. There's a concern that the full-color icons cause more cognitive load than they do help. While the primary desire is to remove them fully, I'm trying out the secondary option of just making them grayscale. This will minimize their brightness, but still allow them to help guide the user to that section of blocks.

How has this been tested?

Locally.

Screenshots

BEFORE

Screen Shot 2019-06-13 at 10 02 39 AM

AFTER

grayscale

Types of changes

Minor CSS filter added to the icon.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
@kjellr
kjellr approved these changes Jun 13, 2019
Copy link
Contributor

left a comment

Looks good! A few considerations:

  • filter won't work on IE11. There's no super-easy override, but that's probably okay, since this isn't a critical change.
  • Also, this will result in icons that use a lot of slightly different grays. If we want to them all to be the same exact color, we could add specifically fill colors for the svg and path elements in here. But that may cause issues if an SVG has multi-colored elements or something. So the current solution is probably the safest.
  • We may optionally want to throw an !important in here if we want to be really strict about it.

I'm not sure that any of those are critical, so this gets a from me in the meantime.

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented Jun 14, 2019

Maybe we can show the colors when we hover the panel header?

@afercia

This comment has been minimized.

Copy link
Contributor

commented Jun 14, 2019

From an accessibility perspective, I don't see particular issues. As long as there's meaningful text to describe the sections, icons are purely decorative.

From other perspectives, I fully share the concerns expressed in the related issue, including plugin competition. As I see it, the inserted is not a place for branding or advertising. This should be discussed at a product level though, so it's just my 2 cents 🙂

@mapk

This comment has been minimized.

Copy link
Contributor Author

commented Jun 14, 2019

@kjellr I agree with your first two points and felt like a CSS filter was the safest bet. I also added an !important to the style.

@youknowriad I'd rather keep them grayscale, even on hover. I think reducing color in the Inserter throughout is the better path forward.

@afercia Thanks for the review!

@mapk mapk merged commit d318b2f into master Jun 14, 2019
1 of 4 checks passed
1 of 4 checks passed
Filter merged Filter merged
Details
Filter merged Filter merged
Details
Filter merged Filter merged
Details
Travis CI - Pull Request Build Passed
Details
@github-actions github-actions bot added this to the Gutenberg 6.0 milestone Jun 14, 2019
nicolad added a commit to nicolad/gutenberg that referenced this pull request Jun 15, 2019
* Fixes WordPress#14180. Makes the icons grayscale.

* Added an important to the style to increase strictness.

Applied max height to html block.
@youknowriad youknowriad deleted the try/category-icon-grayscale branch Jun 17, 2019
jg314 added a commit to jg314/gutenberg that referenced this pull request Jul 19, 2019
* Fixes WordPress#14180. Makes the icons grayscale.

* Added an important to the style to increase strictness.
sbardian added a commit to sbardian/gutenberg that referenced this pull request Jul 29, 2019
* Fixes WordPress#14180. Makes the icons grayscale.

* Added an important to the style to increase strictness.
dd32 pushed a commit to dd32/gutenberg that referenced this pull request Sep 27, 2019
* Fixes WordPress#14180. Makes the icons grayscale.

* Added an important to the style to increase strictness.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.