了解如何指定您开发的哪些自定义 Gutenberg 区块应可翻译。您可以在 Multilingual Tools 测试插件的帮助下，通过配置 wpml-config.xml 文件来实现此目的。
本指南面向为 Gutenberg 创建自定义区块的开发者。如果您不是插件作者，请参阅如何翻译使用 Gutenberg 编辑器创建的内容。
快速上手
要开始使用，请安装并激活：
- WPML 核心插件
- WPML 字符串翻译
- Multilingual Tools
Multilingual Tools 插件不应用于实时或生产站点。仅将其用于测试。
生成并测试用于注册 Gutenberg 区块以进行翻译的 XML 代码
1. 创建新文章或页面，并添加您要注册的 Gutenberg 区块。确保在每个您想设为可翻译的字段中添加测试内容，然后发布。
向下滚动到 WPML: Gutenberg Blocks 部分并复制生成的 XML 代码。
重要提示：自动生成的 XML 代码不应直接使用。在将其提供给用户之前，您必须对其进行测试和编辑。请参阅下一步。
2. 前往 WPML → 设置，并将生成的 XML 粘贴到自定义 XML 配置选项卡下。
请务必仔细审核自动生成的代码。您可能需要删除一些不应被翻译的字段，例如具有特定值的配置字段。
准备就绪后，单击保存。
3. 返回您发布的页面并进行少量更新，例如编辑按钮文本或标题。
单击语言部分下的加号图标，打开高级翻译编辑器。Gutenberg 区块中的字段会出现在编辑器中并可供翻译。
注册了要设为可翻译的 Gutenberg 区块后，您就可以创建语言配置文件了。如果您已经有一个，只需编辑它以添加最终的 XML 代码。
将 Gutenberg 区块注册为可翻译的示例
翻译图像
假设您有一张使用以下代码显示的图像：
需要翻译的图像示例
<!-- wp:image {"id":3} -->
<figure class="wp-block-image"><img src="http://example.com/wp-content/uploads/2018/07/figure-2.png" alt="Image alt text" class="wp-image-3"/><figcaption>Image Caption</figcaption></figure>
<!-- /wp:image -->您想翻译此图像的 figcaption 和 alt 属性值。
为此，您需要将以下代码插入 wpml-config.xml 中：
Gutenberg 区块翻译设置示例
<wpml-config>
<gutenberg-blocks>
<gutenberg-block type="core/image" translate="1">
<xpath>//figure/figcaption</xpath>
<xpath>//figure/img/@alt</xpath>
</gutenberg-block>
</gutenberg-blocks>
</wpml-config>请记住，type 是 core/image 而不是 wp:image，因为这是区块 API 返回的值。
翻译链接
您可以指定哪些 Gutenberg 区块字段是链接。如果这些链接有可用的翻译，WPML 随后会将其替换为翻译。
Gutenberg 区块中的链接翻译
<wpml-config>
<gutenberg-blocks>
<gutenberg-block type="core/some-block" translate="1">
<xpath type="link">//a/@href</xpath>
</gutenberg-block>
</gutenberg-blocks>
</wpml-config>区块属性翻译
以下是编辑器区块定义格式的一个示例：
编辑器区块定义格式
<wpml-config>
<gutenberg-blocks>
<gutenberg-block type="my-plugin/my-block" translate="1">
<xpath label="My Block">//p</xpath>
<key name="title" />
<key name="foo">
<key name="bar1" />
<key name="bar2" />
</key>
<key name="/^[^_]\S+$/" search-method="regex" />
<key name="something" search-method="wildcards" />
</gutenberg-block>
</gutenberg-blocks>
</wpml-config>您可以像在管理文本 / wp_options 配置中使用 key 元素一样使用它。这也意味着您可以在父 key 元素内嵌套 key 元素。
您可以使用 label 属性添加可选的自定义标签，这些标签会显示在高级翻译编辑器中的区块元素旁边。当 label 属性是 gutenberg-block 标签的一部分时，它将用作未定义特定标签的区块元素的后备标签。
后备标签示例
<wpml-config>
<gutenberg-blocks>
<gutenberg-block type="my-plugin/mybutton" translate="1" label="My fallback block label">
<xpath>//span</xpath>
<xpath>//a@href</xpath>
</gutenberg-block>
</gutenberg-blocks>
</wpml-config>属性 search-method 可以具有以下两个值之一：
- wildcards（默认）
- regex.
您可以像在管理文本中一样使用通配符（wildcards）。这意味着可以在 name 属性中使用星号（*）。以下是一个区块的示例：
区块示例
<!-- wp:my-plugin/my-block
{
"myp": {
"mypTitle":"The title",
"mypContent":"The Content",
"_mypSystem:"Meta attribute to not translate"
}
}
/-->您可以使用通配符设置区块定义：
使用通配符的区块定义
<wpml-config>
<gutenberg-blocks>
<gutenberg-block type="my-plugin/my-block" translate="1">
<key name="myp">
<key name="myp*" />
</key>
</gutenberg-block>
</gutenberg-blocks>
</wpml-config>这将允许您翻译“The title”和“The content”，因为它们是仅有的以 myp 开头的属性。
regex 允许您在 name 属性中使用正则表达式。这对于复杂的配置非常有用。以下是一个区块的示例：
复杂配置示例
<!-- wp:my-plugin/my-block
{
"data": {
"title":"The title",
"_title":"e980759463943209f6f1ae09a239e353",
"content":"The Content",
"_content":"1502a7b825dfe7b789c63830609f1701"
}
}
/-->您可以使用正则表达式设置区块定义：
使用正则表达式的区块定义
<wpml-config>
<gutenberg-blocks>
<gutenberg-block type="my-plugin/my-block" translate="1">
<key name="data">
<key name="/^[^_]\S+$/" search-method="regex" />
</key>
</gutenberg-block>
</gutenberg-blocks>
</wpml-config>这将允许您翻译“The title”和“The content”，因为它们是仅有的不以下划线（_）开头的属性。
某些区块插件会将数据保存在区块属性内的 URL 编码 JSON 字符串中。encoding 属性允许您解码该字符串并注册其子键以进行翻译。
例如，LazyBlocks 插件将中继器字段内容存储在编码的 JSON 字符串中：
带有 URL 编码 JSON 字符串的 LazyBlocks 区块示例
<!-- wp:lazyblock/testwpml {"name":"%5B%7B%22firstname%22:%22Shekhare%22,%22lastname%22:%22Bhandari%22%7D,%7B%22firstname%22:%22Compatibility%22,%22lastname%22:%22Escalation%22%7D%5D","blockId":"Z169b0O","blockUniqueClass":"lazyblock-testwpml-Z169b0O"} /-->您可以使用以下 XML 配置注册 firstname 和 lastname 子键：
在区块属性内注册 URL 编码 JSON 字符串的示例
<wpml-config>
<gutenberg-blocks>
<gutenberg-block type="lazyblock/team" translate="1">
<key name="name" encoding="json">
<key name="*">
<key name="firstname" />
<key name="lastname" />
</key>
</key>
</gutenberg-block>
</gutenberg-blocks>
</wpml-config>翻译区块属性链接
要使 WPML 能够自动翻译 URL，您可以将 Gutenberg 区块属性声明为链接。
以下是带有可点击链接的自定义 Gutenberg 区块示例：
<!-- wp:foo/link {"label":"Click here!","url":"https://example.com/some-page/"} /-->
要使 label 和 url 属性可翻译，请将以下内容添加到您的 wpml-config.xml 文件中：
<gutenberg-block type="foo/link" translate="1"> <key name="label" /> <key name="url" type="link" /> </gutenberg-block>
在此配置中，为 url 属性指定 type="link" 可使 WPML 自动翻译 URL。
区块命名空间
您可以为区块命名空间进行全局配置。
区块名称不再是定义中必填的一部分。
如果命名空间中所有区块的区块配置都相同，您可以这样编写：
命名空间中的区块
<wpml-config>
<gutenberg-blocks>
<gutenberg-block type="my-plugin" translate="1">
<key name="data">
<key name="/^[^_]\S+$/" search-method="regex" />
</key>
</gutenberg-block>
</gutenberg-blocks>
</wpml-config>自动转换区块中的 ID
ID 转换功能非常灵活，并试图适应大多数可能的 ID 格式（单个 ID、ID 列表、序列化数组、JSON 编码数组）。
考虑以下区块：
自动转换区块中的 ID – 区块示例
<!-- wp:foo/form {"ids":[27,28]} -->
<div class="wp-block-foo-form-wrap">
<form class="foo-form" action="" method="post">
<input type="hidden" name="foo_form_post_ids" value="27,28" />
<input type="submit" />
</form>
</div>
<!-- /wp:foo/form -->您可以如下所示将区块属性 ID 和 HTML 标签属性值 foo_form_post_ids 声明为文章 ID：
区块属性 ID 和 HTML 标签属性值
<gutenberg-block type="foo/form" translate="0">
<key name="ids">
<key name="*" type="post-ids" sub-type="post" />
</key>
<xpath type="post-ids" sub-type="post">//*[@name="foo_form_post_ids"]/@value</xpath>
</gutenberg-block>该区块将在 render_block_data 过滤器上以最高优先级进行转换，如下所示：
由 render_block_data 过滤器转换的区块
<!-- wp:foo/form {"ids":[42,43]} -->
<div class="wp-block-foo-form-wrap">
<form class="foo-form" action="" method="post">
<input type="hidden" name="foo_form_post_ids" value="42,43" />
<input type="submit" />
</form>
</div>
<!-- /wp:foo/form -→您可以使用以下配置属性：
- type – 可以是 post-ids 或 taxonomy-ids
- sub-type（可选）：如果已知，可以是 type 的特定实体。例如，Product 自定义文章类型的 product。如果未定义，系统将猜测特定实体。
其他资源
要了解有关 wpml-config.xml 文件的更多信息，请访问语言配置文件指南。
如需使用 wpml-config.xml 文件自定义其他元素，请访问我们的其他指南：