Internationalization (i18n)

npm install @wordpress/i18n --save

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

// Simple translation
const message = __( 'Hello World', 'my-text-domain' );

// Plural forms
const count = 4;
const hats = sprintf(
  _n( '%d hat', '%d hats', count, 'my-text-domain' ),
  count
);
// Returns: "4 hats"

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

const buttonText = __( 'Save Changes', 'my-plugin' );
const helpText = __( 'Click to save your work', 'my-plugin' );

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

// "Post" as in a blog post
const postNoun = _x( 'Post', 'noun', 'my-plugin' );

// "Post" as in the submit action
const postVerb = _x( 'Post', 'verb', 'my-plugin' );

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

function getItemCount( count ) {
  return sprintf(
    _n(
      '%d item',
      '%d items',
      count,
      'my-plugin'
    ),
    count
  );
}

getItemCount( 1 );  // "1 item"
getItemCount( 5 );  // "5 items"

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

const commentCount = sprintf(
  _nx(
    '%d comment',
    '%d comments',
    count,
    'noun',
    'my-plugin'
  ),
  count
);

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

// String placeholder
const greeting = sprintf(
  __( 'Hello %s!', 'my-plugin' ),
  userName
);

// Number placeholder
const progress = sprintf(
  __( 'Step %d of %d', 'my-plugin' ),
  currentStep,
  totalSteps
);

// Multiple placeholders
const message = sprintf(
  __( '%s published %d posts', 'my-plugin' ),
  authorName,
  postCount
);

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

registerBlockType( 'my-plugin/custom-block', {
  title: __( 'Custom Block', 'my-plugin' ),
  description: __( 'A custom block for special content', 'my-plugin' ),
  category: 'widgets',
  
  edit: ( { attributes, setAttributes } ) => {
    return (
      <div>
        <h3>{ __( 'Block Settings', 'my-plugin' ) }</h3>
        <p>{ __( 'Configure your block below', 'my-plugin' ) }</p>
      </div>
    );
  },
} );

import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

function BlockEdit( { attributes, setAttributes } ) {
  return (
    <>
      <InspectorControls>
        <PanelBody
          title={ __( 'Block Settings', 'my-plugin' ) }
          initialOpen={ true }
        >
          <TextControl
            label={ __( 'Title', 'my-plugin' ) }
            value={ attributes.title }
            onChange={ ( title ) => setAttributes( { title } ) }
            help={ __( 'Enter a title for this block', 'my-plugin' ) }
          />
          
          <ToggleControl
            label={ __( 'Show Border', 'my-plugin' ) }
            checked={ attributes.showBorder }
            onChange={ ( showBorder ) => setAttributes( { showBorder } ) }
          />
        </PanelBody>
      </InspectorControls>
      
      {/* Block content */}
    </>
  );
}

import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { __ } from '@wordpress/i18n';

function MyComponent() {
  const { createNotice } = useDispatch( noticesStore );
  
  const handleSave = () => {
    // Show success message
    createNotice(
      'success',
      __( 'Settings saved successfully', 'my-plugin' ),
      { type: 'snackbar', isDismissible: true }
    );
  };
  
  const handleError = () => {
    // Show error message
    createNotice(
      'error',
      __( 'Failed to save settings', 'my-plugin' ),
      { isDismissible: true }
    );
  };
}

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

function MyComponent() {
  const textAlign = isRTL() ? 'right' : 'left';
  
  return (
    <div style={ { textAlign } }>
      { __( 'Content here', 'my-plugin' ) }
    </div>
  );
}

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

if ( hasTranslation( 'Hello World', null, 'my-plugin' ) ) {
  // Translation exists
}

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

const i18n = createI18n();

// Use custom instance
const message = i18n.__( 'Hello', 'my-domain' );

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

setLocaleData(
  {
    '': {
      domain: 'my-plugin',
      lang: 'fr',
      plural_forms: 'nplurals=2; plural=(n > 1);',
    },
    'Hello World': [ 'Bonjour le monde' ],
  },
  'my-plugin'
);

// Good: Simple, complete sentence
__( 'Save your changes before leaving', 'my-plugin' )

// Good: Using sprintf for dynamic content
sprintf(
  __( 'Welcome back, %s!', 'my-plugin' ),
  userName
)

// Good: Context for disambiguation
_x( 'Draft', 'post status', 'my-plugin' )

// Bad: String concatenation
__( 'Hello', 'my-plugin' ) + ' ' + userName

// Bad: Split sentences
__( 'Click', 'my-plugin' ) + ' ' + __( 'here', 'my-plugin' )

// Bad: Missing text domain
__( 'Save' )

function my_plugin_enqueue_scripts() {
  wp_enqueue_script(
    'my-plugin-script',
    plugins_url( 'build/index.js', __FILE__ ),
    [ 'wp-blocks', 'wp-i18n' ],
    '1.0.0',
    true
  );
  
  // Load translations
  wp_set_script_translations(
    'my-plugin-script',
    'my-plugin',
    plugin_dir_path( __FILE__ ) . 'languages'
  );
}
add_action( 'enqueue_block_editor_assets', 'my_plugin_enqueue_scripts' );