How to update a block icon in Gutenberg

Question

I want to update a block icon of Gutenberg editor of WordPress. A plugin has his own blocks but I need to add my custom block icons in the same block.

This is probably off-topic here. You may have more luck at wordpress.stackexchange.com — Quentin Hayot

Dmtriy Proskurin Dmtriy Proskurin · Accepted Answer · 2019-07-24T13:47:31

After digging around I've found out that Gutenberg block icon is just a SVG element rendered by reactJS. Block Object Details Image
So here you go:

wp.hooks.addFilter('blocks.registerBlockType', 'hideBlocks', (pSettings, pName) => {
console.log(pSettings);
if(pSettings.name == "core/video")
{
    /**
     * Example of a custom SVG path taken from fontastic
    */
    const iconEl = wp.element.createElement('svg', { width: 20, height: 20 },
      wp.element.createElement('path', { d: "M12.5,12H12v-0.5c0-0.3-0.2-0.5-0.5-0.5H11V6h1l1-2c-1,0.1-2,0.1-3,0C9.2,3.4,8.6,2.8,8,2V1.5C8,1.2,7.8,1,7.5,1 S7,1.2,7,1.5V2C6.4,2.8,5.8,3.4,5,4C4,4.1,3,4.1,2,4l1,2h1v5c0,0-0.5,0-0.5,0C3.2,11,3,11.2,3,11.5V12H2.5C2.2,12,2,12.2,2,12.5V13 h11v-0.5C13,12.2,12.8,12,12.5,12z M7,11H5V6h2V11z M10,11H8V6h2V11z" } )
    );
    pSettings.icon = iconEl;
}
return pSettings;});

Details about hooks/filters in JS: https://developer.wordpress.org/block-editor/packages/packages-hooks/

(code should be executed before blocks registration on editor page of course)

How to update a block icon in Gutenberg

1 Answers