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

Posted 2023-02-19

【中文标题】如何向 WordPress Gutenberg 块添加自定义块？

【英文标题】：How to add a custom block to WordPress Gutenberg blocks?

【发布时间】：2018-07-18 18:07:18

【问题描述】：

我想为 Gutenberg 创建一个新的自定义块，可以吗？

【参考方案1】：

是的，这是可能的。我建议您使用像 create-guten-block 这样的入门工具包来创建 Gutenberg 块。

⚡️ 快速概览

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

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

在readme →上阅读所有详细信息

【参考方案2】：

是的，这是可能的。阅读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.' );
    ,
 );