diff --git a/packages/edit-site/src/components/sidebar/template-card/template-areas.js b/packages/edit-site/src/components/sidebar/template-card/template-areas.js
index 7762812fad558f..61f35717fa7a96 100644
--- a/packages/edit-site/src/components/sidebar/template-card/template-areas.js
+++ b/packages/edit-site/src/components/sidebar/template-card/template-areas.js
@@ -6,7 +6,7 @@ import {
 	Button,
 	__experimentalHeading as Heading,
 } from '@wordpress/components';
-import { getTemplatePartIcon } from '@wordpress/editor';
+import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -14,19 +14,31 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
-import { TEMPLATE_PART_AREA_TO_NAME } from '../../../store/constants';
 
 function TemplateAreaItem( { area, clientId } ) {
 	const { selectBlock, toggleBlockHighlight } = useDispatch(
 		blockEditorStore
 	);
+	const templatePartArea = useSelect(
+		( select ) => {
+			const defaultAreas = select(
+				editorStore
+			).__experimentalGetDefaultTemplatePartAreas();
+
+			return defaultAreas.find(
+				( defaultArea ) => defaultArea.area === area
+			);
+		},
+		[ area ]
+	);
+
 	const highlightBlock = () => toggleBlockHighlight( clientId, true );
 	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
 
 	return (
 		<Button
 			className="edit-site-template-card__template-areas-item"
-			icon={ getTemplatePartIcon( area ) }
+			icon={ templatePartArea?.icon }
 			onMouseOver={ highlightBlock }
 			onMouseLeave={ cancelHighlightBlock }
 			onFocus={ highlightBlock }
@@ -35,7 +47,7 @@ function TemplateAreaItem( { area, clientId } ) {
 				selectBlock( clientId );
 			} }
 		>
-			{ TEMPLATE_PART_AREA_TO_NAME[ area ] }
+			{ templatePartArea?.label }
 		</Button>
 	);
 }
diff --git a/packages/edit-site/src/components/template-details/template-areas.js b/packages/edit-site/src/components/template-details/template-areas.js
index 153481b02741b6..78e88f95476ada 100644
--- a/packages/edit-site/src/components/template-details/template-areas.js
+++ b/packages/edit-site/src/components/template-details/template-areas.js
@@ -4,7 +4,7 @@
 import { sprintf, __ } from '@wordpress/i18n';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { getTemplatePartIcon } from '@wordpress/editor';
+import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { moreVertical } from '@wordpress/icons';
 
@@ -12,7 +12,6 @@ import { moreVertical } from '@wordpress/icons';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { TEMPLATE_PART_AREA_TO_NAME } from '../../store/constants';
 import isTemplateRevertable from '../../utils/is-template-revertable';
 
 function TemplatePartItemMore( {
@@ -67,6 +66,18 @@ function TemplatePartItem( {
 	const { selectBlock, toggleBlockHighlight } = useDispatch(
 		blockEditorStore
 	);
+	const templatePartArea = useSelect(
+		( select ) => {
+			const defaultAreas = select(
+				editorStore
+			).__experimentalGetDefaultTemplatePartAreas();
+
+			return defaultAreas.find(
+				( defaultArea ) => defaultArea.area === templatePart.area
+			);
+		},
+		[ templatePart.area ]
+	);
 	const highlightBlock = () => toggleBlockHighlight( clientId, true );
 	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
 
@@ -77,7 +88,7 @@ function TemplatePartItem( {
 		>
 			<MenuItem
 				role="button"
-				icon={ getTemplatePartIcon( templatePart.area ) }
+				icon={ templatePartArea?.icon }
 				iconPosition="left"
 				onClick={ () => {
 					selectBlock( clientId );
@@ -87,7 +98,7 @@ function TemplatePartItem( {
 				onFocus={ highlightBlock }
 				onBlur={ cancelHighlightBlock }
 			>
-				{ TEMPLATE_PART_AREA_TO_NAME[ templatePart.area ] }
+				{ templatePartArea?.label }
 			</MenuItem>
 
 			<DropdownMenu
diff --git a/packages/edit-site/src/store/constants.js b/packages/edit-site/src/store/constants.js
index 0d876e77bf2231..272f2049a088b2 100644
--- a/packages/edit-site/src/store/constants.js
+++ b/packages/edit-site/src/store/constants.js
@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * The identifier for the data store.
  *
@@ -14,10 +9,3 @@ export const TEMPLATE_PART_AREA_HEADER = 'header';
 export const TEMPLATE_PART_AREA_FOOTER = 'footer';
 export const TEMPLATE_PART_AREA_SIDEBAR = 'sidebar';
 export const TEMPLATE_PART_AREA_GENERAL = 'uncategorized';
-
-export const TEMPLATE_PART_AREA_TO_NAME = {
-	[ TEMPLATE_PART_AREA_HEADER ]: __( 'Header' ),
-	[ TEMPLATE_PART_AREA_FOOTER ]: __( 'Footer' ),
-	[ TEMPLATE_PART_AREA_SIDEBAR ]: __( 'Sidebar' ),
-	[ TEMPLATE_PART_AREA_GENERAL ]: __( 'General' ),
-};