Add lock icon for theme patterns

WordPress · Jun 30, 2023 · a185d70 · a185d70
1 parent 32d4995
commit a185d70
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 4 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
@@ -15,6 +15,8 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalHStack as HStack,
 	__unstableCompositeItem as CompositeItem,
+	Tooltip,
+	Flex,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
@@ -26,6 +28,7 @@ import {
 	footer,
 	symbolFilled,
 	moreHorizontal,
+	lockSmall,
 } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
@@ -141,8 +144,37 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 						spacing={ 3 }
 						className="edit-site-patterns__pattern-title"
 					>
-						{ icon && <Icon icon={ itemIcon } /> }
+						{ icon && (
+							<Icon
+								className="edit-site-library__pattern-icon"
+								icon={ itemIcon }
+							/>
+						) }
 						<Heading level={ 5 }>{ item.title }</Heading>
+						<Flex
+							as={ Heading }
+							level={ 5 }
+							gap={ 0 }
+							justify="left"
+						>
+							{ item.title }
+							{ item.type === PATTERNS && (
+								<Tooltip
+									position="top center"
+									text={ __(
+										'Theme patterns cannot be edited here'
+									) }
+								>
+									<span style={ { display: 'inline-flex' } }>
+										<Icon
+											style={ { fill: 'currentcolor' } }
+											icon={ lockSmall }
+											size={ 24 }
+										/>
+									</span>
+								</Tooltip>
+							) }
+						</Flex>
 					</HStack>
 					{ item.type === USER_PATTERNS && (
 						<DropdownMenu

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
@@ -93,7 +93,7 @@
 .edit-site-patterns__pattern-title {
 	color: $gray-600;
 
-	svg {
+	.edit-site-library__pattern-icon {
 		border-radius: $grid-unit-05;
 		background: var(--wp-block-synced-color);
 		fill: $white;

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
@@ -4,13 +4,16 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	Flex,
+	Icon,
+	Tooltip,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { getTemplatePartIcon } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { getQueryArgs } from '@wordpress/url';
-import { file, starFilled } from '@wordpress/icons';
+import { file, starFilled, lockSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -138,7 +141,38 @@ export default function SidebarNavigationScreenPatterns() {
 										<CategoryItem
 											key={ category.name }
 											count={ category.count }
-											label={ category.label }
+											label={
+												<Flex
+													justify="left"
+													align="center"
+													gap={ 0 }
+												>
+													{ category.label }
+													<Tooltip
+														position="top center"
+														text={ __(
+															'Theme patterns cannot be edited here'
+														) }
+													>
+														<span
+															style={ {
+																display:
+																	'inline-flex',
+															} }
+														>
+															<Icon
+																style={ {
+																	fill: 'currentcolor',
+																} }
+																icon={
+																	lockSmall
+																}
+																size={ 24 }
+															/>
+														</span>
+													</Tooltip>
+												</Flex>
+											}
 											icon={ file }
 											id={ category.name }
 											type="pattern"