javascript - 为 Gutenberg 块定义 Javascript 类型（wordpress）

Question

我正在尝试使用 ReactJS 为 Gutenberg 创建自定义块。我正在尝试通过 render() 函数呈现 HTML，但出现“Uncaught SyntaxError: Unexpected token <”错误。

现在，我已经读到我应该确保将脚本类型定义为text/babel以正确呈现 HTML，但是当我通过wp_register_script() wordpress 函数添加我的 JS 文件时，我必须知道如何要做到这一点。

如果您需要更多详细信息，请告诉我，谢谢！

Answer 1

首先将您的脚本排入 funcio.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

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

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

这应该编译成：

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