How to use @wordpress/i18n - 10 common examples

const setupLocale = ( locale, extraTranslations ) => {
	I18nManager.forceRTL( false ); // Change to `true` to debug RTL layout easily.

	let gutenbergTranslations = getTranslation( locale );
	if ( locale && ! gutenbergTranslations ) {
		// Try stripping out the regional
		locale = locale.replace( /[-_][A-Za-z]+$/, '' );
		gutenbergTranslations = getTranslation( locale );
	}
	const translations = Object.assign( {}, gutenbergTranslations, extraTranslations );
	// eslint-disable-next-line no-console
	console.log( 'locale', locale, translations );
	// Only change the locale if it's supported by gutenberg
	if ( gutenbergTranslations || extraTranslations ) {
		setLocaleData( translations );
	}
};

const setupLocale = ( locale, extraTranslations ) => {
	I18nManager.forceRTL( false ); // Change to `true` to debug RTL layout easily.

	let gutenbergTranslations = getTranslation( locale );
	if ( locale && ! gutenbergTranslations ) {
		// Try stripping out the regional
		locale = locale.replace( /[-_][A-Za-z]+$/, '' );
		gutenbergTranslations = getTranslation( locale );
	}
	const translations = Object.assign( {}, gutenbergTranslations, extraTranslations );
	// eslint-disable-next-line no-console
	console.log( 'locale', locale, translations );
	// Only change the locale if it's supported by gutenberg
	if ( gutenbergTranslations || extraTranslations ) {
		setLocaleData( translations );
	}
};

import './style.scss'
import './editor.scss'

import SearchGiphy from './search'

import { __ } from '@wordpress/i18n'
const { registerBlockType } = wp.blocks

export default registerBlockType(
  'advanced-gutenberg-blocks/giphy',
  {
    title: __( 'Giphy', 'advanced-gutenberg-blocks' ),
    description: __( 'Search and insert a GIF from Giphy.', 'advanced-gutenberg-blocks' ),
    category: 'agb',
    icon: { background: '#2F313A', foreground: '#DEBB8F', src: 'images-alt2' },
    keywords: [
      __( 'gif', 'advanced-gutenberg-blocks' ),
    ],
    attributes: {},

    edit: props => {

      const { clientId, insertBlocksAfter } = props
      
      // If API key is not yet provided
      if ( typeof advancedGutenbergBlocksGiphy.error !== "undefined" ) {
        return (
          <p class="AGB-block-message"></p>

const { items_created, last_created_at } = response;

			const date = momentUtils.toDate( momentUtils.toMoment( last_created_at ) );

			// Show editing notice
			yield call(
				[ wpDispatch( 'core/editor' ), 'createSuccessNotice' ],
				NOTICES[ NOTICE_EDITING_SERIES ],
				{ id: NOTICE_EDITING_SERIES, isDismissible: false }
			);

			// Show progress notice
			yield call(
				[ wpDispatch( 'core/editor' ), 'createSuccessNotice' ],
				`${ sprintf( NOTICES[ NOTICE_PROGRESS_ON_SERIES_CREATION_COUNT ], items_created ) } ${ sprintf( NOTICES[ NOTICE_PROGRESS_ON_SERIES_CREATION ], date ) }`,
				{ id: NOTICE_PROGRESS_ON_SERIES_CREATION, isDismissible: true }
			);
		}

		if ( yield select( selectors.isCompleted ) ) {
			yield put( allowEdits() ); // Allow datetime block to be editable again
			// Remove editing notice
			yield call(
				[ wpDispatch( 'core/editor' ), 'removeNotice' ],
				NOTICE_EDITING_SERIES
			);
			yield call(
				[ wpDispatch( 'core/editor' ), 'removeNotice' ],
				NOTICE_PROGRESS_ON_SERIES_CREATION
			);
			break; // We done

componentDidUpdate( prevProps, prevState ) {
		const searchResults = this.searchItems( this.props.items );
		// Announce the search results to screen readers.
		if ( this.state.filterValue && !! searchResults.length ) {
			this.props.debouncedSpeak( sprintf( _n(
				'%d result found',
				'%d results found',
				searchResults.length
			), searchResults.length ), 'assertive' );
		} else if ( this.state.filterValue ) {
			this.props.debouncedSpeak( __( 'No results.' ), 'assertive' );
		}

		if ( this.state.tab !== prevState.tab ) {
			this.tabContainer.scrollTop = this.tabScrollTop[ this.state.tab ];
		}
	}

focusedBorderColor,
			borderStyle,
		} = this.props;

		const decodedPlaceholder = decodeEntities( placeholder );
		const borderColor = this.props.isSelected ? focusedBorderColor : 'transparent';

		return (

function PostPublishModalPrepublish( {
	hasPublishAction,
	publishDate,
	isFloating,
	visibility,
	children,
	postType,
} ) {
	const postLabel = get( postType, [ 'labels', 'singular_name' ] );
	let prePublishBodyText,
		prePublishDateText;

	if ( ! hasPublishAction ) {
		prePublishBodyText = __( 'When you’re ready, submit your work for review, and an Editor will be able to approve it for you.' );
	} else {
		prePublishBodyText = sprintf(
			/* translators: %s: post type singular name */
			__( 'Double-check your settings, then publish your %s.' ), postLabel
		);
	}

	if ( isFloating ) {
		prePublishDateText = __( 'Your work will be published right now.' );
	} else if ( new Date( publishDate ) < new Date() ) {
		prePublishDateText = __( 'Your work will be published right now and back-dated.' );
	} else {
		prePublishDateText = __( 'Your work will be published at the specified date and time.' );
	}

	const getVisibilityInfo = () => find( visibilityOptions, { value: visibility } ).info;

	return (

const getAccessibilityLabel = () => {
			if ( accessibilityLabel || ! showValue ) {
				return accessibilityLabel || label;
			}
			return isEmpty( value ) ?
				sprintf(
					/* translators: accessibility text. Empty state of a inline textinput cell. %s: The cell's title */
					_x( '%s. Empty', 'inline textinput cell' ),
					label
				) :
				// Separating by ',' is necessary to make a pause on urls (non-capitalized text)
				sprintf(
					/* translators: accessibility text. Inline textinput title and value.%1: Cell title, %2: cell value. */
					_x( '%1$s, %2$s', 'inline textinput cell' ),
					label,
					value
				);
		};

constructor( props ) {
		super( props );
		this.state = {
			hasError: false,
		};

		// Set up translations.
		setLocaleData( googlesitekit.locale, 'google-site-kit' );
	}

constructor( props ) {
		super( props );
		this.state = { hasError: false };

		// Set up translations.
		setLocaleData( googlesitekit.locale, 'google-site-kit' );

		const {
			showModuleSetupWizard,
		} = googlesitekit.setup;

		this.state = {
			showModuleSetupWizard,
		};
	}