Skip Navigation
Home » WPML Documentation » Plugins Compatibility » Translating Content Created with Gutenberg Blocks Plugins

Translating Content Created with Gutenberg Blocks Plugins

Dario
Updated
October 18, 2024

WPML supports translating pages and posts created using the native WordPress blocks along with custom blocks coming from Gutenberg blocks plugins. Learn how to translate these pages.

Getting Started

Start by installing and activating:

  • WPML core plugin and WPML String Translation add-on
  • Any additional Gutenberg blocks plugins you wish to use

If you’re new to WPML, check out our Getting Started Guide. It quickly walks you through all the translation options you can use.

One of these options is Translate Everything Automatically – the quickest way to translate and the easiest way to keep your content up to date. This feature automatically translates pages, posts, custom post types, custom fields, taxonomies, WooCommerce products, and more as you add and edit content.

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, custom Gutenberg blocks, or a mixture of both, you will be able to translate these pages using WPML.

Furthermore, if you have WPML’s Translate Everything Automatically turned on, the translation of your content will be automatically taken care of. If you choose to have this feature turned off, the below sections detail how to translate manually.

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

A simple page created using native and custom Gutenberg blocks

To translate this page, follow these steps:

  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.
Click the plus icon to translate the page
  1. You are taken to the Advanced Translation Editor page. To load the machine translation, choose to Translate automatically. Review the translation and make sure it is accurate. Once done, click the Complete button to publish the translated page.
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 Translations

If you update the text of a block in the original language or add new blocks to your page, you will see spinning arrows next within the language section of the sidebar. This indicates that you need to update the translation. In this example, we added text to one of the existing blocks on 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.
  1. 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 Complete button to update the translation.
Review the translation of the updated text and click Complete to update the translation

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

In case you need help translating your site built using Gutenberg blocks plugins and WPML, visit WPML’s support forum.