@wordpress/i18n

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

const greeting = __( 'Hello World', 'my-text-domain' );

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

const text = __( 'Save', 'my-plugin' );

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

const noun = _x( 'Post', 'noun', 'my-plugin' );
const verb = _x( 'Post', 'verb', 'my-plugin' );

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

const count = 5;
const message = _n(
	'%d item',
	'%d items',
	count,
	'my-plugin'
);
// Returns: "%d items"

import { _nx } from '@wordpress/i18n';

const message = _nx(
	'%d post',
	'%d posts',
	5,
	'noun',
	'my-plugin'
);

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

const name = 'John';
const age = 30;

const message = sprintf(
	__( 'Hello %s, you are %d years old.', 'my-plugin' ),
	name,
	age
);
// Returns: "Hello John, you are 30 years old."

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

// String
sprintf( '%s', 'text' ); // "text"

// Integer
sprintf( '%d', 42 ); // "42"

// Float
sprintf( '%.2f', 3.14159 ); // "3.14"

// Position
sprintf( '%2$s %1$s', 'World', 'Hello' ); // "Hello World"

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

function SaveButton() {
	return (
		<button>{ __( 'Save Changes', 'my-plugin' ) }</button>
	);
}

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

function StatusDisplay( { status } ) {
	return (
		<span>
			{ _x( 'Draft', 'post status', 'my-plugin' ) }
		</span>
	);
}

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

function CommentCount( { count } ) {
	return (
		<div>
			{ sprintf(
				_n( '%d comment', '%d comments', count, 'my-plugin' ),
				count
			) }
		</div>
	);
}

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

function WelcomeMessage( { username } ) {
	return (
		<h1>
			{ sprintf(
				__( 'Welcome back, %s!', 'my-plugin' ),
				username
			) }
		</h1>
	);
}

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

function OrderSummary( { items, total } ) {
	const itemCount = items.length;
	
	return (
		<div>
			<p>
				{ sprintf(
					_n(
						'You have %d item',
						'You have %d items',
						itemCount,
						'my-plugin'
					),
					itemCount
				) }
			</p>
			<p>
				{ sprintf(
					__( 'Total: %s', 'my-plugin' ),
					_x( '$', 'currency symbol', 'my-plugin' ) + total
				) }
			</p>
		</div>
	);
}

import { setLocaleData } from '@wordpress/i18n';

setLocaleData(
	{
		'': {
			domain: 'my-plugin',
			lang: 'es',
		},
		'Hello World': [ 'Hola Mundo' ],
	},
	'my-plugin'
);

import { getLocaleData } from '@wordpress/i18n';

const localeData = getLocaleData( 'my-plugin' );

import { resetLocaleData } from '@wordpress/i18n';

resetLocaleData( localeData, 'my-plugin' );

import { isRTL } from '@wordpress/i18n';

if ( isRTL() ) {
	console.log( 'Using RTL layout' );
}

import { isRTL } from '@wordpress/i18n';

function MyComponent() {
	const direction = isRTL() ? 'rtl' : 'ltr';
	
	return (
		<div dir={ direction } style={ { textAlign: isRTL() ? 'right' : 'left' } }>
			Content
		</div>
	);
}

import { hasTranslation } from '@wordpress/i18n';

if ( hasTranslation( 'Hello World', undefined, 'my-plugin' ) ) {
	console.log( 'Translation available' );
}

import { createI18n } from '@wordpress/i18n';

const i18n = createI18n( localeData, 'my-plugin' );

const translated = i18n.__( 'Hello', 'my-plugin' );

function my_plugin_load_translations() {
	wp_set_script_translations(
		'my-plugin-script',
		'my-plugin',
		plugin_dir_path( __FILE__ ) . 'languages'
	);
}
add_action( 'init', 'my_plugin_load_translations' );

languages/
├── my-plugin-es_ES-{hash}.json
├── my-plugin-fr_FR-{hash}.json
└── my-plugin-de_DE-{hash}.json

// Good
__( 'Save', 'my-plugin' );

// Bad - will use default domain
__( 'Save' );

// Good - clear meaning
_x( 'Post', 'noun', 'my-plugin' );
_x( 'Post', 'verb', 'my-plugin' );

// Bad - translators may guess wrong
__( 'Post', 'my-plugin' );

// Bad - word order varies by language
const message = __( 'You have', 'my-plugin' ) + ' ' + count + ' ' + __( 'items', 'my-plugin' );

// Good - complete phrase
const message = sprintf(
	__( 'You have %d items', 'my-plugin' ),
	count
);

// Bad - not all languages have simple singular/plural
const text = count === 1 ? __( 'item', 'my-plugin' ) : __( 'items', 'my-plugin' );

// Good - uses proper plural rules
const text = _n( 'item', 'items', count, 'my-plugin' );

// Bad - unclear context
__( 'OK', 'my-plugin' );

// Good - clear purpose
__( 'Confirm and save changes', 'my-plugin' );

// Bad - translators can't see full context
const action = 'delete';
__( `Click to ${ action }`, 'my-plugin' );

// Good - complete translatable string
sprintf(
	__( 'Click to delete %s', 'my-plugin' ),
	itemName
);

wp i18n make-json languages/my-plugin-es_ES.po \
  --no-purge

import { setLocaleData } from '@wordpress/i18n';

// Set test translations
setLocaleData(
	{
		'': { domain: 'my-plugin' },
		'Save': [ '[TRANSLATED] Save' ],
	},
	'my-plugin'
);

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

function greet( name: string ): string {
	return sprintf(
		__( 'Hello, %s!', 'my-plugin' ),
		name
	);
}