From e6a5063afc1d6e27deb61c7f39ceafd117bbfe2e Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 27 Jul 2023 11:19:14 +1000
Subject: [PATCH] Sentence case area slug for details

---
 .../use-pattern-details.js                    | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
index 099abf789678b2..afa1fc69e69e1a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { sentenceCase } from 'change-case';
+
 /**
  * WordPress dependencies
  */
@@ -82,10 +87,19 @@ export default function usePatternDetails( postType, postId ) {
 			( area ) => area.area === record.area
 		);
 
-		details.push( {
-			label: __( 'Area' ),
-			value: templatePartArea?.label || record.area || __( 'None' ),
-		} );
+		let areaDetailValue = templatePartArea?.label;
+
+		if ( ! areaDetailValue ) {
+			areaDetailValue = record.area
+				? sprintf(
+						// translators: %s: Sentenced cased template part area e.g: "My custom area".
+						__( '%s (removed)' ),
+						sentenceCase( record.area )
+				  )
+				: __( 'None' );
+		}
+
+		details.push( { label: __( 'Area' ), value: areaDetailValue } );
 	}
 
 	if (