Add i18n infrastructure for Playground web app

package.json

@@ -152,6 +152,7 @@
 		"@wordpress/core-data": "7.4.0",
 		"@wordpress/data": "10.4.0",
 		"@wordpress/element": "6.4.0",
+		"@wordpress/i18n": "5.14.0",
 		"@wordpress/notices": "5.4.0",
 		"chalk": "5.2.0",
 		"clsx": "^1.2.1",
@@ -171,6 +172,7 @@
 		"eslint-plugin-playground-dev": "file:packages/meta/src/eslint-plugin-playground-dev",
 		"eslint-plugin-react": "7.32.2",
 		"eslint-plugin-react-hooks": "4.6.0",
+		"gettext-extractor": "3.8.0",
 		"gh-pages": "5.0.0",
 		"glob": "^9.3.0",
 		"husky": "8.0.3",

packages/meta/src/wordpress-i18n-gettext-extractor/index.ts

@@ -0,0 +1,70 @@
+import {
+	GettextExtractor,
+	HtmlExtractors,
+	JsExtractors,
+} from 'gettext-extractor';
+
+export function extractWordPressI18nGettext({
+	scriptGlobs,
+	htmlGlobs,
+	outputFile: outputFile,
+}: {
+	scriptGlobs: string[];
+	htmlGlobs: string[];
+	outputFile: string;
+}) {
+	const extractor = new GettextExtractor();
+
+	const comments = {
+		otherLineLeading: true,
+		sameLineLeading: true,
+		sameLineTrailing: true,
+		regex: /translators.*/is,
+	};
+	const jsParser = extractor.createJsParser([
+		JsExtractors.callExpression('__', {
+			arguments: {
+				text: 0,
+			},
+			comments,
+		}),
+		JsExtractors.callExpression('_x', {
+			arguments: {
+				text: 0,
+				context: 1,
+			},
+			comments,
+		}),
+		JsExtractors.callExpression('_n', {
+			arguments: {
+				text: 0,
+				textPlural: 1,
+			},
+			comments,
+		}),
+		JsExtractors.callExpression('_nx', {
+			arguments: {
+				text: 0,
+				textPlural: 1,
+				context: 3,
+			},
+			comments,
+		}),
+	]);
+
+	for (const scriptGlob of scriptGlobs) {
+		jsParser.parseFilesGlob(scriptGlob);
+	}
+
+	const htmlParser = extractor.createHtmlParser([
+		HtmlExtractors.embeddedJs('script', jsParser),
+	]);
+
+	for (const htmlGlob of htmlGlobs) {
+		htmlParser.parseFilesGlob(htmlGlob);
+	}
+
+	extractor.savePotFile(outputFile);
+
+	return extractor.getStats();
+}

packages/nx-extensions/executors.json

@@ -20,6 +20,11 @@
 			"implementation": "./src/executors/assert-built-esm-and-cjs/executor",
 			"schema": "./src/executors/assert-built-esm-and-cjs/schema.json",
 			"description": "assert-built-esm-and-cjs executor"
+		},
+		"wordpress-i18n-gettext-extractor": {
+			"implementation": "./src/executors/wordpress-i18n-gettext-extractor/executor",
+			"schema": "./src/executors/wordpress-i18n-gettext-extractor/schema.json",
+			"description": "wordpress-i18n-gettext-extractor executor"
 		}
 	}
 }

packages/nx-extensions/src/executors/wordpress-i18n-gettext-extractor/executor.ts

@@ -0,0 +1,31 @@
+import { ExecutorContext } from '@nx/devkit';
+import * as path from 'path';
+import { WordPressI18nGettextExtractorSchema } from './schema';
+import { extractWordPressI18nGettext } from '../../../../meta/src/wordpress-i18n-gettext-extractor';
+
+/**
+ * Extract a POT file from WordPress i18n calls in scripts and HTML files.
+ *
+ * @param options
+ * @param context
+ * @returns
+ */
+export default async function runExecutor(
+	options: WordPressI18nGettextExtractorSchema,
+	context: ExecutorContext
+) {
+	const outputFile = path.isAbsolute(options.outputFile)
+		? options.outputFile
+		: path.join(context.root, options.outputFile);
+
+	const extractionStats = extractWordPressI18nGettext({
+		scriptGlobs: options.scriptGlobs,
+		htmlGlobs: options.htmlGlobs,
+		outputFile: outputFile,
+	});
+
+	console.log('Extraction stats:');
+	console.log(extractionStats);
+
+	return { success: true };
+}

packages/nx-extensions/src/executors/wordpress-i18n-gettext-extractor/schema.d.ts

@@ -0,0 +1,5 @@
+export interface WordPressI18nGettextExtractorSchema {
+	scriptGlobs: string[];
+	htmlGlobs: string[];
+	outputFile: string;
+}

packages/nx-extensions/src/executors/wordpress-i18n-gettext-extractor/schema.json

@@ -0,0 +1,30 @@
+{
+	"$schema": "http://json-schema.org/schema",
+	"version": 2,
+	"title": "WordPress i18n gettext extractor",
+	"description": "",
+	"type": "object",
+	"properties": {
+		"scriptGlobs": {
+			"type": "array",
+			"description": "Globs for scripts to parse for gettext functions",
+			"items": {
+				"type": "string"
+			},
+			"defaultConfiguration": []
+		},
+		"htmlGlobs": {
+			"type": "array",
+			"description": "Globs for HTML documents to parse for gettext functions",
+			"items": {
+				"type": "string"
+			},
+			"defaultConfiguration": []
+		},
+		"outputFile": {
+			"type": "string",
+			"description": "The path to the resulting .pot file"
+		}
+	},
+	"required": ["outputFile"]
+}

packages/playground/website/project.json

@@ -116,6 +116,16 @@
 				]
 			}
 		},
+		"extract-i18n-strings": {
+			"executor": "@wp-playground/nx-extensions:wordpress-i18n-gettext-extractor",
+			"options": {
+				"outputFile": "packages/playground/website/website.pot",
+				"scriptGlobs": [
+					"packages/playground/website/src/**/*.@(ts|js|tsx|jsx)"
+				],
+				"htmlGlobs": ["packages/playground/website/index.html"]
+			}
+		},
 		"e2e": {
 			"executor": "@nx/cypress:cypress",
 			"options": {

packages/playground/website/src/components/layout/index.tsx

@@ -35,6 +35,7 @@ import {
 import { ImportFormModal } from '../import-form-modal';
 import { PreviewPRModal } from '../../github/preview-pr';
 import { MissingSiteModal } from '../missing-site-modal';
+import { __ } from '../../lib/i18n';
 
 acquireOAuthTokenIfNeeded();
 
@@ -90,7 +91,7 @@ export function Layout() {
 			<div className={css.siteView}>
 				{siteManagerIsOpen && (
 					<div
-						title="Open site"
+						title={__('Open site')}
 						className={css.siteViewOverlay}
 						onClick={() => {
 							dispatch(setSiteManagerOpen(false));

packages/playground/website/src/components/site-manager/sidebar/index.tsx

@@ -28,6 +28,7 @@ import {
 } from '../../../lib/state/redux/slice-sites';
 import { PlaygroundRoute, redirectTo } from '../../../lib/state/url/router';
 import { setSiteManagerSection } from '../../../lib/state/redux/slice-ui';
+import { __ } from '../../../lib/i18n';
 import { WordPressPRMenuItem } from '../../toolbar-buttons/wordpress-pr-menu-item';
 import { GutenbergPRMenuItem } from '../../toolbar-buttons/gutenberg-pr-menu-item';
 import { RestoreFromZipMenuItem } from '../../toolbar-buttons/restore-from-zip';
@@ -58,19 +59,19 @@ export function Sidebar({
 
 	const resources = [
 		{
-			label: 'Preview WordPress PR',
+			label: __('Preview WordPress PR'),
 			href: '/wordpress.html',
 		},
 		{
-			label: 'More demos',
+			label: __('More demos'),
 			href: '/demos/index.html',
 		},
 		{
-			label: 'Documentation',
+			label: __('Documentation'),
 			href: 'https://wordpress.github.io/wordpress-playground/',
 		},
 		{
-			label: 'GitHub',
+			label: __('GitHub'),
 			href: 'https://github.com/wordpress/wordpress-playground',
 		},
 	];
@@ -106,7 +107,10 @@ export function Sidebar({
 				<DropdownMenu
 					className={css.componentsDropdown}
 					icon={moreVertical}
-					label="Import actions"
+					label={
+						/* translators: Different ways to import code or content into Playground */
+						__('Import actions')
+					}
 					popoverProps={{
 						placement: 'bottom-end',
 					}}
@@ -126,7 +130,10 @@ export function Sidebar({
 								disabled={offline}
 							/>
 							<RestoreFromZipMenuItem
-								text="Import from .zip"
+								text={
+									// translators: Import code and content into Playground from a .zip file
+									__('Import from .zip')
+								}
 								onClose={onClose}
 								disabled={false}
 							/>
@@ -150,7 +157,9 @@ export function Sidebar({
 						isSelected={isTemporarySiteSelected}
 						// eslint-disable-next-line jsx-a11y/aria-role
 						role=""
-						title="This is a temporary Playground. Your changes will be lost on page refresh."
+						title={__(
+							'This is a temporary Playground. Your changes will be lost on page refresh.'
+						)}
 						{...(activeSite?.metadata.storage === 'none'
 							? {
 									'aria-current': 'page',
@@ -168,7 +177,7 @@ export function Sidebar({
 								<ClockIcon className={css.sidebarItemLogo} />
 							</Flex>
 							<FlexBlock className={css.sidebarItemSiteName}>
-								Temporary Playground
+								{__('Temporary Playground')}
 							</FlexBlock>
 						</HStack>
 					</MenuItem>
@@ -196,7 +205,10 @@ export function Sidebar({
 								/>
 							</Flex>
 							<FlexBlock className={css.sidebarItemSiteName}>
-								Blueprints Gallery
+								{
+									// translators: a gallery of WordPress Playground blueprint files
+									__('Blueprints Gallery')
+								}
 							</FlexBlock>
 						</HStack>
 					</MenuItem>

packages/playground/website/src/lib/i18n.ts

@@ -0,0 +1,9 @@
+import { createI18n, sprintf as coreSprintf } from '@wordpress/i18n';
+
+const i18n = createI18n(undefined, 'wordpress-playground-website');
+
+export const __ = i18n.__;
+export const _x = i18n._x;
+export const _n = i18n._n;
+export const _nx = i18n._nx;
+export const sprintf = coreSprintf;

packages/playground/website/website.pot

@@ -0,0 +1,28 @@
+msgid ""
+msgstr ""
+"Content-Type: text/plain; charset=UTF-8\n"
+
+#: packages/playground/website/src/components/site-manager/sidebar/index.tsx:70
+msgid "Documentation"
+msgstr ""
+
+#: packages/playground/website/src/components/site-manager/sidebar/index.tsx:74
+msgid "GitHub"
+msgstr ""
+
+#. translators: Different ways to import code or content into Playground
+#: packages/playground/website/src/components/site-manager/sidebar/index.tsx:112
+msgid "Import actions"
+msgstr ""
+
+#: packages/playground/website/src/components/site-manager/sidebar/index.tsx:66
+msgid "More demos"
+msgstr ""
+
+#: packages/playground/website/src/components/layout/index.tsx:94
+msgid "Open site"
+msgstr ""
+
+#: packages/playground/website/src/components/site-manager/sidebar/index.tsx:62
+msgid "Preview WordPress PR"
+msgstr ""