使用jQuery开发Gutenberg元框遇语法错误，求代码正确放置位置

首先说下你遇到的Uncaught SyntaxError: Unexpected token '<'的原因：这段代码里用了JSX语法（就是<PluginDocumentSettingPanel>这种HTML风格的标签），但浏览器原生根本不认识JSX——它只能理解标准JavaScript，直接运行未转译的JSX肯定会报错。另外你原来的代码还漏了关键的registerPlugin调用，不然就算转译好了也不会显示面板。

下面一步步说怎么处理：

1. 先把代码放到正确的文件里 #

别把这段代码直接塞普通.js文件，新建一个.jsx后缀的文件（比如src/blocks/my-custom-metabox.jsx），把补全后的代码放进去：

const { registerPlugin } = wp.plugins;
const { PluginDocumentSettingPanel } = wp.editPost;

const MyDocumentSettingTest = () => (
  <PluginDocumentSettingPanel
    className="my-document-setting-plugin"
    title="My Panel"
  >
    <p>My Document Setting Panel</p>
  </PluginDocumentSettingPanel>
);

// 必须注册插件才会在编辑器里显示
registerPlugin('my-document-setting-test', {
  render: MyDocumentSettingTest,
});

2. 用Babel转译JSX（解决Gulp的问题） #

你的gulp-uglify-es只是压缩代码，不会转译JSX，得加Babel来把JSX转成浏览器能懂的普通JS：

• 先装依赖：

  npm install gulp-babel @babel/core @babel/preset-react @babel/preset-env --save-dev
  

• 修改你的Gulp任务，添加转译步骤：

  const gulp = require('gulp');
  const babel = require('gulp-babel');
  const uglify = require('gulp-uglify-es').default;
  
  gulp.task('build-metabox', () => {
    return gulp.src('src/blocks/my-custom-metabox.jsx')
      // 用Babel转译JSX和ES6+语法
      .pipe(babel({
        presets: ['@babel/preset-env', '@babel/preset-react']
      }))
      // 再压缩代码
      .pipe(uglify())
      // 输出到生产目录
      .pipe(gulp.dest('dist/blocks/'));
  });
  

运行这个Gulp任务后，dist/blocks/my-custom-metabox.js就是可以安全引入的文件了。

3. 在WordPress里正确引入脚本 #

在你的主题functions.php或者插件主文件里，添加脚本引入代码，必须依赖Gutenberg的核心脚本：

function enqueue_my_gutenberg_metabox() {
  wp_enqueue_script(
    'my-gutenberg-metabox',
    get_template_directory_uri() . '/dist/blocks/my-custom-metabox.js',
    // 依赖Gutenberg的核心模块，少了这些会找不到wp.plugins、wp.editPost这些对象
    array('wp-plugins', 'wp-edit-post', 'wp-element'),
    '1.0.0',
    true // 页脚加载更合理
  );
}
// 只在块编辑器里加载这个脚本
add_action('enqueue_block_editor_assets', 'enqueue_my_gutenberg_metabox');

关于Gulp 3的小提醒 #

Gulp 3已经停止维护好几年了，虽然现在配置Babel后能正常用，但如果后续遇到奇怪的兼容性问题，建议考虑升级到Gulp 4，生态支持会更好。

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