Gutenberg编辑器出现“Block已注册”错误，求排查解决

我开发的WordPress插件包含多个区块和后台管理页面，功能、后台页面、区块本身都能正常运行，但进入Gutenberg编辑器时，控制台抛出以下重复注册错误：
'Block "my-plugin/block-1" is already registered'
'Block "my-plugin/block-2" is already registered'

插件核心PHP代码 #

class MY_PLUGIN{
    public function __construct() {
        add_action( 'admin_menu', [ $this, 'menu_item' ] );
        add_action( 'admin_enqueue_scripts', [ $this, 'load_custom_wp_admin_scripts' ] );
        add_action( 'init', [ $this, 'register_blocks' ] );
    }

    /**
    * Initialize the plugin
    */
    public static function init(){
        static $instance = false; 
        if( !$instance ) {
            $instance = new self();
        }
        return $instance;
    }

    /**
    * Create a new admin page for our app.
    */
    public function menu_item() {
        add_menu_page(
            'My Plugin',
            'My Plugin',
            'manage_options',
            'my-plugin',
            [ $this, 'dashboard_page' ],
            'dashicons-schedule',
            3
        );
    }

    /**
    * Admin page markup.
    */
    public function dashboard_page() {
        echo '
            <h2>Pages</h2>
            <div id="my-plugin"></div>
        ';
    }

    /**
    * Load admin scripts and stylesheets
    */
    public function load_custom_wp_admin_scripts( $hook ) {
        // Load only on ?page=my-plugin
        if ( 'toplevel_page_my-plugin' !== $hook ) {
            return;
        }

        // Load the required WordPress packages.

        // Automatically load imported dependencies and assets version.
        $asset_file = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php';

        // Enqueue CSS dependencies.
        foreach ( $asset_file['dependencies'] as $style ) {
            wp_enqueue_style( $style );
        }

        // Load our app.js.
        wp_register_script(
            'my-plugin',
            plugins_url( 'build/index.js', __FILE__ ),
            $asset_file['dependencies'],
            $asset_file['version']
        );
        wp_enqueue_script( 'my-plugin' );

        // Load our style.css.
        wp_register_style(
            'my-plugin',
            plugins_url( 'src/admin/stylesheet/style.css', __FILE__ ),
            array(),
            $asset_file['version']
        );
        wp_enqueue_style( 'my-plugin' );
    }

    public function register_blocks() {
        register_block_type( __DIR__ . '/build/blocks/block-1' );
        register_block_type( __DIR__ . '/build/blocks/block-2' );
   }
}

区块注册代码（每个区块的index.js） #

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import './editor.scss';
import Edit from './edit';
import Save from './save';
import metadata from './block.json';

/**
 * Every block starts by registering a new block type definition.
*/
registerBlockType( metadata, {
    edit: Edit,
    save: Save,
} );

更新1：区块配置文件block.json #

两个区块仅name和title字段不同，配置内容如下：

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "my-plugin/block-1",
    "version": "0.1.0",
    "title": "Block 1",
    "category": "text",
    "icon": "flag",
    "description": "Some description",
    "attributes": {
        "message": {
            "type": "string",
            "source": "text",
            "selector": "div"
        }
    },
    "supports": {
        "html": false
    },
    "textdomain": "block-1",
    "editorScript": "file:../../index.js",
    "editorStyle": "file:../../index.css",
    "style": "file:../../style-index.css"
}

插件文件夹结构 #

后台页面入口代码（admin/index.js） #

import { render }                   from '@wordpress/element';
import App                          from './components/App/App';

window.addEventListener(
    'load',
    function () {
        render(
            <App />,
            document.querySelector( '#my-plugin' )
        );
    },
    false
);

更新2：自定义Webpack配置后的问题 #

添加自定义Webpack文件后，后台出现错误且区块丢失：

更新3：调整代码恢复区块显示 #

按建议调整后，区块恢复正常，但后台页面不显示组件。于是修改了load_custom_wp_admin_scripts函数：

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

    $asset_file = include plugin_dir_path(__FILE__) .'build/admin/index.asset.php';

    foreach ( $asset_file['dependencies'] as $style ) {
        wp_enqueue_style( $style );
    }

    wp_register_script('my-plugin', plugins_url('build/admin/index.js', __FILE__), $asset_file['dependencies'], $asset_file['version']);
    wp_enqueue_script('my-plugin');

    wp_register_style('my-plugin', plugins_url('src/admin/stylesheet/style.css', __FILE__), array(), $asset_file['version']);
    wp_enqueue_style('my-plugin');
}

修改后组件可正常显示，但样式表未生效。

更新4：解决后台样式问题 #

将后台样式文件从.css改为.scss，同步更新load_custom_wp_admin_scripts函数中的样式引入路径，同时移除了不必要的view.js文件，最终后台样式正常生效。

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