Localization

Localize TypeScript

There are two types of localization (i18n) coming with this boilerplate. In this part we explain the TypeScript localization. Just have a look at src/public/languages/your-plugin.pot - that's the main TypeScript i18n file.

To localize your plugin use the i18n functions coming through the utils package: __, _n and so on. Under the hood @wordpress/i18narrow-up-right is used. The .pot file is automatically generated when using yarn docker:start in plugin. To generate the file manually you can use the command yarn i18n:generate:frontend in your plugin folder.

circle-info

When using the above functions it differs from the PHP localization. You do not need to pass any context parameter because it is automatically respected through the factory function from the utils package.

Interpolation

To explain "Interpolation" as best, follow below example. Before writing the following ReactJS code:

// [...]
() => (
    <div>
        Hi{" "}
        <a title="This is your name." href="/user/bob">
            bob.
        </a>
        !
    </div>
);
// [...]

... you should use the _i function coming from the utils package factory:

What does this solve? Translating a HTML string does not work because ReactJS can not and should not recognize this automatically (for security reasons). Under the hood, i18n-calypsoarrow-up-right is used.

circle-check

Last updated