Design Update: Localized and refined translation interface

Screenshot showing the "GV Lingua Translation" metabox that appears below the post content in the WordPress post editor. All the labels and buttons are in Spanish.

The translation editor showing Spanish localization.

Hi all, as always I'm Jer the Tech Lead for Global Voices. In this post I'll talk about improvements we've made to the translation experience on the GV WordPress websites, as well as some other little tweaks that will hopefully make life easier for our contributors.

Lingua translation tools can now be localized!

The headline feature of this update is that I've “internationalized” (made translatable) several parts of the admin experience that were previously English-only. You can see this in action in the screenshot above.

Before now we could of course translate the reader-facing parts of GV sites, as we do for all the Lingua sites, but not the backend tools we use for translation, which were only available in English.

While not everything in the admin area can be translated, pretty much everything in the post editor, where most translation and writing work is done, has been updated to allow localization. On sites with a translation set up (more below) writers and translators can do their work in the same language as the site if they prefer.

How to translate these admin tools

The weird thing about this update is that it doesn't use the GV Theme Translator system that we use to translate the rest of the site, but instead takes advantage of a plugin called Loco Translate.

Please see the Loco Translate Localization guide for more details about the nuances of how the two systems interact, and how you can add a translation to your own Lingua site if you are the administrator. Or check out this video I made that explains it!

If you'd like to translate these tools for your site and want help getting started, just reach out to me, Jer, on the GV Slack.

Interface refinements to the post editor

While I was “internationalizing” these tools, it was a perfect moment to carefully review their English text and overall design, and in the process I made a bunch of little tweaks that I think improve it for everyone, regardless of translation.

You probably wouldn't notice most of the changes, because the new version is the same, just more clear, but here are a few screenshots to show them off:

Screenshots of the post editor interface in wordpress, showing the "publish" box and the validation tools with warnings and success messages related to the length of different elements and the presence of a featured image. The versions on the right show the updates, with various tweaks to shorten the text and make errors more visible.

The “post validation” tools got worked over, with less overall text, and re-organized warnings that are easier to read, and most importantly, to translate. Click to enlarge.

Screenshots of the GV Lingua Translation metabox in the post editor showing an original post with lots of translations listed. The version on the right is cleaned up with less labels and more focus on the content.

An original post listing its translations in the editor. Hopefully you agree that the cleaner layout is an improvement, as is the simplified language used for the buttons. Click to enlarge.

screenshots of the lingua metabox again, but this time on a translation post, showing its source post and a translation of the translation. As with previous images, the version on the right has a cleaned up layout and simplified text.

This is how it looks on a translation post, with a similar simplification of the layout and language on controls. Click to enlarge.

That's it for now! Hope you find these changes useful, or at least nice-to-have, and as always if you find any bugs or issues with the new system, please get in touch!

Written byJer Clarke