Updated Editor Interface

Since translate.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ exists the design has only slightly changed, mostly to match the wordpress.org design. But what has not changed is the editor for adding translations. This has changed as of today. ✨


Here are some before screenshots. While the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. was very basic it was also limited at the same time, preventing adding more tools to the editor.

After: Focus on translations

The new interface sets focus on the left column with the original stringString A string is a translatable part of the software. A translation consists of a multitude of localized strings. and the textarea(s) for the translations.

New Editor: Logged-out View
New Editor: Contributor View

The right column still exists and provides some metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. information and the status buttons for editors. Soon it will probably get a tab interface for additional tools. But that’s the future, let’s see what we have now:

The left column can be broken up into four sections:

  • 1️⃣ The headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. with …
    • bubbles for the current translation status and warnings
    • navigation buttons to close the current editor or to jump to the next/previous editor
    • a dropdown menu for contextual links like permalinks or translation history
  • 2️⃣ The original with …
    • the string to translate
    • tooltips for glossary entries
    • the context of the string, comments, and its references
  • 3️⃣ The editor with …
    • bigger textareas
    • a Save button next to the textarea
    • a button to copy the original
    • a button to open a help dialog 💞
      The content is still to be defined but it’s the place to provide links to locale resources like style guides, glossaries and/or SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. setups.
    • a tab interface for plural forms
  • 4️⃣ The suggestions area with …
    • suggestions from a translation memory
    • current translations of the original in other languages

Some changes in detail

Tabs for Plural Forms

Switch between RTL and LTR

Locales with right-to-left script writing have an additional button to quickly switch between LTR and RTL when necessary.

Help Dialog

The help dialog can be extended with resources specific to the current locale. This is done by a new navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. on the RosettaRosetta The code name of the theme for the local WordPress sites (eg. bg.wordpress.org is a “Rosetta” site). All locale specific WordPress sites are referred to as “Rosetta sites.” The name was inspired from the ancient Rosetta Stone, which contained more or less the same text in three different languages. site which is assigned to the “Resources for translation editors” location. Two levels and descriptions are supported.

Source Context

A “Context” item reveals additional information about the source

Translation Status and Warnings

Suggestions from Translation Memory

👏 Thanks to the awesome work by @yoavf and the support of translate.wordpress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ we now can make use of a translation memory (TM). The TM is a database that stores all previously translated strings to suggests them for reuse.

The translations are stored on .com because that’s where the server is, but when returning result it can be prioritized which source they come from. The implementation is still work in progress with the long-term goal to make translations more unified and consistent across all .org projects.

Suggestions from Other Languages

Via the “Other Languages” toggle a list of current translation in other languages can be activated. This can be used for inspiration of the translation in your language or to reuse the translation if it’s the same in your language. The list is ordered by the locale but smart enough to give similar locales a higher priority. For example the list for German will list translations in formal German or Swiss German higher.

And on mobile?

To get more room for the editor the two columns are now 🥁 stacked.

And that’s it, for now. 😀There are a few items which still can be improved but it’s a good base to extend it further. For example with support for comments/notes.

Please comment below if you have any feedback or questions. Thanks!

Related Meta Tickets: #meta3522, #meta4430, #meta4431

#announcement, #meta3522, #meta4430, #meta4431