如何使古腾堡块翻译工作？答案

【问题标题】：How to make Gutenberg Block Translation work?如何使古腾堡块翻译工作？
【发布时间】：2020-12-06 00:18:36
【问题描述】：

我刚刚建造了一个古腾堡街区，我想将它翻译成不同的语言。我正在用葡萄牙语使用我的 WordPress，并且我已经进行了葡萄牙语翻译。我按照文档https://developer.wordpress.org/block-editor/developers/internationalization/ 中提供的所有步骤进行操作，但仍然无效。

我的插件叫做spoiler-alert。

我在/spoiler-alert/languages 文件夹中创建了一个名为spoileralert.pot 的.pot 文件。然后，我生成了 md5 文件，甚至使用脚本处理程序创建了一个包含所有字符串的新文件。我的语言文件夹结构如下所示：

languages
- spoileralert.pot
- spoileralert-pt_BR.po
- spoileralert-pt_BR-<HASH-CODE-1>.json
- spoileralert-pt_BR-<HASH-CODE-2>.json
- spoileralert-pt_BR-<HASH-CODE-3>.json
- spoileralert-pt_BR-spoileralert.json

这是我的 PHP 文件 spoiler-alert.php:

function spoiler_alert_spoiler_alert_block_init() {
    $dir = dirname( __FILE__ );

    $script_asset_path = "$dir/build/index.asset.php";
    if ( ! file_exists( $script_asset_path ) ) {
        throw new Error(
            'You need to run `npm start` or `npm run build` for the "spoiler-alert/spoiler-alert" block first.'
        );
    }
    $index_js     = 'build/index.js';
    $script_asset = require( $script_asset_path );
    wp_register_script(
        'spoiler-alert-spoiler-alert-block-editor',
        plugins_url( $index_js, __FILE__ ),
        $script_asset['dependencies'],
        $script_asset['version']
    );

    $editor_css = 'build/index.css';
    wp_register_style(
        'spoiler-alert-spoiler-alert-block-editor',
        plugins_url( $editor_css, __FILE__ ),
        array(),
        filemtime( "$dir/$editor_css" )
    );

    $style_css = 'build/style-index.css';
    wp_register_style(
        'spoiler-alert-spoiler-alert-block',
        plugins_url( $style_css, __FILE__ ),
        array(),
        filemtime( "$dir/$style_css" )
    );

    register_block_type( 'spoiler-alert/spoiler-alert', array(
        'editor_script' => 'spoiler-alert-spoiler-alert-block-editor',
        'editor_style'  => 'spoiler-alert-spoiler-alert-block-editor',
        'style'         => 'spoiler-alert-spoiler-alert-block',
    ) );


    wp_set_script_translations( 'spoileralert', 'spoiler-alert', plugin_dir_path( __FILE__ ) . '/languages' );

}
add_action( 'init', 'spoiler_alert_spoiler_alert_block_init' );

在我的.js 文件中，我使用以下方式导入了翻译包：import { __ } from '@wordpress/i18n';

我使用的翻译如下：title: __( 'Spoiler Alert', 'spoiler-alert' ),

如何让翻译正确显示？

【问题讨论】：

标签： wordpress wordpress-gutenberg

【解决方案1】：

已经有一段时间了，但它可能对您或其他人仍然有用。我只是复制和粘贴我已经回答的内容here。

我已经经历过这个过程好几次了，所以我 100% 确定它工作正常。仔细完成每个步骤，您应该设法解决您可能遇到的任何问题;)

翻译终于得到了适当的开发和记录：https://developer.wordpress.org/block-editor/developers/internationalization/

基本上，您需要：

使用 wp-i18n 包定义项目中哪些字符串是可翻译的。
编译您的代码（wp i18n make-pot 将在您编译的代码中搜索翻译字符串，而不是在您的源代码中）。
使用 WP-CLI (wp i18n make-pot) 创建一个 .pot 文件，就像我们一直使用 WP 主题和插件一样。
根据我们之前创建的.pot 生成.po 文件并翻译其内容。
再次使用 WP-CLI (wp i18n make-json) 将我们的 .po 文件转换为所需的 JSON 格式。
使用wp_set_script_translations PHP 函数加载翻译文件。

【讨论】：