WordPress自定义区块中使用HTML出现SyntaxError，求解决方案

这个错误的核心原因是：浏览器无法直接解析你代码里的JSX语法（比如<div>、<RichText>这类标签），需要先通过编译工具把JSX转换成普通JavaScript才能运行。下面是具体解决步骤：

• 使用官方编译工具链
  WordPress区块开发推荐用@wordpress/scripts来处理JSX编译，步骤如下：

  1. 在项目目录执行初始化命令：npm init -y
  2. 安装依赖：npm install @wordpress/scripts --save-dev
  3. 在package.json中添加编译脚本：

     "scripts": {
       "build": "wp-scripts build",
       "start": "wp-scripts start"
     }
     

  4. 运行npm start实时编译代码，或npm run build生成生产环境可用的编译文件。

• 修正代码中的语法和逻辑问题
  你的代码还存在变量未定义、缺少必要配置的问题，以下是修正后的完整代码：

  (() => {
    // 引入WordPress区块开发所需模块
    const { registerBlockType } = wp.blocks;
    const { RichText } = wp.blockEditor;
    const { __ } = wp.i18n;
  
    registerBlockType('my-plugin/testblock', {    
      title: __('Test Block'),
      category: 'common',
      // 定义区块属性，用于存储输入的内容
      attributes: {
        name: {
          type: 'string',
          source: 'html',
          selector: 'h2.test-name'
        }
      },
      edit: (props) => {
        // 从props中解构必要的参数
        const { attributes, setAttributes } = props;
        const { name } = attributes;
  
        // 定义内容变更的处理函数
        const onChangeName = (newName) => {
          setAttributes({ name: newName });
        };
  
        // JSX中需用className替代class
        return (
          <div className="test-block">
            <RichText
                tagName="h2"
                className="test-name"
                placeholder={__("Enter Name…")}
                value={name}
                onChange={onChangeName}
            />
          </div>
        );
      },
      // 添加save函数，用于渲染区块的静态内容
      save: (props) => {
        const { attributes } = props;
        const { name } = attributes;
  
        return (
          <div className="test-block">
            <RichText.Content
                tagName="h2"
                className="test-name"
                value={name}
            />
          </div>
        );
      }
    });
  })();
  

  重点修正点：

  • 引入wp的核心模块（blocks、blockEditor、i18n）
  • 补充区块的基础配置（title、category）和属性定义
  • 从props中获取attributes和setAttributes，定义onChangeName函数
  • JSX语法中使用className而非class
  • 实现save函数，用RichText.Content输出静态内容

• 在主题中正确加载编译后的脚本
  在主题的functions.php中添加以下代码，确保编译后的脚本能在编辑器中加载：

  function enqueue_test_block_script() {
    wp_enqueue_script(
      'test-block-script',
      get_template_directory_uri() . '/build/index.js',
      array('wp-blocks', 'wp-element', 'wp-editor', 'wp-i18n'),
      filemtime(get_template_directory() . '/build/index.js')
    );
  }
  add_action('enqueue_block_editor_assets', 'enqueue_test_block_script');
  

内容的提问来源于stack exchange，提问作者user500665