在Wordpress 5.0中关闭div时出现未捕获的语法错误

Question

我正在尝试在具有gutenberg的wordpress 5.0中添加自定义块。

我正在下面的链接中，但是ESNext的代码对我来说不起作用。它给了我语法错误。 链接：https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/

下面是我的functions.php代码：

function gutenberg_boilerplate_block() {
    wp_register_script(
        'gutenberg-boilerplate-es5-step01',
        get_template_directory_uri().'/step-01/block.js',
        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' );

我的js文件是block.js，下面是该文件的代码：

const { registerBlockType } = wp.blocks;
const blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };

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

    icon: 'universal-access-alt',

    category: 'layout',

    edit() {
        return <p> Test </p>;
    },

    save() {
        return <p> Test </p>;
    },
} )

问题出在关闭的HTML标签上。

预先感谢

Answer 1

您不能直接使用ESNext，需要像babel这样的编译器才能将esnext转换为es2015。 WordPress不能直接使用esnext。