如何更新古腾堡中的块图标答案

【问题标题】：How to update a block icon in Gutenberg如何更新古腾堡中的块图标
【发布时间】：2019-12-02 15:27:42
【问题描述】：

我想更新 WordPress 的 Gutenberg 编辑器的块图标。一个插件有他自己的块，但我需要在同一个块中添加我的自定义块图标。

【问题讨论】：

这可能是题外话。 wordpress.stackexchange.com 你可能会有更多的运气

标签： javascript wordpress custom-wordpress-pages wordpress-gutenberg

【解决方案1】：

经过挖掘，我发现 Gutenberg 块图标只是由 reactJS 渲染的 SVG 元素。 Block Object Details Image
所以你去：

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;});

关于 JS 中的钩子/过滤器的详细信息：https://developer.wordpress.org/block-editor/packages/packages-hooks/

（当然，代码应该在编辑页面上的块注册之前执行）

【讨论】：