diff --git a/package-lock.json b/package-lock.json
index a43d3f8824..44857b4ecd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -97,6 +97,7 @@
 				"@wordpress/core-data": "7.4.0",
 				"@wordpress/data": "10.4.0",
 				"@wordpress/element": "6.4.0",
+				"@wordpress/i18n": "5.4.0",
 				"@wordpress/notices": "5.4.0",
 				"chalk": "5.2.0",
 				"clsx": "^1.2.1",
@@ -149,15 +150,6 @@
 				"fs-ext": "2.1.1"
 			}
 		},
-		"node_modules/@adobe/css-tools": {
-			"version": "4.4.2",
-			"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.2.tgz",
-			"integrity": "sha512-baYZExFpsdkBNuvGKTKWCwKH57HRZLVtycZS05WTQNVOiXVSeAki3nU35zlRbToeMW8aHlJfyS+1C4BOv27q0A==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true
-		},
 		"node_modules/@algolia/abtesting": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.1.0.tgz",
@@ -7423,26 +7415,6 @@
 				"node": ">= 10"
 			}
 		},
-		"node_modules/@lerna/legacy-package-management/node_modules/@parcel/watcher": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.0.4.tgz",
-			"integrity": "sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==",
-			"dev": true,
-			"hasInstallScript": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"node-addon-api": "^3.2.1",
-				"node-gyp-build": "^4.3.0"
-			},
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
 		"node_modules/@lerna/legacy-package-management/node_modules/@zkochan/js-yaml": {
 			"version": "0.0.6",
 			"resolved": "https://registry.npmjs.org/@zkochan/js-yaml/-/js-yaml-0.0.6.tgz",
@@ -7909,14 +7881,6 @@
 				"node": ">=16 || 14 >=14.17"
 			}
 		},
-		"node_modules/@lerna/legacy-package-management/node_modules/node-addon-api": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
-			"integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true
-		},
 		"node_modules/@lerna/legacy-package-management/node_modules/npm-package-arg": {
 			"version": "8.1.1",
 			"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
@@ -8075,9 +8039,9 @@
 			}
 		},
 		"node_modules/@lerna/legacy-package-management/node_modules/nx/node_modules/fs-extra": {
-			"version": "11.3.0",
-			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
-			"integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==",
+			"version": "11.3.2",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.2.tgz",
+			"integrity": "sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true,
@@ -9737,25 +9701,6 @@
 				"tao": "index.js"
 			}
 		},
-		"node_modules/@nrwl/cli/node_modules/@parcel/watcher": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.0.4.tgz",
-			"integrity": "sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==",
-			"dev": true,
-			"hasInstallScript": true,
-			"license": "MIT",
-			"dependencies": {
-				"node-addon-api": "^3.2.1",
-				"node-gyp-build": "^4.3.0"
-			},
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
 		"node_modules/@nrwl/cli/node_modules/@zkochan/js-yaml": {
 			"version": "0.0.6",
 			"resolved": "https://registry.npmjs.org/@zkochan/js-yaml/-/js-yaml-0.0.6.tgz",
@@ -9887,13 +9832,6 @@
 				"node": "*"
 			}
 		},
-		"node_modules/@nrwl/cli/node_modules/node-addon-api": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
-			"integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/@nrwl/cli/node_modules/nx": {
 			"version": "15.9.7",
 			"resolved": "https://registry.npmjs.org/nx/-/nx-15.9.7.tgz",
@@ -12471,321 +12409,16 @@
 			}
 		},
 		"node_modules/@parcel/watcher": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
-			"integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.0.4.tgz",
+			"integrity": "sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==",
 			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
-			"optional": true,
-			"peer": true,
 			"dependencies": {
-				"detect-libc": "^1.0.3",
-				"is-glob": "^4.0.3",
-				"micromatch": "^4.0.5",
-				"node-addon-api": "^7.0.0"
-			},
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			},
-			"optionalDependencies": {
-				"@parcel/watcher-android-arm64": "2.5.1",
-				"@parcel/watcher-darwin-arm64": "2.5.1",
-				"@parcel/watcher-darwin-x64": "2.5.1",
-				"@parcel/watcher-freebsd-x64": "2.5.1",
-				"@parcel/watcher-linux-arm-glibc": "2.5.1",
-				"@parcel/watcher-linux-arm-musl": "2.5.1",
-				"@parcel/watcher-linux-arm64-glibc": "2.5.1",
-				"@parcel/watcher-linux-arm64-musl": "2.5.1",
-				"@parcel/watcher-linux-x64-glibc": "2.5.1",
-				"@parcel/watcher-linux-x64-musl": "2.5.1",
-				"@parcel/watcher-win32-arm64": "2.5.1",
-				"@parcel/watcher-win32-ia32": "2.5.1",
-				"@parcel/watcher-win32-x64": "2.5.1"
-			}
-		},
-		"node_modules/@parcel/watcher-android-arm64": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
-			"integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"android"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
-		"node_modules/@parcel/watcher-darwin-arm64": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
-			"integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
-		"node_modules/@parcel/watcher-darwin-x64": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
-			"integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
-		"node_modules/@parcel/watcher-freebsd-x64": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
-			"integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"freebsd"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
-		"node_modules/@parcel/watcher-linux-arm-glibc": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
-			"integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
-			"cpu": [
-				"arm"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
-		"node_modules/@parcel/watcher-linux-arm-musl": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
-			"integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
-			"cpu": [
-				"arm"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
-		"node_modules/@parcel/watcher-linux-arm64-glibc": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
-			"integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
-		"node_modules/@parcel/watcher-linux-arm64-musl": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
-			"integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
-		"node_modules/@parcel/watcher-linux-x64-glibc": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
-			"integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
-		"node_modules/@parcel/watcher-linux-x64-musl": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
-			"integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
-		"node_modules/@parcel/watcher-win32-arm64": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
-			"integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
-		"node_modules/@parcel/watcher-win32-ia32": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
-			"integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
-			"cpu": [
-				"ia32"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">= 10.0.0"
+				"node-addon-api": "^3.2.1",
+				"node-gyp-build": "^4.3.0"
 			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
-		"node_modules/@parcel/watcher-win32-x64": {
-			"version": "2.5.1",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
-			"integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"peer": true,
 			"engines": {
 				"node": ">= 10.0.0"
 			},
@@ -14543,331 +14176,6 @@
 				"url": "https://github.com/sponsors/gregberge"
 			}
 		},
-		"node_modules/@swc-node/core": {
-			"version": "1.13.3",
-			"resolved": "https://registry.npmjs.org/@swc-node/core/-/core-1.13.3.tgz",
-			"integrity": "sha512-OGsvXIid2Go21kiNqeTIn79jcaX4l0G93X2rAnas4LFoDyA9wAwVK7xZdm+QsKoMn5Mus2yFLCc4OtX2dD/PWA==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">= 10"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/Brooooooklyn"
-			},
-			"peerDependencies": {
-				"@swc/core": ">= 1.4.13",
-				"@swc/types": ">= 0.1"
-			}
-		},
-		"node_modules/@swc-node/register": {
-			"version": "1.9.2",
-			"resolved": "https://registry.npmjs.org/@swc-node/register/-/register-1.9.2.tgz",
-			"integrity": "sha512-BBjg0QNuEEmJSoU/++JOXhrjWdu3PTyYeJWsvchsI0Aqtj8ICkz/DqlwtXbmZVZ5vuDPpTfFlwDBZe81zgShMA==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@swc-node/core": "^1.13.1",
-				"@swc-node/sourcemap-support": "^0.5.0",
-				"colorette": "^2.0.20",
-				"debug": "^4.3.4",
-				"pirates": "^4.0.6",
-				"tslib": "^2.6.2"
-			},
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/Brooooooklyn"
-			},
-			"peerDependencies": {
-				"@swc/core": ">= 1.4.13",
-				"typescript": ">= 4.3"
-			}
-		},
-		"node_modules/@swc-node/sourcemap-support": {
-			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/@swc-node/sourcemap-support/-/sourcemap-support-0.5.1.tgz",
-			"integrity": "sha512-JxIvIo/Hrpv0JCHSyRpetAdQ6lB27oFYhv0PKCNf1g2gUXOjpeR1exrXccRxLMuAV5WAmGFBwRnNOJqN38+qtg==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"source-map-support": "^0.5.21",
-				"tslib": "^2.6.3"
-			}
-		},
-		"node_modules/@swc-node/sourcemap-support/node_modules/source-map": {
-			"version": "0.6.1",
-			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-			"dev": true,
-			"license": "BSD-3-Clause",
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/@swc-node/sourcemap-support/node_modules/source-map-support": {
-			"version": "0.5.21",
-			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-			"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"buffer-from": "^1.0.0",
-				"source-map": "^0.6.0"
-			}
-		},
-		"node_modules/@swc/core": {
-			"version": "1.5.7",
-			"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.5.7.tgz",
-			"integrity": "sha512-U4qJRBefIJNJDRCCiVtkfa/hpiZ7w0R6kASea+/KLp+vkus3zcLSB8Ub8SvKgTIxjWpwsKcZlPf5nrv4ls46SQ==",
-			"dev": true,
-			"hasInstallScript": true,
-			"license": "Apache-2.0",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@swc/counter": "^0.1.2",
-				"@swc/types": "0.1.7"
-			},
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/swc"
-			},
-			"optionalDependencies": {
-				"@swc/core-darwin-arm64": "1.5.7",
-				"@swc/core-darwin-x64": "1.5.7",
-				"@swc/core-linux-arm-gnueabihf": "1.5.7",
-				"@swc/core-linux-arm64-gnu": "1.5.7",
-				"@swc/core-linux-arm64-musl": "1.5.7",
-				"@swc/core-linux-x64-gnu": "1.5.7",
-				"@swc/core-linux-x64-musl": "1.5.7",
-				"@swc/core-win32-arm64-msvc": "1.5.7",
-				"@swc/core-win32-ia32-msvc": "1.5.7",
-				"@swc/core-win32-x64-msvc": "1.5.7"
-			},
-			"peerDependencies": {
-				"@swc/helpers": "^0.5.0"
-			},
-			"peerDependenciesMeta": {
-				"@swc/helpers": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@swc/core-darwin-arm64": {
-			"version": "1.5.7",
-			"resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.5.7.tgz",
-			"integrity": "sha512-bZLVHPTpH3h6yhwVl395k0Mtx8v6CGhq5r4KQdAoPbADU974Mauz1b6ViHAJ74O0IVE5vyy7tD3OpkQxL/vMDQ==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "Apache-2.0 AND MIT",
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@swc/core-darwin-x64": {
-			"version": "1.5.7",
-			"resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.5.7.tgz",
-			"integrity": "sha512-RpUyu2GsviwTc2qVajPL0l8nf2vKj5wzO3WkLSHAHEJbiUZk83NJrZd1RVbEknIMO7+Uyjh54hEh8R26jSByaw==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "Apache-2.0 AND MIT",
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@swc/core-linux-arm-gnueabihf": {
-			"version": "1.5.7",
-			"resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.5.7.tgz",
-			"integrity": "sha512-cTZWTnCXLABOuvWiv6nQQM0hP6ZWEkzdgDvztgHI/+u/MvtzJBN5lBQ2lue/9sSFYLMqzqff5EHKlFtrJCA9dQ==",
-			"cpu": [
-				"arm"
-			],
-			"dev": true,
-			"license": "Apache-2.0",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@swc/core-linux-arm64-gnu": {
-			"version": "1.5.7",
-			"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.5.7.tgz",
-			"integrity": "sha512-hoeTJFBiE/IJP30Be7djWF8Q5KVgkbDtjySmvYLg9P94bHg9TJPSQoC72tXx/oXOgXvElDe/GMybru0UxhKx4g==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "Apache-2.0 AND MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@swc/core-linux-arm64-musl": {
-			"version": "1.5.7",
-			"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.5.7.tgz",
-			"integrity": "sha512-+NDhK+IFTiVK1/o7EXdCeF2hEzCiaRSrb9zD7X2Z7inwWlxAntcSuzZW7Y6BRqGQH89KA91qYgwbnjgTQ22PiQ==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "Apache-2.0 AND MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@swc/core-linux-x64-gnu": {
-			"version": "1.5.7",
-			"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.5.7.tgz",
-			"integrity": "sha512-25GXpJmeFxKB+7pbY7YQLhWWjkYlR+kHz5I3j9WRl3Lp4v4UD67OGXwPe+DIcHqcouA1fhLhsgHJWtsaNOMBNg==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "Apache-2.0 AND MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@swc/core-linux-x64-musl": {
-			"version": "1.5.7",
-			"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.5.7.tgz",
-			"integrity": "sha512-0VN9Y5EAPBESmSPPsCJzplZHV26akC0sIgd3Hc/7S/1GkSMoeuVL+V9vt+F/cCuzr4VidzSkqftdP3qEIsXSpg==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "Apache-2.0 AND MIT",
-			"optional": true,
-			"os": [
-				"linux"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@swc/core-win32-arm64-msvc": {
-			"version": "1.5.7",
-			"resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.5.7.tgz",
-			"integrity": "sha512-RtoNnstBwy5VloNCvmvYNApkTmuCe4sNcoYWpmY7C1+bPR+6SOo8im1G6/FpNem8AR5fcZCmXHWQ+EUmRWJyuA==",
-			"cpu": [
-				"arm64"
-			],
-			"dev": true,
-			"license": "Apache-2.0 AND MIT",
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@swc/core-win32-ia32-msvc": {
-			"version": "1.5.7",
-			"resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.5.7.tgz",
-			"integrity": "sha512-Xm0TfvcmmspvQg1s4+USL3x8D+YPAfX2JHygvxAnCJ0EHun8cm2zvfNBcsTlnwYb0ybFWXXY129aq1wgFC9TpQ==",
-			"cpu": [
-				"ia32"
-			],
-			"dev": true,
-			"license": "Apache-2.0 AND MIT",
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@swc/core-win32-x64-msvc": {
-			"version": "1.5.7",
-			"resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.5.7.tgz",
-			"integrity": "sha512-tp43WfJLCsKLQKBmjmY/0vv1slVywR5Q4qKjF5OIY8QijaEW7/8VwPyUyVoJZEnDgv9jKtUTG5PzqtIYPZGnyg==",
-			"cpu": [
-				"x64"
-			],
-			"dev": true,
-			"license": "Apache-2.0 AND MIT",
-			"optional": true,
-			"os": [
-				"win32"
-			],
-			"peer": true,
-			"engines": {
-				"node": ">=10"
-			}
-		},
-		"node_modules/@swc/core/node_modules/@swc/types": {
-			"version": "0.1.7",
-			"resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.7.tgz",
-			"integrity": "sha512-scHWahbHF0eyj3JsxG9CFJgFdFNaVQCNAimBlT6PzS3n/HptxqREjsm4OH6AN3lYcffZYSPxXW8ua2BEHp0lJQ==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@swc/counter": "^0.1.3"
-			}
-		},
-		"node_modules/@swc/counter": {
-			"version": "0.1.3",
-			"resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
-			"integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"optional": true,
-			"peer": true
-		},
 		"node_modules/@swc/helpers": {
 			"version": "0.5.17",
 			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
@@ -14878,18 +14186,6 @@
 				"tslib": "^2.8.0"
 			}
 		},
-		"node_modules/@swc/types": {
-			"version": "0.1.21",
-			"resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.21.tgz",
-			"integrity": "sha512-2YEtj5HJVbKivud9N4bpPBAyZhj4S2Ipe5LkUG94alTpr7in/GU/EARgPAd3BwU+YOmFVJC2+kjqhGRi3r0ZpQ==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@swc/counter": "^0.1.3"
-			}
-		},
 		"node_modules/@szmarczak/http-timer": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-5.0.1.tgz",
@@ -16742,17 +16038,17 @@
 			}
 		},
 		"node_modules/@typescript-eslint/parser": {
-			"version": "8.31.0",
-			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.31.0.tgz",
-			"integrity": "sha512-67kYYShjBR0jNI5vsf/c3WG4u+zDnCTHTPqVMQguffaWWFs7artgwKmfwdifl+r6XyM5LYLas/dInj2T0SgJyw==",
+			"version": "8.46.2",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.46.2.tgz",
+			"integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
 			"dev": true,
 			"license": "MIT",
 			"peer": true,
 			"dependencies": {
-				"@typescript-eslint/scope-manager": "8.31.0",
-				"@typescript-eslint/types": "8.31.0",
-				"@typescript-eslint/typescript-estree": "8.31.0",
-				"@typescript-eslint/visitor-keys": "8.31.0",
+				"@typescript-eslint/scope-manager": "8.46.2",
+				"@typescript-eslint/types": "8.46.2",
+				"@typescript-eslint/typescript-estree": "8.46.2",
+				"@typescript-eslint/visitor-keys": "8.46.2",
 				"debug": "^4.3.4"
 			},
 			"engines": {
@@ -16764,7 +16060,177 @@
 			},
 			"peerDependencies": {
 				"eslint": "^8.57.0 || ^9.0.0",
-				"typescript": ">=4.8.4 <5.9.0"
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
+			"version": "8.46.2",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.46.2.tgz",
+			"integrity": "sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@typescript-eslint/types": "8.46.2",
+				"@typescript-eslint/visitor-keys": "8.46.2"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
+			"version": "8.46.2",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.2.tgz",
+			"integrity": "sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
+			"version": "8.46.2",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.46.2.tgz",
+			"integrity": "sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@typescript-eslint/project-service": "8.46.2",
+				"@typescript-eslint/tsconfig-utils": "8.46.2",
+				"@typescript-eslint/types": "8.46.2",
+				"@typescript-eslint/visitor-keys": "8.46.2",
+				"debug": "^4.3.4",
+				"fast-glob": "^3.3.2",
+				"is-glob": "^4.0.3",
+				"minimatch": "^9.0.4",
+				"semver": "^7.6.0",
+				"ts-api-utils": "^2.1.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
+			"version": "8.46.2",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.46.2.tgz",
+			"integrity": "sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@typescript-eslint/types": "8.46.2",
+				"eslint-visitor-keys": "^4.2.1"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/parser/node_modules/eslint-visitor-keys": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+			"integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"peer": true,
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/parser/node_modules/fast-glob": {
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+			"integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.8"
+			},
+			"engines": {
+				"node": ">=8.6.0"
+			}
+		},
+		"node_modules/@typescript-eslint/parser/node_modules/minimatch": {
+			"version": "9.0.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+			"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+			"dev": true,
+			"license": "ISC",
+			"peer": true,
+			"dependencies": {
+				"brace-expansion": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@typescript-eslint/project-service": {
+			"version": "8.46.2",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.46.2.tgz",
+			"integrity": "sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"@typescript-eslint/tsconfig-utils": "^8.46.2",
+				"@typescript-eslint/types": "^8.46.2",
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/project-service/node_modules/@typescript-eslint/types": {
+			"version": "8.46.2",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.46.2.tgz",
+			"integrity": "sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
 			}
 		},
 		"node_modules/@typescript-eslint/scope-manager": {
@@ -16785,6 +16251,24 @@
 				"url": "https://opencollective.com/typescript-eslint"
 			}
 		},
+		"node_modules/@typescript-eslint/tsconfig-utils": {
+			"version": "8.46.2",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.46.2.tgz",
+			"integrity": "sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==",
+			"dev": true,
+			"license": "MIT",
+			"peer": true,
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.8.4 <6.0.0"
+			}
+		},
 		"node_modules/@typescript-eslint/type-utils": {
 			"version": "8.31.0",
 			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.31.0.tgz",
@@ -17101,30 +16585,6 @@
 				"url": "https://opencollective.com/vitest"
 			}
 		},
-		"node_modules/@vitest/ui": {
-			"version": "2.1.9",
-			"resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-2.1.9.tgz",
-			"integrity": "sha512-izzd2zmnk8Nl5ECYkW27328RbQ1nKvkm6Bb5DAaz1Gk59EbLkiCMa6OLT0NoaAYTjOFS6N+SMYW1nh4/9ljPiw==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@vitest/utils": "2.1.9",
-				"fflate": "^0.8.2",
-				"flatted": "^3.3.1",
-				"pathe": "^1.1.2",
-				"sirv": "^3.0.0",
-				"tinyglobby": "^0.2.10",
-				"tinyrainbow": "^1.2.0"
-			},
-			"funding": {
-				"url": "https://opencollective.com/vitest"
-			},
-			"peerDependencies": {
-				"vitest": "2.1.9"
-			}
-		},
 		"node_modules/@vitest/utils": {
 			"version": "2.1.9",
 			"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.9.tgz",
@@ -17481,6 +16941,28 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@wordpress/api-fetch/node_modules/@wordpress/i18n": {
+			"version": "5.26.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-5.26.0.tgz",
+			"integrity": "sha512-YHzaUWlCuN2ynl47qbsdMkTGtP52+E1giDOdWBgUaSexUYjbeFxKFUzRMB0Wuh1psL80+VzvJOH/mU440KAJnA==",
+			"dev": true,
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/hooks": "^4.26.0",
+				"gettext-parser": "^1.3.1",
+				"memize": "^2.1.0",
+				"sprintf-js": "^1.1.1",
+				"tannin": "^1.2.0"
+			},
+			"bin": {
+				"pot-to-php": "tools/pot-to-php.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
 		"node_modules/@wordpress/autop": {
 			"version": "4.22.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/autop/-/autop-4.22.0.tgz",
@@ -17714,6 +17196,28 @@
 				"react-dom": "^18.0.0"
 			}
 		},
+		"node_modules/@wordpress/block-editor/node_modules/@wordpress/i18n": {
+			"version": "5.26.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-5.26.0.tgz",
+			"integrity": "sha512-YHzaUWlCuN2ynl47qbsdMkTGtP52+E1giDOdWBgUaSexUYjbeFxKFUzRMB0Wuh1psL80+VzvJOH/mU440KAJnA==",
+			"dev": true,
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/hooks": "^4.26.0",
+				"gettext-parser": "^1.3.1",
+				"memize": "^2.1.0",
+				"sprintf-js": "^1.1.1",
+				"tannin": "^1.2.0"
+			},
+			"bin": {
+				"pot-to-php": "tools/pot-to-php.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
 		"node_modules/@wordpress/block-editor/node_modules/@wordpress/keycodes": {
 			"version": "4.22.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-4.22.0.tgz",
@@ -18004,6 +17508,28 @@
 				"npm": ">=8.19.2"
 			}
 		},
+		"node_modules/@wordpress/commands/node_modules/@wordpress/i18n": {
+			"version": "5.26.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-5.26.0.tgz",
+			"integrity": "sha512-YHzaUWlCuN2ynl47qbsdMkTGtP52+E1giDOdWBgUaSexUYjbeFxKFUzRMB0Wuh1psL80+VzvJOH/mU440KAJnA==",
+			"dev": true,
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/hooks": "^4.26.0",
+				"gettext-parser": "^1.3.1",
+				"memize": "^2.1.0",
+				"sprintf-js": "^1.1.1",
+				"tannin": "^1.2.0"
+			},
+			"bin": {
+				"pot-to-php": "tools/pot-to-php.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
 		"node_modules/@wordpress/commands/node_modules/@wordpress/keycodes": {
 			"version": "4.22.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-4.22.0.tgz",
@@ -18546,6 +18072,27 @@
 				"npm": ">=8.19.2"
 			}
 		},
+		"node_modules/@wordpress/dataviews/node_modules/@wordpress/i18n": {
+			"version": "5.26.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-5.26.0.tgz",
+			"integrity": "sha512-YHzaUWlCuN2ynl47qbsdMkTGtP52+E1giDOdWBgUaSexUYjbeFxKFUzRMB0Wuh1psL80+VzvJOH/mU440KAJnA==",
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/hooks": "^4.26.0",
+				"gettext-parser": "^1.3.1",
+				"memize": "^2.1.0",
+				"sprintf-js": "^1.1.1",
+				"tannin": "^1.2.0"
+			},
+			"bin": {
+				"pot-to-php": "tools/pot-to-php.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
 		"node_modules/@wordpress/dataviews/node_modules/clsx": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -18757,13 +18304,14 @@
 			}
 		},
 		"node_modules/@wordpress/i18n": {
-			"version": "5.26.0",
-			"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-5.26.0.tgz",
-			"integrity": "sha512-YHzaUWlCuN2ynl47qbsdMkTGtP52+E1giDOdWBgUaSexUYjbeFxKFUzRMB0Wuh1psL80+VzvJOH/mU440KAJnA==",
+			"version": "5.4.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-5.4.0.tgz",
+			"integrity": "sha512-nU4vpcBn5X+O/lUw2zhg44iTxh3smmBT6wLDFigGXpBKcVjJjlhVkwWLqpP/ZIc+mfhplgu4TJcTSbHyKsQLgg==",
+			"dev": true,
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"@babel/runtime": "7.25.7",
-				"@wordpress/hooks": "^4.26.0",
+				"@babel/runtime": "^7.16.0",
+				"@wordpress/hooks": "^4.4.0",
 				"gettext-parser": "^1.3.1",
 				"memize": "^2.1.0",
 				"sprintf-js": "^1.1.1",
@@ -18777,18 +18325,6 @@
 				"npm": ">=8.19.2"
 			}
 		},
-		"node_modules/@wordpress/i18n/node_modules/@babel/runtime": {
-			"version": "7.25.7",
-			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz",
-			"integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==",
-			"license": "MIT",
-			"dependencies": {
-				"regenerator-runtime": "^0.14.0"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
 		"node_modules/@wordpress/icons": {
 			"version": "10.31.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-10.31.0.tgz",
@@ -18946,6 +18482,28 @@
 				"npm": ">=8.19.2"
 			}
 		},
+		"node_modules/@wordpress/keyboard-shortcuts/node_modules/@wordpress/i18n": {
+			"version": "5.26.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-5.26.0.tgz",
+			"integrity": "sha512-YHzaUWlCuN2ynl47qbsdMkTGtP52+E1giDOdWBgUaSexUYjbeFxKFUzRMB0Wuh1psL80+VzvJOH/mU440KAJnA==",
+			"dev": true,
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/hooks": "^4.26.0",
+				"gettext-parser": "^1.3.1",
+				"memize": "^2.1.0",
+				"sprintf-js": "^1.1.1",
+				"tannin": "^1.2.0"
+			},
+			"bin": {
+				"pot-to-php": "tools/pot-to-php.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
 		"node_modules/@wordpress/keyboard-shortcuts/node_modules/@wordpress/keycodes": {
 			"version": "4.22.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-4.22.0.tgz",
@@ -19221,6 +18779,28 @@
 				"npm": ">=8.19.2"
 			}
 		},
+		"node_modules/@wordpress/preferences/node_modules/@wordpress/i18n": {
+			"version": "5.26.0",
+			"resolved": "https://registry.npmjs.org/@wordpress/i18n/-/i18n-5.26.0.tgz",
+			"integrity": "sha512-YHzaUWlCuN2ynl47qbsdMkTGtP52+E1giDOdWBgUaSexUYjbeFxKFUzRMB0Wuh1psL80+VzvJOH/mU440KAJnA==",
+			"dev": true,
+			"license": "GPL-2.0-or-later",
+			"dependencies": {
+				"@babel/runtime": "7.25.7",
+				"@wordpress/hooks": "^4.26.0",
+				"gettext-parser": "^1.3.1",
+				"memize": "^2.1.0",
+				"sprintf-js": "^1.1.1",
+				"tannin": "^1.2.0"
+			},
+			"bin": {
+				"pot-to-php": "tools/pot-to-php.js"
+			},
+			"engines": {
+				"node": ">=18.12.0",
+				"npm": ">=8.19.2"
+			}
+		},
 		"node_modules/@wordpress/preferences/node_modules/@wordpress/keycodes": {
 			"version": "4.22.0",
 			"resolved": "https://registry.npmjs.org/@wordpress/keycodes/-/keycodes-4.22.0.tgz",
@@ -23329,21 +22909,6 @@
 				"node": ">= 0.8"
 			}
 		},
-		"node_modules/copy-anything": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
-			"integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"is-what": "^3.14.1"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/mesqueeb"
-			}
-		},
 		"node_modules/copy-text-to-clipboard": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz",
@@ -24833,21 +24398,6 @@
 				"node": ">=4"
 			}
 		},
-		"node_modules/detect-libc": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
-			"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"detect-libc": "bin/detect-libc.js"
-			},
-			"engines": {
-				"node": ">=0.10"
-			}
-		},
 		"node_modules/detect-newline": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@@ -25470,21 +25020,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/errno": {
-			"version": "0.1.8",
-			"resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-			"integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"prr": "~1.0.1"
-			},
-			"bin": {
-				"errno": "cli.js"
-			}
-		},
 		"node_modules/error-ex": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -27092,15 +26627,6 @@
 				"node": ">=0.4.0"
 			}
 		},
-		"node_modules/fflate": {
-			"version": "0.8.2",
-			"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
-			"integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true
-		},
 		"node_modules/figures": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -29673,15 +29199,6 @@
 				"url": "https://opencollective.com/immer"
 			}
 		},
-		"node_modules/immutable": {
-			"version": "5.1.1",
-			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.1.tgz",
-			"integrity": "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true
-		},
 		"node_modules/import-fresh": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -30808,15 +30325,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/is-what": {
-			"version": "3.14.1",
-			"resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
-			"integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true
-		},
 		"node_modules/is-windows": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -33471,25 +32979,6 @@
 				"tao": "index.js"
 			}
 		},
-		"node_modules/lerna/node_modules/@parcel/watcher": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.0.4.tgz",
-			"integrity": "sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==",
-			"dev": true,
-			"hasInstallScript": true,
-			"license": "MIT",
-			"dependencies": {
-				"node-addon-api": "^3.2.1",
-				"node-gyp-build": "^4.3.0"
-			},
-			"engines": {
-				"node": ">= 10.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/parcel"
-			}
-		},
 		"node_modules/lerna/node_modules/@zkochan/js-yaml": {
 			"version": "0.0.6",
 			"resolved": "https://registry.npmjs.org/@zkochan/js-yaml/-/js-yaml-0.0.6.tgz",
@@ -33738,13 +33227,6 @@
 				"node": "*"
 			}
 		},
-		"node_modules/lerna/node_modules/node-addon-api": {
-			"version": "3.2.1",
-			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
-			"integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
-			"dev": true,
-			"license": "MIT"
-		},
 		"node_modules/lerna/node_modules/npm-package-arg": {
 			"version": "8.1.1",
 			"resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.1.1.tgz",
@@ -34035,117 +33517,6 @@
 				"node": ">=10"
 			}
 		},
-		"node_modules/less": {
-			"version": "4.1.3",
-			"resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
-			"integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
-			"dev": true,
-			"license": "Apache-2.0",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"copy-anything": "^2.0.1",
-				"parse-node-version": "^1.0.1",
-				"tslib": "^2.3.0"
-			},
-			"bin": {
-				"lessc": "bin/lessc"
-			},
-			"engines": {
-				"node": ">=6"
-			},
-			"optionalDependencies": {
-				"errno": "^0.1.1",
-				"graceful-fs": "^4.1.2",
-				"image-size": "~0.5.0",
-				"make-dir": "^2.1.0",
-				"mime": "^1.4.1",
-				"needle": "^3.1.0",
-				"source-map": "~0.6.0"
-			}
-		},
-		"node_modules/less/node_modules/image-size": {
-			"version": "0.5.5",
-			"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
-			"integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"image-size": "bin/image-size.js"
-			},
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
-		"node_modules/less/node_modules/make-dir": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-			"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"pify": "^4.0.1",
-				"semver": "^5.6.0"
-			},
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/less/node_modules/mime": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-			"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"mime": "cli.js"
-			},
-			"engines": {
-				"node": ">=4"
-			}
-		},
-		"node_modules/less/node_modules/pify": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-			"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/less/node_modules/semver": {
-			"version": "5.7.2",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-			"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-			"dev": true,
-			"license": "ISC",
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"semver": "bin/semver"
-			}
-		},
-		"node_modules/less/node_modules/source-map": {
-			"version": "0.6.1",
-			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-			"dev": true,
-			"license": "BSD-3-Clause",
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
 		"node_modules/leven": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -38570,40 +37941,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/needle": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
-			"integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"iconv-lite": "^0.6.3",
-				"sax": "^1.2.4"
-			},
-			"bin": {
-				"needle": "bin/needle"
-			},
-			"engines": {
-				"node": ">= 4.4.x"
-			}
-		},
-		"node_modules/needle/node_modules/iconv-lite": {
-			"version": "0.6.3",
-			"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-			"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"safer-buffer": ">= 2.1.2 < 3.0.0"
-			},
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
 		"node_modules/negotiator": {
 			"version": "0.6.3",
 			"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -38644,13 +37981,11 @@
 			}
 		},
 		"node_modules/node-addon-api": {
-			"version": "7.1.1",
-			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
-			"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-3.2.1.tgz",
+			"integrity": "sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==",
 			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true
+			"license": "MIT"
 		},
 		"node_modules/node-emoji": {
 			"version": "2.2.0",
@@ -40796,18 +40131,6 @@
 			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
 			"license": "MIT"
 		},
-		"node_modules/parse-node-version": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
-			"integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">= 0.10"
-			}
-		},
 		"node_modules/parse-numeric-range": {
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
@@ -43105,15 +42428,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/prr": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-			"integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true
-		},
 		"node_modules/ps-man": {
 			"version": "1.1.8",
 			"resolved": "https://registry.npmjs.org/ps-man/-/ps-man-1.1.8.tgz",
@@ -45983,63 +45297,6 @@
 			"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
 			"license": "MIT"
 		},
-		"node_modules/sass": {
-			"version": "1.86.3",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.86.3.tgz",
-			"integrity": "sha512-iGtg8kus4GrsGLRDLRBRHY9dNVA78ZaS7xr01cWnS7PEMQyFtTqBiyCrfpTYTZXRWM94akzckYjh8oADfFNTzw==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"chokidar": "^4.0.0",
-				"immutable": "^5.0.2",
-				"source-map-js": ">=0.6.2 <2.0.0"
-			},
-			"bin": {
-				"sass": "sass.js"
-			},
-			"engines": {
-				"node": ">=14.0.0"
-			},
-			"optionalDependencies": {
-				"@parcel/watcher": "^2.4.1"
-			}
-		},
-		"node_modules/sass/node_modules/chokidar": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"readdirp": "^4.0.1"
-			},
-			"engines": {
-				"node": ">= 14.16.0"
-			},
-			"funding": {
-				"url": "https://paulmillr.com/funding/"
-			}
-		},
-		"node_modules/sass/node_modules/readdirp": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-			"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"engines": {
-				"node": ">= 14.18.0"
-			},
-			"funding": {
-				"type": "individual",
-				"url": "https://paulmillr.com/funding/"
-			}
-		},
 		"node_modules/sax": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
@@ -47226,23 +46483,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/sirv": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.1.tgz",
-			"integrity": "sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@polka/url": "^1.0.0-next.24",
-				"mrmime": "^2.0.0",
-				"totalist": "^3.0.0"
-			},
-			"engines": {
-				"node": ">=18"
-			}
-		},
 		"node_modules/sisteransi": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -48229,92 +47469,6 @@
 			"integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
 			"license": "MIT"
 		},
-		"node_modules/stylus": {
-			"version": "0.59.0",
-			"resolved": "https://registry.npmjs.org/stylus/-/stylus-0.59.0.tgz",
-			"integrity": "sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"@adobe/css-tools": "^4.0.1",
-				"debug": "^4.3.2",
-				"glob": "^7.1.6",
-				"sax": "~1.2.4",
-				"source-map": "^0.7.3"
-			},
-			"bin": {
-				"stylus": "bin/stylus"
-			},
-			"engines": {
-				"node": "*"
-			},
-			"funding": {
-				"url": "https://opencollective.com/stylus"
-			}
-		},
-		"node_modules/stylus/node_modules/brace-expansion": {
-			"version": "1.1.11",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"dev": true,
-			"license": "MIT",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"balanced-match": "^1.0.0",
-				"concat-map": "0.0.1"
-			}
-		},
-		"node_modules/stylus/node_modules/glob": {
-			"version": "7.2.3",
-			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-			"deprecated": "Glob versions prior to v9 are no longer supported",
-			"dev": true,
-			"license": "ISC",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"fs.realpath": "^1.0.0",
-				"inflight": "^1.0.4",
-				"inherits": "2",
-				"minimatch": "^3.1.1",
-				"once": "^1.3.0",
-				"path-is-absolute": "^1.0.0"
-			},
-			"engines": {
-				"node": "*"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
-		"node_modules/stylus/node_modules/minimatch": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"dev": true,
-			"license": "ISC",
-			"optional": true,
-			"peer": true,
-			"dependencies": {
-				"brace-expansion": "^1.1.7"
-			},
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/stylus/node_modules/sax": {
-			"version": "1.2.4",
-			"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-			"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-			"dev": true,
-			"license": "ISC",
-			"optional": true,
-			"peer": true
-		},
 		"node_modules/sucrase": {
 			"version": "3.35.0",
 			"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
diff --git a/package.json b/package.json
index 0c1f2b86a5..cfbb773971 100644
--- a/package.json
+++ b/package.json
@@ -150,6 +150,7 @@
 		"@wordpress/core-data": "7.4.0",
 		"@wordpress/data": "10.4.0",
 		"@wordpress/element": "6.4.0",
+		"@wordpress/i18n": "5.4.0",
 		"@wordpress/notices": "5.4.0",
 		"chalk": "5.2.0",
 		"clsx": "^1.2.1",
diff --git a/packages/playground/website/src/components/address-bar/index.tsx b/packages/playground/website/src/components/address-bar/index.tsx
index 01d1d56181..2476019979 100644
--- a/packages/playground/website/src/components/address-bar/index.tsx
+++ b/packages/playground/website/src/components/address-bar/index.tsx
@@ -1,11 +1,13 @@
 import React, { useCallback } from 'react';
 import css from './style.module.css';
+import { useI18n } from '../../lib/i18n';
 
 interface AddressBarProps {
 	url?: string;
 	onUpdate?: (url: string) => void;
 }
 export default function AddressBar({ url, onUpdate }: AddressBarProps) {
+	const { __ } = useI18n();
 	const input = React.useRef<HTMLInputElement>(null);
 	const [value, setValue] = React.useState(url || '');
 	const [isFocused, setIsFocused] = React.useState(false);
@@ -38,7 +40,9 @@ export default function AddressBar({ url, onUpdate }: AddressBarProps) {
 					onBlur={() => setIsFocused(false)}
 					name="url"
 					type="text"
-					aria-label='URL to visit in the WordPress site, like"/wp-admin"'
+					aria-label={__(
+						'URL to visit in the WordPress site, like"/wp-admin"'
+					)}
 					autoComplete="off"
 				/>
 			</div>
diff --git a/packages/playground/website/src/components/browser-chrome/index.tsx b/packages/playground/website/src/components/browser-chrome/index.tsx
index df7b3514ab..676fc9e58a 100644
--- a/packages/playground/website/src/components/browser-chrome/index.tsx
+++ b/packages/playground/website/src/components/browser-chrome/index.tsx
@@ -1,8 +1,22 @@
+/**
+ * External dependencies
+ */
 import React from 'react';
-import css from './style.module.css';
-import AddressBar from '../address-bar';
 import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
 import { useMediaQuery } from '@wordpress/compose';
+import { Dropdown, Icon } from '@wordpress/components';
+import { cog } from '@wordpress/icons';
+import { SiteManagerIcon } from '@wp-playground/components';
+
+/**
+ * Internal dependencies
+ */
+import css from './style.module.css';
+import AddressBar from '../address-bar';
 import {
 	useAppSelector,
 	getActiveClientInfo,
@@ -10,13 +24,11 @@ import {
 	useAppDispatch,
 } from '../../lib/state/redux/store';
 import { SyncLocalFilesButton } from '../sync-local-files-button';
-import { Dropdown, Icon } from '@wordpress/components';
 import { Modal } from '../../components/modal';
-import { cog } from '@wordpress/icons';
 import Button from '../button';
 import { ActiveSiteSettingsForm } from '../site-manager/site-settings-form';
 import { setSiteManagerOpen } from '../../lib/state/redux/slice-ui';
-import { SiteManagerIcon } from '@wp-playground/components';
+import { useI18n } from '../../lib/i18n';
 
 interface BrowserChromeProps {
 	children?: React.ReactNode;
@@ -27,6 +39,7 @@ export default function BrowserChrome({
 	children,
 	className,
 }: BrowserChromeProps) {
+	const { __ } = useI18n();
 	const clientInfo = useAppSelector(getActiveClientInfo);
 	const activeSite = useActiveSite();
 	const showAddressBar = !!clientInfo;
@@ -55,7 +68,7 @@ export default function BrowserChrome({
 					className={classNames(css.toolbar, {
 						[css.withSidebarOpen]: siteManagerIsOpen,
 					})}
-					aria-label="Playground toolbar"
+					aria-label={__('Playground toolbar')}
 				>
 					<div className={addressBarClass}>
 						<AddressBar
@@ -71,8 +84,8 @@ export default function BrowserChrome({
 							variant="browser-chrome"
 							aria-label={
 								siteManagerIsOpen
-									? 'Close Site Manager'
-									: 'Open Site Manager'
+									? __('Close Site Manager')
+									: __('Open Site Manager')
 							}
 							aria-pressed={siteManagerIsOpen}
 							className={classNames(css.openSiteManagerButton, {
@@ -94,7 +107,7 @@ export default function BrowserChrome({
 							<>
 								<Button
 									variant="browser-chrome"
-									aria-label="Edit Playground settings"
+									aria-label={__('Edit Playground settings')}
 									onClick={onToggle}
 									aria-expanded={isModalOpen}
 									style={{
@@ -108,7 +121,7 @@ export default function BrowserChrome({
 								{isModalOpen && (
 									<Modal
 										isFullScreen={true}
-										title="Playground settings"
+										title={__('Playground settings')}
 										onRequestClose={closeModal}
 									>
 										<ActiveSiteSettingsForm
@@ -125,7 +138,9 @@ export default function BrowserChrome({
 								renderToggle={({ isOpen, onToggle }) => (
 									<Button
 										variant="browser-chrome"
-										aria-label="Edit Playground settings"
+										aria-label={__(
+											'Edit Playground settings'
+										)}
 										onClick={onToggle}
 										aria-expanded={isOpen}
 										style={{
@@ -147,7 +162,7 @@ export default function BrowserChrome({
 									>
 										<div className={css.headerSection}>
 											<h2 style={{ margin: 0 }}>
-												Playground settings
+												{__('Playground settings')}
 											</h2>
 										</div>
 										<ActiveSiteSettingsForm
diff --git a/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx b/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx
index aea36cef8f..a925730a8f 100644
--- a/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx
+++ b/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx
@@ -20,6 +20,7 @@ import { modalSlugs } from '../layout';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import { selectClientBySiteSlug } from '../../lib/state/redux/slice-clients';
 import { randomSiteName } from '../../lib/state/redux/random-site-name';
+import { useI18n } from '../../lib/i18n';
 
 /**
  * Ensures the redux store always has an activeSite value.
@@ -34,6 +35,7 @@ export function EnsurePlaygroundSiteIsSelected({
 }: {
 	children: React.ReactNode;
 }) {
+	const { __ } = useI18n();
 	const siteListingStatus = useAppSelector(
 		(state) => state.sites.opfsSitesLoadingState
 	);
@@ -58,14 +60,14 @@ export function EnsurePlaygroundSiteIsSelected({
 
 	useEffect(() => {
 		if (!opfsSiteStorage) {
-			logger.error('Error loading sites: OPFS not available');
+			logger.error(__('Error loading sites: OPFS not available'));
 			dispatch(OPFSSitesLoaded([]));
 			return;
 		}
 		opfsSiteStorage.list().then(
 			(sites) => dispatch(OPFSSitesLoaded(sites)),
 			(error) => {
-				logger.error('Error loading sites:', error);
+				logger.error(__('Error loading sites:'), error);
 				dispatch(OPFSSitesLoaded([]));
 			}
 		);
@@ -87,7 +89,9 @@ export function EnsurePlaygroundSiteIsSelected({
 				if (!requestedSiteObject) {
 					if (promptIfSiteMissing) {
 						logger.log(
-							'The requested site was not found. Creating a new temporary site.'
+							__(
+								'The requested site was not found. Creating a new temporary site.'
+							)
 						);
 
 						await createNewTemporarySite(
@@ -99,7 +103,9 @@ export function EnsurePlaygroundSiteIsSelected({
 					} else {
 						// @TODO: Notification: 'The requested site was not found. Redirecting to a new temporary site.'
 						logger.log(
-							'The requested site was not found. Redirecting to a new temporary site.'
+							__(
+								'The requested site was not found. Redirecting to a new temporary site.'
+							)
 						);
 						const currentUrl = new URL(window.location.href);
 						currentUrl.searchParams.delete('site-slug');
diff --git a/packages/playground/website/src/components/error-report-modal/index.tsx b/packages/playground/website/src/components/error-report-modal/index.tsx
index 4b56e7cef6..4d9d6a9f5a 100644
--- a/packages/playground/website/src/components/error-report-modal/index.tsx
+++ b/packages/playground/website/src/components/error-report-modal/index.tsx
@@ -11,8 +11,10 @@ import { useAppSelector } from '../../lib/state/redux/store';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import { Modal } from '../../components/modal';
 import ModalButtons from '../modal/modal-buttons';
+import { useI18n } from '../../lib/i18n';
 
 export function ErrorReportModal(props: { blueprint: BlueprintV1Declaration }) {
+	const { __ } = useI18n();
 	const activeModal = useAppSelector(
 		(state: PlaygroundReduxState) => state.ui.activeModal
 	);
@@ -97,11 +99,11 @@ export function ErrorReportModal(props: { blueprint: BlueprintV1Declaration }) {
 
 	function getTitle() {
 		if (!submitted) {
-			return 'Report error';
+			return __('Report error');
 		} else if (submitError) {
-			return 'Failed to report the error';
+			return __('Failed to report the error');
 		} else {
-			return 'Thank you for reporting the error';
+			return __('Thank you for reporting the error');
 		}
 	}
 
@@ -109,36 +111,38 @@ export function ErrorReportModal(props: { blueprint: BlueprintV1Declaration }) {
 		if (!submitted) {
 			return (
 				<>
-					Playground crashed because of an error. You can help resolve
-					the issue by sharing the error details with us.
+					{__(
+						'Playground crashed because of an error. You can help resolve the issue by sharing the error details with us.'
+					)}
 				</>
 			);
 		} else if (submitError) {
 			return (
 				<>
-					We were unable to submit the error report. Please try again
-					or open an{' '}
+					{__(
+						'We were unable to submit the error report. Please try again or open an '
+					)}
 					<a
 						href="https://github.com/WordPress/wordpress-playground/issues/"
 						target="_blank"
 						rel="noopener noreferrer"
 					>
-						issue on GitHub.
+						{__('issue on GitHub.')}
 					</a>
 				</>
 			);
 		} else {
 			return (
 				<>
-					Your report has been submitted to the{' '}
+					{__('Your report has been submitted to the ')}
 					<a
 						href="https://wordpress.slack.com/archives/C06Q5DCKZ3L"
 						target="_blank"
 						rel="noopener noreferrer"
 					>
-						Making WordPress #playground-logs Slack channel
-					</a>{' '}
-					and will be reviewed by the team.
+						{__('Making WordPress #playground-logs Slack channel')}
+					</a>
+					{__(' and will be reviewed by the team.')}
 				</>
 			);
 		}
@@ -160,19 +164,25 @@ export function ErrorReportModal(props: { blueprint: BlueprintV1Declaration }) {
 			{showForm() && (
 				<>
 					<TextareaControl
-						label="How can we recreate this error?"
-						help="Describe what caused the error and how can we recreate it."
+						label={__('How can we recreate this error?')}
+						help={__(
+							'Describe what caused the error and how can we recreate it.'
+						)}
 						value={text}
 						onChange={setText}
 						required={true}
 					/>
 					<TextareaControl
-						label="Logs"
+						label={__('Logs')}
 						value={logs}
 						onChange={setLogs}
 					/>
 
-					<TextControl label="Url" value={url} onChange={setUrl} />
+					<TextControl
+						label={__('Url')}
+						value={url}
+						onChange={setUrl}
+					/>
 
 					<ModalButtons
 						areBusy={loading}
diff --git a/packages/playground/website/src/components/import-form-modal/index.tsx b/packages/playground/website/src/components/import-form-modal/index.tsx
index 68ebe9d170..d21bc82458 100644
--- a/packages/playground/website/src/components/import-form-modal/index.tsx
+++ b/packages/playground/website/src/components/import-form-modal/index.tsx
@@ -5,8 +5,10 @@ import ImportForm from '../import-form/index';
 import { Modal } from '../../components/modal';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import type { PlaygroundDispatch } from '../../lib/state/redux/store';
+import { useI18n } from '../../lib/i18n';
 
 export const ImportFormModal = () => {
+	const { __ } = useI18n();
 	const playground = usePlaygroundClient();
 	const dispatch: PlaygroundDispatch = useDispatch();
 
@@ -16,7 +18,9 @@ export const ImportFormModal = () => {
 	function handleImported() {
 		// eslint-disable-next-line no-alert
 		alert(
-			'File imported! This Playground instance has been updated. Refreshing now.'
+			__(
+				'File imported! This Playground instance has been updated. Refreshing now.'
+			)
 		);
 		closeModal();
 		playground!.goTo('/');
@@ -24,11 +28,10 @@ export const ImportFormModal = () => {
 
 	return (
 		<Modal
-			title="Import Playground"
-			contentLabel='This is a dialog window which overlays the main content of the
-				page. The modal begins with a heading 2 called "Import
-				Playground". Pressing the Close Import Window will close
-				the modal and bring you back to where you were on the page.'
+			title={__('Import Playground')}
+			contentLabel={__(
+				'This is a dialog window which overlays the main content of the page. The modal begins with a heading 2 called "Import Playground". Pressing the Close Import Window will close the modal and bring you back to where you were on the page.'
+			)}
 			onRequestClose={closeModal}
 		>
 			<ImportForm
diff --git a/packages/playground/website/src/components/import-form/index.tsx b/packages/playground/website/src/components/import-form/index.tsx
index 730bc87fd0..9205e3eaf6 100644
--- a/packages/playground/website/src/components/import-form/index.tsx
+++ b/packages/playground/website/src/components/import-form/index.tsx
@@ -5,6 +5,7 @@ import { importWordPressFiles } from '@wp-playground/client';
 import forms from '../../forms.module.css';
 import { logger } from '@php-wasm/logger';
 import ModalButtons from '../modal/modal-buttons';
+import { useI18n } from '../../lib/i18n';
 
 interface ImportFormProps {
 	playground: PlaygroundClient;
@@ -17,6 +18,7 @@ export default function ImportForm({
 	onImported,
 	onClose,
 }: ImportFormProps) {
+	const { __ } = useI18n();
 	const fileInputRef = useRef<any>();
 	const [file, setFile] = useState<File | null>(null);
 	const [error, setError] = useState<string>('');
@@ -35,7 +37,9 @@ export default function ImportForm({
 		} catch (error) {
 			logger.error(error);
 			setError(
-				'Unable to import file. Is it a valid WordPress Playground export?'
+				__(
+					'Unable to import file. Is it a valid WordPress Playground export?'
+				)
 			);
 			return;
 		}
@@ -46,8 +50,9 @@ export default function ImportForm({
 	return (
 		<>
 			<p>
-				You may replace the current WordPress Playground site with a
-				previously exported one.
+				{__(
+					'You may replace the current WordPress Playground site with a previously exported one.'
+				)}
 			</p>
 			<div className={`${forms.formGroup} ${forms.formGroupLast}`}>
 				{error ? <div className={forms.error}>{error}</div> : null}
@@ -64,7 +69,7 @@ export default function ImportForm({
 				areDisabled={!file}
 				onCancel={onClose}
 				onSubmit={handleSubmit}
-				submitText="Import"
+				submitText={__('Import')}
 			/>
 		</>
 	);
diff --git a/packages/playground/website/src/components/log-modal/index.tsx b/packages/playground/website/src/components/log-modal/index.tsx
index 02ef4d06c8..6a7e93cd84 100644
--- a/packages/playground/website/src/components/log-modal/index.tsx
+++ b/packages/playground/website/src/components/log-modal/index.tsx
@@ -11,8 +11,10 @@ import type {
 } from '../../lib/state/redux/store';
 import { useDispatch, useSelector } from 'react-redux';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
+import { useI18n } from '../../lib/i18n';
 
 export function LogModal(props: { description?: JSX.Element; title?: string }) {
+	const { __ } = useI18n();
 	const activeModal = useSelector(
 		(state: PlaygroundReduxState) => state.ui.activeModal
 	);
@@ -23,7 +25,7 @@ export function LogModal(props: { description?: JSX.Element; title?: string }) {
 	}
 
 	return (
-		<Modal title={props.title || 'Error Logs'} onRequestClose={onClose}>
+		<Modal title={props.title || __('Error Logs')} onRequestClose={onClose}>
 			<div>{props.description}</div>
 			<SiteLogs key={activeModal} className={css.logsInsideModal} />
 		</Modal>
@@ -31,6 +33,7 @@ export function LogModal(props: { description?: JSX.Element; title?: string }) {
 }
 
 export function SiteLogs({ className }: { className?: string }) {
+	const { __ } = useI18n();
 	const [logs, setLogs] = useState<string[]>([]);
 	const [searchTerm, setSearchTerm] = useState('');
 
@@ -67,8 +70,8 @@ export function SiteLogs({ className }: { className?: string }) {
 		<div className={classNames(css.logsComponent, className)}>
 			{logs.length > 0 ? (
 				<TextControl
-					aria-label="Search"
-					placeholder="Search logs"
+					aria-label={__('Search')}
+					placeholder={__('Search logs')}
 					value={searchTerm}
 					onChange={setSearchTerm}
 					autoFocus={true}
@@ -80,15 +83,16 @@ export function SiteLogs({ className }: { className?: string }) {
 					<main className={css.logList}>{logList()}</main>
 				) : logs.length > 0 ? (
 					<div className={css.logEmptyPlaceholder}>
-						No matching logs found.
+						{__('No matching logs found.')}
 					</div>
 				) : (
 					<div>
-						Error logs for Playground, WordPress, and PHP will show
-						up here when something goes wrong.
+						{__(
+							'Error logs for Playground, WordPress, and PHP will show up here when something goes wrong.'
+						)}
 						<br />
 						<br />
-						No problems so far – yay! 🎉
+						{__('No problems so far – yay! 🎉')}
 					</div>
 				)}
 			</div>
diff --git a/packages/playground/website/src/components/missing-site-modal/index.tsx b/packages/playground/website/src/components/missing-site-modal/index.tsx
index af7b57ff02..9d87c2584d 100644
--- a/packages/playground/website/src/components/missing-site-modal/index.tsx
+++ b/packages/playground/website/src/components/missing-site-modal/index.tsx
@@ -8,8 +8,10 @@ import {
 } from '../../lib/state/redux/store';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import { selectClientInfoBySiteSlug } from '../../lib/state/redux/slice-clients';
+import { useI18n } from '../../lib/i18n';
 
 export function MissingSiteModal() {
+	const { __, sprintf } = useI18n();
 	const dispatch = useAppDispatch();
 	const closeModal = () => dispatch(setActiveModal(null));
 
@@ -27,24 +29,28 @@ export function MissingSiteModal() {
 		return null;
 	}
 
-	// TODO: Improve language for this modal
 	return (
 		<Modal
-			title="Save to browser storage?"
-			contentLabel="This is a dialog window which overlays the main content of the
-				page. It offers the user a choice between using a temporary Playground
-				and a persistent Playground that is saved to browser storage."
+			title={__('Save to browser storage?')}
+			contentLabel={__(
+				'This is a dialog window which overlays the main content of the page. It offers the user a choice between using a temporary Playground and a persistent Playground that is saved to browser storage.'
+			)}
 			isDismissible={false}
 			shouldCloseOnClickOutside={false}
 			onRequestClose={closeModal}
 		>
 			<p>
-				The <b>{activeSite.metadata.name}</b> Playground does not exist,
-				so we loaded a temporary Playground instead.
+				{sprintf(
+					__(
+						'The %s Playground does not exist, so we loaded a temporary Playground instead.'
+					),
+					activeSite.metadata.name
+				)}
 			</p>
 			<p>
-				If you want to preserve your changes, you can save the
-				Playground to browser storage.
+				{__(
+					'If you want to preserve your changes, you can save the Playground to browser storage.'
+				)}
 			</p>
 			{/* Note: We are using row-reverse direction so the secondary
 				button can display first in row orientation and last when
@@ -66,7 +72,7 @@ export function MissingSiteModal() {
 						storage="opfs"
 					>
 						<Button variant="primary">
-							Save Playground to browser storage
+							{__('Save Playground to browser storage')}
 						</Button>
 					</SitePersistButton>
 				</FlexItem>
@@ -83,7 +89,7 @@ export function MissingSiteModal() {
 							closeModal();
 						}}
 					>
-						Keep using a temporary Playground
+						{__('Keep using a temporary Playground')}
 					</Button>
 				</FlexItem>
 			</Flex>
diff --git a/packages/playground/website/src/components/modal/modal-buttons.tsx b/packages/playground/website/src/components/modal/modal-buttons.tsx
index 8a2211b1f3..0729202b4d 100644
--- a/packages/playground/website/src/components/modal/modal-buttons.tsx
+++ b/packages/playground/website/src/components/modal/modal-buttons.tsx
@@ -1,5 +1,6 @@
 import { Button, Flex } from '@wordpress/components';
 import React from 'react';
+import { useI18n } from '../../lib/i18n';
 import css from './style.module.css';
 
 interface ModalButtonsProps {
@@ -11,13 +12,16 @@ interface ModalButtonsProps {
 	style?: React.CSSProperties;
 }
 export default function ModalButtons({
-	submitText = 'Submit',
+	submitText,
 	areDisabled = false,
 	areBusy,
 	onCancel,
 	onSubmit,
 	style,
 }: ModalButtonsProps) {
+	const { __ } = useI18n();
+	const defaultSubmitText = __('Submit');
+
 	return (
 		<Flex justify="end" className={css.modalButtons} style={style}>
 			<Button
@@ -27,7 +31,7 @@ export default function ModalButtons({
 				variant="link"
 				onClick={onCancel}
 			>
-				Cancel
+				{__('Cancel')}
 			</Button>
 			<Button
 				type="submit"
@@ -36,7 +40,7 @@ export default function ModalButtons({
 				variant="primary"
 				onClick={onSubmit}
 			>
-				{submitText}
+				{submitText || defaultSubmitText}
 			</Button>
 		</Flex>
 	);
diff --git a/packages/playground/website/src/components/offline-notice/index.tsx b/packages/playground/website/src/components/offline-notice/index.tsx
index c21b18fe63..a13515b5c6 100644
--- a/packages/playground/website/src/components/offline-notice/index.tsx
+++ b/packages/playground/website/src/components/offline-notice/index.tsx
@@ -1,14 +1,16 @@
 import { Notice } from '@wordpress/components';
 import css from './style.module.css';
+import { useI18n } from '../../lib/i18n';
 
 export function OfflineNotice() {
+	const { __ } = useI18n();
 	return (
 		<Notice
 			status="warning"
 			isDismissible={false}
 			className={css.offlineNotice}
 		>
-			Some features may not available because you are offline.
+			{__('Some features may not available because you are offline.')}
 		</Notice>
 	);
 }
diff --git a/packages/playground/website/src/components/playground-viewport/index.tsx b/packages/playground/website/src/components/playground-viewport/index.tsx
index 8d3eabca10..c5105eb904 100644
--- a/packages/playground/website/src/components/playground-viewport/index.tsx
+++ b/packages/playground/website/src/components/playground-viewport/index.tsx
@@ -19,6 +19,7 @@ import {
 	selectTemporarySites,
 } from '../../lib/state/redux/slice-sites';
 import classNames from 'classnames';
+import { useI18n } from '../../lib/i18n';
 
 export const supportedDisplayModes = [
 	'browser-full-screen',
@@ -108,6 +109,8 @@ export const KeepAliveTemporarySitesViewport = () => {
 	 * We're talking about maybe a 100 empty divs in an extreme scenario. That's nothing.
 	 */
 	const [slugsSeenSoFar, setSlugsSeenSoFar] = useState<string[]>([]);
+	const { __ } = useI18n();
+
 	useEffect(() => {
 		setSlugsSeenSoFar((prev) => [
 			...prev,
@@ -144,8 +147,9 @@ export const KeepAliveTemporarySitesViewport = () => {
 						>
 							<h2>No site is selected</h2>
 							<p>
-								Select a site from the site manager to explore
-								Playground.
+								{__(
+									'Select a site from the site manager to explore WordPress Playground.'
+								)}
 							</p>
 						</div>
 					</div>
@@ -176,6 +180,7 @@ export const JustViewport = function JustViewport({
 	const site = useAppSelector((state) => selectSiteBySlug(state, siteSlug))!;
 
 	const dispatch = useAppDispatch();
+	const { __ } = useI18n();
 	const runtimeConfigString = JSON.stringify(
 		site.metadata.runtimeConfiguration
 	);
@@ -214,7 +219,9 @@ export const JustViewport = function JustViewport({
 	return (
 		<iframe
 			key={siteSlug}
-			title="WordPress Playground wrapper (the actual WordPress site is in another, nested iframe)"
+			title={__(
+				'WordPress Playground wrapper (the actual WordPress site is in another, nested iframe)'
+			)}
 			className={classNames('playground-viewport', css.fullSize)}
 			ref={iframeRef}
 		/>
@@ -229,6 +236,8 @@ function SiteErrorMessage({
 	siteSlug: string;
 }) {
 	const dispatch = useAppDispatch();
+	const { __ } = useI18n();
+
 	if (
 		error === 'directory-handle-not-found-in-indexeddb' ||
 		error === 'directory-handle-permission-denied'
@@ -244,22 +253,22 @@ function SiteErrorMessage({
 		 */
 		return (
 			<>
-				<h1>Local directory permissions expired</h1>
+				<h1>{__('Local directory permissions expired')}</h1>
 				<p>
-					You previously granted WordPress Playground access to your
-					local directory, but the browser no longer allows Playground
-					to access it.
+					{__(
+						'You previously granted WordPress Playground access to your local directory, but the browser no longer allows Playground to access it.'
+					)}
 				</p>
 				<p>
-					There's no way to recover from this today. We are working on
-					a way of selecting the local directory again. Stay tuned,
-					and if you urgently need to work with this site, tell us at{' '}
+					{__(
+						"There's no way to recover from this today. We are working on a way of selecting the local directory again. Stay tuned, and if you urgently need to work with this site, tell us at "
+					)}
 					<a
 						target="_blank"
 						rel="noopener noreferrer"
 						href="https://github.com/WordPress/wordpress-playground/issues/1746"
 					>
-						GitHub
+						{__('GitHub')}
 					</a>
 					.
 				</p>
@@ -270,12 +279,13 @@ function SiteErrorMessage({
 	if (error === 'directory-handle-directory-does-not-exist') {
 		return (
 			<>
-				<h1>Local directory was deleted</h1>
+				<h1>{__('Local directory was deleted')}</h1>
 				<p>
-					It seems like you deleted the local directory you previously
-					selected.
+					{__(
+						'It seems like you deleted the local directory you previously selected.'
+					)}
 				</p>
-				<p>Unfortunately, this site won't work anymore.</p>
+				<p>{__("Unfortunately, this site won't work anymore.")}</p>
 				<Button
 					className={css.actionButton}
 					variant="primary"
@@ -284,7 +294,7 @@ function SiteErrorMessage({
 						dispatch(removeClientInfo(siteSlug));
 					}}
 				>
-					Delete this site and try again
+					{__('Delete this site and try again')}
 				</Button>
 			</>
 		);
@@ -293,15 +303,16 @@ function SiteErrorMessage({
 	if (error === 'github-artifact-expired') {
 		return (
 			<>
-				<h1>This artifact has expired</h1>
+				<h1>{__('This artifact has expired')}</h1>
 				<p>
-					The requested GitHub artifactis no longer available. GitHub
-					only serves PR build artifacts for a limited time.
+					{__(
+						'The requested GitHub artifactis no longer available. GitHub only serves PR build artifacts for a limited time.'
+					)}
 				</p>
 				<p>
-					If you want to preview that PR, you will need to re-run
-					GitHub workflows in that PR. One way to do that is by
-					pushing an empty commit.
+					{__(
+						'If you want to preview that PR, you will need to re-run GitHub workflows in that PR. One way to do that is by pushing an empty commit.'
+					)}
 				</p>
 				<Button
 					className={css.actionButton}
@@ -313,7 +324,7 @@ function SiteErrorMessage({
 						window.location.href = url.toString();
 					}}
 				>
-					Restart Playground without that PR
+					{__('Restart Playground without that PR')}
 				</Button>
 			</>
 		);
@@ -321,8 +332,12 @@ function SiteErrorMessage({
 
 	return (
 		<>
-			<h1>Something went wrong</h1>
-			<p>An error occurred while loading your site. Please try again.</p>
+			<h1>{__('Something went wrong')}</h1>
+			<p>
+				{__(
+					'An error occurred while loading your site. Please try again.'
+				)}
+			</p>
 			<Button
 				className={css.actionButton}
 				variant="primary"
@@ -330,7 +345,7 @@ function SiteErrorMessage({
 					window.location.reload();
 				}}
 			>
-				Reload the browser tab to try again
+				{__('Reload the browser tab to try again')}
 			</Button>
 		</>
 	);
diff --git a/packages/playground/website/src/components/rename-site-modal/index.tsx b/packages/playground/website/src/components/rename-site-modal/index.tsx
index c16f68db80..000a4e6570 100644
--- a/packages/playground/website/src/components/rename-site-modal/index.tsx
+++ b/packages/playground/website/src/components/rename-site-modal/index.tsx
@@ -5,8 +5,10 @@ import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import { updateSiteMetadata } from '../../lib/state/redux/slice-sites';
 import { Modal } from '../modal';
 import ModalButtons from '../modal/modal-buttons';
+import { useI18n } from '../../lib/i18n';
 
 export function RenameSiteModal() {
+	const { __ } = useI18n();
 	const dispatch = useAppDispatch();
 	const site = useAppSelector((state) =>
 		state.ui.activeSite?.slug
@@ -46,8 +48,10 @@ export function RenameSiteModal() {
 
 	return (
 		<Modal
-			title="Rename Playground"
-			contentLabel='This is a dialog window which overlays the main content of the page. The modal begins with a heading 2 called "Rename Playground". Pressing the Close button will close the modal and bring you back to where you were on the page.'
+			title={__('Rename Playground')}
+			contentLabel={__(
+				'This is a dialog window which overlays the main content of the page. The modal begins with a heading 2 called "Rename Playground". Pressing the Close button will close the modal and bring you back to where you were on the page.'
+			)}
 			onRequestClose={closeModal}
 			small
 		>
@@ -60,15 +64,15 @@ export function RenameSiteModal() {
 			>
 				<TextControl
 					__nextHasNoMarginBottom
-					label="Name"
+					label={__('Name')}
 					value={name}
 					onChange={(val: string) => setName(val)}
-					placeholder="e.g. Testing Gutenberg 24.17"
+					placeholder={__('e.g. Testing Gutenberg 24.17')}
 					maxLength={80}
 					autoFocus
 				/>
 				<ModalButtons
-					submitText="Rename"
+					submitText={__('Rename')}
 					areDisabled={!name.trim()}
 					areBusy={isSubmitting}
 					onCancel={closeModal}
diff --git a/packages/playground/website/src/components/save-site-modal/index.tsx b/packages/playground/website/src/components/save-site-modal/index.tsx
index e1b69ba583..23bc9b7daa 100644
--- a/packages/playground/website/src/components/save-site-modal/index.tsx
+++ b/packages/playground/website/src/components/save-site-modal/index.tsx
@@ -21,6 +21,7 @@ import { persistTemporarySite } from '../../lib/state/redux/persist-temporary-si
 import type { SiteStorageType } from '../../lib/state/redux/slice-sites';
 import { logger } from '@php-wasm/logger';
 import { isOpfsAvailable } from '../../lib/state/opfs/opfs-site-storage';
+import { useI18n } from '../../lib/i18n';
 
 type StorageOption = Extract<SiteStorageType, 'opfs' | 'local-fs'>;
 
@@ -36,6 +37,7 @@ const errorTextStyle: CSSProperties = {
 };
 
 export function SaveSiteModal() {
+	const { __, sprintf } = useI18n();
 	const dispatch = useAppDispatch();
 	const site = useAppSelector((state) =>
 		state.ui.activeSite?.slug
@@ -145,8 +147,8 @@ export function SaveSiteModal() {
 	const localIsAvailable = localFsAvailability === 'available';
 	const localUnavailableMessage =
 		localFsAvailability === 'not-available'
-			? 'Not available in this browser'
-			: 'Not available on this site';
+			? __('Not available in this browser')
+			: __('Not available on this site');
 
 	const chooseStorage = (storage: StorageOption) => {
 		if (storage === 'local-fs' && !localIsAvailable) {
@@ -196,7 +198,7 @@ export function SaveSiteModal() {
 		setSubmitError(null);
 		if (!(window as any).showDirectoryPicker) {
 			setDirectoryError(
-				'Directory selection is not supported in this browser.'
+				__('Directory selection is not supported in this browser.')
 			);
 			return;
 		}
@@ -212,7 +214,9 @@ export function SaveSiteModal() {
 			setDirectoryPermission(permission);
 			if (permission !== 'granted') {
 				setDirectoryError(
-					'Allow Playground to edit that directory in the browser prompt to continue.'
+					__(
+						'Allow Playground to edit that directory in the browser prompt to continue.'
+					)
 				);
 			} else {
 				setDirectoryError(null);
@@ -222,7 +226,7 @@ export function SaveSiteModal() {
 				return;
 			}
 			logger.error(error);
-			setDirectoryError('Unable to access the selected directory.');
+			setDirectoryError(__('Unable to access the selected directory.'));
 		}
 	};
 
@@ -238,14 +242,16 @@ export function SaveSiteModal() {
 
 			if (selectedStorage === 'local-fs') {
 				if (!directoryHandle) {
-					setDirectoryError('Choose a directory to continue.');
+					setDirectoryError(__('Choose a directory to continue.'));
 					return;
 				}
 				const permission = await ensureWriteAccess(directoryHandle);
 				setDirectoryPermission(permission);
 				if (permission !== 'granted') {
 					setDirectoryError(
-						'Allow Playground to edit that directory in the browser prompt to continue.'
+						__(
+							'Allow Playground to edit that directory in the browser prompt to continue.'
+						)
 					);
 					return;
 				}
@@ -268,7 +274,7 @@ export function SaveSiteModal() {
 			// Don't close modal here - useEffect will close it when save completes
 		} catch (error) {
 			logger.error(error);
-			setSubmitError('Saving failed. Please try again.');
+			setSubmitError(__('Saving failed. Please try again.'));
 			setIsSubmitting(false);
 		}
 	};
@@ -295,8 +301,8 @@ export function SaveSiteModal() {
 
 	return (
 		<Modal
-			title="Save Playground"
-			contentLabel="Save Playground"
+			title={__('Save Playground')}
+			contentLabel={__('Save Playground')}
 			onRequestClose={handleRequestClose}
 			isDismissible={!isSaving}
 			small
@@ -310,7 +316,7 @@ export function SaveSiteModal() {
 				autoComplete="off"
 			>
 				<TextControl
-					label="Playground name"
+					label={__('Playground name')}
 					value={name}
 					onChange={(value) => setName(value)}
 					autoFocus
@@ -321,19 +327,23 @@ export function SaveSiteModal() {
 					disabled={isSaving}
 				/>
 				<RadioControl
-					label="Storage location"
+					label={__('Storage location')}
 					selected={selectedStorage}
 					options={[
 						{
 							label:
-								'Save in this browser' +
-								(!isOpfsAvailable ? ' (not available)' : ''),
+								__('Save in this browser') +
+								(!isOpfsAvailable
+									? ` (${__('not available')})`
+									: ''),
 							value: 'opfs',
 						},
 						{
 							label:
-								'Save to a local directory' +
-								(!localIsAvailable ? ' (not available)' : ''),
+								__('Save to a local directory') +
+								(!localIsAvailable
+									? ` (${__('not available')})`
+									: ''),
 							value: 'local-fs',
 						},
 					]}
@@ -341,13 +351,15 @@ export function SaveSiteModal() {
 					disabled={isSaving}
 				/>
 				{!isOpfsAvailable && selectedStorage === 'opfs' && (
-					<p style={helpTextStyle}>Not available in this browser</p>
+					<p style={helpTextStyle}>
+						{__('Not available in this browser')}
+					</p>
 				)}
 				{!localIsAvailable && selectedStorage === 'local-fs' && (
 					<p style={helpTextStyle}>{localUnavailableMessage}</p>
 				)}
 				{selectedStorage === 'local-fs' && (
-					<BaseControl label="Local directory">
+					<BaseControl label={__('Local directory')}>
 						<div
 							style={{
 								display: 'flex',
@@ -360,7 +372,7 @@ export function SaveSiteModal() {
 								className="components-text-control__input"
 								value={directoryHandle?.name ?? ''}
 								readOnly
-								placeholder="Choose a directory..."
+								placeholder={__('Choose a directory...')}
 								style={{ flexGrow: 1 }}
 							/>
 							<Button
@@ -369,7 +381,7 @@ export function SaveSiteModal() {
 								onClick={handlePickDirectory}
 								disabled={isSaving}
 							>
-								Choose...
+								{__('Choose...')}
 							</Button>
 						</div>
 						{directoryError ? (
@@ -387,13 +399,17 @@ export function SaveSiteModal() {
 						></progress>
 						<p style={{ ...helpTextStyle, marginTop: 4 }}>
 							{savingProgress
-								? `Saving ${savingProgress.files} / ${savingProgress.total} files...`
-								: 'Preparing to save...'}
+								? sprintf(
+										__('Saving %d / %d files...'),
+										savingProgress.files,
+										savingProgress.total
+								  )
+								: __('Preparing to save...')}
 						</p>
 					</div>
 				)}
 				<ModalButtons
-					submitText="Save"
+					submitText={__('Save')}
 					onCancel={handleRequestClose}
 					areDisabled={saveDisabled}
 					areBusy={false}
diff --git a/packages/playground/website/src/components/site-manager/sidebar/index.tsx b/packages/playground/website/src/components/site-manager/sidebar/index.tsx
index 9ad0687d34..29d8bec079 100644
--- a/packages/playground/website/src/components/site-manager/sidebar/index.tsx
+++ b/packages/playground/website/src/components/site-manager/sidebar/index.tsx
@@ -1,5 +1,11 @@
-import css from './style.module.css';
+/**
+ * External dependencies
+ */
 import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
 import {
 	__experimentalHeading as Heading,
 	NavigableMenu,
@@ -15,6 +21,10 @@ import {
 	Button,
 } from '@wordpress/components';
 import { page, close } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
 import { ClockIcon, WordPressIcon } from '@wp-playground/components';
 import {
 	setActiveSite,
@@ -33,6 +43,8 @@ import { WordPressPRMenuItem } from '../../toolbar-buttons/wordpress-pr-menu-ite
 import { GutenbergPRMenuItem } from '../../toolbar-buttons/gutenberg-pr-menu-item';
 import { RestoreFromZipMenuItem } from '../../toolbar-buttons/restore-from-zip';
 import { GithubImportMenuItem } from '../../toolbar-buttons/github-import-menu-item';
+import { useI18n } from '../../../lib/i18n';
+import css from './style.module.css';
 
 export function Sidebar({
 	className,
@@ -43,6 +55,7 @@ export function Sidebar({
 	mobileUi?: boolean;
 	afterSiteClick?: (slug: string) => void;
 }) {
+	const { __ } = useI18n();
 	const offline = useAppSelector((state) => state.ui.offline);
 	const storedSites = useAppSelector(selectSortedSites).filter(
 		(site) => site.metadata.storage !== 'none'
@@ -61,19 +74,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',
 		},
 	];
@@ -116,13 +129,13 @@ export function Sidebar({
 					</svg>
 				</div>
 				<h1 className={css.sidebarTitle} style={{ flexGrow: 1 }}>
-					Playground
+					{__('Playground')}
 				</h1>
 
 				<DropdownMenu
 					className={css.componentsDropdown}
-					icon={<>Import</>}
-					label="Import"
+					icon={<>{__('Import')}</>}
+					label={__('Import')}
 					toggleProps={{
 						className: 'is-primary',
 						style: { paddingLeft: 12, paddingRight: 12 },
@@ -146,7 +159,7 @@ export function Sidebar({
 								disabled={offline}
 							/>
 							<RestoreFromZipMenuItem
-								text="Playground export file (.zip)"
+								text={__('Playground export file (.zip)')}
 								onClose={onClose}
 								disabled={false}
 							/>
@@ -165,7 +178,7 @@ export function Sidebar({
 							redirectTo(PlaygroundRoute.newTemporarySite());
 						}}
 						icon={close}
-						label="Close sidebar"
+						label={__('Close sidebar')}
 						showTooltip={true}
 					/>
 				)}
@@ -186,7 +199,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',
@@ -204,7 +219,7 @@ export function Sidebar({
 								<ClockIcon className={css.sidebarItemLogo} />
 							</Flex>
 							<FlexBlock className={css.sidebarItemSiteName}>
-								Temporary Playground
+								{__('Temporary Playground')}
 							</FlexBlock>
 						</HStack>
 					</MenuItem>
@@ -232,7 +247,7 @@ export function Sidebar({
 								/>
 							</Flex>
 							<FlexBlock className={css.sidebarItemSiteName}>
-								Blueprints Gallery
+								{__('Blueprints Gallery')}
 							</FlexBlock>
 						</HStack>
 					</MenuItem>
@@ -246,7 +261,7 @@ export function Sidebar({
 								css.sidebarListLabel
 							)}
 						>
-							Saved Playgrounds
+							{__('Saved Playgrounds')}
 						</Heading>
 						<MenuGroup className={css.sidebarList}>
 							{storedSites.map((site) => {
@@ -323,7 +338,7 @@ export function Sidebar({
 				className={classNames(css.sidebarSection, css.sidebarFooter)}
 			>
 				<Heading level="2" className={css.sidebarLabel}>
-					Resources
+					{__('Resources')}
 				</Heading>
 				<ItemGroup className={css.sidebarList}>
 					{resources.map((item) => (
diff --git a/packages/playground/website/src/components/site-manager/site-file-browser/file-explorer-sidebar.tsx b/packages/playground/website/src/components/site-manager/site-file-browser/file-explorer-sidebar.tsx
index 1c9f8593ee..8eac99fde7 100644
--- a/packages/playground/website/src/components/site-manager/site-file-browser/file-explorer-sidebar.tsx
+++ b/packages/playground/website/src/components/site-manager/site-file-browser/file-explorer-sidebar.tsx
@@ -15,9 +15,11 @@ import {
 } from '@wp-playground/components';
 import { logger } from '@php-wasm/logger';
 import { dirname, normalizePath } from '@php-wasm/util';
+import { useI18n } from '../../../lib/i18n';
 import { BinaryFilePreview } from './binary-file-preview';
 import mimeTypes from '@php-wasm/universal/mime-types';
 
+
 export const MAX_INLINE_FILE_BYTES = 1024 * 1024; // 1MB
 
 const seemsLikeBinary = (buffer: Uint8Array) => {
@@ -84,6 +86,7 @@ export function FileExplorerSidebar({
 	onShowMessage,
 	documentRoot,
 }: FileExplorerSidebarProps) {
+	const { __ } = useI18n();
 	const treeRef = useRef<FilePickerTreeHandle | null>(null);
 
 	const treeInitialPath = useMemo(() => {
@@ -113,10 +116,10 @@ export function FileExplorerSidebar({
 				);
 				await onShowMessage(
 					<>
-						<p>File too large to open (&gt;1MB).</p>
+						<p>{__('File too large to open (>1MB).')}</p>
 						<p>
 							<a href={url} download={fname}>
-								Download {fname}
+									{__('Download')} {fname}
 							</a>
 						</p>
 					</>
@@ -151,10 +154,10 @@ export function FileExplorerSidebar({
 				// Non-previewable binary file
 				await onShowMessage(
 					<>
-						<p>Binary file. Cannot be edited.</p>
+						<p>{__('Binary file. Cannot be edited.')}</p>
 						<p>
 							<a href={downloadUrl} download={fname}>
-								Download {fname}
+								{__('Download')} {fname}
 							</a>
 						</p>
 					</>
@@ -166,14 +169,14 @@ export function FileExplorerSidebar({
 			await onFileOpened(path, text, shouldFocus);
 		} catch (error) {
 			logger.error('Could not open file', error);
-			await onShowMessage('Could not open file.');
+			await onShowMessage(__('Could not open file.'));
 		}
 	};
 
 	return (
 		<div className={styles.fileExplorerContainer}>
 			<div className={styles.fileExplorerHeader}>
-				<span className={styles.fileExplorerTitle}>Files</span>
+				<span className={styles.fileExplorerTitle}>{__('Files')}</span>
 				<div className={styles.fileExplorerActions}>
 					<button
 						className={styles.fileExplorerButton}
@@ -186,10 +189,10 @@ export function FileExplorerSidebar({
 								lastSelectedPath ?? undefined
 							);
 						}}
-						title="Create new file"
+						title={__('Create new file')}
 					>
 						<Icon icon={fileIcon} size={16} />
-						New File
+						{__('New File')}
 					</button>
 					<button
 						className={styles.fileExplorerButton}
@@ -202,10 +205,10 @@ export function FileExplorerSidebar({
 								lastSelectedPath ?? undefined
 							);
 						}}
-						title="Create new folder"
+						title={__('Create new folder')}
 					>
 						<Icon icon={folderIcon} size={16} />
-						New Folder
+						{__('New Folder')}
 					</button>
 				</div>
 			</div>
diff --git a/packages/playground/website/src/components/site-manager/site-file-browser/index.tsx b/packages/playground/website/src/components/site-manager/site-file-browser/index.tsx
index df46fe097e..79d6c9f799 100644
--- a/packages/playground/website/src/components/site-manager/site-file-browser/index.tsx
+++ b/packages/playground/website/src/components/site-manager/site-file-browser/index.tsx
@@ -16,6 +16,7 @@ import { FileExplorerSidebar } from './file-explorer-sidebar';
 import { CodeEditor, type CodeEditorHandle } from './code-editor';
 import styles from './style.module.css';
 import { logger } from '@php-wasm/logger';
+import { useI18n } from '../../../lib/i18n';
 
 const SAVE_DEBOUNCE_MS = 1500;
 
@@ -38,6 +39,7 @@ export function SiteFileBrowser({
 	isVisible?: boolean;
 	documentRoot: string;
 }) {
+	const { __ } = useI18n();
 	const client = usePlaygroundClient(site.slug);
 	const filesystem = useFilesystem(client);
 
@@ -87,6 +89,7 @@ export function SiteFileBrowser({
 				codeRef,
 				setSaveState,
 				setSaveError,
+				__,
 			});
 		}
 		previousClientRef.current = client ?? null;
@@ -100,9 +103,10 @@ export function SiteFileBrowser({
 				codeRef,
 				setSaveState,
 				setSaveError,
+				__,
 			});
 		};
-	}, []);
+	}, [__]);
 
 	useEffect(() => {
 		if (!client) {
@@ -163,7 +167,7 @@ export function SiteFileBrowser({
 			} catch (error) {
 				logger.error('Failed to save file', error);
 				setSaveState(SaveState.ERROR);
-				setSaveError('Could not save changes. Try again.');
+				setSaveError(__('Could not save changes. Try again.'));
 			}
 		}, SAVE_DEBOUNCE_MS);
 		saveTimeoutRef.current = timeout;
@@ -245,6 +249,7 @@ export function SiteFileBrowser({
 					codeRef,
 					setSaveState,
 					setSaveError,
+					__,
 				});
 			} catch {
 				// Best-effort save; ignore errors so the new file can still open.
@@ -343,6 +348,7 @@ export function SiteFileBrowser({
 				codeRef,
 				setSaveState,
 				setSaveError,
+				__,
 			});
 		} catch {
 			/* noop */
@@ -365,6 +371,7 @@ export function SiteFileBrowser({
 					codeRef,
 					setSaveState,
 					setSaveError,
+					__,
 				});
 			} catch {
 				/* noop */
@@ -397,17 +404,18 @@ export function SiteFileBrowser({
 			codeRef,
 			setSaveState,
 			setSaveError,
+			__,
 		});
-	}, []);
+	}, [__]);
 
-	const saveStatusLabel = getSaveStatusLabel(saveState, saveError);
+	const saveStatusLabel = getSaveStatusLabel(saveState, saveError, __);
 	const saveStatusClassName = getSaveStatusClassName(saveState, styles);
 
 	if (!client || !filesystem) {
 		return (
 			<div className={styles.container}>
 				<div className={styles.placeholder}>
-					Start this Playground to browse and edit its files.
+					{__('Start this Playground to browse and edit its files.')}
 				</div>
 			</div>
 		);
@@ -446,8 +454,8 @@ export function SiteFileBrowser({
 							}
 						>
 							{showExplorerOnMobile
-								? 'Hide files'
-								: 'Browse files'}
+								? __('Hide files')
+								: __('Browse files')}
 						</Button>
 						<div
 							className={classNames(styles.editorPath, {
@@ -457,7 +465,10 @@ export function SiteFileBrowser({
 						>
 							{currentPath?.length
 								? currentPath
-								: `Browse files under ${documentRoot}`}
+								: __('Browse files under %s').replace(
+										'%s',
+										documentRoot
+								  )}
 						</div>
 						<div
 							className={classNames(
@@ -493,7 +504,7 @@ export function SiteFileBrowser({
 						)
 					) : (
 						<div className={styles.placeholder}>
-							Select a file to view or edit its contents.
+							{__('Select a file to view or edit its contents.')}
 						</div>
 					)}
 				</section>
@@ -527,15 +538,19 @@ function useFilesystem(
 	}, [client]);
 }
 
-function getSaveStatusLabel(saveState: SaveState, saveError: string | null) {
+function getSaveStatusLabel(
+	saveState: SaveState,
+	saveError: string | null,
+	__: (text: string) => string
+) {
 	switch (saveState) {
 		case SaveState.PENDING:
 		case SaveState.SAVING:
-			return 'Saving…';
+			return __('Saving…');
 		case SaveState.SAVED:
-			return 'Saved';
+			return __('Saved');
 		case SaveState.ERROR:
-			return saveError ?? 'Save failed';
+			return saveError ?? __('Save failed');
 		default:
 			return '';
 	}
@@ -565,12 +580,14 @@ async function flushPendingSave(
 		codeRef,
 		setSaveState,
 		setSaveError,
+		__,
 	}: {
 		saveTimeoutRef: MutableRefObject<number | null>;
 		currentPathRef: MutableRefObject<string | null>;
 		codeRef: MutableRefObject<string>;
 		setSaveState: React.Dispatch<React.SetStateAction<SaveState>>;
 		setSaveError: React.Dispatch<React.SetStateAction<string | null>>;
+		__: (text: string) => string;
 	}
 ) {
 	if (saveTimeoutRef.current === null) {
@@ -591,7 +608,7 @@ async function flushPendingSave(
 	} catch (error) {
 		logger.error('Failed to save file', error);
 		setSaveState(SaveState.ERROR);
-		setSaveError('Could not save changes. Try again.');
+		setSaveError(__('Could not save changes. Try again.'));
 		throw error;
 	}
 }
diff --git a/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx b/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx
index ac9e1e33c6..7458ee6048 100644
--- a/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx
+++ b/packages/playground/website/src/components/site-manager/site-info-panel/index.tsx
@@ -21,6 +21,7 @@ import { GithubExportMenuItem } from '../../toolbar-buttons/github-export-menu-i
 import { ReportError } from '../../toolbar-buttons/report-error';
 import { TemporarySiteNotice } from '../temporary-site-notice';
 import type { SiteInfo } from '../../../lib/state/redux/slice-sites';
+import { useI18n } from '../../../lib/i18n';
 import {
 	setSiteManagerOpen,
 	setSiteManagerSection,
@@ -76,6 +77,7 @@ export function SiteInfoPanel({
 	mobileUi?: boolean;
 	siteViewHidden?: boolean;
 }) {
+	const { __ } = useI18n();
 	const offline = useAppSelector((state) => state.ui.offline);
 	const dispatch = useAppDispatch();
 
@@ -96,7 +98,10 @@ export function SiteInfoPanel({
 	const removeSiteAndCloseMenu = async (onClose: () => void) => {
 		// TODO: Replace with HTML-based dialog
 		const proceed = window.confirm(
-			`Are you sure you want to delete the site '${site.metadata.name}'?`
+			__("Are you sure you want to delete the site '%s'?").replace(
+				'%s',
+				site.metadata.name
+			)
 		);
 		if (proceed) {
 			await dispatch(removeSite(site.slug));
@@ -140,7 +145,7 @@ export function SiteInfoPanel({
 			? (opfsMountDescriptor as any)?.device?.handle?.name
 			: undefined;
 
-	const title = isTemporary ? 'Temporary Playground' : site.metadata.name;
+	const title = isTemporary ? __('Temporary Playground') : site.metadata.name;
 	const titleWords = title.split(' ');
 	const titleStart = titleWords.slice(0, -1).join(' ');
 	const titleEnd = titleWords[titleWords.length - 1];
@@ -172,7 +177,7 @@ export function SiteInfoPanel({
 							<FlexItem style={{ marginLeft: -20 }}>
 								<Button
 									variant="link"
-									label="Back to sites list"
+									label={__('Back to sites list')}
 									icon={() => (
 										<Icon icon={chevronLeft} size={38} />
 									)}
@@ -231,7 +236,9 @@ export function SiteInfoPanel({
 																css.siteInfoRenameButton
 															}
 															icon={edit}
-															label="Rename Playground"
+															label={__(
+																'Rename Playground'
+															)}
 															showTooltip={true}
 															variant="tertiary"
 															isSmall={true}
@@ -271,14 +278,18 @@ export function SiteInfoPanel({
 											switch (site.metadata.storage) {
 												case 'local-fs':
 													return (
-														'Saved in a local directory' +
+														__(
+															'Saved in a local directory'
+														) +
 														(localDirName
 															? ` (${localDirName})`
 															: '') +
 														` ${createdAgo}`
 													);
 												case 'opfs':
-													return `Saved in this browser ${createdAgo}`;
+													return __(
+														'Saved in this browser %s'
+													).replace('%s', createdAgo);
 											}
 										})()}{' '}
 									</span>
@@ -293,7 +304,7 @@ export function SiteInfoPanel({
 										dispatch(setSiteManagerOpen(false));
 									}}
 								>
-									Open site
+									{__('Open site')}
 								</Button>
 							</FlexItem>
 						) : (
@@ -304,7 +315,7 @@ export function SiteInfoPanel({
 										disabled={!playground}
 										onClick={() => navigateTo('/wp-admin/')}
 									>
-										WP Admin
+										{__('WP Admin')}
 									</Button>
 								</FlexItem>
 								<FlexItem className={css.siteInfoHeaderAction}>
@@ -313,7 +324,7 @@ export function SiteInfoPanel({
 										disabled={!playground}
 										onClick={() => navigateTo('/')}
 									>
-										Homepage
+										{__('Homepage')}
 									</Button>
 								</FlexItem>
 							</>
@@ -321,7 +332,7 @@ export function SiteInfoPanel({
 						<FlexItem className={css.siteInfoHeaderAction}>
 							<DropdownMenu
 								icon={moreVertical}
-								label="Additional actions"
+								label={__('Additional actions')}
 								popoverProps={{
 									placement: 'bottom-end',
 								}}
@@ -331,7 +342,9 @@ export function SiteInfoPanel({
 										{!isTemporary && (
 											<MenuGroup>
 												<MenuItem
-													aria-label="Delete this Playground"
+													aria-label={__(
+														'Delete this Playground'
+													)}
 													className={css.danger}
 													onClick={() =>
 														removeSiteAndCloseMenu(
@@ -339,7 +352,7 @@ export function SiteInfoPanel({
 														)
 													}
 												>
-													Delete
+													{__('Delete')}
 												</MenuItem>
 											</MenuGroup>
 										)}
@@ -380,10 +393,12 @@ export function SiteInfoPanel({
 												}}
 												icon={external}
 												iconPosition="right"
-												aria-label="View Blueprint"
+												aria-label={__(
+													'View Blueprint'
+												)}
 												disabled={offline}
 											>
-												View Blueprint
+												{__('View Blueprint')}
 											</MenuItem>
 										</MenuGroup>
 										<MenuGroup>
@@ -406,15 +421,15 @@ export function SiteInfoPanel({
 						tabs={[
 							{
 								name: 'settings',
-								title: 'Settings',
+								title: __('Settings'),
 							},
 							{
 								name: 'files',
-								title: 'File browser',
+								title: __('File browser'),
 							},
 							{
 								name: 'logs',
-								title: 'Logs',
+								title: __('Logs'),
 							},
 						]}
 					>
@@ -455,7 +470,7 @@ export function SiteInfoPanel({
 									<Suspense
 										fallback={
 											<div className={css.padded}>
-												Loading file browser...
+												{__('Loading file browser...')}
 											</div>
 										}
 									>
diff --git a/packages/playground/website/src/components/site-manager/site-persist-button/index.tsx b/packages/playground/website/src/components/site-manager/site-persist-button/index.tsx
index 9e460b467f..7d58f66703 100644
--- a/packages/playground/website/src/components/site-manager/site-persist-button/index.tsx
+++ b/packages/playground/website/src/components/site-manager/site-persist-button/index.tsx
@@ -5,6 +5,7 @@ import type { SiteStorageType } from '../../../lib/state/redux/slice-sites';
 import { setActiveModal } from '../../../lib/state/redux/slice-ui';
 import { modalSlugs } from '../../layout';
 import React from 'react';
+import { useI18n } from '../../../lib/i18n';
 
 export function SitePersistButton({
 	siteSlug,
@@ -14,6 +15,7 @@ export function SitePersistButton({
 	children: React.ReactNode;
 	storage?: Extract<SiteStorageType, 'opfs' | 'local-fs'> | null;
 }) {
+	const { __ } = useI18n();
 	const clientInfo = useAppSelector((state) =>
 		selectClientInfoBySiteSlug(state, siteSlug)
 	);
@@ -30,7 +32,7 @@ export function SitePersistButton({
 				{button}
 				{clientInfo?.opfsSync?.status === 'error' && (
 					<div className={css.error}>
-						There has been an error. Please try again.
+						{__('There has been an error. Please try again.')}
 					</div>
 				)}
 			</>
diff --git a/packages/playground/website/src/components/site-manager/site-settings-form/stored-site-settings-form.tsx b/packages/playground/website/src/components/site-manager/site-settings-form/stored-site-settings-form.tsx
index b495ba2869..7719d1f5e9 100644
--- a/packages/playground/website/src/components/site-manager/site-settings-form/stored-site-settings-form.tsx
+++ b/packages/playground/website/src/components/site-manager/site-settings-form/stored-site-settings-form.tsx
@@ -14,6 +14,7 @@ import {
 } from '../../../lib/state/redux/slice-sites';
 import type { SiteFormData } from './unconnected-site-settings-form';
 import { UnconnectedSiteSettingsForm } from './unconnected-site-settings-form';
+import { useI18n } from '../../../lib/i18n';
 
 export function StoredSiteSettingsForm({
 	siteSlug,
@@ -22,6 +23,7 @@ export function StoredSiteSettingsForm({
 	siteSlug: string;
 	onSubmit?: () => void;
 }) {
+	const { __ } = useI18n();
 	const siteInfo = useAppSelector((state) =>
 		selectSiteBySlug(state, siteSlug)
 	)!;
@@ -75,7 +77,9 @@ export function StoredSiteSettingsForm({
 				>
 					<Icon icon={info} size={16} />
 					<span>
-						Stored Playgrounds have limited configuration options.
+						{__(
+							'Stored Playgrounds have limited configuration options.'
+						)}
 					</span>
 				</HStack>
 			}
@@ -91,7 +95,7 @@ export function StoredSiteSettingsForm({
 						variant="primary"
 						style={{ justifyContent: 'center' }}
 					>
-						Save & Reload
+						{__('Save & Reload')}
 					</Button>
 				</VStack>
 			}
diff --git a/packages/playground/website/src/components/site-manager/site-settings-form/temporary-site-settings-form.tsx b/packages/playground/website/src/components/site-manager/site-settings-form/temporary-site-settings-form.tsx
index d501ca825d..f64bfa6623 100644
--- a/packages/playground/website/src/components/site-manager/site-settings-form/temporary-site-settings-form.tsx
+++ b/packages/playground/website/src/components/site-manager/site-settings-form/temporary-site-settings-form.tsx
@@ -6,6 +6,7 @@ import { selectSiteBySlug } from '../../../lib/state/redux/slice-sites';
 import { redirectTo, PlaygroundRoute } from '../../../lib/state/url/router';
 import type { SiteFormData } from './unconnected-site-settings-form';
 import { UnconnectedSiteSettingsForm } from './unconnected-site-settings-form';
+import { useI18n } from '../../../lib/i18n';
 
 export function TemporarySiteSettingsForm({
 	siteSlug,
@@ -14,6 +15,7 @@ export function TemporarySiteSettingsForm({
 	siteSlug: string;
 	onSubmit?: () => void;
 }) {
+	const { __ } = useI18n();
 	const siteInfo = useAppSelector((state) =>
 		selectSiteBySlug(state, siteSlug)
 	)!;
@@ -62,11 +64,13 @@ export function TemporarySiteSettingsForm({
 					className={`${css.footer} ${css.formSection}`}
 				>
 					<p>
-						<b>Destructive action!</b> Applying these settings will
-						reset the WordPress site to its initial state.
+						<b>{__('Destructive action!')}</b>{' '}
+						{__(
+							'Applying these settings will reset the WordPress site to its initial state.'
+						)}
 					</p>
 					<Button type="submit" variant="primary">
-						Apply Settings & Reset Playground
+						{__('Apply Settings & Reset Playground')}
 					</Button>
 				</VStack>
 			}
diff --git a/packages/playground/website/src/components/site-manager/site-settings-form/unconnected-site-settings-form.tsx b/packages/playground/website/src/components/site-manager/site-settings-form/unconnected-site-settings-form.tsx
index 20f576cc6d..acebda8a38 100644
--- a/packages/playground/website/src/components/site-manager/site-settings-form/unconnected-site-settings-form.tsx
+++ b/packages/playground/website/src/components/site-manager/site-settings-form/unconnected-site-settings-form.tsx
@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useSupportedWordPressVersions } from './use-supported-wordpress-versions';
 import { RecommendedPHPVersion } from '@wp-playground/common';
+import { useI18n } from '../../../lib/i18n';
 
 type ConfigurableFields = Record<
 	keyof SiteFormData & ('wpVersion' | 'language' | 'multisite'),
@@ -51,6 +52,7 @@ export function UnconnectedSiteSettingsForm({
 		multisite: false,
 		...defaultValues,
 	};
+	const { __ } = useI18n();
 	const {
 		handleSubmit,
 		setValue,
@@ -85,7 +87,7 @@ export function UnconnectedSiteSettingsForm({
 					name="wpVersion"
 					rules={{
 						required: {
-							message: 'WordPress Version is required',
+							message: __('WordPress Version is required'),
 							value: true,
 						},
 					}}
@@ -95,7 +97,7 @@ export function UnconnectedSiteSettingsForm({
 							<SelectControl
 								size="compact"
 								__nextHasNoMarginBottom={true}
-								label="WordPress Version"
+								label={__('WordPress Version')}
 								labelPosition="side"
 								help={errors.wpVersion?.message}
 								className={classNames(css.addSiteInput, {
@@ -109,7 +111,7 @@ export function UnconnectedSiteSettingsForm({
 									 */
 									[
 										{
-											label: '-- Select a version --',
+											label: __('-- Select a version --'),
 											value: '',
 										},
 										...Object.keys(
@@ -133,7 +135,7 @@ export function UnconnectedSiteSettingsForm({
 									rel="noreferrer"
 									style={{ fontSize: '0.9em' }}
 								>
-									Need an older version?
+									{__('Need an older version?')}
 								</a>
 							)}
 						</div>
@@ -145,7 +147,7 @@ export function UnconnectedSiteSettingsForm({
 					name="phpVersion"
 					rules={{
 						required: {
-							message: 'PHP Version is required',
+							message: __('PHP version is required'),
 							value: true,
 						},
 					}}
@@ -153,7 +155,7 @@ export function UnconnectedSiteSettingsForm({
 						<SelectControl
 							size="compact"
 							__nextHasNoMarginBottom={true}
-							label="PHP Version"
+							label={__('PHP Version')}
 							labelPosition="side"
 							help={errors.phpVersion?.message}
 							className={classNames(css.addSiteInput, {
@@ -180,7 +182,7 @@ export function UnconnectedSiteSettingsForm({
 						<SelectControl
 							size="compact"
 							__nextHasNoMarginBottom={true}
-							label="Language"
+							label={__('Language')}
 							labelPosition="side"
 							help={errors.language?.message}
 							className={classNames(css.addSiteInput, {
@@ -446,7 +448,7 @@ export function UnconnectedSiteSettingsForm({
 					name="withNetworking"
 					render={({ field: { onChange, ref, ...rest } }) => (
 						<CheckboxControl
-							label="Allow network access"
+							label={__('Allow network access')}
 							onChange={(isChecked) => {
 								setValue('withNetworking', isChecked);
 							}}
@@ -463,7 +465,7 @@ export function UnconnectedSiteSettingsForm({
 					disabled={!enabledFields.multisite}
 					render={({ field: { onChange, ref, ...rest } }) => (
 						<CheckboxControl
-							label="Create a multisite network"
+							label={__('Create a multisite network')}
 							onChange={(isChecked) => {
 								setValue('multisite', isChecked);
 							}}
diff --git a/packages/playground/website/src/components/site-manager/storage-type/index.tsx b/packages/playground/website/src/components/site-manager/storage-type/index.tsx
index 69cf172578..f34778da3b 100644
--- a/packages/playground/website/src/components/site-manager/storage-type/index.tsx
+++ b/packages/playground/website/src/components/site-manager/storage-type/index.tsx
@@ -2,28 +2,30 @@ import { Icon } from '@wordpress/components';
 import { ClockIcon, folder, layout } from '@wp-playground/components';
 import css from './style.module.css';
 import type { SiteStorageType } from '../../../lib/state/redux/slice-sites';
+import { useI18n } from '../../../lib/i18n';
 
 export function StorageType({ type }: { type: SiteStorageType }) {
+	const { __ } = useI18n();
 	switch (type) {
 		case 'local-fs':
 			return (
 				<div className={css.storageType}>
 					<Icon size={16} icon={folder} />
-					<span>Local</span>
+					<span>{__('Local')}</span>
 				</div>
 			);
 		case 'opfs':
 			return (
 				<div className={css.storageType}>
 					<Icon size={16} icon={layout} />
-					<span>Browser</span>
+					<span>{__('Browser')}</span>
 				</div>
 			);
 		case 'none':
 			return (
 				<div className={css.storageType}>
 					<ClockIcon />
-					<span>Temporary</span>
+					<span>{__('Temporary')}</span>
 				</div>
 			);
 	}
diff --git a/packages/playground/website/src/components/site-manager/temporary-site-notice/index.tsx b/packages/playground/website/src/components/site-manager/temporary-site-notice/index.tsx
index 59753fdf2c..356094c28b 100644
--- a/packages/playground/website/src/components/site-manager/temporary-site-notice/index.tsx
+++ b/packages/playground/website/src/components/site-manager/temporary-site-notice/index.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react';
 import classNames from 'classnames';
 import { usePlaygroundClient } from '../../../lib/use-playground-client';
 import { useActiveSite } from '../../../lib/state/redux/store';
+import { useI18n } from '../../../lib/i18n';
 
 export function TemporarySiteNotice({
 	isDismissible = false,
@@ -19,18 +20,21 @@ export function TemporarySiteNotice({
 	if (isDismissed) {
 		return null;
 	}
+	const { __ } = useI18n();
 	return (
 		<Notice
 			className={classNames(css.siteNotice, className)}
-			spokenMessage="This is a temporary Playground. Your changes will be lost on page refresh."
+			spokenMessage={__(
+				'This is a temporary Playground. Your changes will be lost on page refresh.'
+			)}
 			status="info"
 			isDismissible={isDismissible}
 			onDismiss={() => setIsDismissed(true)}
 		>
 			<Flex direction="row" gap={2} expanded={true}>
 				<FlexItem>
-					<b>This is a temporary Playground.</b> Your changes will be
-					lost on page refresh.
+					<b>{__('This is a temporary Playground.')}</b>{' '}
+					{__('Your changes will be lost on page refresh.')}
 				</FlexItem>
 				<FlexItem>
 					<SitePersistButton siteSlug={site.slug}>
@@ -39,7 +43,7 @@ export function TemporarySiteNotice({
 							disabled={!playground}
 							aria-label="Save site locally"
 						>
-							Save
+							{__('Save')}
 						</Button>
 					</SitePersistButton>
 				</FlexItem>
diff --git a/packages/playground/website/src/components/start-error-modal/index.tsx b/packages/playground/website/src/components/start-error-modal/index.tsx
index 2f7df9da39..ededd4bedf 100644
--- a/packages/playground/website/src/components/start-error-modal/index.tsx
+++ b/packages/playground/website/src/components/start-error-modal/index.tsx
@@ -1,12 +1,14 @@
 import { Button } from '@wordpress/components';
 import { LogModal } from '../log-modal';
 import { useState } from '@wordpress/element';
+import { useI18n } from '../../lib/i18n';
 
 import css from './style.module.css';
 
 export const localStorageKey = 'playground-start-error-dont-show-again';
 
 export function StartErrorModal() {
+	const { __ } = useI18n();
 	const [dontShowAgain, setDontShowAgain] = useState(
 		localStorage.getItem(localStorageKey) === 'true'
 	);
@@ -23,27 +25,25 @@ export function StartErrorModal() {
 	const description = (
 		<>
 			<p>
-				Oops! There was a problem starting Playground. To figure out
-				what went wrong, please take a look at the error logs provided
-				below. If you see an "Invalid blueprint error," the logs will
-				point out the specific step causing the issue. You can then
-				double-check your blueprint. For more help, you can also{' '}
+				{__(
+					'Oops! There was a problem starting Playground. To figure out what went wrong, please take a look at the error logs provided below. If you see an "Invalid blueprint error," the logs will point out the specific step causing the issue. You can then double-check your blueprint. For more help, you can also'
+				)}{' '}
 				<a
 					href="https://wordpress.github.io/wordpress-playground/blueprints/troubleshoot-and-debug/"
 					target="_blank"
 					rel="noreferrer"
 				>
-					visit our documentation.
+					{__('visit our documentation.')}
 				</a>{' '}
 			</p>
 			<Button
 				className={css.startErrorModalDismiss}
-				text="Don't show again"
+				text={__("Don't show again")}
 				onClick={dismiss}
 				variant="secondary"
 				isSmall={true}
 			/>
 		</>
 	);
-	return <LogModal title="Error" description={description} />;
+	return <LogModal title={__('Error')} description={description} />;
 }
diff --git a/packages/playground/website/src/components/sync-local-files-button/index.tsx b/packages/playground/website/src/components/sync-local-files-button/index.tsx
index c21bb64ee1..293c1ea411 100644
--- a/packages/playground/website/src/components/sync-local-files-button/index.tsx
+++ b/packages/playground/website/src/components/sync-local-files-button/index.tsx
@@ -4,11 +4,13 @@ import {
 	getActiveClientInfo,
 	useAppSelector,
 } from '../../lib/state/redux/store';
+import { useI18n } from '../../lib/i18n';
 
 export function SyncLocalFilesButton() {
 	const { client, url, opfsMountDescriptor } =
 		useAppSelector(getActiveClientInfo) || {};
 	const [isSyncing, setIsSyncing] = useState(false);
+	const { __ } = useI18n();
 	return (
 		<Button
 			variant="browser-chrome"
@@ -30,7 +32,7 @@ export function SyncLocalFilesButton() {
 				await client!.goTo(url!);
 			}}
 		>
-			{isSyncing ? 'Syncing...' : 'Sync local files'}
+			{isSyncing ? __('Syncing...') : __('Sync local files')}
 		</Button>
 	);
 }
diff --git a/packages/playground/website/src/components/toolbar-buttons/download-as-zip.tsx b/packages/playground/website/src/components/toolbar-buttons/download-as-zip.tsx
index 52b04d35b4..f566d8d235 100644
--- a/packages/playground/website/src/components/toolbar-buttons/download-as-zip.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/download-as-zip.tsx
@@ -4,14 +4,16 @@ import type { PlaygroundClient } from '@wp-playground/client';
 import { zipWpContent } from '@wp-playground/client';
 import saveAs from 'file-saver';
 import { usePlaygroundClient } from '../../lib/use-playground-client';
+import { useI18n } from '../../lib/i18n';
 
 type Props = { onClose: () => void; disabled: boolean };
 export function DownloadAsZipMenuItem({ onClose, disabled }: Props) {
+	const { __ } = useI18n();
 	const playground = usePlaygroundClient();
 	return (
 		<MenuItem
 			data-cy="download-as-zip"
-			aria-label="Download the current playground as a .zip file"
+			aria-label={__('Download the current playground as a .zip file')}
 			disabled={disabled}
 			onClick={() => {
 				if (!playground) return;
@@ -19,7 +21,7 @@ export function DownloadAsZipMenuItem({ onClose, disabled }: Props) {
 				onClose();
 			}}
 		>
-			Download as .zip
+			{__('Download as .zip')}
 		</MenuItem>
 	);
 }
diff --git a/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx b/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx
index cacb8e5795..7d6ea6d760 100644
--- a/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/github-export-menu-item.tsx
@@ -3,23 +3,27 @@ import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import type { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { useDispatch } from 'react-redux';
 import { modalSlugs } from '../layout';
+import { useI18n } from '../../lib/i18n';
 
 interface Props {
 	onClose: () => void;
 	disabled?: boolean;
 }
 export function GithubExportMenuItem({ onClose, disabled }: Props) {
+	const { __ } = useI18n();
 	const dispatch: PlaygroundDispatch = useDispatch();
 	return (
 		<MenuItem
-			aria-label="Export WordPress theme, plugin, or wp-content directory to a GitHub repository as a Pull Request."
+			aria-label={__(
+				'Export WordPress theme, plugin, or wp-content directory to a GitHub repository as a Pull Request.'
+			)}
 			disabled={disabled}
 			onClick={() => {
 				dispatch(setActiveModal(modalSlugs.GITHUB_EXPORT));
 				onClose();
 			}}
 		>
-			Export to GitHub
+			{__('Export to GitHub')}
 		</MenuItem>
 	);
 }
diff --git a/packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx b/packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx
index b512e48a3c..bcb93f3e42 100644
--- a/packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/github-import-menu-item.tsx
@@ -3,23 +3,27 @@ import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import type { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { useDispatch } from 'react-redux';
 import { modalSlugs } from '../layout';
+import { useI18n } from '../../lib/i18n';
 
 interface Props {
 	onClose: () => void;
 	disabled?: boolean;
 }
 export function GithubImportMenuItem({ onClose, disabled }: Props) {
+	const { __ } = useI18n();
 	const dispatch: PlaygroundDispatch = useDispatch();
 	return (
 		<MenuItem
-			aria-label="Import WordPress theme, plugin, or wp-content directory from a GitHub repository."
+			aria-label={__(
+				'Import WordPress theme, plugin, or wp-content directory from a GitHub repository.'
+			)}
 			disabled={disabled}
 			onClick={() => {
 				dispatch(setActiveModal(modalSlugs.GITHUB_IMPORT));
 				onClose();
 			}}
 		>
-			GitHub repository
+			{__('GitHub repository')}
 		</MenuItem>
 	);
 }
diff --git a/packages/playground/website/src/components/toolbar-buttons/gutenberg-pr-menu-item.tsx b/packages/playground/website/src/components/toolbar-buttons/gutenberg-pr-menu-item.tsx
index f28f61c204..b24bc85991 100644
--- a/packages/playground/website/src/components/toolbar-buttons/gutenberg-pr-menu-item.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/gutenberg-pr-menu-item.tsx
@@ -3,23 +3,25 @@ import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import type { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { useDispatch } from 'react-redux';
 import { modalSlugs } from '../layout';
+import { useI18n } from '../../lib/i18n';
 
 interface Props {
 	onClose: () => void;
 	disabled?: boolean;
 }
 export function GutenbergPRMenuItem({ onClose, disabled }: Props) {
+	const { __ } = useI18n();
 	const dispatch: PlaygroundDispatch = useDispatch();
 	return (
 		<MenuItem
-			aria-label="Preview Gutenberg PR."
+			aria-label={__('Preview Gutenberg PR.')}
 			disabled={disabled}
 			onClick={() => {
 				dispatch(setActiveModal(modalSlugs.PREVIEW_PR_GUTENBERG));
 				onClose();
 			}}
 		>
-			Gutenberg PR
+			{__('Gutenberg PR')}
 		</MenuItem>
 	);
 }
diff --git a/packages/playground/website/src/components/toolbar-buttons/report-error.tsx b/packages/playground/website/src/components/toolbar-buttons/report-error.tsx
index f1a36aea6e..4debdec620 100644
--- a/packages/playground/website/src/components/toolbar-buttons/report-error.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/report-error.tsx
@@ -4,21 +4,23 @@ import { useDispatch } from 'react-redux';
 import type { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import { modalSlugs } from '../layout';
+import { useI18n } from '../../lib/i18n';
 
 type Props = { onClose: () => void; disabled?: boolean };
 export function ReportError({ onClose, disabled }: Props) {
+	const { __ } = useI18n();
 	const dispatch: PlaygroundDispatch = useDispatch();
 	return (
 		<MenuItem
 			data-cy="report-error"
-			aria-label="Report an error in Playground"
+			aria-label={__('Report an error in Playground')}
 			disabled={disabled}
 			onClick={() => {
 				dispatch(setActiveModal(modalSlugs.ERROR_REPORT));
 				onClose();
 			}}
 		>
-			Report error
+			{__('Report error')}
 		</MenuItem>
 	);
 }
diff --git a/packages/playground/website/src/components/toolbar-buttons/restore-from-zip.tsx b/packages/playground/website/src/components/toolbar-buttons/restore-from-zip.tsx
index 39549d0576..de117a696e 100644
--- a/packages/playground/website/src/components/toolbar-buttons/restore-from-zip.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/restore-from-zip.tsx
@@ -3,19 +3,18 @@ import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import type { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { useDispatch } from 'react-redux';
 import { modalSlugs } from '../layout';
+import { useI18n } from '../../lib/i18n';
 
 type Props = { text?: string; onClose: () => void; disabled: boolean };
-export function RestoreFromZipMenuItem({
-	text = 'Restore from .zip',
-	onClose,
-	disabled,
-}: Props) {
+export function RestoreFromZipMenuItem({ text, onClose, disabled }: Props) {
+	const { __ } = useI18n();
 	const dispatch: PlaygroundDispatch = useDispatch();
+	const defaultText = __('Restore from .zip');
 
 	return (
 		<MenuItem
 			data-cy="restore-from-zip"
-			aria-label="Import a .zip file into the current Playground"
+			aria-label={__('Import a .zip file into the current Playground')}
 			onClick={() => {
 				dispatch(setActiveModal(modalSlugs.IMPORT_FORM));
 				if (typeof onClose === 'function') {
@@ -24,7 +23,7 @@ export function RestoreFromZipMenuItem({
 			}}
 			disabled={disabled}
 		>
-			{text}
+			{text || defaultText}
 		</MenuItem>
 	);
 }
diff --git a/packages/playground/website/src/components/toolbar-buttons/view-logs.tsx b/packages/playground/website/src/components/toolbar-buttons/view-logs.tsx
index 8b196b238a..5755b425b6 100644
--- a/packages/playground/website/src/components/toolbar-buttons/view-logs.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/view-logs.tsx
@@ -5,22 +5,24 @@ import { useDispatch } from 'react-redux';
 import type { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import { modalSlugs } from '../layout';
+import { useI18n } from '../../lib/i18n';
 
 type Props = { onClose: () => void };
 export function ViewLogs({ onClose }: Props) {
+	const { __ } = useI18n();
 	const dispatch: PlaygroundDispatch = useDispatch();
 	return (
 		<MenuItem
 			icon={details}
 			iconPosition="left"
 			data-cy="view-logs"
-			aria-label="View logs"
+			aria-label={__('View logs')}
 			onClick={() => {
 				dispatch(setActiveModal(modalSlugs.LOG));
 				onClose();
 			}}
 		>
-			View logs
+			{__('View logs')}
 		</MenuItem>
 	);
 }
diff --git a/packages/playground/website/src/components/toolbar-buttons/wordpress-pr-menu-item.tsx b/packages/playground/website/src/components/toolbar-buttons/wordpress-pr-menu-item.tsx
index 381fbb1acf..e2f97f6d8c 100644
--- a/packages/playground/website/src/components/toolbar-buttons/wordpress-pr-menu-item.tsx
+++ b/packages/playground/website/src/components/toolbar-buttons/wordpress-pr-menu-item.tsx
@@ -3,23 +3,25 @@ import { setActiveModal } from '../../lib/state/redux/slice-ui';
 import type { PlaygroundDispatch } from '../../lib/state/redux/store';
 import { useDispatch } from 'react-redux';
 import { modalSlugs } from '../layout';
+import { useI18n } from '../../lib/i18n';
 
 interface Props {
 	onClose: () => void;
 	disabled?: boolean;
 }
 export function WordPressPRMenuItem({ onClose, disabled }: Props) {
+	const { __ } = useI18n();
 	const dispatch: PlaygroundDispatch = useDispatch();
 	return (
 		<MenuItem
-			aria-label="Preview WordPress Core PR"
+			aria-label={__('Preview WordPress Core PR')}
 			disabled={disabled}
 			onClick={() => {
 				dispatch(setActiveModal(modalSlugs.PREVIEW_PR_WP));
 				onClose();
 			}}
 		>
-			WordPress Core PR
+			{__('WordPress Core PR')}
 		</MenuItem>
 	);
 }
diff --git a/packages/playground/website/src/lib/i18n/config.ts b/packages/playground/website/src/lib/i18n/config.ts
new file mode 100644
index 0000000000..383eabe04d
--- /dev/null
+++ b/packages/playground/website/src/lib/i18n/config.ts
@@ -0,0 +1,201 @@
+/**
+ * i18n Configuration for WordPress Playground Website
+ *
+ * This module provides configuration and initialization for the
+ * WordPress i18n package (@wordpress/i18n).
+ */
+
+import { setLocaleData } from '@wordpress/i18n';
+
+/**
+ * The text domain for the WordPress Playground website.
+ * Used to scope translations to this specific application.
+ */
+export const TEXT_DOMAIN = 'playground-website';
+
+/**
+ * Default locale for the application.
+ */
+export const DEFAULT_LOCALE = 'en';
+
+/**
+ * Supported locales for the application.
+ * Add new locales here as translations become available.
+ */
+export const SUPPORTED_LOCALES = [
+	'en', // English
+	'es', // Spanish
+	'pt', // Portuguese
+	'ja', // Japanese
+] as const;
+
+export type SupportedLocale = (typeof SUPPORTED_LOCALES)[number];
+
+/**
+ * Locale metadata including display names.
+ */
+export const LOCALE_METADATA: Record<
+	SupportedLocale,
+	{ name: string; nativeName: string }
+> = {
+	en: { name: 'English', nativeName: 'English' },
+	es: { name: 'Spanish', nativeName: 'Español' },
+	pt: { name: 'Portuguese', nativeName: 'Português' },
+	ja: { name: 'Japanese', nativeName: '日本語' },
+};
+
+/**
+ * Validate if a string is a supported locale.
+ */
+export function isSupportedLocale(locale: string): locale is SupportedLocale {
+	return SUPPORTED_LOCALES.includes(locale as SupportedLocale);
+}
+
+/**
+ * Initialize locale data for a specific locale.
+ * This function loads translation data and registers it with @wordpress/i18n.
+ *
+ * @param locale - The locale code to initialize
+ */
+export async function initializeLocale(locale: SupportedLocale): Promise<void> {
+	// For English, we don't need to load any translations
+	if (locale === DEFAULT_LOCALE) {
+		return;
+	}
+
+	try {
+		// Dynamically import the locale data
+		const localeData = await import(`./locales/${locale}.json`);
+
+		console.log(`[i18n] Loading locale: ${locale}`);
+		console.log('[i18n] Locale data:', localeData.default);
+
+		// Register the locale data with WordPress i18n
+		// setLocaleData expects the locale_data property from the Jed format
+		setLocaleData(localeData.default.locale_data[TEXT_DOMAIN], TEXT_DOMAIN);
+
+		console.log(`[i18n] Successfully loaded ${locale} translations`);
+	} catch (error) {
+		console.error(
+			`[i18n] Failed to load locale data for ${locale}:`,
+			error
+		);
+		// Fall back to default locale (English) on error
+	}
+}
+
+/**
+ * Get the browser's preferred locale from available options.
+ */
+export function getBrowserLocale(): SupportedLocale {
+	if (typeof navigator === 'undefined') {
+		return DEFAULT_LOCALE;
+	}
+
+	// Get browser languages in order of preference
+	const browserLanguages = navigator.languages || [navigator.language];
+
+	// Find the first supported locale
+	for (const lang of browserLanguages) {
+		// Normalize to lowercase and check exact match
+		const normalizedLang = lang.toLowerCase();
+		if (isSupportedLocale(normalizedLang)) {
+			return normalizedLang;
+		}
+
+		// Check language without region (e.g., 'pt' from 'pt-BR')
+		const baseLang = normalizedLang.split('-')[0];
+		if (isSupportedLocale(baseLang)) {
+			return baseLang;
+		}
+
+		// Check with hyphen normalized to match our format (e.g., 'pt-br')
+		const hyphenatedLang = normalizedLang.replace('_', '-');
+		if (isSupportedLocale(hyphenatedLang)) {
+			return hyphenatedLang;
+		}
+	}
+
+	return DEFAULT_LOCALE;
+}
+
+/**
+ * Normalize locale string to match our supported format.
+ * Converts WordPress locale format (e.g., 'pt_BR') to our format (e.g., 'pt-br').
+ */
+function normalizeLocaleString(locale: string): string {
+	return locale.toLowerCase().replace(/_/g, '-');
+}
+
+/**
+ * Match a locale string to a supported locale, with fallback to base language.
+ * Examples:
+ *   - 'pt-pt' -> 'pt'
+ *   - 'pt-br' -> 'pt'
+ *   - 'es-mx' -> 'es'
+ *   - 'es-es' -> 'es'
+ */
+function matchSupportedLocale(locale: string): SupportedLocale | null {
+	const normalized = normalizeLocaleString(locale);
+
+	// Try exact match first
+	if (isSupportedLocale(normalized)) {
+		return normalized;
+	}
+
+	// Try base language (e.g., 'pt' from 'pt-pt')
+	const baseLang = normalized.split('-')[0];
+	if (isSupportedLocale(baseLang)) {
+		return baseLang;
+	}
+
+	return null;
+}
+
+/**
+ * Get locale from URL parameter or storage.
+ */
+export function getInitialLocale(): SupportedLocale {
+	if (typeof window !== 'undefined') {
+		const urlParams = new URLSearchParams(window.location.search);
+
+		// Check 'locale' parameter
+		const urlLocale = urlParams.get('locale');
+		if (urlLocale) {
+			const matched = matchSupportedLocale(urlLocale);
+			if (matched) {
+				return matched;
+			}
+		}
+
+		// Check 'language' parameter (WordPress format like 'pt_BR')
+		const languageParam = urlParams.get('language');
+		if (languageParam) {
+			const matched = matchSupportedLocale(languageParam);
+			if (matched) {
+				return matched;
+			}
+		}
+
+		// Only check localStorage if no URL parameters were provided
+		// This ensures URL parameters always take precedence
+		if (!urlLocale && !languageParam) {
+			const storedLocale = localStorage.getItem('playground-locale');
+			if (storedLocale && isSupportedLocale(storedLocale)) {
+				return storedLocale;
+			}
+		}
+	}
+
+	// Fall back to browser locale
+	return getBrowserLocale();
+}
+
+/**
+ * Save the current locale to localStorage.
+ */
+export function saveLocale(locale: SupportedLocale): void {
+	if (typeof window !== 'undefined') {
+		localStorage.setItem('playground-locale', locale);
+	}
+}
diff --git a/packages/playground/website/src/lib/i18n/index.ts b/packages/playground/website/src/lib/i18n/index.ts
new file mode 100644
index 0000000000..d077838c05
--- /dev/null
+++ b/packages/playground/website/src/lib/i18n/index.ts
@@ -0,0 +1,20 @@
+/**
+ * i18n module for WordPress Playground Website
+ *
+ * This module exports all i18n-related utilities, hooks, and configuration.
+ * Import from this file to access translation functionality throughout the app.
+ *
+ * @example
+ * ```tsx
+ * import { useI18n } from '@/lib/i18n';
+ *
+ * function MyComponent() {
+ *   const { __ } = useI18n();
+ *   return <h1>{__('Welcome to Playground')}</h1>;
+ * }
+ * ```
+ */
+
+export * from './config';
+export * from './use-i18n';
+export { I18nProvider } from './provider';
diff --git a/packages/playground/website/src/lib/i18n/locales/en.json b/packages/playground/website/src/lib/i18n/locales/en.json
new file mode 100644
index 0000000000..b4b93780f1
--- /dev/null
+++ b/packages/playground/website/src/lib/i18n/locales/en.json
@@ -0,0 +1,12 @@
+{
+	"domain": "playground-website",
+	"locale_data": {
+		"playground-website": {
+			"": {
+				"domain": "playground-website",
+				"lang": "en",
+				"plural-forms": "nplurals=2; plural=(n != 1);"
+			}
+		}
+	}
+}
diff --git a/packages/playground/website/src/lib/i18n/locales/es.json b/packages/playground/website/src/lib/i18n/locales/es.json
new file mode 100644
index 0000000000..72244e726a
--- /dev/null
+++ b/packages/playground/website/src/lib/i18n/locales/es.json
@@ -0,0 +1,316 @@
+{
+	"domain": "playground-website",
+	"locale_data": {
+		"playground-website": {
+			"": {
+				"domain": "playground-website",
+				"lang": "es",
+				"plural-forms": "nplurals=2; plural=(n != 1);"
+			},
+			"Save to browser storage?": [
+				"¿Guardar en el almacenamiento del navegador?"
+			],
+			"This is a dialog window which overlays the main content of the page. It offers the user a choice between using a temporary Playground and a persistent Playground that is saved to browser storage.": [
+				"Esta es una ventana de diálogo que se superpone al contenido principal de la página. Ofrece al usuario la opción de usar un Playground temporal o un Playground persistente que se guarda en el almacenamiento del navegador."
+			],
+			"The %s Playground does not exist, so we loaded a temporary Playground instead.": [
+				"El Playground %s no existe, así que cargamos un Playground temporal en su lugar."
+			],
+			"If you want to preserve your changes, you can save the Playground to browser storage.": [
+				"Si desea conservar sus cambios, puede guardar el Playground en el almacenamiento del navegador."
+			],
+			"Save Playground to browser storage": [
+				"Guardar Playground en el almacenamiento del navegador"
+			],
+			"Keep using a temporary Playground": [
+				"Seguir usando un Playground temporal"
+			],
+			"Rename Playground": ["Renombrar Playground"],
+			"This is a dialog window which overlays the main content of the page. The modal begins with a heading 2 called \"Rename Playground\". Pressing the Close button will close the modal and bring you back to where you were on the page.": [
+				"Esta es una ventana de diálogo que se superpone al contenido principal de la página. El modal comienza con un encabezado 2 llamado \"Renombrar Playground\". Al presionar el botón Cerrar se cerrará el modal y lo llevará de vuelta a donde estaba en la página."
+			],
+			"Name": ["Nombre"],
+			"e.g. Testing Gutenberg 24.17": ["ej. Probando Gutenberg 24.17"],
+			"Rename": ["Renombrar"],
+			"Not available in this browser": [
+				"No disponible en este navegador"
+			],
+			"Not available on this site": ["No disponible en este sitio"],
+			"Directory selection is not supported in this browser.": [
+				"La selección de directorios no está soportada en este navegador."
+			],
+			"Allow Playground to edit that directory in the browser prompt to continue.": [
+				"Permita que Playground edite ese directorio en la ventana del navegador para continuar."
+			],
+			"Unable to access the selected directory.": [
+				"No se puede acceder al directorio seleccionado."
+			],
+			"Choose a directory to continue.": [
+				"Elija un directorio para continuar."
+			],
+			"Saving failed. Please try again.": [
+				"Error al guardar. Por favor, inténtelo de nuevo."
+			],
+			"Save Playground": ["Guardar Playground"],
+			"Playground name": ["Nombre del Playground"],
+			"Storage location": ["Ubicación de almacenamiento"],
+			"Save in this browser": ["Guardar en este navegador"],
+			"not available": ["no disponible"],
+			"Save to a local directory": ["Guardar en un directorio local"],
+			"Local directory": ["Directorio local"],
+			"Choose a directory...": ["Elegir un directorio..."],
+			"Choose...": ["Elegir..."],
+			"Saving %d / %d files...": ["Guardando %d de %d archivos..."],
+			"Preparing to save...": ["Preparando para guardar..."],
+			"Save": ["Guardar"],
+			"Oops! There was a problem starting Playground. To figure out what went wrong, please take a look at the error logs provided below. If you see an \"Invalid blueprint error,\" the logs will point out the specific step causing the issue. You can then double-check your blueprint. For more help, you can also": [
+				"¡Ups! Hubo un problema al iniciar Playground. Para averiguar qué salió mal, consulte los registros de errores que se proporcionan a continuación. Si ve un \"Error de blueprint inválido\", los registros señalarán el paso específico que está causando el problema. Luego puede verificar su blueprint. Para obtener más ayuda, también puede"
+			],
+			"visit our documentation.": ["visitar nuestra documentación."],
+			"Don't show again": ["No mostrar de nuevo"],
+			"Error": ["Error"],
+			"Submit": ["Enviar"],
+			"Cancel": ["Cancelar"],
+			"Download the current playground as a .zip file": [
+				"Descargar el playground actual como un archivo .zip"
+			],
+			"Download as .zip": ["Descargar como .zip"],
+			"Restore from .zip": ["Restaurar desde .zip"],
+			"Import a .zip file into the current Playground": [
+				"Importar un archivo .zip al Playground actual"
+			],
+			"View logs": ["Ver registros"],
+			"Report an error in Playground": [
+				"Reportar un error en Playground"
+			],
+			"Report error": ["Reportar error"],
+			"Export WordPress theme, plugin, or wp-content directory to a GitHub repository as a Pull Request.": [
+				"Exportar tema de WordPress, plugin o directorio wp-content a un repositorio de GitHub como un Pull Request."
+			],
+			"Export to GitHub": ["Exportar a GitHub"],
+			"Import WordPress theme, plugin, or wp-content directory from a GitHub repository.": [
+				"Importar tema de WordPress, plugin o directorio wp-content desde un repositorio de GitHub."
+			],
+			"GitHub repository": ["Repositorio de GitHub"],
+			"Preview WordPress Core PR": [
+				"Vista previa del PR de WordPress Core"
+			],
+			"WordPress Core PR": ["PR de WordPress Core"],
+			"Preview Gutenberg PR.": ["Vista previa del PR de Gutenberg."],
+			"Gutenberg PR": ["PR de Gutenberg"],
+			"Unable to import file. Is it a valid WordPress Playground export?": [
+				"No se puede importar el archivo. ¿Es una exportación válida de WordPress Playground?"
+			],
+			"You may replace the current WordPress Playground site with a previously exported one.": [
+				"Puede reemplazar el sitio actual de WordPress Playground con uno exportado previamente."
+			],
+			"Import": ["Importar"],
+			"Some features may not available because you are offline.": [
+				"Algunas funciones pueden no estar disponibles porque está sin conexión."
+			],
+			"Playground toolbar": ["Barra de herramientas de Playground"],
+			"Close Site Manager": ["Cerrar Gestor de Sitios"],
+			"Open Site Manager": ["Abrir Gestor de Sitios"],
+			"Edit Playground settings": ["Editar configuración de Playground"],
+			"Playground settings": ["Configuración de Playground"],
+			"Playground": ["Playground"],
+			"Close sidebar": ["Cerrar barra lateral"],
+			"This is a temporary Playground. Your changes will be lost on page refresh.": [
+				"Este es un Playground temporal. Sus cambios se perderán al actualizar la página."
+			],
+			"This is a temporary Playground.": [
+				"Este es un Playground temporal."
+			],
+			"Your changes will be lost on page refresh.": [
+				"Sus cambios se perderán al actualizar la página."
+			],
+			"Temporary Playground": ["Playground Temporal"],
+			"Blueprints Gallery": ["Galería de Blueprints"],
+			"Saved Playgrounds": ["Playgrounds Guardados"],
+			"Resources": ["Recursos"],
+			"More demos": ["Más demos"],
+			"Documentation": ["Documentación"],
+			"GitHub": ["GitHub"],
+			"Playground export file (.zip)": [
+				"Archivo de exportación de Playground (.zip)"
+			],
+			"Files": ["Archivos"],
+			"New File": ["Nuevo Archivo"],
+			"Create new file": ["Crear nuevo archivo"],
+			"New Folder": ["Nueva Carpeta"],
+			"Create new folder": ["Crear nueva carpeta"],
+			"File too large to open (>1MB).": [
+				"Archivo demasiado grande para abrir (>1MB)."
+			],
+			"Download %s": ["Descargar %s"],
+			"Binary file. Cannot be edited.": [
+				"Archivo binario. No se puede editar."
+			],
+			"Could not open file.": ["No se pudo abrir el archivo."],
+			"Could not save changes. Try again.": [
+				"No se pudieron guardar los cambios. Inténtelo de nuevo."
+			],
+			"Start this Playground to browse and edit its files.": [
+				"Inicie este Playground para navegar y editar sus archivos."
+			],
+			"Hide files": ["Ocultar archivos"],
+			"Browse files": ["Explorar archivos"],
+			"Browse files under %s": ["Explorar archivos en %s"],
+			"Select a file to view or edit its contents.": [
+				"Seleccione un archivo para ver o editar su contenido."
+			],
+			"Saving…": ["Guardando…"],
+			"Saved": ["Guardado"],
+			"Save failed": ["Error al guardar"],
+			"Are you sure you want to delete the site '%s'?": [
+				"¿Está seguro de que desea eliminar el sitio '%s'?"
+			],
+			"Back to sites list": ["Volver a la lista de sitios"],
+			"Saved in a local directory": ["Guardado en un directorio local"],
+			"Saved in this browser %s": ["Guardado en este navegador %s"],
+			"Open site": ["Abrir sitio"],
+			"WP Admin": ["Administrador de WP"],
+			"Homepage": ["Página de inicio"],
+			"Additional actions": ["Acciones adicionales"],
+			"Delete this Playground": ["Eliminar este Playground"],
+			"Delete": ["Eliminar"],
+			"View Blueprint": ["Ver Blueprint"],
+			"Settings": ["Configuración"],
+			"File browser": ["Explorador de archivos"],
+			"Logs": ["Registros"],
+			"Loading file browser...": ["Cargando explorador de archivos..."],
+			"Stored Playgrounds have limited configuration options.": [
+				"Los Playgrounds almacenados tienen opciones de configuración limitadas."
+			],
+			"Save & Reload": ["Guardar y Recargar"],
+			"URL to visit in the WordPress site, like\"/wp-admin\"": [
+				"URL para visitar en el sitio de WordPress, como \"/wp-admin\""
+			],
+			"Error loading sites: OPFS not available": [
+				"Error al cargar sitios: OPFS no disponible"
+			],
+			"Error loading sites:": ["Error al cargar sitios:"],
+			"The requested site was not found. Creating a new temporary site.": [
+				"El sitio solicitado no fue encontrado. Creando un nuevo sitio temporal."
+			],
+			"The requested site was not found. Redirecting to a new temporary site.": [
+				"El sitio solicitado no fue encontrado. Redirigiendo a un nuevo sitio temporal."
+			],
+			"Failed to report the error": ["Error al reportar el error"],
+			"Thank you for reporting the error": [
+				"Gracias por reportar el error"
+			],
+			"Playground crashed because of an error. You can help resolve the issue by sharing the error details with us.": [
+				"Playground falló debido a un error. Puede ayudar a resolver el problema compartiendo los detalles del error con nosotros."
+			],
+			"We were unable to submit the error report. Please try again or open an ": [
+				"No pudimos enviar el informe de error. Por favor, inténtelo de nuevo o abra un "
+			],
+			"issue on GitHub.": ["issue en GitHub."],
+			"Your report has been submitted to the ": [
+				"Su informe ha sido enviado al "
+			],
+			"Making WordPress #playground-logs Slack channel": [
+				"canal de Slack #playground-logs de Making WordPress"
+			],
+			" and will be reviewed by the team.": [
+				" y será revisado por el equipo."
+			],
+			"How can we recreate this error?": [
+				"¿Cómo podemos recrear este error?"
+			],
+			"Describe what caused the error and how can we recreate it.": [
+				"Describa qué causó el error y cómo podemos recrearlo."
+			],
+			"Url": ["URL"],
+			"File imported! This Playground instance has been updated. Refreshing now.": [
+				"¡Archivo importado! Esta instancia de Playground ha sido actualizada. Actualizando ahora."
+			],
+			"Import Playground": ["Importar Playground"],
+			"This is a dialog window which overlays the main content of the page. The modal begins with a heading 2 called \"Import Playground\". Pressing the Close Import Window will close the modal and bring you back to where you were on the page.": [
+				"Esta es una ventana de diálogo que se superpone al contenido principal de la página. El modal comienza con un encabezado 2 llamado \"Importar Playground\". Al presionar el botón Cerrar Ventana de Importación se cerrará el modal y lo llevará de vuelta a donde estaba en la página."
+			],
+			"Error Logs": ["Registros de Error"],
+			"Search": ["Buscar"],
+			"Search logs": ["Buscar registros"],
+			"No matching logs found.": [
+				"No se encontraron registros coincidentes."
+			],
+			"Error logs for Playground, WordPress, and PHP will show up here when something goes wrong.": [
+				"Los registros de error de Playground, WordPress y PHP aparecerán aquí cuando algo salga mal."
+			],
+			"No problems so far – yay! 🎉": [
+				"¡No hay problemas hasta ahora – hurra! 🎉"
+			],
+			"Select a site from the site manager to explore WordPress Playground.": [
+				"Seleccione un sitio del gestor de sitios para explorar WordPress Playground."
+			],
+			"WordPress Playground wrapper (the actual WordPress site is in another, nested iframe)": [
+				"Contenedor de WordPress Playground (el sitio de WordPress real está en otro iframe anidado)"
+			],
+			"Local directory permissions expired": [
+				"Permisos del directorio local expirados"
+			],
+			"You previously granted WordPress Playground access to your local directory, but the browser no longer allows Playground to access it.": [
+				"Previamente concedió acceso a WordPress Playground a su directorio local, pero el navegador ya no permite que Playground acceda a él."
+			],
+			"There's no way to recover from this today. We are working on a way of selecting the local directory again. Stay tuned, and if you urgently need to work with this site, tell us at ": [
+				"No hay forma de recuperarse de esto hoy. Estamos trabajando en una forma de seleccionar el directorio local nuevamente. Permanezca atento y, si necesita urgentemente trabajar con este sitio, avísenos en "
+			],
+			"Local directory was deleted": [
+				"El directorio local fue eliminado"
+			],
+			"It seems like you deleted the local directory you previously selected.": [
+				"Parece que eliminó el directorio local que seleccionó anteriormente."
+			],
+			"Unfortunately, this site won't work anymore.": [
+				"Desafortunadamente, este sitio ya no funcionará."
+			],
+			"Delete this site and try again": [
+				"Eliminar este sitio e intentar de nuevo"
+			],
+			"This artifact has expired": ["Este artefacto ha expirado"],
+			"The requested GitHub artifactis no longer available. GitHub only serves PR build artifacts for a limited time.": [
+				"El artefacto de GitHub solicitado ya no está disponible. GitHub solo sirve artefactos de compilación de PR por un tiempo limitado."
+			],
+			"If you want to preview that PR, you will need to re-run GitHub workflows in that PR. One way to do that is by pushing an empty commit.": [
+				"Si desea obtener una vista previa de ese PR, deberá volver a ejecutar los flujos de trabajo de GitHub en ese PR. Una forma de hacerlo es enviando un commit vacío."
+			],
+			"Restart Playground without that PR": [
+				"Reiniciar Playground sin ese PR"
+			],
+			"Something went wrong": ["Algo salió mal"],
+			"An error occurred while loading your site. Please try again.": [
+				"Ocurrió un error al cargar su sitio. Por favor, inténtelo de nuevo."
+			],
+			"Reload the browser tab to try again": [
+				"Recargue la pestaña del navegador para intentar de nuevo"
+			],
+			"Syncing...": ["Sincronizando..."],
+			"Sync local files": ["Sincronizar archivos locales"],
+			"Local": ["Local"],
+			"Browser": ["Navegador"],
+			"Destructive action!": ["¡Acción destructiva!"],
+			"Applying these settings will reset the WordPress site to its initial state.": [
+				"Aplicar estas configuraciones restablecerá el sitio de WordPress a su estado inicial."
+			],
+			"Apply Settings & Reset Playground": [
+				"Aplicar Configuración y Restablecer Playground"
+			],
+			"There has been an error. Please try again.": [
+				"Ha ocurrido un error. Por favor, inténtelo de nuevo."
+			],
+			"WordPress Version is required": [
+				"La versión de WordPress es obligatoria"
+			],
+			"WordPress Version": ["Versión de WordPress"],
+			"-- Select a version --": ["-- Seleccione una versión --"],
+			"Need an older version?": ["¿Necesita una versión anterior?"],
+			"PHP version is required": ["La versión de PHP es obligatoria"],
+			"PHP Version": ["Versión de PHP"],
+			"Language": ["Idioma"],
+			"Allow network access": ["Permitir acceso a la red"],
+			"Create a multisite network": ["Crear una red multisite"]
+		}
+	}
+}
diff --git a/packages/playground/website/src/lib/i18n/locales/ja.json b/packages/playground/website/src/lib/i18n/locales/ja.json
new file mode 100644
index 0000000000..6a0b7c33eb
--- /dev/null
+++ b/packages/playground/website/src/lib/i18n/locales/ja.json
@@ -0,0 +1,12 @@
+{
+	"domain": "playground-website",
+	"locale_data": {
+		"playground-website": {
+			"": {
+				"domain": "playground-website",
+				"lang": "ja",
+				"plural-forms": "nplurals=1; plural=0;"
+			}
+		}
+	}
+}
diff --git a/packages/playground/website/src/lib/i18n/locales/pt.json b/packages/playground/website/src/lib/i18n/locales/pt.json
new file mode 100644
index 0000000000..ad035934c0
--- /dev/null
+++ b/packages/playground/website/src/lib/i18n/locales/pt.json
@@ -0,0 +1,308 @@
+{
+	"domain": "playground-website",
+	"locale_data": {
+		"playground-website": {
+			"": {
+				"domain": "playground-website",
+				"lang": "pt",
+				"plural-forms": "nplurals=2; plural=(n > 1);"
+			},
+			"Save to browser storage?": [
+				"Salvar no armazenamento do navegador?"
+			],
+			"This is a dialog window which overlays the main content of the page. It offers the user a choice between using a temporary Playground and a persistent Playground that is saved to browser storage.": [
+				"Esta é uma janela de diálogo que se sobrepõe ao conteúdo principal da página. Ela oferece ao usuário a escolha entre usar um Playground temporário e um Playground persistente que é salvo no armazenamento do navegador."
+			],
+			"The %s Playground does not exist, so we loaded a temporary Playground instead.": [
+				"O Playground %s não existe, então carregamos um Playground temporário."
+			],
+			"If you want to preserve your changes, you can save the Playground to browser storage.": [
+				"Se você deseja preservar suas alterações, pode salvar o Playground no armazenamento do navegador."
+			],
+			"Save Playground to browser storage": [
+				"Salvar Playground no armazenamento do navegador"
+			],
+			"Keep using a temporary Playground": [
+				"Continuar usando um Playground temporário"
+			],
+			"Rename Playground": ["Renomear Playground"],
+			"This is a dialog window which overlays the main content of the page. The modal begins with a heading 2 called \"Rename Playground\". Pressing the Close button will close the modal and bring you back to where you were on the page.": [
+				"Esta é uma janela de diálogo que se sobrepõe ao conteúdo principal da página. O modal começa com um título 2 chamado \"Renomear Playground\". Pressionar o botão Fechar fechará o modal e o levará de volta para onde você estava na página."
+			],
+			"Name": ["Nome"],
+			"e.g. Testing Gutenberg 24.17": ["ex: Testando Gutenberg 24.17"],
+			"Rename": ["Renomear"],
+			"Not available in this browser": ["Não disponível neste navegador"],
+			"Not available on this site": ["Não disponível neste site"],
+			"Directory selection is not supported in this browser.": [
+				"A seleção de diretório não é suportada neste navegador."
+			],
+			"Allow Playground to edit that directory in the browser prompt to continue.": [
+				"Permita que o Playground edite esse diretório no prompt do navegador para continuar."
+			],
+			"Unable to access the selected directory.": [
+				"Não foi possível acessar o diretório selecionado."
+			],
+			"Choose a directory to continue.": [
+				"Escolha um diretório para continuar."
+			],
+			"Saving failed. Please try again.": [
+				"Falha ao salvar. Por favor, tente novamente."
+			],
+			"Save Playground": ["Salvar Playground"],
+			"Playground name": ["Nome do Playground"],
+			"Storage location": ["Local de armazenamento"],
+			"Save in this browser": ["Salvar neste navegador"],
+			"not available": ["não disponível"],
+			"Save to a local directory": ["Salvar em um diretório local"],
+			"Local directory": ["Diretório local"],
+			"Choose a directory...": ["Escolher um diretório..."],
+			"Choose...": ["Escolher..."],
+			"Saving %d / %d files...": ["Salvando %d de %d arquivos..."],
+			"Preparing to save...": ["Preparando para salvar..."],
+			"Save": ["Salvar"],
+			"Oops! There was a problem starting Playground. To figure out what went wrong, please take a look at the error logs provided below. If you see an \"Invalid blueprint error,\" the logs will point out the specific step causing the issue. You can then double-check your blueprint. For more help, you can also": [
+				"Ops! Houve um problema ao iniciar o Playground. Para descobrir o que deu errado, consulte os logs de erro fornecidos abaixo. Se você ver um \"Erro de blueprint inválido\", os logs apontarão a etapa específica que está causando o problema. Você pode então verificar novamente seu blueprint. Para mais ajuda, você também pode"
+			],
+			"visit our documentation.": ["visitar nossa documentação."],
+			"Don't show again": ["Não mostrar novamente"],
+			"Error": ["Erro"],
+			"Submit": ["Enviar"],
+			"Cancel": ["Cancelar"],
+			"Download the current playground as a .zip file": [
+				"Baixar o playground atual como um arquivo .zip"
+			],
+			"Download as .zip": ["Baixar como .zip"],
+			"Restore from .zip": ["Restaurar do .zip"],
+			"Import a .zip file into the current Playground": [
+				"Importar um arquivo .zip para o Playground atual"
+			],
+			"View logs": ["Ver logs"],
+			"Report an error in Playground": ["Reportar um erro no Playground"],
+			"Report error": ["Reportar erro"],
+			"Export WordPress theme, plugin, or wp-content directory to a GitHub repository as a Pull Request.": [
+				"Exportar tema WordPress, plugin ou diretório wp-content para um repositório GitHub como um Pull Request."
+			],
+			"Export to GitHub": ["Exportar para GitHub"],
+			"Import WordPress theme, plugin, or wp-content directory from a GitHub repository.": [
+				"Importar tema WordPress, plugin ou diretório wp-content de um repositório GitHub."
+			],
+			"GitHub repository": ["Repositório GitHub"],
+			"Preview WordPress Core PR": ["Visualizar PR do WordPress Core"],
+			"WordPress Core PR": ["PR do WordPress Core"],
+			"Preview Gutenberg PR.": ["Visualizar PR do Gutenberg."],
+			"Gutenberg PR": ["PR do Gutenberg"],
+			"Unable to import file. Is it a valid WordPress Playground export?": [
+				"Não foi possível importar o arquivo. É uma exportação válida do WordPress Playground?"
+			],
+			"You may replace the current WordPress Playground site with a previously exported one.": [
+				"Você pode substituir o site atual do WordPress Playground por um exportado anteriormente."
+			],
+			"Import": ["Importar"],
+			"Some features may not available because you are offline.": [
+				"Alguns recursos podem não estar disponíveis porque você está offline."
+			],
+			"Playground toolbar": ["Barra de ferramentas do Playground"],
+			"Close Site Manager": ["Fechar Gerenciador de Sites"],
+			"Open Site Manager": ["Abrir Gerenciador de Sites"],
+			"Edit Playground settings": ["Editar configurações do Playground"],
+			"Playground settings": ["Configurações do Playground"],
+			"Playground": ["Playground"],
+			"Close sidebar": ["Fechar barra lateral"],
+			"This is a temporary Playground. Your changes will be lost on page refresh.": [
+				"Este é um Playground temporário. Suas alterações serão perdidas ao atualizar a página."
+			],
+			"This is a temporary Playground.": [
+				"Este é um Playground temporário."
+			],
+			"Your changes will be lost on page refresh.": [
+				"Suas alterações serão perdidas ao atualizar a página."
+			],
+			"Temporary Playground": ["Playground Temporário"],
+			"Blueprints Gallery": ["Galeria de Blueprints"],
+			"Saved Playgrounds": ["Playgrounds Salvos"],
+			"Resources": ["Recursos"],
+			"More demos": ["Mais demos"],
+			"Documentation": ["Documentação"],
+			"GitHub": ["GitHub"],
+			"Playground export file (.zip)": [
+				"Arquivo de exportação do Playground (.zip)"
+			],
+			"Files": ["Arquivos"],
+			"New File": ["Novo Arquivo"],
+			"Create new file": ["Criar novo arquivo"],
+			"New Folder": ["Nova Pasta"],
+			"Create new folder": ["Criar nova pasta"],
+			"File too large to open (>1MB).": [
+				"Arquivo muito grande para abrir (>1MB)."
+			],
+			"Download %s": ["Baixar %s"],
+			"Binary file. Cannot be edited.": [
+				"Arquivo binário. Não pode ser editado."
+			],
+			"Could not open file.": ["Não foi possível abrir o arquivo."],
+			"Could not save changes. Try again.": [
+				"Não foi possível salvar as alterações. Tente novamente."
+			],
+			"Start this Playground to browse and edit its files.": [
+				"Inicie este Playground para navegar e editar seus arquivos."
+			],
+			"Hide files": ["Ocultar arquivos"],
+			"Browse files": ["Navegar arquivos"],
+			"Browse files under %s": ["Navegar arquivos em %s"],
+			"Select a file to view or edit its contents.": [
+				"Selecione um arquivo para visualizar ou editar seu conteúdo."
+			],
+			"Saving…": ["Salvando…"],
+			"Saved": ["Salvo"],
+			"Save failed": ["Falha ao salvar"],
+			"Are you sure you want to delete the site '%s'?": [
+				"Tem certeza de que deseja excluir o site '%s'?"
+			],
+			"Back to sites list": ["Voltar para lista de sites"],
+			"Saved in a local directory": ["Salvo em um diretório local"],
+			"Saved in this browser %s": ["Salvo neste navegador %s"],
+			"Open site": ["Abrir site"],
+			"WP Admin": ["Painel WP"],
+			"Homepage": ["Página inicial"],
+			"Additional actions": ["Ações adicionais"],
+			"Delete this Playground": ["Excluir este Playground"],
+			"Delete": ["Excluir"],
+			"View Blueprint": ["Ver Blueprint"],
+			"Settings": ["Configurações"],
+			"File browser": ["Navegador de arquivos"],
+			"Logs": ["Logs"],
+			"Loading file browser...": ["Carregando navegador de arquivos..."],
+			"Stored Playgrounds have limited configuration options.": [
+				"Playgrounds salvos têm opções de configuração limitadas."
+			],
+			"Save & Reload": ["Salvar e Recarregar"],
+			"URL to visit in the WordPress site, like\"/wp-admin\"": [
+				"URL para visitar no site WordPress, como \"/wp-admin\""
+			],
+			"Error loading sites: OPFS not available": [
+				"Erro ao carregar sites: OPFS não disponível"
+			],
+			"Error loading sites:": ["Erro ao carregar sites:"],
+			"The requested site was not found. Creating a new temporary site.": [
+				"O site solicitado não foi encontrado. Criando um novo site temporário."
+			],
+			"The requested site was not found. Redirecting to a new temporary site.": [
+				"O site solicitado não foi encontrado. Redirecionando para um novo site temporário."
+			],
+			"Failed to report the error": ["Falha ao reportar o erro"],
+			"Thank you for reporting the error": [
+				"Obrigado por reportar o erro"
+			],
+			"Playground crashed because of an error. You can help resolve the issue by sharing the error details with us.": [
+				"O Playground falhou devido a um erro. Você pode ajudar a resolver o problema compartilhando os detalhes do erro conosco."
+			],
+			"We were unable to submit the error report. Please try again or open an ": [
+				"Não foi possível enviar o relatório de erro. Por favor, tente novamente ou abra uma "
+			],
+			"issue on GitHub.": ["issue no GitHub."],
+			"Your report has been submitted to the ": [
+				"Seu relatório foi enviado para o "
+			],
+			"Making WordPress #playground-logs Slack channel": [
+				"canal #playground-logs do Slack do Making WordPress"
+			],
+			" and will be reviewed by the team.": [
+				" e será revisado pela equipe."
+			],
+			"How can we recreate this error?": [
+				"Como podemos recriar este erro?"
+			],
+			"Describe what caused the error and how can we recreate it.": [
+				"Descreva o que causou o erro e como podemos recriá-lo."
+			],
+			"Url": ["URL"],
+			"File imported! This Playground instance has been updated. Refreshing now.": [
+				"Arquivo importado! Esta instância do Playground foi atualizada. Atualizando agora."
+			],
+			"Import Playground": ["Importar Playground"],
+			"This is a dialog window which overlays the main content of the page. The modal begins with a heading 2 called \"Import Playground\". Pressing the Close Import Window will close the modal and bring you back to where you were on the page.": [
+				"Esta é uma janela de diálogo que se sobrepõe ao conteúdo principal da página. O modal começa com um título 2 chamado \"Importar Playground\". Pressionar o botão Fechar Janela de Importação fechará o modal e o levará de volta para onde você estava na página."
+			],
+			"Error Logs": ["Logs de Erro"],
+			"Search": ["Pesquisar"],
+			"Search logs": ["Pesquisar logs"],
+			"No matching logs found.": [
+				"Nenhum log correspondente encontrado."
+			],
+			"Error logs for Playground, WordPress, and PHP will show up here when something goes wrong.": [
+				"Os logs de erro do Playground, WordPress e PHP aparecerão aqui quando algo der errado."
+			],
+			"No problems so far – yay! 🎉": [
+				"Nenhum problema até agora – eba! 🎉"
+			],
+			"Select a site from the site manager to explore WordPress Playground.": [
+				"Selecione um site no gerenciador de sites para explorar o WordPress Playground."
+			],
+			"WordPress Playground wrapper (the actual WordPress site is in another, nested iframe)": [
+				"Wrapper do WordPress Playground (o site WordPress real está em outro iframe aninhado)"
+			],
+			"Local directory permissions expired": [
+				"Permissões do diretório local expiraram"
+			],
+			"You previously granted WordPress Playground access to your local directory, but the browser no longer allows Playground to access it.": [
+				"Você concedeu anteriormente ao WordPress Playground acesso ao seu diretório local, mas o navegador não permite mais que o Playground o acesse."
+			],
+			"There's no way to recover from this today. We are working on a way of selecting the local directory again. Stay tuned, and if you urgently need to work with this site, tell us at ": [
+				"Não há como se recuperar disso hoje. Estamos trabalhando em uma maneira de selecionar o diretório local novamente. Fique ligado e, se você precisar urgentemente trabalhar com este site, nos avise em "
+			],
+			"Local directory was deleted": ["Diretório local foi excluído"],
+			"It seems like you deleted the local directory you previously selected.": [
+				"Parece que você excluiu o diretório local que selecionou anteriormente."
+			],
+			"Unfortunately, this site won't work anymore.": [
+				"Infelizmente, este site não funcionará mais."
+			],
+			"Delete this site and try again": [
+				"Excluir este site e tentar novamente"
+			],
+			"This artifact has expired": ["Este artefato expirou"],
+			"The requested GitHub artifactis no longer available. GitHub only serves PR build artifacts for a limited time.": [
+				"O artefato do GitHub solicitado não está mais disponível. O GitHub serve artefatos de build de PR apenas por um tempo limitado."
+			],
+			"If you want to preview that PR, you will need to re-run GitHub workflows in that PR. One way to do that is by pushing an empty commit.": [
+				"Se você deseja visualizar esse PR, precisará executar novamente os workflows do GitHub nesse PR. Uma maneira de fazer isso é enviando um commit vazio."
+			],
+			"Restart Playground without that PR": [
+				"Reiniciar Playground sem esse PR"
+			],
+			"Something went wrong": ["Algo deu errado"],
+			"An error occurred while loading your site. Please try again.": [
+				"Ocorreu um erro ao carregar seu site. Por favor, tente novamente."
+			],
+			"Reload the browser tab to try again": [
+				"Recarregue a aba do navegador para tentar novamente"
+			],
+			"Syncing...": ["Sincronizando..."],
+			"Sync local files": ["Sincronizar arquivos locais"],
+			"Local": ["Local"],
+			"Browser": ["Navegador"],
+			"Destructive action!": ["Ação destrutiva!"],
+			"Applying these settings will reset the WordPress site to its initial state.": [
+				"Aplicar essas configurações redefinirá o site WordPress para seu estado inicial."
+			],
+			"Apply Settings & Reset Playground": [
+				"Aplicar Configurações e Redefinir Playground"
+			],
+			"There has been an error. Please try again.": [
+				"Ocorreu um erro. Por favor, tente novamente."
+			],
+			"WordPress Version is required": [
+				"A versão do WordPress é obrigatória"
+			],
+			"WordPress Version": ["Versão do WordPress"],
+			"-- Select a version --": ["-- Selecione uma versão --"],
+			"Need an older version?": ["Precisa de uma versão mais antiga?"],
+			"PHP version is required": ["A versão do PHP é obrigatória"],
+			"PHP Version": ["Versão do PHP"],
+			"Language": ["Idioma"],
+			"Allow network access": ["Permitir acesso à rede"],
+			"Create a multisite network": ["Criar uma rede multisite"]
+		}
+	}
+}
diff --git a/packages/playground/website/src/lib/i18n/provider.tsx b/packages/playground/website/src/lib/i18n/provider.tsx
new file mode 100644
index 0000000000..d28431c804
--- /dev/null
+++ b/packages/playground/website/src/lib/i18n/provider.tsx
@@ -0,0 +1,103 @@
+/**
+ * I18n Provider Component
+ *
+ * This component initializes the i18n system and provides
+ * locale management throughout the application.
+ */
+
+import { useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+import {
+	getInitialLocale,
+	initializeLocale,
+	saveLocale,
+	type SupportedLocale,
+} from './config';
+
+export interface I18nProviderProps {
+	children: ReactNode;
+	/**
+	 * Optional initial locale. If not provided, will be determined
+	 * from URL params, localStorage, or browser settings.
+	 */
+	initialLocale?: SupportedLocale;
+}
+
+/**
+ * Provider component that initializes the i18n system.
+ *
+ * This component should wrap the entire application to ensure
+ * translations are available throughout the component tree.
+ *
+ * @example
+ * ```tsx
+ * import { I18nProvider } from '@/lib/i18n';
+ *
+ * function App() {
+ *   return (
+ *     <I18nProvider>
+ *       <YourApp />
+ *     </I18nProvider>
+ *   );
+ * }
+ * ```
+ */
+export function I18nProvider({
+	children,
+	initialLocale,
+}: I18nProviderProps): JSX.Element {
+	const [locale, setLocale] = useState<SupportedLocale>(() => {
+		const detectedLocale = initialLocale || getInitialLocale();
+		console.log('[i18n] Detected locale:', detectedLocale);
+		return detectedLocale;
+	});
+	const [isLoading, setIsLoading] = useState(true);
+
+	// Initialize the locale on mount and when locale changes
+	useEffect(() => {
+		let isCancelled = false;
+
+		async function loadLocale() {
+			setIsLoading(true);
+			try {
+				await initializeLocale(locale);
+				if (!isCancelled) {
+					saveLocale(locale);
+					setIsLoading(false);
+				}
+			} catch (error) {
+				console.error('Failed to initialize locale:', error);
+				if (!isCancelled) {
+					setIsLoading(false);
+				}
+			}
+		}
+
+		loadLocale();
+
+		return () => {
+			isCancelled = true;
+		};
+	}, [locale]);
+
+	// Expose locale change function globally for debugging/testing
+	useEffect(() => {
+		if (typeof window !== 'undefined') {
+			(window as any).__setPlaygroundLocale = (
+				newLocale: SupportedLocale
+			) => {
+				setLocale(newLocale);
+			};
+		}
+
+		return () => {
+			if (typeof window !== 'undefined') {
+				delete (window as any).__setPlaygroundLocale;
+			}
+		};
+	}, []);
+
+	// Render children immediately - translations will update when loaded
+	// This prevents blocking the entire UI on locale loading
+	return <>{children}</>;
+}
diff --git a/packages/playground/website/src/lib/i18n/use-i18n.ts b/packages/playground/website/src/lib/i18n/use-i18n.ts
new file mode 100644
index 0000000000..a77942bd78
--- /dev/null
+++ b/packages/playground/website/src/lib/i18n/use-i18n.ts
@@ -0,0 +1,186 @@
+/**
+ * Custom React hook for i18n functionality.
+ *
+ * This hook provides a convenient way to access WordPress i18n functions
+ * within React components, with proper text domain scoping.
+ */
+
+import { useCallback, useMemo } from 'react';
+import {
+	__ as wpTranslate,
+	_x as wpTranslateWithContext,
+	_n as wpTranslatePlural,
+	_nx as wpTranslatePluralWithContext,
+	sprintf,
+	isRTL,
+} from '@wordpress/i18n';
+import { TEXT_DOMAIN } from './config';
+
+/**
+ * Translation functions with automatic text domain binding.
+ */
+export interface I18nFunctions {
+	/**
+	 * Translate a string.
+	 *
+	 * @param text - The text to translate
+	 * @returns The translated text
+	 *
+	 * @example
+	 * const { __ } = useI18n();
+	 * const text = __('Save Playground');
+	 */
+	__(text: string): string;
+
+	/**
+	 * Translate a string with context.
+	 * Context helps disambiguate identical strings with different meanings.
+	 *
+	 * @param text - The text to translate
+	 * @param context - The context for the translation
+	 * @returns The translated text
+	 *
+	 * @example
+	 * const { _x } = useI18n();
+	 * // "Save" as in "download"
+	 * const saveButton = _x('Save', 'button label');
+	 * // "Save" as in "rescue"
+	 * const saveAction = _x('Save', 'action verb');
+	 */
+	_x(text: string, context: string): string;
+
+	/**
+	 * Translate a string with plural forms.
+	 *
+	 * @param singular - The singular form
+	 * @param plural - The plural form
+	 * @param count - The number that determines which form to use
+	 * @returns The translated text in the appropriate form
+	 *
+	 * @example
+	 * const { _n } = useI18n();
+	 * const text = _n('1 file', '%d files', fileCount);
+	 */
+	_n(singular: string, plural: string, count: number): string;
+
+	/**
+	 * Translate a string with plural forms and context.
+	 *
+	 * @param singular - The singular form
+	 * @param plural - The plural form
+	 * @param count - The number that determines which form to use
+	 * @param context - The context for the translation
+	 * @returns The translated text in the appropriate form
+	 *
+	 * @example
+	 * const { _nx } = useI18n();
+	 * const text = _nx('1 item', '%d items', count, 'shopping cart');
+	 */
+	_nx(
+		singular: string,
+		plural: string,
+		count: number,
+		context: string
+	): string;
+
+	/**
+	 * Format a string with placeholders.
+	 *
+	 * @param format - The format string with %s, %d, etc.
+	 * @param args - Values to substitute into the format string
+	 * @returns The formatted string
+	 *
+	 * @example
+	 * const { sprintf } = useI18n();
+	 * const text = sprintf('Saving %d / %d files...', current, total);
+	 */
+	sprintf(format: string, ...args: (string | number)[]): string;
+
+	/**
+	 * Check if the current locale uses right-to-left text direction.
+	 *
+	 * @returns true if the locale is RTL, false otherwise
+	 *
+	 * @example
+	 * const { isRTL } = useI18n();
+	 * const direction = isRTL() ? 'rtl' : 'ltr';
+	 */
+	isRTL(): boolean;
+}
+
+/**
+ * Hook that provides i18n translation functions.
+ *
+ * All translation functions are automatically bound to the
+ * WordPress Playground text domain.
+ *
+ * @returns Object containing translation functions
+ *
+ * @example
+ * ```tsx
+ * function SaveButton() {
+ *   const { __ } = useI18n();
+ *   return <button>{__('Save')}</button>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * function FileCounter({ count }: { count: number }) {
+ *   const { _n, sprintf } = useI18n();
+ *   const text = sprintf(
+ *     _n('Saving %d file...', 'Saving %d files...', count),
+ *     count
+ *   );
+ *   return <div>{text}</div>;
+ * }
+ * ```
+ */
+export function useI18n(): I18nFunctions {
+	// Memoize the translation function to avoid recreating on every render
+	const __ = useCallback((text: string): string => {
+		return wpTranslate(text, TEXT_DOMAIN);
+	}, []);
+
+	const _x = useCallback((text: string, context: string): string => {
+		return wpTranslateWithContext(text, context, TEXT_DOMAIN);
+	}, []);
+
+	const _n = useCallback(
+		(singular: string, plural: string, count: number): string => {
+			return wpTranslatePlural(singular, plural, count, TEXT_DOMAIN);
+		},
+		[]
+	);
+
+	const _nx = useCallback(
+		(
+			singular: string,
+			plural: string,
+			count: number,
+			context: string
+		): string => {
+			return wpTranslatePluralWithContext(
+				singular,
+				plural,
+				count,
+				context,
+				TEXT_DOMAIN
+			);
+		},
+		[]
+	);
+
+	// Return all i18n functions as a stable object
+	return useMemo(
+		() => ({
+			__,
+			_x,
+			_n,
+			_nx,
+			sprintf,
+			isRTL,
+		}),
+		[__, _x, _n, _nx]
+	);
+}
diff --git a/packages/playground/website/src/main.tsx b/packages/playground/website/src/main.tsx
index 54eb8b39a7..acf9bc2c8e 100644
--- a/packages/playground/website/src/main.tsx
+++ b/packages/playground/website/src/main.tsx
@@ -6,14 +6,17 @@ import { Provider } from 'react-redux';
 import store from './lib/state/redux/store';
 import { Layout } from './components/layout';
 import { EnsurePlaygroundSite } from './components/ensure-playground-site';
+import { I18nProvider } from './lib/i18n';
 
 collectWindowErrors(logger);
 
 const root = createRoot(document.getElementById('root')!);
 root.render(
 	<Provider store={store}>
-		<EnsurePlaygroundSite>
-			<Layout />
-		</EnsurePlaygroundSite>
+		<I18nProvider>
+			<EnsurePlaygroundSite>
+				<Layout />
+			</EnsurePlaygroundSite>
+		</I18nProvider>
 	</Provider>
 );