From af2ef8c046057d3a36a9d3ab0ef70d05c66a73cd Mon Sep 17 00:00:00 2001
From: Jeremy Yip <jeremy.yip@automattic.com>
Date: Fri, 7 Aug 2020 14:38:05 -0700
Subject: [PATCH] Add template part label

---
 .../src/template-part/edit/index.js           | 25 ++++++++++++----
 .../src/template-part/edit/label.js           | 27 +++++++++++++++++
 .../src/template-part/editor.scss             | 29 +++++++++++++++++++
 3 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 packages/block-library/src/template-part/edit/label.js

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 891bd30b53b70..fa9f8c0679b96 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -10,6 +10,7 @@ import { BlockControls } from '@wordpress/block-editor';
  */
 import useTemplatePartPost from './use-template-part-post';
 import TemplatePartNamePanel from './name-panel';
+import TemplatePartLabel from './label';
 import TemplatePartInnerBlocks from './inner-blocks';
 import TemplatePartPlaceholder from './placeholder';
 
@@ -29,11 +30,18 @@ export default function TemplatePartEdit( {
 	// but wait until the third inner blocks change,
 	// because the first 2 are just the template part
 	// content loading.
-	const { innerBlocks } = useSelect(
+	const { innerBlocks, hasSelectedInnerBlock } = useSelect(
 		( select ) => {
-			const { getBlocks } = select( 'core/block-editor' );
+			const {
+				getBlocks,
+				hasSelectedInnerBlock: getHasSelectedInnerBlock,
+			} = select( 'core/block-editor' );
 			return {
 				innerBlocks: getBlocks( clientId ),
+				hasSelectedInnerBlock: getHasSelectedInnerBlock(
+					clientId,
+					true
+				),
 			};
 		},
 		[ clientId ]
@@ -67,10 +75,15 @@ export default function TemplatePartEdit( {
 						setAttributes={ setAttributes }
 					/>
 				</BlockControls>
-				<TemplatePartInnerBlocks
-					postId={ postId }
-					hasInnerBlocks={ innerBlocks.length > 0 }
-				/>
+				<div style={ { position: 'relative' } }>
+					{ hasSelectedInnerBlock && (
+						<TemplatePartLabel postId={ postId } slug={ slug } />
+					) }
+					<TemplatePartInnerBlocks
+						postId={ postId }
+						hasInnerBlocks={ innerBlocks.length > 0 }
+					/>
+				</div>
 			</>
 		);
 	}
diff --git a/packages/block-library/src/template-part/edit/label.js b/packages/block-library/src/template-part/edit/label.js
new file mode 100644
index 0000000000000..f854f11d4ea2a
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/label.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { Icon } from '@wordpress/components';
+
+export default function TemplatePartLabel( { postId, slug } ) {
+	const [ title ] = useEntityProp(
+		'postType',
+		'wp_template_part',
+		'title',
+		postId
+	);
+
+	return (
+		<div className="wp-block-template-part__label-container">
+			<div className="wp-block-template-part__label-layout">
+				<div className="wp-block-template-part__label-content">
+					<Icon icon="controls-repeat" size={ 12 } />
+					<span className="wp-block-template-part__label-text">
+						{ title || slug }
+					</span>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 433e1c0d5fcfa..abbd72b03f11a 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -77,6 +77,34 @@
 	}
 }
 
+.wp-block-template-part__label-container {
+	position: absolute;
+	bottom: 100%;
+	width: 100%;
+
+	.wp-block-template-part__label-layout {
+		display: flex;
+		justify-content: flex-start;
+	}
+
+	.wp-block-template-part__label-content {
+		display: flex;
+		align-items: center;
+		border: 1px solid $gray-600;
+		border-bottom: none;
+		border-top-right-radius: 2px;
+		border-top-left-radius: 2px;
+		padding: 2px 6px;
+	}
+
+	.wp-block-template-part__label-text {
+		color: $black;
+		font-size: 10px;
+		text-transform: uppercase;
+		padding-left: 4px;
+	}
+}
+
 .is-navigate-mode .is-selected .wp-block-template-part__name-panel {
 	box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 
@@ -111,6 +139,7 @@
 	&.has-child-selected {
 		&::after {
 			box-shadow: 0 0 0 $border-width $gray-600;
+			border-top-left-radius: 0;
 		}
 	}
 }