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

我正在尝试在具有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标签上。

提前致谢

#1

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