search

bobbingwide / oik-blocks

WordPress 5.0 blocks for oik shortcodes
https://oik-plugins.com/oik-plugins/oik-blocks
GNU General Public License v3.0
1 stars 0 forks source link

Block list block not showing icons with Gutenberg 11.9.0 #50

Open bobbingwide opened 2 years ago

bobbingwide commented 2 years ago

With Gutenberg 11.9.0 the block list block displays icons in the editor but they're missing in the front end. They look OK in the Visual editor. If you switch to the Code editor the SVGs are gone.

Gutenberg version Visual editor Code editor Front end
10.9.0 Yes No No
10.8.3 Yes Yes Yes

Note: Some icons don't even appear in the block list in the editor. eg. Comment Author Name This could be a separate issue. The blockinfo block doesnt display the icon but the blockicon block does. However the SVG's missing when you switch to the Code editor. And it's not saved in the post.

bobbingwide commented 2 years ago

The following blocks don't work with Gutenberg 11.9.0

The toolbar icon blocks do work.

bobbingwide commented 2 years ago

With Gutenberg 11.9.0 I see the following in the console log, where the second bit is the output from console.log( block.icon )

image

bobbingwide commented 2 years ago

I changed the code from using <BlockIcon icon={block.icon} /> to <Icon icon={block.icon.src} />. It resolved the problem for blockicon, blockinfo and blocklist except for variations. To resolve it for variations I needed to change the logic to be more like that inside the BlockIcon block

<Icon icon={ block.icon && block.icon.src ? block.icon.src : block.icon } />
bobbingwide commented 2 years ago

The changes for block icons work for core blocks which are now SVG icons, but not for dashicons. The dashicons CSS is not being enqueued.

Proposed solution

The HTML that's saved for an icon which is a dashicon is like this:

<div class="wp-block-oik-block-blockicon"><div><span class="dashicon dashicons dashicons-building"></span></div></div>

In the server we can implement a callback function for the block to make it dynamic. It will implement a check for the string dashicons- which indicates that there's a dashicon being processed. When found we need to enqueue dashicons.

The same callback routine can be used for block icon, block info and block list.

Note: In the future we can replace the whole block with the dash icon SVG logic from oik-bob-bing-wide.

bobbingwide commented 2 years ago

v1.3.0 is being alpha tested in blocks.wp-a2z.org