From ae5761b0b44ee86974e1ae87f65e46551ff50e84 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 5 Oct 2023 17:19:45 +0100 Subject: [PATCH] Documentation: Explain how to translate Gutenberg in standalone apps using the editor packages (#55080) --- .../basic-concepts/internationalization.md | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/platform-docs/docs/basic-concepts/internationalization.md b/platform-docs/docs/basic-concepts/internationalization.md index c15a1e2e68145f..654d70070f1cba 100644 --- a/platform-docs/docs/basic-concepts/internationalization.md +++ b/platform-docs/docs/basic-concepts/internationalization.md @@ -4,4 +4,36 @@ sidebar_position: 7 # Internationalization +The Gutenberg block editor uses the `@wordpress/i18n` package to provide internationalization support. + +Translations can be provided by calling the `setLocaleData` function with a domain and a locale data object. The locale data object should be in the [Jed-formatted JSON object shape](http://messageformat.github.io/Jed/). + +```js +import { setLocaleData } from '@wordpress/i18n'; + +setLocaleData( { 'Type / to choose a block': [ 'Taper / pour choisir un bloc' ] } ); +``` + # RTL Support + +By default, the Gutenberg UI is optimized for left-to-right (LTR) languages. But Gutenberg scripts and styles include support for right-to-left (RTL) languages as well. To enable RTL support, we need to perform a few actions: + +First, we need to define that our locale is RTL using `@wordpress/i18n`. + +```js +import { setLocaleData } from '@wordpress/i18n'; + +setLocaleData( { 'text direction\u0004ltr': [ 'rtl' ] } ); +``` + +Second, we need to load the RTL CSS stylesheets instead of the LTR ones. For each of the stylesheets that you load from `@wordpress` packages, there's an RTL version that you can use instead. + +For example, when loading the `@wordpress/components` stylesheet, you can load the RTL version by using `@wordpress/components/build-style/style-rtl.css` instead of `@wordpress/components/build-style/style.css`. + +Finally, make sure to add a `dir` property to the `html` element of your document (or any parent element of your editor). + +```html + + + +```