From 19ad0078f314ac6c46c7dfe4e347149bce7ca728 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Wed, 28 Jun 2023 14:48:39 +0800
Subject: [PATCH] Change to class names

---
 .../edit-site/src/components/page-patterns/grid-item.js    | 5 ++---
 packages/edit-site/src/components/page-patterns/style.scss | 6 +++++-
 .../sidebar-navigation-screen-pattern/style.scss           | 4 ++++
 .../components/sidebar-navigation-screen-patterns/index.js | 7 +------
 4 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js
index f25bf352d9ff2..ceb52b2528ff0 100644
--- a/packages/edit-site/src/components/page-patterns/grid-item.js
+++ b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -146,11 +146,10 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 					>
 						{ icon && (
 							<Icon
-								className="edit-site-library__pattern-icon"
+								className="edit-site-patterns__pattern-icon"
 								icon={ itemIcon }
 							/>
 						) }
-						<Heading level={ 5 }>{ item.title }</Heading>
 						<Flex
 							as={ Heading }
 							level={ 5 }
@@ -165,7 +164,7 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 										'Theme patterns cannot be edited here'
 									) }
 								>
-									<span style={ { display: 'inline-flex' } }>
+									<span className="edit-site-patterns__pattern-lock-icon">
 										<Icon
 											style={ { fill: 'currentcolor' } }
 											icon={ lockSmall }
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index a67ef9b887530..fdf0aea3431f6 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -93,11 +93,15 @@
 .edit-site-patterns__pattern-title {
 	color: $gray-600;
 
-	.edit-site-library__pattern-icon {
+	.edit-site-patterns__pattern-icon {
 		border-radius: $grid-unit-05;
 		background: var(--wp-block-synced-color);
 		fill: $white;
 	}
+
+	.edit-site-patterns__pattern-lock-icon {
+		display: inline-flex;
+	}
 }
 
 .edit-site-patterns__no-results {
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss
index 469451d8943dc..a092ac50935b6 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss
@@ -23,3 +23,7 @@
 	height: 24px;
 	margin-right: $grid-unit-10;
 }
+
+.edit-site-sidebar-navigation-screen-pattern__lock-icon {
+	display: inline-flex;
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
index c976172e27e9f..069b5b3fd6a0a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
@@ -154,12 +154,7 @@ export default function SidebarNavigationScreenPatterns() {
 															'Theme patterns cannot be edited here'
 														) }
 													>
-														<span
-															style={ {
-																display:
-																	'inline-flex',
-															} }
-														>
+														<span className="edit-site-sidebar-navigation-screen-pattern__lock-icon">
 															<Icon
 																style={ {
 																	fill: 'currentcolor',