古腾堡自定义块未出现在WordPress中

时间:2018-12-20 13:58:29

标签: javascript wordpress wordpress-gutenberg gutenberg-blocks

所以我试图在gutenberg中添加一个自定义块以在我的wordpress网站中重新使用。我为此做了一个我认为是必要的插件?但它不会出现在古腾堡的街区。

我尝试了两种不同的方式来加载插件,但是两种方式都没有成功。我当前的代码如下

add_action('enqueue-block-editor-assets', 'dva_enqueue_editor_assets', 10, 1);
add_action('enqueue-block-assets', 'dva_enqueue_assets', 10, 1);

function dva_enqueue_editor_assets()
{
    // building script
    wp_enqueue_script(
        'dva-gutenberg-sectionblock-editor-js',
        plugins_url('/blocks/sectionblock/editor-script.js', __FILE__),
        array('wp-blocks', 'wp-element'));

    //editor css
    wp_enqueue_style(
        'dva-gutenberg-sectionblock-editor-css',
        plugins_url('/blocks/sectionblock/editor-style.css', __FILE__),
        array('wp-edit-blocks'));
}
function dva_enqueue_assets(){
    //global css
    wp_enqueue_style(
        'dva-gutenberg-sectionblock',
        plugins_url('/blocks/sectionblock/style.css', __FILE__),
        array('wp-blocks') );
}

和editor-script.js中的代码如下:

wp.blocks.registerBlockType('DVAgutenberg/sectionblock', {
    title: 'Section block',
    icon : 'welcome-add-page',
    category: 'common',
    attributes : {
        content : {
            type: 'array',
            source : 'children',
            selector : 'p'
        },
    },
    edit: function( props ){
        return wp.element.createElement( wp.blocks.RichText, {
            tagName: 'p',
            className: props.className,
            value: props.attributes.content,
            onChange: function(newContent) {
                props.setAttributes({content: newContent});
            }
        })
    },

    save: function(props) {
        return wp.element.createElement('p',{
            className : props.className,
        }, props.attributes.content);
    }
});

0 个答案:

没有答案