Translating Gutenberg blocks is really straight forward by using the free TranslatePress multilingual plugin. In this tutorial we’ll focus on how to translate Gutenberg blocks of any type, including headings, paragraphs with different formatting, quotes, lists, images, buttons and more.
Gutenberg is the default editor for WordPress, which is part of the core since WordPress 5.0. It has a strong impact on the whole WordPress publishing experience, making it easy for anyone to create rich, flexible content layouts.
Gutenberg blocks are a great tool for building and styling different types of content, without having to write a single line of code. If you’re looking to make your site available in multiple languages, you need a simple way to translate the content from each Gutenberg block.
In this tutorial we’ll show you how to easily translate any Gutenberg content block using the free version of TranslatePress. Let’s dive in:
How to Translate Gutenberg Blocks
While Gutenberg was the official name while the editor was under development, it’s now just “the WordPress block editor” or “the WordPress editor” because it’s officially part of the core.
Now let’s add a new post that contains some of the most popular Gutenberg blocks.
As you noticed I added a paragraph with formatting, multiple headings, a quote block, a list and a button.
All that’s left is to download and install the free TranslatePress plugin and translate each one of them. For this example we’ll add French as a secondary language.
After activating the plugin, navigate to TranslatePress Settings page and add French as a secondary language.
Save the settings and simply click the Translate Site button to start translating your content. This will open a front-end translation interface, in which you can navigate the site and click on certain content in order translate it.
From the language drop-down on the left, make sure to select “French” so we can get a real time view when translating a certain string.
Similar to Gutenberg, the translation process in TranslatePress is also focused on blocks of content in a visual and intuitive interface.
Translating a Heading Gutenberg Block
Let’s start with translating the post title, which is a h2 heading. In the translation interface simply hover over the title and you’ll notice an edit icon appearing. Clicking it will allow to add/edit a new translation.
Click the “Save translation” button and you’ll see the “French” post title already updating.
Translating a Paragraph Block with Formatting
Next, we’ll move to translating the first paragraph. Because of the formatting it includes multiple html elements, so TranslatePress will break it into smaller pieces.
In order to translate the entire paragraph at once you can simply click the Merge icon to create a single block out of the whole sentence.
If you later decide to undo this merging operation in order to translate the small strings individually, you can just click the split button . The translation of the entire block will be available any time by merging it back.
Translating a Gutenberg List Block
A Gutenberg list block is translated the same way, by simply hovering, selecting each list item and entering the translation for each one.
Translate Gutenberg Button Block
Finally, we’ll translate the call to action button added to our rich text post. That’s right, just hover, click the icon for adding the translation, then save it.
Translate Gutenberg Image Block
Images are pretty common when adding content to a page. That’s why the Gutenberg Image block is one of the most used blocks.
There are situations however when you would need to translate an image. If your image contains a text in a certain language, you’ll need a simple way to show different images for different languages.
TranslatePress offers support for image translation, using the same front-end visual translation interface.
You simply hover over the image you want to replace, click the pencil icon and upload/select a different image for a different language.
You can also edit things like alt text, image title as well as anchor link.
That’s it, our post created using multiple types of Gutenberg blocks is now fully translated into French.
This sums up how simple it is to translate Gutenberg Blocks using TranslatePress.