How about translating a website built with Gutenberg? Well, Gutenberg and Spectra were already compatible with WPML and let you build multilingual websites.

But, now the WPML team handles this and makes sure things have got a lot easier for you. 

Yes, you can now translate the content added using Spectra blocks on your website pages and blog posts in no time!

Before we begin, I’d like to take this opportunity to thank the team at WPML for their help and support while working on this compatibility together.

So, here’s a detailed article that will help you work with WPML, Gutenberg and the Spectra to build a multilingual website in no time.

Prerequisites to Translate Your Gutenberg Website

First, make sure you have the following WPML plugins installed on the website.

• WPML Multilingual CMS
• WPML String Translation
• WPML Translation Management
• WPML Media Translation

Also, install the Spectra to complement Gutenberg.

Since the Spectra offers custom Gutenberg blocks to build posts and pages, it is recommended that you use WPML’s Advanced Translation Editor to translate the content added through them.

Activate the Advanced Translation Editor by navigating to WPML → Settings under the How to translate posts and pages section.

How to Translate Content Created with Spectra Blocks?

Open the page or post editing screen. I have created a post as seen below.

In the Gutenberg editor’s sidebar, enable the WPML’s Translation Editor under the Language section. Click the plus icon next to the language you want to translate your page or post into.

You will then be taken to the Advanced Translation Editor page. Click the Translate automatically button to load the machine translation. You can now review the translation and make sure it is accurate. Once done, click the Finish button to publish the translated content.

This way all the content added using Gutenberg and the Spectra will get translated to your desired language and the post will look similar to this.

What if a new piece of content is added to the page or post or you’ve added an altogether new section?

Managing Translation for Updated Content or Newly Added Blocks

You will see a spinning arrow icon beside the language added under translation.

Click on this and you’ll be taken to the Advanced Translation Editor page where you can review and finalize the translated strings as done before.

Although we’ve tried to sum up everything you need to know in this post here, if you still wish to know more, here is an article about WPML compatibility with Gutenberg and custom Gutenberg plugins on the WPML website itself.

Translate Your Website Today!

This enhancement in the compatibility of the Spectra with WPML makes it easier to build a multilingual website when you prefer staying with the WordPress default editor.

Since this is now made easier, you do not have to put in any extra efforts to get this done.

So, you can get going with one right away!