Visibility issues for some icons

bobbingwide commented 2 years ago

Problems with Columns variations icons

In earlier versions of Gutenberg certain icons appear differently in the editor than in the front end. eg Columns variations. In the block editor the icons are not filled with black

Problem with Comment Author Name icon

With Gutenberg 11.9.0 the icon for the new Comment Author Name block is visible in the block icon block in the editor but not in other blocks nor on the front end.

The SVG for the Comment Author Name block is

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" role="img" aria-hidden="true" focusable="false"><path d="M18 4H6c-1.1 0-2 .9-2 2v12.9c0 .6.5 1.1 1.1 1.1.3 0 .5-.1.8-.3L8.5 17H18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 11c0 .3-.2.5-.5.5H7.9l-2.4 2.4V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v9z" fill-rule="evenodd" clip-rule="evenodd"></path><path d="M15 15V15C15 13.8954 14.1046 13 13 13L11 13C9.89543 13 9 13.8954 9 15V15" fill-rule="evenodd" clip-rule="evenodd"></path><circle cx="12" cy="9" r="2" fill-rule="evenodd" clip-rule="evenodd"></circle></svg>

Here we see the fill='#FFFFFF' attribute on the SVG tag. For the block info block the icon is invisible.

Using the inspector and changing this value to #CCCCCC, for example, allows us to see the icon in the block editor. Alternatively we can set a background colour.

This problem was originally mentioned in https://github.com/bobbingwide/oik-blocks/issues/50#issue-1055286475

Requirement

Icons should look the same in the editor and the front end

Proposed solution

[x] Discover what's needed to style icons that have the following attributes that need a little more care and attention: fill, fill-rule, cllp-rule etc
[x] Implement appropriate CSS

bobbingwide commented 2 years ago

Discover what's needed to style icons that have the following attributes that need a little more care and attention: fill, fill-rule, cllp-rule etc

Adding the fill: currentColor; property to the style.scss files which are procesed into style-index.css half fixed the problem. eg This was the CSS for the block list block.

.wp-block-oik-block-blocklist svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

But...

This CSS didn't get loaded for the blocklist block if the blockicon block wasn't also used on the page.
The Comment Author Avatar is also wrong.

It would appear that Gutenberg 11.9.0 now enqueues the CSS for each block, not the plugin as a whole.

bobbingwide commented 2 years ago

The changes for this issue were committed in d69b5c9 and abfdcc3 oik-blocks v1.3.0 is being alpha tested on blocks.wp-a2z.org

bobbingwide commented 2 years ago

Other people were having problems with a number of icons. See https://github.com/WordPress/gutenberg/pull/36564 It looks like I'll need to revisit these icons in https://github.com/bobbingwide/txt2md/issues/7 as well.

bobbingwide commented 2 years ago

See also https://github.com/bobbingwide/oik-bob-bing-wide/issues/46#issuecomment-1063881371 where icons weren't visible. For one icon, it was the fill-rule: evenOdd property that prevented the icon from being visible on a white background.

bobbingwide / oik-blocks