添加翻译后WordPress Gutenberg自定义区块无法兼容如何解决？

问题背景 #

我在家和工作环境各有一个XAMPP本地安装环境，分别管理不同项目。工作项目中的自定义Gutenberg区块原本可正常工作，但添加翻译配置后出现“区块不兼容”错误；同一插件在家中环境却能正常显示翻译。

相关代码详情 #

/plugin.php #

function sgpcoreb_load_textdomain() {
    load_plugin_textdomain(
        'sgpcoreb',
        false,
        basename( dirname( __FILE__ ) ) . '/languages'
    );
}
add_action( 'plugins_loaded', 'sgpcoreb_load_textdomain' );

function sgpcoreb_register_scripts() {
    // Register the script
    wp_register_script(
        'sgpcoreb-pagebreak-editor-script',
        plugin_dir_url( __FILE__ ) . 'pagebreak/index.js',
        array(),
        filemtime( plugin_dir_path( __FILE__ ) . 'pagebreak/index.js' )
    );
    // Register the translation for the above script
    wp_set_script_translations(
        'sgpcoreb-pagebreak-editor-script',
        'sgpcoreb',
        plugin_dir_path( __FILE__ ) . 'languages'
    );
}
add_action( 'enqueue_block_assets', 'sgpcoreb_register_scripts' );

function sgpcoreb_register_blocks() {
    register_block_type_from_metadata(
        dirname(__FILE__) . '/pagebreak/block.json',
        array(
            'editor_script' => 'sgpcoreb-pagebreak-editor-script',
        )
    );
}
add_action( 'init', 'sgpcoreb_register_blocks' );

/pagebreak/block.json #

{
    "$schema": "https://json.schemastore.org/block.json",
    "apiVersion": 3,
    "name": "sgpcoreb/pagebreak",
    "title": "Page Break for Print",
    "icon": "editor-break",
    "category": "layout",
    "version": "1.0",
    "textdomain": "sgpcoreb",
    "editorStyle": "file:./index.css",
    "style": "file:./style.css"
}

/pagebreak/index.js #

( function( blocks, i18n, element, blockEditor, ) {
    var __ = i18n.__;
    var el = element.createElement;

    var useBlockProps = blockEditor.useBlockProps;

    blocks.registerBlockType( 'sgpcoreb/pagebreak', {
        title: __( 'Page Break for Print', 'sgpcoreb' ),
        description: __( 'Inserts a page break for printing only.', 'sgpcoreb' ),

        edit: function( props ) {
            return el( 'div',
                useBlockProps( { className: props.className } ),
                el( 'span',
                    {},
                    __( 'Page break for print only', 'sgpcoreb' )
                )
            );
        },

        save: function( props ) {
            return el( 'div',
                useBlockProps.save( { className: props.className } )
            );
        }
    });
})(
    window.wp.blocks,
    window.wp.i18n,
    window.wp.element,
    window.wp.blockEditor,
);

/pagebreak/index.asset.php #

<?php return
    array( 'dependencies' =>
        array(
            'wp-blocks',
            'wp-i18n',
            'wp-element',
            'wp-block-editor'
        ),
        'version' => '0.1'
    );

翻译文件配置 #

已创建.po和.mo文件，通过wp-cli生成json文件，并重命名为/languages/sgpcoreb-es_ES-sgpcoreb-pagebreak-editor-script.json。

已尝试的排查步骤 #

• 禁用所有其他插件
• 切换至WordPress默认主题
• 检查浏览器控制台，无任何报错信息

求助 #

目前仍无法定位问题根源，不知道该从何处继续排查。

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