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

Block list block not showing icons with Gutenberg 11.9.0 #50

Open
bobbingwide opened this issue Nov 16, 2021 · 5 comments
Open

Block list block not showing icons with Gutenberg 11.9.0 #50

bobbingwide opened this issue Nov 16, 2021 · 5 comments
Assignees
Labels
bug Something isn't working Priority A High Priority

Comments

@bobbingwide
Copy link
Owner

bobbingwide commented Nov 16, 2021

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 bobbingwide added bug Something isn't working help wanted Extra attention is needed Priority A High Priority labels Nov 16, 2021
@bobbingwide bobbingwide self-assigned this Nov 16, 2021
@bobbingwide
Copy link
Owner Author

The following blocks don't work with Gutenberg 11.9.0

  • oik-blocks/blockicon,
  • oik-blocks/blockinfo
  • oik-blocks/blocklist

The toolbar icon blocks do work.

@bobbingwide
Copy link
Owner Author

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
Copy link
Owner Author

bobbingwide commented Nov 18, 2021

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 bobbingwide removed the help wanted Extra attention is needed label Nov 18, 2021
@bobbingwide
Copy link
Owner Author

bobbingwide commented Nov 18, 2021

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
Copy link
Owner Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Priority A High Priority
Projects
None yet
Development

No branches or pull requests

1 participant