From 3bfea599a292de296fb989ec3c56909d26de1311 Mon Sep 17 00:00:00 2001
From: Addison Stavlo <Stavz01@gmail.com>
Date: Wed, 20 Jan 2021 09:59:55 -0500
Subject: [PATCH] Template Part - fix labels shown - use title instead of slug
 (#28330)

* use title instead of slug

* add special template-part check for

* fix bad request made while creating new template part

* add comment
---
 .../edit/selection/template-part-previews.js     | 12 ++++++++----
 packages/blocks/src/api/utils.js                 | 16 +++++++++++++++-
 .../navigation-panel/template-navigation-item.js |  5 ++++-
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/selection/template-part-previews.js b/packages/block-library/src/template-part/edit/selection/template-part-previews.js
index b437bb15e2ae8..50480bfa3f35f 100644
--- a/packages/block-library/src/template-part/edit/selection/template-part-previews.js
+++ b/packages/block-library/src/template-part/edit/selection/template-part-previews.js
@@ -36,7 +36,11 @@ function TemplatePartItem( {
 	onClose,
 	composite,
 } ) {
-	const { slug, theme, title } = templatePart;
+	const {
+		slug,
+		theme,
+		title: { rendered: title },
+	} = templatePart;
 	// The 'raw' property is not defined for a brief period in the save cycle.
 	// The fallback prevents an error in the parse function while saving.
 	const content = templatePart.content.raw || '';
@@ -49,7 +53,7 @@ function TemplatePartItem( {
 			sprintf(
 				/* translators: %s: template part title. */
 				__( 'Template Part "%s" inserted.' ),
-				title.rendered
+				title || slug
 			),
 			{
 				type: 'snackbar',
@@ -70,12 +74,12 @@ function TemplatePartItem( {
 				}
 			} }
 			tabIndex={ 0 }
-			aria-label={ templatePart.slug }
+			aria-label={ title || slug }
 			{ ...composite }
 		>
 			<BlockPreview blocks={ blocks } />
 			<div className="wp-block-template-part__selection-preview-item-title">
-				{ templatePart.slug }
+				{ title || slug }
 			</div>
 		</CompositeItem>
 	);
diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js
index dbf1dc79049b9..a45a80e972c8a 100644
--- a/packages/blocks/src/api/utils.js
+++ b/packages/blocks/src/api/utils.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { every, has, isFunction, isString } from 'lodash';
+import { every, has, isFunction, isString, startCase } from 'lodash';
 import { default as tinycolor, mostReadable } from 'tinycolor2';
 
 /**
@@ -10,6 +10,7 @@ import { default as tinycolor, mostReadable } from 'tinycolor2';
 import { Component, isValidElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -140,6 +141,19 @@ export function normalizeBlockType( blockTypeOrName ) {
  * @return {string} The block label.
  */
 export function getBlockLabel( blockType, attributes, context = 'visual' ) {
+	// Attempt to find entity title if block is a template part.
+	// Require slug to request, otherwise entity is uncreated and will throw 404.
+	if ( 'core/template-part' === blockType.name && attributes.slug ) {
+		const entity = select( 'core' ).getEntityRecord(
+			'postType',
+			'wp_template_part',
+			attributes.theme + '//' + attributes.slug
+		);
+		if ( entity ) {
+			return startCase( entity.title?.rendered || entity.slug );
+		}
+	}
+
 	const { __experimentalLabel: getLabel, title } = blockType;
 
 	const label = getLabel && getLabel( attributes, { context } );
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-item.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-item.js
index f694b66bee668..9d7e85094de1e 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-item.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-item.js
@@ -20,7 +20,10 @@ export default function TemplateNavigationItem( { item } ) {
 		( select ) =>
 			'wp_template' === item.type
 				? select( 'core/editor' ).__experimentalGetTemplateInfo( item )
-				: { title: item?.slug, description: '' },
+				: {
+						title: item?.title?.rendered || item?.slug,
+						description: '',
+				  },
 		[]
 	);
 	const { setTemplate, setTemplatePart } = useDispatch( 'core/edit-site' );