Skip to content

Commit

Permalink
[Library] Add lock icon for theme patterns (#51990)
Browse files Browse the repository at this point in the history 
* Add lock icon for theme patterns

* Change to class names

* Add aria-description

* Change wording
  • Loading branch information
@kevin940726
kevin940726 committed Jun 30, 2023
1 parent dec307c commit 1fa932c
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 19 deletions.
68 changes: 52 additions & 16 deletions packages/edit-site/src/components/page-patterns/grid-item.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,19 @@ 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,
header,
footer,
symbolFilled,
moreHorizontal,
lockSmall,
} from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';
import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
Expand All @@ -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 } =
Expand Down Expand Up @@ -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;
Expand All @@ -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 && <BlockPreview blocks={ item.blocks } /> }
</CompositeItem>
{ ariaDescription && (
{ ariaDescriptions.map( ( ariaDescription, index ) => (
<div
aria-hidden="true"
style={ { display: 'none' } }
id={ descriptionId }
key={ index }
hidden
id={ `${ descriptionId }-${ index }` }
>
{ ariaDescription }
</div>
) }
) ) }
<HStack
aria-hidden="true"
className="edit-site-patterns__footer"
Expand All @@ -141,8 +149,36 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
spacing={ 3 }
className="edit-site-patterns__pattern-title"
>
{ icon && <Icon icon={ itemIcon } /> }
<Heading level={ 5 }>{ item.title }</Heading>
{ icon && (
<Icon
className="edit-site-patterns__pattern-icon"
icon={ itemIcon }
/>
) }
<Flex
as={ Heading }
level={ 5 }
gap={ 0 }
justify="left"
>
{ item.title }
{ item.type === PATTERNS && (
<Tooltip
position="top center"
text={ __(
'Theme patterns cannot be edited.'
) }
>
<span className="edit-site-patterns__pattern-lock-icon">
<Icon
style={ { fill: 'currentcolor' } }
icon={ lockSmall }
size={ 24 }
/>
</span>
</Tooltip>
) }
</Flex>
</HStack>
{ item.type === USER_PATTERNS && (
<DropdownMenu
Expand Down
6 changes: 5 additions & 1 deletion packages/edit-site/src/components/page-patterns/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,15 @@
.edit-site-patterns__pattern-title {
color: $gray-600;

svg {
.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 {
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-site/src/components/sidebar-navigation-screen-pattern/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,7 @@
height: 24px;
margin-right: $grid-unit-10;
}

.edit-site-sidebar-navigation-screen-pattern__lock-icon {
display: inline-flex;
}
33 changes: 31 additions & 2 deletions packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -138,7 +141,33 @@ 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.'
) }
>
<span className="edit-site-sidebar-navigation-screen-pattern__lock-icon">
<Icon
style={ {
fill: 'currentcolor',
} }
icon={
lockSmall
}
size={ 24 }
/>
</span>
</Tooltip>
</Flex>
}
icon={ file }
id={ category.name }
type="pattern"
Expand Down

1 comment on commit 1fa932c

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 1fa932c.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5420930379
📝 Reported issues:

Please sign in to comment.