From a185d702c4d3277fbbc5daf832996ec0fa7ba4bb Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 28 Jun 2023 01:27:51 +0800 Subject: [PATCH 1/4] Add lock icon for theme patterns --- .../src/components/page-patterns/grid-item.js | 34 ++++++++++++++++- .../src/components/page-patterns/style.scss | 2 +- .../index.js | 38 ++++++++++++++++++- 3 files changed, 70 insertions(+), 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 index cc9d99fd90013..f25bf352d9ff2 100644 --- 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 && ( + + ) } { item.title } + + { item.title } + { item.type === PATTERNS && ( + + + + + + ) } + { item.type === USER_PATTERNS && ( + { category.label } + + + + + + + } icon={ file } id={ category.name } type="pattern" From 19ad0078f314ac6c46c7dfe4e347149bce7ca728 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 28 Jun 2023 14:48:39 +0800 Subject: [PATCH 2/4] 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 && ( ) } - { item.title } - + - + Date: Thu, 29 Jun 2023 17:39:24 +0800 Subject: [PATCH 3/4] Add aria-description --- .../src/components/page-patterns/grid-item.js | 33 +++++++++++-------- 1 file changed, 19 insertions(+), 14 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 ceb52b2528ff0..9a4939cacb5d9 100644 --- a/packages/edit-site/src/components/page-patterns/grid-item.js +++ b/packages/edit-site/src/components/page-patterns/grid-item.js @@ -18,9 +18,8 @@ import { 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, @@ -40,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 here' ); + 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 } = @@ -87,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; @@ -118,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 && } - { ariaDescription && ( + { ariaDescriptions.map( ( ariaDescription, index ) => ( - ) } + ) ) }