Back to top image

Translate Custom Block Related Content with the Wordpress Connector

Gutenberg is the revolutionary new block-based editor experience in WordPress. It comes with a selection of standard blocks you can use across your pages and posts, many of which Smartling supports out of the box. If there is a specific block you would like to use, it is possible to build custom blocks for even more custom functionality. Your custom blocks can contain related content, and to ensure these are ingested for translation with the WordPress Connector, you will need to apply an ID to the related content, and configure how you want the WordPress Connector to treat the ID.

Once configured, the WordPress Connector will automatically detect “related content” one-level deep, and can send them for translation along with your custom blocks. More importantly, the WordPress Connector will update this reference during the delivery of the translation, ensuring that the translated block refers to the translated related content.

For steps on how to create Gutenberg Custom blocks, read the WordPress Documentation.

Before translating the custom blocks, you need to configure the WordPress Connector to identify and handle these custom blocks, by enabling Fine Tune and configuring the custom blocks and ID's.

Enable Fine Tune on the WP Connector

  1. In your WordPress instance, go the Smartling > Settings > Show Expert Settings
  2. Set Enable Fine Tuning to Yes from the dropdown
  3. Click Apply Changes
  4. The Fine Tune will be displayed under your Smartling Settings

Screenshot_2021-06-28_at_15.31.01.png

Next, you need to add your custom blocks and ID's:

  1. Go to Smartling > Settings > Fine Tune > Gutenberg block rules
  2. Click Add Media Rule
  3. Insert the block name, JSON path to the ID of the related content, and choose the replacer type from the dropdown
  4. Click Save Changes

Screenshot_2021-06-28_at_15.31.17.png

Once listed under your saved Gutenberg block rules, the translated posts will contain your blocks and correct references.

Screenshot_2021-06-28_at_15.31.30.png

 

Example Translation of Gutenberg Custom Blocks

Your English site contains a post with 3 blocks, and 2 of them are custom Gutenberg blocks. The first custom blocks contains a related content with the id=20, the second custom block has a related content with the id=15. The configuration for this is shown in the screenshot above; and the source code for the block is shown below.

<!-- wp:paragraph -->
<p>Standard paragraph</p>
<!-- /wp:paragraph -->

<!-- wp:my-company/custom-block-1 {"backgroundMediaId":20,"title":"Top header image"} /-->

<!-- wp:my-company/custom-block-2 {"id":15,"alignment":"center"} /-->

Your French site has different ID's for these contents: first custom blocks contains a related content with the id=30, the second custom block has a related content with the id=40. Once configured correctly, the WordPress Connector can identify the custom blocks and related content, and treat them as set under the Gutenberg block rules.

<!-- wp:paragraph -->
<p>Paragraphe standard</p>
<!-- /wp:paragraph -->

<!-- wp:my-company/custom-block-1 {"backgroundMediaId":30,"title":"Image d'en-tête supérieure"} /-->

<!-- wp:my-company/custom-block-2 {"id":40,"alignment":"center"} /-->

You can get even more control if you implement the smartling_after_deserialize_content action in your WordPress instance. Here is an example plugin that rewrites string properties in custom blocks. Specifically, it can update “backgroundMediaUrl” image URL property.

 

Table of Contents