Skip to content

Commit

Permalink
Patterns: Distinguish between theme patterns and template parts in ca…
Browse files Browse the repository at this point in the history
…tegory list (#52382)
  • Loading branch information
jameskoster authored and ockham committed Jul 12, 2023
1 parent 667838e commit 526fa88
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 50 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
Flex,
Icon,
Tooltip,
__experimentalHeading as Heading,
} from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
Expand Down Expand Up @@ -109,9 +110,21 @@ export default function SidebarNavigationScreenPatterns() {
</ItemGroup>
) }
{ hasTemplateParts && (
<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
{ Object.entries( templatePartAreas ).map(
( [ area, parts ] ) => (
<>
<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
<Heading level={ 2 }>
{ __( 'Template parts' ) }
</Heading>
<p>
{ __(
'Synced patterns for use in template building.'
) }
</p>
</div>
<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
{ Object.entries(
templatePartAreas
).map( ( [ area, parts ] ) => (
<CategoryItem
key={ area }
count={ parts.length }
Expand All @@ -131,54 +144,71 @@ export default function SidebarNavigationScreenPatterns() {
'wp_template_part'
}
/>
)
) }
</ItemGroup>
) ) }
</ItemGroup>
</>
) }
{ hasPatterns && (
<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
{ patternCategories.map( ( category ) => (
<CategoryItem
key={ category.name }
count={ category.count }
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"
isActive={
currentCategory ===
`${ category.name }` &&
currentType === 'pattern'
}
/>
) ) }
</ItemGroup>
<>
<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
<Heading level={ 2 }>
{ __( 'Theme patterns' ) }
</Heading>
<p>
{ __(
'For insertion into documents where they can then be customized.'
) }
</p>
</div>
<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
{ patternCategories.map(
( category ) => (
<CategoryItem
key={ category.name }
count={ category.count }
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"
isActive={
currentCategory ===
`${ category.name }` &&
currentType ===
'pattern'
}
/>
)
) }
</ItemGroup>
</>
) }
</>
) }
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,28 @@
.edit-site-sidebar-navigation-screen-patterns__group {
margin-bottom: $grid-unit-30;
margin-bottom: $grid-unit-40;
padding-bottom: $grid-unit-30;
border-bottom: 1px solid $gray-800;

&:last-of-type,
&:first-of-type {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}

&:first-of-type {
margin-bottom: $grid-unit-40;
}
}

.edit-site-sidebar-navigation-screen-patterns__group-header {
p {
color: $gray-600;
}

h2 {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
}
}

0 comments on commit 526fa88

Please sign in to comment.