Global Styles: Use context when translating entries in theme.json (#2…

…8246)
WordPress · Feb 9, 2021 · b50b584 · b50b584
1 parent 672bd93
commit b50b584
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 31 deletions.
diff --git a/lib/class-wp-theme-json-resolver.php b/lib/class-wp-theme-json-resolver.php
@@ -89,8 +89,8 @@ private static function get_from_file( $file_path ) {
 	 *   "settings": {
 	 *     "*": {
 	 *       "typography": {
-	 *         "fontSizes": [ "name" ],
-	 *         "fontStyles": [ "name" ]
+	 *         "fontSizes": [ { "name": "Font size name" } ],
+	 *         "fontStyles": [ { "name": "Font size name" } ]
 	 *       }
 	 *     }
 	 *   }
@@ -100,12 +100,14 @@ private static function get_from_file( $file_path ) {
 	 *
 	 * [
 	 *   0 => [
-	 *     'path' => [ 'settings', '*', 'typography', 'fontSizes' ],
-	 *     'translatable_keys' => [ 'name' ]
+	 *     'path'    => [ 'settings', '*', 'typography', 'fontSizes' ],
+	 *     'key'     => 'name',
+	 *     'context' => 'Font size name'
 	 *   ],
 	 *   1 => [
-	 *     'path' => [ 'settings', '*', 'typography', 'fontStyles' ],
-	 *     'translatable_keys' => [ 'name']
+	 *     'path'    => [ 'settings', '*', 'typography', 'fontStyles' ],
+	 *     'key'     => 'name',
+	 *     'context' => 'Font style name'
 	 *   ]
 	 * ]
 	 *
@@ -118,12 +120,15 @@ private static function theme_json_i18_file_structure_to_preset_paths( $file_str
 		$result = array();
 		foreach ( $file_structure_partial as $property => $partial_child ) {
 			if ( is_numeric( $property ) ) {
-				return array(
-					array(
-						'path'              => $current_path,
-						'translatable_keys' => $file_structure_partial,
-					),
-				);
+				foreach ( $partial_child as $key => $context ) {
+					return array(
+						array(
+							'path'    => $current_path,
+							'key'     => $key,
+							'context' => $context,
+						),
+					);
+				}
 			}
 			$result = array_merge(
 				$result,
@@ -138,7 +143,7 @@ private static function theme_json_i18_file_structure_to_preset_paths( $file_str
 	 *
 	 * @return array An array of theme.json paths that are translatable and the keys that are translatable
 	 */
-	private static function get_presets_to_translate() {
+	public static function get_presets_to_translate() {
 		static $theme_json_i18n = null;
 		if ( null === $theme_json_i18n ) {
 			$file_structure  = self::get_from_file( __DIR__ . '/experimental-i18n-theme.json' );
@@ -166,23 +171,23 @@ private static function translate_presets( &$theme_json_structure, $domain = 'de
 			}
 
 			foreach ( $preset_to_translate as $preset ) {
-				$path               = array_slice( $preset['path'], 2 );
-				$translatable_keys  = $preset['translatable_keys'];
+				$path    = array_slice( $preset['path'], 2 );
+				$key     = $preset['key'];
+				$context = $preset['context'];
+
 				$array_to_translate = gutenberg_experimental_get( $settings, $path, null );
 				if ( null === $array_to_translate ) {
 					continue;
 				}
 
 				foreach ( $array_to_translate as &$item_to_translate ) {
-					foreach ( $translatable_keys as $translatable_key ) {
-						if ( empty( $item_to_translate[ $translatable_key ] ) ) {
-							continue;
-						}
-
-						// phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText,WordPress.WP.I18n.NonSingularStringLiteralDomain
-						$item_to_translate[ $translatable_key ] = translate( $item_to_translate[ $translatable_key ], $domain );
-						// phpcs:enable
+					if ( empty( $item_to_translate[ $key ] ) ) {
+						continue;
 					}
+
+					// phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText,WordPress.WP.I18n.NonSingularStringLiteralContext,WordPress.WP.I18n.NonSingularStringLiteralDomain
+					$item_to_translate[ $key ] = translate_with_gettext_context( $item_to_translate[ $key ], $context, $domain );
+					// phpcs:enable
 				}
 
 				gutenberg_experimental_set( $settings, $path, $array_to_translate );

diff --git a/lib/experimental-i18n-theme.json b/lib/experimental-i18n-theme.json
@@ -2,16 +2,16 @@
 	"settings": {
 		"*": {
 			"typography": {
-				"fontSizes": [ "name" ],
-				"fontStyles": [ "name" ],
-				"fontWeights": [ "name" ],
-				"fontFamilies": [ "name" ],
-				"textTransforms": [ "name" ],
-				"textDecorations": [ "name" ]
+				"fontSizes": [ { "name": "Font size name" } ],
+				"fontStyles": [ { "name": "Font style name" } ],
+				"fontWeights": [ { "name": "Font weight name" } ],
+				"fontFamilies": [ { "name": "Font family name" } ],
+				"textTransforms": [ { "name": "Text transform name" } ],
+				"textDecorations": [ { "name": "Text decoration name" } ]
 			},
 			"color": {
-				"palette": [ "name" ],
-				"gradients": [ "name" ]
+				"palette": [ { "name": "Color name" } ],
+				"gradients": [ { "name": "Gradient name" } ]
 			}
 		}
 	}

diff --git a/phpunit/class-wp-theme-json-resolver-test.php b/phpunit/class-wp-theme-json-resolver-test.php
@@ -0,0 +1,59 @@
+<?php
+
+/**
+ * Test WP_Theme_JSON_Resolver class.
+ *
+ * @package Gutenberg
+ */
+
+class WP_Theme_JSON_Resolver_Test extends WP_UnitTestCase {
+
+	function test_presets_are_extracted() {
+		$actual = WP_Theme_JSON_Resolver::get_presets_to_translate();
+
+		$expected = array(
+			array(
+				'path'    => array( 'settings', '*', 'typography', 'fontSizes' ),
+				'key'     => 'name',
+				'context' => 'Font size name',
+			),
+			array(
+				'path'    => array( 'settings', '*', 'typography', 'fontStyles' ),
+				'key'     => 'name',
+				'context' => 'Font style name',
+			),
+			array(
+				'path'    => array( 'settings', '*', 'typography', 'fontWeights' ),
+				'key'     => 'name',
+				'context' => 'Font weight name',
+			),
+			array(
+				'path'    => array( 'settings', '*', 'typography', 'fontFamilies' ),
+				'key'     => 'name',
+				'context' => 'Font family name',
+			),
+			array(
+				'path'    => array( 'settings', '*', 'typography', 'textTransforms' ),
+				'key'     => 'name',
+				'context' => 'Text transform name',
+			),
+			array(
+				'path'    => array( 'settings', '*', 'typography', 'textDecorations' ),
+				'key'     => 'name',
+				'context' => 'Text decoration name',
+			),
+			array(
+				'path'    => array( 'settings', '*', 'color', 'palette' ),
+				'key'     => 'name',
+				'context' => 'Color name',
+			),
+			array(
+				'path'    => array( 'settings', '*', 'color', 'gradients' ),
+				'key'     => 'name',
+				'context' => 'Gradient name',
+			),
+		);
+
+		$this->assertEquals( $expected, $actual );
+	}
+}