Template part placeholders - use label and icon per variation.

packages/block-library/src/template-part/edit/placeholder/index.js

@@ -1,13 +1,18 @@
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { Placeholder, Dropdown, Button } from '@wordpress/components';
-import { blockDefault } from '@wordpress/icons';
 import { serialize } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -28,6 +33,23 @@ export default function TemplatePartPlaceholder( {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const [ step, setStep ] = useState( PLACEHOLDER_STEPS.initial );
 
+	const { areaIcon, areaLabel } = useSelect(
+		( select ) => {
+			const definedAreas = select(
+				editorStore
+			).__experimentalGetDefaultTemplatePartAreas();
+
+			const selectedArea = find( definedAreas, { area } );
+			const defaultArea = find( definedAreas, { area: 'uncategorized' } );
+
+			return {
+				areaIcon: selectedArea?.icon || defaultArea?.icon,
+				areaLabel: selectedArea?.label || __( 'Template Part' ),
+			};
+		},
+		[ area ]
+	);
+
 	const onCreate = useCallback(
 		async ( startingBlocks = [] ) => {
 			const title = __( 'Untitled Template Part' );
@@ -61,10 +83,12 @@ export default function TemplatePartPlaceholder( {
 		<>
 			{ step === PLACEHOLDER_STEPS.initial && (
 				<Placeholder
-					icon={ blockDefault }
-					label={ __( 'Template Part' ) }
-					instructions={ __(
-						'Create a new template part or pick an existing one from the list.'
+					icon={ areaIcon }
+					label={ areaLabel }
+					instructions={ sprintf(
+						// Translators: %s as template part area title ("Header", "Footer", etc.).
+						'Choose an existing %s or create a new one.',
+						areaLabel
 					) }
 				>
 					<Dropdown
@@ -85,7 +109,11 @@ export default function TemplatePartPlaceholder( {
 										setStep( PLACEHOLDER_STEPS.patterns )
 									}
 								>
-									{ __( 'New template part' ) }
+									{ sprintf(
+										// Translators: %s as template part area title ("Header", "Footer", etc.).
+										'New %s',
+										areaLabel
+									) }
 								</Button>
 							</>
 						) }

packages/e2e-tests/specs/experiments/multi-entity-editing.test.js

@@ -31,7 +31,7 @@ const createTemplatePart = async (
 	// Create new template part.
 	await insertBlock( 'Template Part' );
 	const [ createNewButton ] = await page.$x(
-		'//button[contains(text(), "New template part")]'
+		'//button[contains(text(), "New Template Part")]'
 	);
 	await createNewButton.click();
 	await page.waitForSelector(

packages/e2e-tests/specs/experiments/multi-entity-saving.test.js

@@ -27,7 +27,7 @@ describe( 'Multi-entity save flow', () => {
 	const closePanelButtonSelector =
 		'.editor-post-publish-panel__header-cancel-button button';
 	const createNewButtonSelector =
-		'//button[contains(text(), "New template part")]';
+		'//button[contains(text(), "New Template Part")]';
 
 	// Reusable assertions across Post/Site editors.
 	const assertAllBoxesChecked = async () => {

packages/e2e-tests/specs/experiments/template-part.test.js

@@ -268,7 +268,7 @@ describe( 'Template Part', () => {
 		const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`;
 		const testContentSelector = `//p[contains(., "${ testContent }")]`;
 		const createNewButtonSelector =
-			'//button[contains(text(), "New template part")]';
+			'//button[contains(text(), "New Template Part")]';
 		const chooseExistingButtonSelector =
 			'//button[contains(text(), "Choose existing")]';