2.8 KiB

Raw Blame History

Translations in JS/TS files

In comparison to PHP files, translations in JS/TS files require a few additional steps. To use translation functions in JS/TS, the dependency @wordpress/i18n needs to be included at the top of the corresponding file:

import { sprintf, _n } from '@wordpress/i18n';

Once that dependency had been included, the translation function can than be used.

Usage of localization functions

`__()`

The function __() retrieves the translation of $text.

// Schema
const translation = __( string text, string domain = 'default' );

// Example
import { __ } from '@wordpress/i18n';

const translation = __( 'Place Order', 'woo-gutenberg-products-block' );

`_n()`

The function _n() translates and retrieves the singular or plural form based on the supplied number.

// Schema
const translation = _n( string single, string plural, int number, string domain = 'default' );

// Example
import { sprintf, _n } from '@wordpress/i18n';

const translation = sprintf(
    /* translators: %s number of products in cart. */
    _n(
        '%d product',
        '%d products',
        Math.abs( category->count ),
        'woo-gutenberg-products-block'
    ),
    Math.abs( category->count )
);

`_x()`

The function _x() retrieves a translated string with gettext context.

// Schema
const translation = _x( string text, string context, string domain = 'default' );

// Example
import { _x } from '@wordpress/i18n';

const translation = _x( 'Draft', 'Order status', 'woo-gutenberg-products-block' );

`_nx()`

The function _nx() translates and retrieves the singular or plural form based on the supplied number, with gettext context.

// Schema
const translation = _nx( string single, string plural, int number, string context, string domain = 'default' );

// Example
import { sprintf, _nx } from '@wordpress/i18n';

const translation = sprintf(
    /* translators: %s number of products in cart. */
    _nx(
        '%d product',
        '%d products',
        Math.abs( category->count ),
        'Number of products in the cart',
        'woo-gutenberg-products-block'
    ),
    Math.abs( category->count )
);

Template literals and variables

Template literals cannot be used in JS/TS translations. To use variables in JS/TS translations, the function sprintf() needs to be used, as variables cannot be used directly. Various examples on how to use this function, can be seen in the previous examples.

2.8 KiB Raw Blame History

Translations in JS/TS files

Usage of localization functions

__()

_n()

_x()

_nx()