注册Gutenberg区块后，插件后台仪表盘组件无法显示求助

你的问题核心是后台脚本与区块脚本的打包/入队冲突，导致后台React组件所需的依赖未正确加载，具体原因和修复步骤如下：

核心问题分析 #

1. 依赖污染：你将后台与区块代码打包到同一个入口文件，导致后台脚本的index.asset.php包含了区块所需的额外依赖（如wp-block-editor、wp-blocks等）。这些依赖在后台插件页面（非编辑器页面）不会被WordPress自动加载，直接导致React组件初始化失败。
2. 脚本命名冲突：后台脚本与区块脚本如果使用相同的handle（my-plugin），会导致WordPress忽略重复入队的脚本，或加载错误的版本。
3. 打包结构不合理：后台与区块属于完全独立的功能模块，应该分开打包，避免互相影响。

修复步骤 #

1. 拆分打包配置（使用@wordpress/scripts） #

修改package.json的构建脚本，将后台与区块代码作为独立入口分别打包：

"scripts": {
  "build": "wp-scripts build src/admin/adminIndex.js src/blocks/block-1/blockIndex.js --output-path=build",
  "start": "wp-scripts start src/admin/adminIndex.js src/blocks/block-1/blockIndex.js --output-path=build"
}

执行npm run build后，会生成：

• build/adminIndex.js + build/adminIndex.asset.php（后台代码）
• build/blocks/block-1/index.js + 对应asset文件（区块代码）

2. 修正后台脚本入队逻辑 #

更新plugin.php中的load_admin_scripts方法，加载独立打包的后台脚本，并修改脚本handle避免冲突：

public function load_admin_scripts( $hook ) {
    if ( 'toplevel_page_my-plugin' !== $hook ) {
        return;
    }

    // 加载后台专属的asset文件
    $asset_file = include plugin_dir_path( __FILE__ ) . 'build/adminIndex.asset.php';

    // 注册并入队后台脚本，使用唯一handle
    wp_register_script(
         'my-plugin-admin',
         plugins_url( 'build/adminIndex.js', __FILE__ ),
         $asset_file['dependencies'],
         $asset_file['version']
    );
    wp_enqueue_script( 'my-plugin-admin' );

    // 入队后台样式，同样使用唯一handle
    wp_register_style(
         'my-plugin-admin-style',
         plugins_url( 'src/admin/stylesheet/style.css', __FILE__ ),
         array(),
         $asset_file['version']
     );
     wp_enqueue_style( 'my-plugin-admin-style' );
}

3. 优化后台React初始化逻辑 #

将window.addEventListener('load')替换为WordPress官方推荐的domReady方法，确保DOM加载完成后再渲染组件：

import { render } from '@wordpress/element';
import App from './components/App/App';
import domReady from '@wordpress/dom-ready';

domReady(() => {
    const container = document.querySelector('#my-plugin');
    if (container) {
        render(<App />, container);
    }
});

4. 验证区块注册配置 #

确保区块的block.json路径正确，register_block_type会自动处理区块脚本的入队，无需手动操作：

{
  "apiVersion": 3,
  "name": "my-plugin/block-1",
  "title": "Block 1",
  "category": "widgets",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

调试技巧 #

打开浏览器开发者工具（F12），查看Console面板：

• 如果出现ReferenceError: xxx is not defined，说明对应的WP依赖未加载，需要检查asset文件中的dependencies是否正确。
• 如果出现Target container is not a DOM element，说明#my-plugin元素未找到，检查后台页面的HTML输出是否正确。

内容的提问来源于stack exchange，提问作者s.khan