如何在WordPress Gutenberg块中添加自定义块?

时间:2018-02-08 08:33:40

标签: wordpress wordpress-gutenberg gutenberg-blocks

我想为Gutenberg创建一个新的自定义块,这可能吗?

2 个答案:

答案 0 :(得分:4)

是的,有可能。我建议您使用create-guten-block之类的入门工具包来创建Gutenberg块。

  

⚡️快速概述

一口气快速执行步骤1和步骤2-在本地WP安装中运行/wp.local/wp-content/plugins/目录。

npx create-guten-block my-block
cd my-block
npm start

readme →

上阅读此处的所有详细信息

答案 1 :(得分:0)

是的,有可能。阅读gutenberg handbook。这里有很多这样的例子:

// init.php
function gutenberg_boilerplate_block() {
    wp_register_script(
        'gutenberg-boilerplate-es5-step01',
        plugins_url( 'step-01/block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' )
    );

    register_block_type( 'gutenberg-boilerplate-es5/hello-world-step-01', array(
        'editor_script' => 'gutenberg-boilerplate-es5-step01',
    ) );
}
add_action( 'init', 'gutenberg_boilerplate_block' );


// block.js:
var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };

registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-01', {
    title: 'Hello World (Step 1)',

    icon: 'universal-access-alt',

    category: 'layout',

    edit: function() {
        return el( 'p', { style: blockStyle }, 'Hello editor.' );
    },

    save: function() {
        return el( 'p', { style: blockStyle }, 'Hello saved content.' );
    },
} );