Template Part Block: Add a block label

docs/designers-developers/developers/data/data-core-block-editor.md

@@ -232,6 +232,19 @@ _Returns_
 
 -   `Array`: Ordered client IDs of editor blocks.
 
+<a name="getBlockParent" href="#getBlockParent">#</a> **getBlockParent**
+
+Given a block client ID, returns the direct parent.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+-   _clientId_ `string`: Block from which to find root client ID.
+
+_Returns_
+
+-   `string`: ClientID of the parent block.
+
 <a name="getBlockParents" href="#getBlockParents">#</a> **getBlockParents**
 
 Given a block client ID, returns the list of all its parents from top to bottom.
@@ -681,6 +694,18 @@ _Returns_
 
 -   `?string`: Block Template Lock
 
+<a name="getToolbarId" href="#getToolbarId">#</a> **getToolbarId**
+
+Returns the current id of the Block toolbar
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+
+_Returns_
+
+-   `string`: Id of the currently focused block toolbar.
+
 <a name="hasBlockMovingClientId" href="#hasBlockMovingClientId">#</a> **hasBlockMovingClientId**
 
 Returns whether block moving mode is enabled.
@@ -1301,6 +1326,14 @@ _Parameters_
 
 -   _hasBlockMovingClientId_ `(string|null)`: Enable/Disable block moving mode.
 
+<a name="setBlockToolbarId" href="#setBlockToolbarId">#</a> **setBlockToolbarId**
+
+Returns an action object that sets whether the block has controlled innerblocks.
+
+_Parameters_
+
+-   _id_ `string`: The current block toolbar's id.
+
 <a name="setHasControlledInnerBlocks" href="#setHasControlledInnerBlocks">#</a> **setHasControlledInnerBlocks**
 
 Returns an action object that sets whether the block has controlled innerblocks.

packages/block-editor/src/components/navigable-toolbar/index.js

@@ -9,6 +9,7 @@ import {
 	useEffect,
 	useCallback,
 } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { focus } from '@wordpress/dom';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
@@ -108,6 +109,13 @@ function useToolbarFocus( ref, focusOnMount, isAccessibleToolbar ) {
 
 function NavigableToolbar( { children, focusOnMount, ...props } ) {
 	const wrapper = useRef();
+
+	const { setBlockToolbarId } = useDispatch( 'core/block-editor' );
+
+	useEffect( () => {
+		setBlockToolbarId( wrapper.current.id );
+	}, [ wrapper.current ] );
+
 	const isAccessibleToolbar = useIsAccessibleToolbar( wrapper );
 
 	useToolbarFocus( wrapper, focusOnMount, isAccessibleToolbar );

packages/block-editor/src/store/actions.js

@@ -1100,3 +1100,15 @@ export function setHasControlledInnerBlocks(
 		clientId,
 	};
 }
+
+/**
+ * Returns an action object that sets whether the block has controlled innerblocks.
+ *
+ * @param {string} id The current block toolbar's id.
+ */
+export function setBlockToolbarId( id ) {
+	return {
+		type: 'SET_BLOCK_TOOLBAR_ID',
+		id,
+	};
+}

packages/block-editor/src/store/reducer.js

@@ -1650,6 +1650,25 @@ export function highlightedBlock( state, action ) {
 	return state;
 }
 
+/**
+ * Reducer returning current the currently selected block toolbar id.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {string} Current block toolbar id.
+ */
+export function toolbarId( state, action ) {
+	switch ( action.type ) {
+		case 'SET_BLOCK_TOOLBAR_ID':
+			const { id } = action;
+
+			return id;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	blocks,
 	isTyping,
@@ -1671,4 +1690,5 @@ export default combineReducers( {
 	hasBlockMovingClientId,
 	automaticChangeStatus,
 	highlightedBlock,
+	toolbarId,
 } );

packages/block-editor/src/store/selectors.js

@@ -481,6 +481,35 @@ export const getBlockParents = createSelector(
 	( state ) => [ state.blocks.parents ]
 );
 
+/**
+ * Given a block client ID, returns the direct parent.
+ *
+ * @param {Object} state    Editor state.
+ * @param {string} clientId Block from which to find root client ID.
+ *
+ * @return {string} ClientID of the parent block.
+ */
+export const getBlockParent = createSelector(
+	( state, clientId ) => {
+		return state.blocks.parents[ clientId ];
+	},
+	( state ) => [ state.blocks.parents ]
+);
+
+/**
+ * Returns the current id of the Block toolbar
+ *
+ * @param {Object} state    Editor state.
+ *
+ * @return {string} Id of the currently focused block toolbar.
+ */
+export const getToolbarId = createSelector(
+	( state ) => {
+		return state.toolbarId;
+	},
+	( state ) => [ state.toolbarId ]
+);
+
 /**
  * Given a block client ID and a block name,
  * returns the list of all its parents from top to bottom,

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,31 @@ 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 {
+		isNavigationMode,
+		parentId,
+		innerBlocks,
+		selectedBlockClientId,
+	} = useSelect(
 		( select ) => {
-			const { getBlocks } = select( 'core/block-editor' );
+			const {
+				getBlocks,
+				getSelectionStart,
+				isNavigationMode: _isNavigationMode,
+				getBlockParent,
+			} = select( 'core/block-editor' );
+
+			// Only sibling blocks can be multi-selected. This
+			// means that the parent should be the same for all
+			// multi-selected blocks. We arbitrarily select the first
+			// multi-selected block.
+			const _selectedBlockClientId = getSelectionStart()?.clientId;
+
 			return {
 				innerBlocks: getBlocks( clientId ),
+				isNavigationMode: _isNavigationMode,
+				parentId: getBlockParent( _selectedBlockClientId ),
+				selectedBlockClientId: _selectedBlockClientId,
 			};
 		},
 		[ clientId ]
@@ -57,6 +78,9 @@ export default function TemplatePartEdit( {
 		}
 	}, [ innerBlocks ] );
 
+	const isParentOfSelectedBlock = parentId === clientId;
+	const shouldDisplayLabel = ! isNavigationMode() && isParentOfSelectedBlock;
+
 	if ( postId ) {
 		// Part of a template file, post ID already resolved.
 		return (
@@ -67,10 +91,19 @@ export default function TemplatePartEdit( {
 						setAttributes={ setAttributes }
 					/>
 				</BlockControls>
-				<TemplatePartInnerBlocks
-					postId={ postId }
-					hasInnerBlocks={ innerBlocks.length > 0 }
-				/>
+				<div className="wp-block-template-part__container">
+					{ shouldDisplayLabel && (
+						<TemplatePartLabel
+							postId={ postId }
+							slug={ slug }
+							selectedBlockClientId={ selectedBlockClientId }
+						/>
+					) }
+					<TemplatePartInnerBlocks
+						postId={ postId }
+						hasInnerBlocks={ innerBlocks.length > 0 }
+					/>
+				</div>
 			</>
 		);
 	}

packages/block-library/src/template-part/edit/label.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { capitalize } from 'lodash';
+import cx from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useState, useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { useEntityProp } from '@wordpress/core-data';
+import { Icon } from '@wordpress/components';
+
+function detectOverlap( e1, e2 ) {
+	const rect1 = e1 && e1.getBoundingClientRect();
+	const rect2 = e2 && e2.getBoundingClientRect();
+
+	let overlap = null;
+	if ( rect1 && rect2 ) {
+		overlap = ! (
+			rect1.right < rect2.left ||
+			rect1.left > rect2.right ||
+			rect1.bottom < rect2.top ||
+			rect1.top > rect2.bottom
+		);
+		return overlap;
+	}
+
+	return false;
+}
+
+export default function TemplatePartLabel( { postId, slug } ) {
+	const [ title ] = useEntityProp(
+		'postType',
+		'wp_template_part',
+		'title',
+		postId
+	);
+
+	const { toolbarId } = useSelect( ( select ) => {
+		const { getToolbarId } = select( 'core/block-editor' );
+		return { toolbarId: getToolbarId() };
+	} );
+
+	const labelElement = useRef( null );
+	const [ toolbarElement, setToolbarElement ] = useState( null );
+
+	useEffect( () => {
+		const toolbar = document.getElementById( toolbarId );
+		setToolbarElement( toolbar );
+	}, [ toolbarId ] );
+
+	const isOverlapped = detectOverlap( labelElement.current, toolbarElement );
+	const label = capitalize( title || slug );
+
+	return (
+		<div
+			className={ cx( 'wp-block-template-part__label-container', {
+				overlapped: isOverlapped,
+			} ) }
+		>
+			<div className="wp-block-template-part__label-layout">
+				<div
+					ref={ labelElement }
+					className="wp-block-template-part__label-content"
+				>
+					<Icon icon="block-default" size={ 13 } />
+					<span className="wp-block-template-part__label-text">
+						{ label }
+					</span>
+				</div>
+			</div>
+		</div>
+	);
+}

packages/block-library/src/template-part/editor.scss

@@ -77,6 +77,48 @@
 	}
 }
 
+.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: $border-width solid $gray-200;
+		border-bottom: none;
+		border-top-right-radius: $radius-block-ui;
+		border-top-left-radius: $radius-block-ui;
+		padding: 0 6px;
+	}
+
+	.wp-block-template-part__label-text {
+		font-size: $default-font-size;
+		padding-left: 4px;
+	}
+
+	&.overlapped {
+		top: 100%;
+
+		.wp-block-template-part__label-content {
+			display: flex;
+			align-items: center;
+			border: $border-width solid $gray-200;
+			border-top: none;
+			border-top-right-radius: 0;
+			border-top-left-radius: 0;
+			border-bottom-right-radius: $radius-block-ui;
+			border-bottom-left-radius: $radius-block-ui;
+			padding: 0 6px;
+		}
+	}
+}
+
 .is-navigate-mode .is-selected .wp-block-template-part__name-panel {
 	box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);