Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Library] Add lock icon for theme patterns #51990

Merged
merged 4 commits into from
Jun 30, 2023
Merged

[Library] Add lock icon for theme patterns #51990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a185d70
Add lock icon for theme patterns
kevin940726 Jun 27, 2023
19ad007
Change to class names
kevin940726 Jun 28, 2023
1d5e690
Add aria-description
kevin940726 Jun 29, 2023
30804a8
Change wording
kevin940726 Jun 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 52 additions & 16 deletions packages/edit-site/src/components/page-patterns/grid-item.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading