WPML supports translating pages and posts created using the native WordPress blocks along with the custom blocks coming from Gutenberg blocks plugins. In this tutorial, you will learn how to translate these pages.

Content

Getting started

Make sure that the WPML Multilingual CMS, WPML String Translation, WPML Translation Management, and WPML Media Translation plugins are activated along with your WPML compatible Gutenberg blocks plugins of choice.

We recommend using WPML’s Advanced Translation Editor to translate posts and pages created with custom Gutenberg blocks. You can activate the Advanced Translation Editor by navigating to WPML -> Settings under the How to translate posts and pages section.

Activate WPML’s Advanced Translation Editor

Translating content created with Gutenberg blocks plugins

WPML supports translating pages created using the native WordPress blocks along with the custom blocks coming from Gutenberg blocks plugins. Whether you are creating your pages using native WordPress blocks only, custom Gutenburg blocks only, or a mixture of both, you will be able to translate these pages using WPML.

This is a simple page that we created using native WordPress blocks along with custom blocks from Kadence Blocks plugin.

A simple page created using native and custom Gutenberg blocks

To translate this page, follow the steps below:

  1. Go to the page editing screen. In the Gutenberg editor’s sidebar, open the Language section and click the plus icon next to the language you want to translate your page into.
  2. Click the plus icon to translate the page
  3. You will be taken to the Advanced Translation Editor page. To load the machine translation, click the Translate automatically button. Review the translation and make sure it is accurate. Once done, click the Finish button to publish the translated page.
  4. Load the machine translation and review it then publish the translated page

    This is how the translated page looks on the front-end:

    Translated page on the front-end

You can follow the exact same steps to translate pages and posts created using custom blocks supported by WPML.

Updating blocks translation

If you update the text of a block in the original language or added new blocks to your page, you will see the spinning arrows which indicates that you need to update the translation. In this example, we added text to one of the existing blocks in our page.

Updated the block content in the original language

To update the translation, follow the steps below:

  1. Click the spinning arrows icon next to the language you want to update the translation for.
  2. Click the spinning arrows icon to update the translation
  3. This takes you to the Advanced Translation Editor. As you can see in the screenshot below, the existing translation is preserved. Review the translation of the added text and click the Finish button to update the translation.
  4. Review the translation of the updated text and click finish to update the translation

WPML compatible Gutenberg blocks plugins

This is a list of the WPML compatible Gutenberg blocks plugins:

If your favorite Gutenberg blocks plugin is not listed, please feel free to ask the plugin developer to join our Go-Global program where we help developers make their themes and plugins multilingual ready and compatible with WPML.

Getting help

Experts in our support forum are ready six days a week to assist you. They are trained on how to use WPML with the different Gutenberg blocks plugins.

If you are working with a developer on your site, please use our Translation support forum to obtain help in translating your site’s content.

If you are setting up the site and WPML yourself, please use our Technical support forum.