[I18n] Fix plugin internationalization

admin/class-create-theme.php

@@ -50,6 +50,9 @@ function create_block_theme_enqueue() {
 		wp_enqueue_script(
 			'create-block-theme-slot-fill',
 		);
+
+		// Enable localization in the plugin sidebar.
+		wp_set_script_translations( 'create-block-theme-slot-fill', 'create-block-theme' );
 	}
 
 	function create_admin_menu() {

admin/class-react-app.php

@@ -18,6 +18,9 @@ public static function bootstrap() {
 		array_push( $asset_file['dependencies'], 'wp-i18n' );
 		wp_enqueue_script( 'create-block-theme-app', plugins_url( 'build/index.js', __DIR__ ), $asset_file['dependencies'], $asset_file['version'] );
 
+		// Enable localization in the app.
+		wp_set_script_translations( 'create-block-theme-app', 'create-block-theme' );
+
 		// Set google fonts json file url.
 		wp_localize_script(
 			'create-block-theme-app',

admin/create-theme/theme-form.php

@@ -223,7 +223,10 @@ public static function create_admin_form_page() {
 	}
 
 	public static function form_script() {
-		wp_enqueue_script( 'form-script', plugin_dir_url( dirname( __FILE__ ) ) . '/js/form-script.js' );
-		wp_enqueue_style( 'form-style', plugin_dir_url( dirname( __FILE__ ) ) . '/css/form.css' );
+		wp_enqueue_script( 'form-script', plugin_dir_url( dirname( __FILE__ ) ) . 'js/form-script.js' );
+		wp_enqueue_style( 'form-style', plugin_dir_url( dirname( __FILE__ ) ) . 'css/form.css' );
+
+		// Enable localization in the form.
+		wp_set_script_translations( 'form-script', 'create-block-theme' );
 	}
 }

src/demo-text-input/index.js

@@ -45,7 +45,7 @@ function DemoTextInput( { axes, setAxes, resetAxes } ) {
 						</SelectControl>
 
 						<InputControl
-							label="Demo text"
+							label={ __( 'Demo text', 'create-block-theme' ) }
 							value={ demoText }
 							onChange={ handleDemoTextChange }
 						/>

src/editor-sidebar/update-panel.js

@@ -204,7 +204,7 @@ export const UpdateThemePanel = () => {
 							) }
 							<br />
 							<ExternalLink href="https://make.wordpress.org/themes/handbook/review/required/#6-plugins">
-								{ __( 'Read more.' ) }
+								{ __( 'Read more.', 'create-block-theme' ) }
 							</ExternalLink>
 						</>
 					}

src/fonts-sidebar/index.js

@@ -1,6 +1,6 @@
 import { _n } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
-import { bytesToSize } from '../utils';
+import { bytesToSize, getFontStyleLocalized } from '../utils';
 import './fonts-sidebar.css';
 import { Button } from '@wordpress/components';
 import { trash } from '@wordpress/icons';
@@ -39,7 +39,7 @@
 			} );
 			setFileSizes( sizes );
 		} );
 	}, [ fontsOutline ] );
 
 	const variantsCount = Object.keys( fontsOutline ).reduce(
 		( acc, family ) => {
@@ -88,23 +88,31 @@
 																key
 															].faces.length && (
 																<>
-																	({ ' ' }
-																	{
-																		fontsOutline[
-																			key
-																		].faces
-																			.length
-																	}{ ' ' }
-																	{ _n(
-																		'Variant',
-																		'Variants',
-																		fontsOutline[
-																			key
-																		].faces
-																			.length,
-																		'create-block-theme'
-																	) }{ ' ' }
-																	)
+																	{ sprintf(
+																		// translators: %s: Variants information.
+																		__(
+																			'( %s )',
+																			'create-block-theme'
+																		),
+																		sprintf(
+																			// translators: %d: Number of variants.
+																			_n(
+																				'%d Variant',
+																				'%d Variants',
+																				fontsOutline[
+																					key
+																				]
+																					.faces
+																					.length,
+																				'create-block-theme'
+																			),
+																			fontsOutline[
+																				key
+																			]
+																				.faces
+																				.length
+																		)
+																	) }
 																</>
 															) }
 														</span>
@@ -130,7 +138,9 @@
 														>
 															<div className="variant">
 																{ face.weight }{ ' ' }
-																{ face.style }
+																{ getFontStyleLocalized(
+																	face.style
+																) }
 															</div>
 															<div className="size">
 																{ getFileSize(
@@ -171,12 +181,15 @@
 
 					<div className="variants-total">
 						<div className="variant">
-							{ variantsCount }{ ' ' }
-							{ _n(
-								'Variant',
-								'Variants',
-								variantsCount,
-								'create-block-theme'
+							{ sprintf(
+								// translators: %d: Number of variants.
+								_n(
+									'%d Variant',
+									'%d Variants',
+									variantsCount,
+									'create-block-theme'
+								),
+								variantsCount
 							) }
 						</div>
 						<div className="size">{ totalSize }</div>

src/google-fonts/font-variant.js

@@ -1,5 +1,6 @@
 import { useEffect } from '@wordpress/element';
 import Demo from '../demo-text-input/demo';
+import { getFontStyleLocalized } from '../utils';
 
 function FontVariant( { font, variant, isSelected, handleToggle } ) {
 	const style = variant.includes( 'italic' ) ? 'italic' : 'normal';
@@ -30,7 +31,7 @@
 				// eslint-disable-next-line
 				console.error( error );
 			} );
 	}, [ font, variant ] );
 
 	const formattedFontFamily = font.family.toLowerCase().replace( ' ', '-' );
 	const fontId = `${ formattedFontFamily }-${ variant }`;
@@ -51,7 +52,9 @@
 				<label htmlFor={ fontId }>{ weight }</label>
 			</td>
 			<td className="">
-				<label htmlFor={ fontId }>{ style }</label>
+				<label htmlFor={ fontId }>
+					{ getFontStyleLocalized( style ) }
+				</label>
 			</td>
 			<td className="demo-cell">
 				<label htmlFor={ fontId }>

src/local-fonts/upload-font-form.js

@@ -7,6 +7,7 @@ import {
 import { Font } from 'lib-font';
 import { __ } from '@wordpress/i18n';
 import { variableAxesToCss } from '../demo-text-input/utils';
+import { getFontStyleLocalized } from '../utils';
 
 function UploadFontForm( {
 	formData,
@@ -168,8 +169,12 @@ function UploadFontForm( {
 							setFormData( { ...formData, style: val } )
 						}
 					>
-						<option value="normal">Normal</option>
-						<option value="italic">Italic</option>
+						<option value="normal">
+							{ getFontStyleLocalized( 'normal' ) }
+						</option>
+						<option value="italic">
+							{ getFontStyleLocalized( 'italic' ) }
+						</option>
 					</SelectControl>
 				</div>
 
@@ -180,7 +185,7 @@ function UploadFontForm( {
 						name="font-weight"
 						id="font-weight"
 						placeholder={ __(
-							'Font weight:',
+							'Font weight',
 							'create-block-theme'
 						) }
 						value={ formData.weight || '' }

src/manage-fonts/confirm-delete-modal.js

@@ -3,6 +3,7 @@ import {
 	__experimentalConfirmDialog as ConfirmDialog,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+import { getFontStyleLocalized } from '../utils';
 
 function ConfirmDeleteModal( { isOpen, onConfirm, onCancel, fontToDelete } ) {
 	const deleteFontFaceMessage = sprintf(
@@ -12,7 +13,7 @@ function ConfirmDeleteModal( { isOpen, onConfirm, onCancel, fontToDelete } ) {
 			'create-block-theme'
 		),
 		fontToDelete?.weight,
-		fontToDelete?.style,
+		getFontStyleLocalized( fontToDelete?.style ),
 		fontToDelete?.fontFamily
 	);
 

src/manage-fonts/font-face.js

@@ -1,6 +1,7 @@
 import { Button } from '@wordpress/components';
 import Demo from '../demo-text-input/demo';
-const { __ } = wp.i18n;
+import { __ } from '@wordpress/i18n';
+import { getFontStyleLocalized } from '../utils';
 
 function FontFace( { face, deleteFont, shouldBeRemoved, isFamilyOpen } ) {
 	const demoStyles = {
@@ -21,7 +22,7 @@ function FontFace( { face, deleteFont, shouldBeRemoved, isFamilyOpen } ) {
 
 	return (
 		<tr className="font-face">
-			<td>{ face.fontStyle }</td>
+			<td>{ getFontStyleLocalized( face.fontStyle ) }</td>
 			<td>{ face.fontWeight }</td>
 			<td className="demo-cell">
 				<Demo style={ demoStyles } />

src/manage-fonts/font-family.js

@@ -2,8 +2,8 @@ import { useContext } from '@wordpress/element';
 import { Button, Icon } from '@wordpress/components';
 import FontFace from './font-face';
 import { ManageFontsContext } from '../fonts-context';
+import { __, _n } from '@wordpress/i18n';
 
-const { __, _n } = wp.i18n;
 function FontFamily( { fontFamily, deleteFont } ) {
 	const { familiesOpen, handleToggleFamily } =
 		useContext( ManageFontsContext );
@@ -36,14 +36,20 @@ function FontFamily( { fontFamily, deleteFont } ) {
 							{ hasFontFaces && (
 								<span className="variants-count">
 									{ ' ' }
-									( { fontFamily.fontFace.length }{ ' ' }
-									{ _n(
-										'Variant',
-										'Variants',
-										fontFamily.fontFace.length,
-										'create-block-theme'
-									) }{ ' ' }
-									)
+									{ sprintf(
+										// translators: %s: Variants information.
+										__( '( %s )', 'create-block-theme' ),
+										sprintf(
+											// translators: %d: Number of variants.
+											_n(
+												'%d Variant',
+												'%d Variants',
+												fontFamily.fontFace.length,
+												'create-block-theme'
+											),
+											fontFamily.fontFace.length
+										)
+									) }
 								</span>
 							) }
 						</div>

src/plugin-sidebar.js

@@ -1,6 +1,6 @@
 import { registerPlugin } from '@wordpress/plugins';
 import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-site';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { downloadFile } from './utils';
 import { useDispatch } from '@wordpress/data';
@@ -88,7 +88,8 @@ const CreateBlockThemePlugin = () => {
 					error.message && error.code !== 'unknown_error'
 						? error.message
 						: __(
-								'An error occurred while attempting to export the theme.'
+								'An error occurred while attempting to export the theme.',
+								'create-block-theme'
 						  );
 				createErrorNotice( errorMessage, { type: 'snackbar' } );
 			}
@@ -102,12 +103,20 @@ const CreateBlockThemePlugin = () => {
 				target="create-block-theme-sidebar"
 				icon={ tool }
 			>
-				{ __( 'Create Block Theme' ) }
+				{ _x(
+					'Create Block Theme',
+					'UI String',
+					'create-block-theme'
+				) }
 			</PluginSidebarMoreMenuItem>
 			<PluginSidebar
 				name="create-block-theme-sidebar"
 				icon={ tool }
-				title={ __( 'Create Block Theme' ) }
+				title={ _x(
+					'Create Block Theme',
+					'UI String',
+					'create-block-theme'
+				) }
 			>
 				<NavigatorProvider initialPath="/">
 					<NavigatorScreen path="/">
@@ -117,7 +126,10 @@ const CreateBlockThemePlugin = () => {
 									icon={ archive }
 									onClick={ handleSaveClick }
 								>
-									{ __( 'Save Changes' ) }
+									{ __(
+										'Save Changes',
+										'create-block-theme'
+									) }
 								</Button>
 								<Text variant="muted">
 									{ __(
@@ -130,7 +142,7 @@ const CreateBlockThemePlugin = () => {
 									icon={ download }
 									onClick={ handleExportClick }
 								>
-									{ __( 'Export Zip' ) }
+									{ __( 'Export Zip', 'create-block-theme' ) }
 								</Button>
 								<Text variant="muted">
 									{ __(
@@ -143,7 +155,10 @@ const CreateBlockThemePlugin = () => {
 									<Spacer />
 									<HStack justify="space-between">
 										<FlexItem>
-											{ __( 'Theme Info' ) }
+											{ __(
+												'Theme Info',
+												'create-block-theme'
+											) }
 										</FlexItem>
 										<Icon icon={ chevronRight } />
 									</HStack>
@@ -159,7 +174,10 @@ const CreateBlockThemePlugin = () => {
 									<Spacer />
 									<HStack>
 										<FlexItem>
-											{ __( 'Create Theme' ) }
+											{ __(
+												'Create Theme',
+												'create-block-theme'
+											) }
 										</FlexItem>
 										<Icon icon={ chevronRight } />
 									</HStack>

src/utils.js

@@ -1,3 +1,5 @@
+import { __, _x } from '@wordpress/i18n';
+
 export function getStyleFromGoogleVariant( variant ) {
 	return variant.includes( 'italic' ) ? 'italic' : 'normal';
 }
@@ -21,13 +23,21 @@ export function getGoogleVariantFromStyleAndWeight( style, weight ) {
 	return weight + style;
 }
 
+export function getFontStyleLocalized( style ) {
+	const styles = {
+		normal: _x( 'Normal', 'Font style', 'create-block-theme' ),
+		italic: _x( 'Italic', 'Font style', 'create-block-theme' ),
+	};
+	return styles[ style ] !== undefined ? styles[ style ] : style;
+}
+
 export function forceHttps( url ) {
 	return url.replace( 'http://', 'https://' );
 }
 
 export function bytesToSize( bytes ) {
 	const sizes = [ 'Bytes', 'KB', 'MB', 'GB', 'TB' ];
-	if ( bytes === 0 ) return 'n/a';
+	if ( bytes === 0 ) return __( 'n/a', 'create-block-theme' );
 	const i = parseInt( Math.floor( Math.log( bytes ) / Math.log( 1024 ) ) );
 	if ( i === 0 ) return bytes + ' ' + sizes[ i ];
 	return ( bytes / Math.pow( 1024, i ) ).toFixed( 1 ) + ' ' + sizes[ i ];