Themes: Support title in templateParts

docs/how-to-guides/themes/theme-json.md

@@ -949,6 +949,7 @@ Within this field themes can list the template parts present in the `block-templ
 Currently block variations exist for "header" and "footer" values of the area term, any other values and template parts not defined in the json will default to the general template part block. Variations will be denoted by specific icons within the editor's interface, will default to the corresponding semantic HTML element for the wrapper (this can also be overridden by the `tagName` attribute set on the template part block), and will contextualize the template part allowing more custom flows in future editor improvements.
 
 - name: mandatory.
+- title: optional, translatable.
 - area: optional, will be set to `uncategorized` by default and trigger no block variation.
 
 ```json
@@ -957,6 +958,7 @@ Currently block variations exist for "header" and "footer" values of the area te
 	"templateParts": [
 		{
 			"name": "my-template-part",
+			"title": "Header",
 			"area": "header"
 		}
 	]

lib/class-wp-theme-json-gutenberg.php

@@ -801,7 +801,7 @@ private static function compute_preset_classes( $settings, $selector, $origins )
 	/**
 	 * Transform a slug into a CSS Custom Property.
 	 *
-	 * @param array  $input String to replace.
+	 * @param string $input String to replace.
 	 * @param string $slug The slug value to use to generate the custom property.
 	 *
 	 * @return string The CSS Custom Property. Something along the lines of --wp--preset--color--black.
@@ -1121,7 +1121,8 @@ public function get_template_parts() {
 		foreach ( $this->theme_json['templateParts'] as $item ) {
 			if ( isset( $item['name'] ) ) {
 				$template_parts[ $item['name'] ] = array(
-					'area' => isset( $item['area'] ) ? $item['area'] : '',
+					'title' => isset( $item['title'] ) ? $item['title'] : '',
+					'area'  => isset( $item['area'] ) ? $item['area'] : '',
 				);
 			}
 		}

lib/full-site-editing/block-templates.php

@@ -129,7 +129,8 @@ function _gutenberg_add_template_part_area_info( $template_info ) {
 	}
 
 	if ( isset( $theme_data[ $template_info['slug'] ]['area'] ) ) {
-		$template_info['area'] = gutenberg_filter_template_part_area( $theme_data[ $template_info['slug'] ]['area'] );
+		$template_info['title'] = $theme_data[ $template_info['slug'] ]['title'];
+		$template_info['area']  = gutenberg_filter_template_part_area( $theme_data[ $template_info['slug'] ]['area'] );
 	} else {
 		$template_info['area'] = WP_TEMPLATE_PART_AREA_UNCATEGORIZED;
 	}
@@ -222,7 +223,7 @@ function _gutenberg_build_template_result_from_file( $template_file, $template_t
 	$template->slug           = $template_file['slug'];
 	$template->source         = 'theme';
 	$template->type           = $template_type;
-	$template->title          = $template_file['slug'];
+	$template->title          = ! empty( $template_file['title'] ) ? $template_file['title'] : $template_file['slug'];
 	$template->status         = 'publish';
 	$template->has_theme_file = true;
 

lib/theme-i18n.json

@@ -102,5 +102,10 @@
 		{
 			"title": "Custom template name"
 		}
+	],
+	"templateParts": [
+		{
+			"title": "Template part name"
+		}
 	]
 }

phpunit/class-wp-theme-json-resolver-test.php

@@ -134,6 +134,11 @@ function test_fields_are_extracted() {
 				'key'     => 'title',
 				'context' => 'Custom template name',
 			),
+			array(
+				'path'    => array( 'templateParts' ),
+				'key'     => 'title',
+				'context' => 'Template part name',
+			),
 		);
 
 		$this->assertEquals( $expected, $actual );
@@ -197,6 +202,15 @@ function test_translations_are_applied() {
 				),
 			)
 		);
+		$this->assertSame(
+			$actual->get_template_parts(),
+			array(
+				'small-header' => array(
+					'title' => 'Mały nagłówek',
+					'area'  => 'header',
+				),
+			)
+		);
 	}
 
 	function test_switching_themes_recalculates_data() {

phpunit/class-wp-theme-json-test.php

@@ -1525,8 +1525,9 @@ function test_get_template_parts() {
 			array(
 				'templateParts' => array(
 					array(
-						'name' => 'small-header',
-						'area' => 'header',
+						'name'  => 'small-header',
+						'title' => 'Small Header',
+						'area'  => 'header',
 					),
 				),
 			)
@@ -1538,7 +1539,8 @@ function test_get_template_parts() {
 			$template_parts,
 			array(
 				'small-header' => array(
-					'area' => 'header',
+					'title' => 'Small Header',
+					'area'  => 'header',
 				),
 			)
 		);

phpunit/data/languages/themes/fse-pl_PL.po

@@ -22,6 +22,10 @@ msgctxt "Custom template name"
 msgid "Homepage template"
 msgstr "Szablon strony głównej"
 
+msgctxt "Template part name"
+msgid "Small Header"
+msgstr "Mały nagłówek"
+
 msgctxt "Color name"
 msgid "Light"
 msgstr "Jasny"

phpunit/data/themedir1/fse/theme.json

@@ -39,6 +39,7 @@
 	"templateParts": [
 		{
 			"name": "small-header",
+			"title": "Small Header",
 			"area": "header"
 		}
 	]