关于WordPress主题内block.json的editorScript路径指向插件目录而非主题目录的技术问询

嘿，这个问题我碰到过好多次了，其实核心就是要让WordPress正确识别主题里的脚本路径，下面给你两种靠谱的解决办法：

方法一：使用file:前缀的相对路径（官方推荐） #

这是最省心的写法，完全适配主题区块的路径逻辑：

• 先修改你的block.json文件，把editorScript改成相对当前block.json所在目录的路径，并加上file:前缀：

  {
    "apiVersion": 3,
    "name": "my-theme/my-custom-block",
    "title": "我的自定义区块",
    "editorScript": "file:./index.js"
  }
  

  这里的file:是关键，它会告诉WordPress：「去当前block.json所在的目录找这个脚本」，直接避开插件目录的指向问题。

• 然后在主题的functions.php里注册区块时，直接指向主题内的区块目录：

  function my_theme_register_custom_blocks() {
      // 假设你的区块放在主题根目录的blocks/my-custom-block下
      register_block_type( get_template_directory() . '/blocks/my-custom-block' );
  }
  add_action( 'init', 'my_theme_register_custom_blocks' );
  

  这样WordPress会自动解析file:开头的路径，准确找到主题目录下的脚本文件。

方法二：通过脚本Handle关联（适合精细控制场景） #

如果你的脚本需要自定义依赖、版本号或者异步加载，可以用这种方式：

• 先在functions.php里注册主题区块的脚本，指定正确的主题路径：

  function my_theme_enqueue_block_editor_scripts() {
      wp_enqueue_script(
          'my-theme-custom-block-script', // 这是脚本的唯一标识（handle）
          get_template_directory_uri() . '/blocks/my-custom-block/index.js', // 主题内的脚本绝对路径
          array( 'wp-blocks', 'wp-element' ), // 脚本依赖的Gutenberg核心组件
          filemtime( get_template_directory() . '/blocks/my-custom-block/index.js' ), // 自动更新版本号避免缓存
          true // 是否在页脚加载
      );
  }
  add_action( 'enqueue_block_editor_assets', 'my_theme_enqueue_block_editor_scripts' );
  

• 然后修改block.json，把editorScript的值改成上面注册的脚本handle：

  "editorScript": "my-theme-custom-block-script"
  

  WordPress会自动关联到你注册的主题脚本，彻底解决路径指向错误的问题。

最后小提醒 #

修改完之后记得清空WordPress的站点缓存和浏览器缓存，有时候旧的路径缓存会导致修改不生效哦～

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