WordPress Gutenberg自定义块viewScript前端无法加载求助

以下是针对你遇到的view.js无法在前端加载问题的排查和解决方案：

1. 确认view.asset.php文件存在 #

WordPress依赖对应的.asset.php文件处理脚本的依赖关系与版本控制。如果build文件夹中缺少view.asset.php，WordPress将无法正确入队view.js。

原因及修复： #

默认的@wordpress/create-block构建脚本仅以src/index.js为入口文件。若你新增了src/view.js，需修改package.json中的构建命令，将view.js加入编译入口：

{
  "scripts": {
    "build": "wp-scripts build src/index.js src/view.js",
    "start": "wp-scripts start src/index.js src/view.js"
  }
}

执行npm run build后，build文件夹会生成view.js及对应的view.asset.php文件。

2. 验证WordPress版本兼容性 #

viewScript字段是WordPress 6.1版本新增的特性，需确保你的网站运行的是WordPress 6.1或更高版本（插件声明的最低版本要求需与实际站点版本匹配）。

3. 清除缓存 #

• 强制刷新浏览器页面（Ctrl+F5），清除本地缓存。
• 禁用或清除WordPress缓存插件（如WP Rocket、W3 Total Cache）的缓存内容。
• 若使用服务器CDN或静态缓存，同步清除对应缓存。

4. 检查块注册路径 #

确认register_block_type指向的build文件夹路径正确。你的代码中__DIR__ . '/build'是正确的，前提是build文件夹与hero.php处于同一目录下。

5. 手动入队脚本（备选方案） #

若上述方法无效，可通过代码手动入队view.js，在hero.php中添加以下内容：

function enqueue_hero_view_script() {
  // 仅当页面包含该块时加载脚本
  if ( has_block( 'custom-block/hero' ) ) {
    wp_enqueue_script(
      'hero-view-script',
      plugin_dir_url( __FILE__ ) . 'build/view.js',
      array(), // 若有依赖（如jQuery）可在此添加
      '0.1.0',
      true // 在页脚加载脚本
    );
  }
}
add_action( 'wp_enqueue_scripts', 'enqueue_hero_view_script' );

6. 检查浏览器控制台错误 #

打开浏览器开发者工具的控制台面板，查看是否存在脚本加载失败的错误提示，这可能指向依赖缺失或路径错误等问题。

内容的提问来源于stack exchange，提问作者Daniel V.