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.
- Getting started
- WPML translation tools
- Translating content created with Gutenberg blocks plugins
- Updating blocks translation
- WPML compatible Gutenberg blocks plugins
- Getting help
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.
WPML offers two translation editors you can use for translating your site’s content:
- WPML classic translation editor (CTE).
- WPML advanced translation editor (ATE) offers automatic translation, a glossary, spell checker, and more! The automatic machine translation service starts at $4.98/month for 5,000 words and provides enough word quota for most sites.
Besides translating your site content yourself, you can also:
- Send your content for translation to a professional translation service.
- Create your own team of local translators from the Translation Roles tab in Translation Management and assign translation jobs to them.
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.
To translate this page, follow the steps below:
- 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.
- 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.
This is how the translated page looks on the front-end:
You can follow the exact same steps to translate pages and posts created using custom blocks supported by WPML.
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.
To update the translation, follow the steps below:
- Click the spinning arrows icon next to the language you want to update the translation for.
- 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.
This is a list of the WPML compatible Gutenberg blocks plugins:
- Toolset Blocks
- Kadence Blocks
- Ultimate Addons for Gutengerg
- Advanced Gutenberg
- Stackable – Gutenberg Blocks
- Premium Blocks for Gutenberg
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.
In case you need help translating your site built using Gutenberg blocks plugins and WPML, visit WPML’s support forum.