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 cc9d99fd90013..377a04aca1c16 100644
--- a/packages/edit-site/src/components/page-patterns/grid-item.js
+++ b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -15,10 +15,11 @@ 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';
-import { useState } from '@wordpress/element';
+import { useState, useId } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import {
Icon,
@@ -26,6 +27,7 @@ import {
footer,
symbolFilled,
moreHorizontal,
+ lockSmall,
} from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';
import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
@@ -37,9 +39,10 @@ import { DELETE, BACKSPACE } from '@wordpress/keycodes';
import { PATTERNS, USER_PATTERNS } from './utils';
import { useLink } from '../routes/link';
+const THEME_PATTERN_TOOLTIP = __( 'Theme patterns cannot be edited.' );
+
export default function GridItem( { categoryId, composite, icon, item } ) {
- const instanceId = useInstanceId( GridItem );
- const descriptionId = `edit-site-patterns__pattern-description-${ instanceId }`;
+ const descriptionId = useId();
const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
const { __experimentalDeleteReusableBlock } =
@@ -84,14 +87,17 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
};
const isUserPattern = item.type === USER_PATTERNS;
- let ariaDescription;
+ const ariaDescriptions = [];
if ( isUserPattern ) {
// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
- ariaDescription = __(
- 'Press Enter to edit, or Delete to delete the pattern.'
+ ariaDescriptions.push(
+ __( 'Press Enter to edit, or Delete to delete the pattern.' )
);
} else if ( item.description ) {
- ariaDescription = item.description;
+ ariaDescriptions.push( item.description );
+ }
+ if ( item.type === PATTERNS ) {
+ ariaDescriptions.push( THEME_PATTERN_TOOLTIP );
}
let itemIcon = icon;
@@ -115,21 +121,23 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
onKeyDown={ isUserPattern ? onKeyDown : undefined }
aria-label={ item.title }
aria-describedby={
- ariaDescription ? descriptionId : undefined
+ ariaDescriptions.length
+ ? ariaDescriptions.join( ' ' )
+ : undefined
}
>
{ isEmpty && __( 'Empty pattern' ) }
{ ! isEmpty &&