Weglot blog
weglot_gutenberg_blog

Our Gutenberg story: Migrating and translating the Weglot website using blocks

Nothing has caused quite such an upheaval in the WordPress sphere as WordPress 5.0. While major releases are always a big event, this one especially made waves. The reason is that it ships with a much-debated addition to WordPress: the new Gutenberg editor.

The editor has come a long way since Matt Mullenweg introduced it at last year’s WCEU in Paris. This week, with the release of WordPress 5.0, it will be merged with core and thus become available for all users (except those who opt out with classic editor plugin).

So, in short: big changes are coming to WordPress. However, what does this mean exactly for the platform, its users and also plugins like Weglot? This is exactly what this blog post is about.

In the following, we will go over what Gutenberg is as well as the main changes and issues it brings to WordPress. We will then talk about Weglot’s compatibility with the new editor (hint: it’s fully compatible) and underline it with a high-profile case study (another hint: it’s this very website). So, if you have question marks about using Gutenberg with your multilingual website, this is the post for you.

What is the Gutenberg Editor (And What Does It Mean for WordPress)?

As already mentioned, the Gutenberg editor has been in the works for quite some time. Matt Mullenweg revealed a prototype at WordCamp Europe 2017 as well as the plan for it to replace the existing TinyMCE default editor.

Since then, Gutenberg has gone through many iterations as a plugin and its taking over as the new standard is imminent. However, why change the editor in the first place?

What’s the Point of the New Editor?

The goal is to make the editing experience in WordPress more akin to other modern content management systems like Medium. It will give the WordPress platform a more professional creation tool based on modern technology and should especially help beginner users make complex web pages.

Gutenberg is part of the effort to help modernize WordPress, so it can remain the biggest CMS on the market. Earlier changes such as the stronger emphasis on JavaScript and the REST API have paved the way for it.

Main Changes

So, how does Gutenberg change the user experience? Probably the biggest shift it brings is the introduction of blocks. Instead of having a single text block interspersed with other media, from now on paragraphs, headings, images, embedded media, lists and all other content parts will all be handled as single blocks, complete with their own options and settings.

gutenberg

The new system makes it easier to design web pages in their entirety instead of merely adding content to an existing template. It gives users more fine-grained control, making it more friendly towards beginners. Plus, it needs absolutely no coding as everything happens via a user interface.

Existing Problems

Needless to say, sweeping changes like this don’t go off without a hitch. It will take some getting used to the new system, even (or especially) for experienced WordPress users, which is one of the reasons Gutenberg has been making as many waves as it has.

In addition to that, people are also lamenting missing functionality for some of the blocks such as the ability to change font color or size. These are things that will probably come in the form of custom blocks in the near future, but it has people frustrated who already had ways of dealing with this in the old editor.

However, besides the fact that many people have to adjust their workflow, Gutenberg also brings some real technical challenges. It requires profound changes for plugin authors who need to make their work compatible with Gutenberg.

This is especially true for those that are enriching the editor by adding meta boxes or modifying the behavior of existing ones. As a maker of a fast-growing WordPress translation plugin, this, naturally, includes us. So, how does Weglot deal with the disruption?

Is Weglot Ready for Gutenberg?

If you are worried about losing your Weglot translations after switching to Gutenberg, here is the good news: You don’t need to be. As an established WordPress translation plugin, Weglot is fully compatible with the new WordPress editor.

Weglot Continues to Work Out of the Box

The main reason for that is how Weglot works. The plugin only pulls in the content of your pages once they are generated as HTML code. That means, it always deals with the finished page, not the content of your editor.

Consequently, Weglot doesn’t care about how you build your page, whether with WordPress, Drupal, Shopify or any other CMS, as long as your content ends up embedded in an HTML page. If that is the case, it will detect any written content and allow you to translate it from both the Weglot dashboard as well as the Visual Editor where you can translate your website in context.

welgot_visual_editor

So, relax. Nothing will change for you. In fact, Gutenberg is good news for Weglot users as the editor and our plugin are quite similar in their approach.

Weglot and Gutenberg Complement Each Other Perfectly

We have created Weglot in a similar vein as Gutenberg and other recent developments in the WordPress platform, such as the REST API.

It operates with a light touch and plugs easily into any kind of website. This makes it possible to dynamically and comfortably create multilingual content that looks good and is easy to manage. At the same time, it doesn’t bog down your site with loads of additional code.

In addition to that, like Gutenberg, we have tried to make Weglot accessible to WordPress users of any level. You don’t need to be a developer to get the most out of it but can just go ahead and use it. However, if you do have development chops, it gives you a lot more possibilities.

In the end, both Weglot and Gutenberg allow you to focus on the main part of your website: the content. They give you tools to create the best website you can with the help of a dynamic, modern user interface.

In Short…

While Gutenberg may bring a lot of changes, the way you work with Weglot is completely unaffected by it. You can expect the same high quality of working with our well-established plugin as you are used to. In addition to that, Weglot also continues to be 100% compatible with all WordPress themes and plugins right out of the box.

How do we know all of this? Because we decided to put our money where our mouth is and try it out – on our own website.

The New Weglot.com – Made with Gutenberg and Weglot

In order to really test out Gutenberg and Weglot together, we put some skin in the game and migrated our entire website from Symfony over to WordPress using the Gutenberg editor. After that, naturally, we also translated it with Weglot.

Getting Started

Like any website migration, it’s something we did not take lightly. We took the time to update all our content, create new pages and try out different types of blocks to design them.

weglont_wordpress_page_gutenberg

Like many other users, we had some issues getting used to the new system. For example, it can be complicated to customize the margins of a block so we created additional CSS classes to be able to do so.

Also, to create some containers that are present on multiple pages of our website, we decided to stick with shortcodes. This was for simplicity’s sake as shortcodes are still easier to update than blocks at this point.

Translating the Weglot Website – Using Weglot

Once all the pages were ready in English, we installed the Weglot translation plugin on our newly created WordPress website. To allow us to test the waters first, we activated the “private mode”. That way, we were able to work on our translations without them being visible to website visitors.

weglot_wordpress_settings

For example, below you can see how we translated this page of our site.

weglot_translation

On the left side, you can see the original content from the page that is automatically detected by the Weglot plugin. On the right side are the French translations. Weglot automatically proposes a translated version of the content that you can easily validate or edit.

Working with Professional Translators

To make sure everything came out right, for the French version of our site, we decided to work with a professional translator. To do so, we simply invited him to the translation project on Weglot. That way, he was able to work directly on the Weglot dashboard to translate the site.

After validating all the translations, we released the French version of the Weglot website. You can see the result below.

weglot_wordpress_page_french

Everything you find on here at this moment is the result of using the new Gutenberg editor and Weglot together. If it works for us and our business, it will work for you, too!

In Short, Gutenberg + Weglot = <3

Gutenberg brings many changes to the WordPress platform and not everyone welcomes them. It disrupts how the platform has operated until now but also brings a much-needed step towards modernization.

While it may take some getting used to, one thing that is not going to change is how you work with Weglot. Our plugin will continue to provide the hassle-free, easy way of creating a multilingual WordPress site it has done before.

The main reason is that both Gutenberg and Weglot have the same approach to making things happen: Modern technology, API usage and a focus on usability and content. It’s also something we will see more of in the future and what makes Weglot usable on any platform or CMS.

In Matt’s own words: “It becomes a little bit like a lingua franca that even crosses CMSes. There’s now these new cross-CMS Gutenberg blocks that will be possible. It’s not just WordPress anymore — it might be a JavaScript block that was written for Drupal that you install on your WordPress site.”

We are excited to see what the future holds. Are you?

About the author
Nick Schäferhoff

Nick Schäferhoff is an entrepreneur, online marketer, and professional blogger from Germany. He found WordPress when he needed a website for his first business and instantly fell in love. When not building websites, creating content or helping his clients improve their online business, he can most often be found at the gym, the dojo or traveling the world with his wife. If you want to get in touch with him, you can do so via Twitter or through his website.

JOIN 50,000+ WEBSITES ALREADY USING WEGLOT

Try Weglot for free