Template part placeholders - use label and icon per variation. (#31721)

* use names and icons for the variation * update copy and button labels * add area to dep array * Copy * update casing in e2e test selectors * update casing Co-authored-by: James Koster <[email protected]>
WordPress · May 14, 2021 · 09b3282 · 09b3282
1 parent 2d2f28e
commit 09b3282
Showing 1 changed file with 36 additions and 8 deletions.
diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/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.toLowerCase()
 					) }
 				>
 					<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.toLowerCase()
+									) }
 								</Button>
 							</>
 						) }