Try making the Inserter category icons grayscale.

[mapk]

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

AFTER

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]

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]

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

[afercia]

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]

@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!