Question

我正在尝试使用ReactJS为古腾堡创建自定义块。我正在尝试通过render（）函数呈现HTML，但出现“ Uncaught SyntaxError：Unexpected token <” 错误。

现在，我读到我应该确保将脚本类型定义为 text / babel 以正确呈现HTML，但是当我通过< strong> wp_register_script（） wordpress函数，我必须知道如何做到这一点。

让我知道是否需要更多详细信息，谢谢！

Answer 1

首先将您的脚本放入functio.php文件中：

function gutenberg_boilerplate_block() {
    wp_register_script(
        'gutenberg-boilerplate-es5-step01',
        get_theme_file_uri( '/js/test.js' ),
        array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' )
    );

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

输入您的代码test.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.' );
    },
} );

了解古腾堡，现在点击此网址：

https://wordpress.org/gutenberg/handbook/

Answer 2

看起来您正在尝试直接渲染react元素。

const element = <h1>Hello JSX</h1>;

应将其编译为：

var element = React.createElement(
  "h1",
  null,
  "Hello JSX"
);

为古腾堡块（wordpress）定义Javascript类型

2 个答案: