添加自定义Gutenberg块图标

时间:2018-05-05 09:44:55

标签: gutenberg-blocks

我添加了一个用于添加短代码的静态块。我想使用已经存在于插件“images”文件夹中的自定义图标,而不是使用dashicons作为块图标。任何人都可以帮我使用.svg图像作为块图标。下面是我到目前为止尝试添加自定义图标的代码

( function() {
var __ = wp.i18n.__;
var createElement = wp.element.createElement;
var registerBlockTypeMainPage = wp.blocks.registerBlockType;
const iconEl = el('svg', { width: 20, height: 20 },
    el('path', { d: "M8.54,4.68V8h3.23v.58H8.54v3.28H8V8.55H4.74V8H8V4.68Z,M26.48,5.93,24.15,8.26l2.28,2.28L26,11,23.74,8.66,21.42,11,21,10.58l2.33-2.32L21.05,6l.41-.41,2.28,2.28,2.33-2.33Z,M11.26,23.45V24h-6v-.59Z,M27.25,22.36v.58h-7v-.58Zm0,2.19v.57h-7v-.57Z" } )
);

registerBlockTypeMainPage(
    'mdlr/static-block',
    {
        title: __( 'Test block' ),
        icon: iconEl,
        category: 'widgets',

        edit: function( props ) {
            return createElement(
                'p',
                {
                    className: props.className,
                },
                '[test-block]'
            );
        },

        save: function( props ) {
            return createElement(
                'p',
                {
                    className: props.className,
                },
                '[test-block]'
            );
        },
    }
);
})();

0 个答案:

没有答案