Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Documentation: Explain how to translate Gutenberg in standalone apps using the editor packages #55080

Merged
merged 2 commits into from
Oct 5, 2023
Merged

Documentation: Explain how to translate Gutenberg in standalone apps using the editor packages #55080

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
835e41a
Documentation: Explain how to translate Gutenberg in standalone apps …
youknowriad Oct 5, 2023
d100a2c
Fix typo.
youknowriad Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions platform-docs/docs/basic-concepts/internationalization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
priethor marked this conversation as resolved.
Show resolved Hide resolved

Finally, make sure to add a `dir` property to the `html` element of your document (or any parent element of your editor).

```html
<html dir="rtl">
<!-- rest of your app -->
</html>
```