Translate Gutenberg Blocks in WordPress

Translating Gutenberg blocks is really straight forward by using TranslatePress. In this tutorial we’ll focus on how to translate Gutenberg blocks of any type, including headings, paragraphs with different formatting, quotes, lists, buttons and more.

Gutenberg is the new editor for WordPress, which will make it to core in WordPress 5.0, and has a strong impact on the whole publishing experience. It seeks to make 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.

How to Translate Gutenberg Blocks

To enable Gutenberg simply install and activate this free plugin.

Now let’s add a new post that contains some of the most popular Gutenberg blocks.

Adding Gutenberg Blocks WordPress

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 TranslatePress 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 and add French as a secondary language.

TranslatePress Settings Add Language

Save the settings and click the Translate Site button to start translating your content. This will open a front-end translation interface, in which you can simply navigate the site and click on certain content in order translate it.

TranslatePress Translate Gutenberg Blocks

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.

Translate Gutenberg Blocks Heading

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 Merge Translation Blocks icon to create a single block out of the whole sentence.

Translate Gutenberg Paragraph Block

If you later decide to undo this merging operation in order to translate the small strings individually, you can just click the split button Split Translation block icon. 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 List Block Gutenberg

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 Block Button

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. Play with the demo and see for yourself.

Keep in touch!

We'll only notify you of new articles, special promotions and updates. No spam!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.