javascript 有关如何在Gutenberg中为块使用自定义SVG图标的示例

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 有关如何在Gutenberg中为块使用自定义SVG图标的示例相关的知识,希望对你有一定的参考价值。

// Import __ from i18n internationalization library
const { __ } = wp.i18n;
// Import registerBlockType() from block building libary
const { registerBlockType } = wp.blocks;
// Import the element creator function (React abstraction layer)
const el = wp.element.createElement;

/**
 * Example of a custom SVG path taken from fontastic
*/
const iconEl = el('svg', { width: 20, height: 20 },
  el('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" } )
);

/**
 * Register Block using a custom icon.
 * 
 * @param   {String}    name        Block name, namespaced
 * @param   {Object}    settings    Block settings
 * @return  {?WPBlock}              Return the block or 'undefined'
*/
registerBlockType('js4wpgb/static-content', {
    title: __('Custom Block', 'JS4WPGB'),
    icon: iconEl,
    category: 'common',    
    edit( props ) {
        return el('p', {}, 'Hello world!');
    },
    save( props ) {
        return el('p', {}, 'Hello world!');
    }
});

以上是关于javascript 有关如何在Gutenberg中为块使用自定义SVG图标的示例的主要内容,如果未能解决你的问题,请参考以下文章

如何正确弃用 Gutenberg 块

如何在 Wordpress 中列出和重新排列或操作 Gutenberg 块类别

如何向 WordPress Gutenberg 块添加自定义块?

如何以编程方式在主题中使用 Wordpress Gutenberg 块?

如何强制WordPress Gutenberg刷新特色图片?

如何使用 Gutenberg 应用平滑滚动