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.

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

Site Editor: Try template drill down on shell sidebar (browse mode) #45100

Merged
merged 27 commits into from
Dec 9, 2022
Merged
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
957a3f2
Refactor SidebarNavigationRoot to use NavigatorScreen
oandregal Dec 1, 2022
3710f13
Introduce new screen for templates
oandregal Dec 1, 2022
89a21c8
Introduce chevron for SidebarNavigationItem
oandregal Dec 1, 2022
125cb41
Templates screen: add edit button
oandregal Dec 1, 2022
6c2dc03
Signal the template that is selected
oandregal Dec 2, 2022
3a96aa2
Select Templates if any is active
oandregal Dec 2, 2022
c576632
Set template being edited, no matter the theme
oandregal Dec 2, 2022
79718d6
Center align text for "manage all templates"
oandregal Dec 2, 2022
0371b34
Fix VStack/HStack alias
oandregal Dec 2, 2022
5bdebc3
Use same padding bottom in sidebar
oandregal Dec 2, 2022
edbf202
Make template list scrollable
oandregal Dec 2, 2022
3ad7b33
Refactor the sidebar styles and components
youknowriad Dec 5, 2022
d3867ac
Add template parts
youknowriad Dec 5, 2022
d61d0c2
Keep the title sticky
youknowriad Dec 6, 2022
0195866
Add shadow to panel header
jameskoster Dec 6, 2022
de04a76
Apply different styles to hover / current states
jameskoster Dec 6, 2022
4e84696
Remove icons
youknowriad Dec 8, 2022
b9a6fd8
Fix box shadow
youknowriad Dec 8, 2022
586cf8f
update the design of the manage templates link
youknowriad Dec 8, 2022
2e242c3
Fix active template when the home page is static
youknowriad Dec 8, 2022
b9aacce
Add custom scrollbars
youknowriad Dec 8, 2022
3ad1e1d
Fix active element
youknowriad Dec 8, 2022
3e26da3
Space out the see all button
youknowriad Dec 8, 2022
aefdbb2
increase the border width
youknowriad Dec 8, 2022
ad33eca
Fix the jumping
youknowriad Dec 9, 2022
a10399a
Adds comment to CSS
youknowriad Dec 9, 2022
753b99d
Fix e2e test
youknowriad Dec 9, 2022
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
Prev Previous commit
Next Next commit
Add template parts
  • Loading branch information
youknowriad committed Dec 5, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit d3867ac9f106a9d56d6a5618103c58c58dddac9d
Original file line number Diff line number Diff line change
@@ -10,39 +10,24 @@ import {
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { layout, symbolFilled } from '@wordpress/icons';
import { useDispatch, useSelect } from '@wordpress/data';
import { useDispatch } from '@wordpress/data';
import { useViewportMatch } from '@wordpress/compose';

/**
* Internal dependencies
*/
import SidebarNavigationScreen from '../sidebar-navigation-screen';
import { useLink } from '../routes/link';
import SidebarNavigationItem from '../sidebar-navigation-item';
import { useLocation } from '../routes';
import { store as editSiteStore } from '../../store';
import getIsListPage from '../../utils/get-is-list-page';

export default function SidebarNavigationScreenMain() {
const { params } = useLocation();
const templateId = useSelect( ( select ) => {
return select( editSiteStore ).getEditedPostId();
} );
const isListPage = getIsListPage( params );
const isEditorPage = ! isListPage;
const templatesLink = useLink( {
postType: 'wp_template',
postId: templateId,
} );
const templatePartsLink = useLink( {
postType: 'wp_template_part',
postId: undefined,
} );
const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isTemplatesPage = params.postType === 'wp_template';
const isTemplatePartsPage =
params.postType === 'wp_template_part' && ! params.postId;

return (
<NavigatorScreen path="/">
@@ -68,24 +53,19 @@ export default function SidebarNavigationScreenMain() {
<NavigatorButton
as={ SidebarNavigationItem }
path="/templates"
withChevron={ true }
{ ...templatesLink }
withChevron
icon={ layout }
aria-current={
isTemplatesPage ? 'page' : undefined
}
>
{ __( 'Templates' ) }
</NavigatorButton>
<SidebarNavigationItem
{ ...templatePartsLink }
<NavigatorButton
as={ SidebarNavigationItem }
path="/template-parts"
withChevron
icon={ symbolFilled }
aria-current={
isTemplatePartsPage ? 'page' : undefined
}
>
{ __( 'Template Parts' ) }
</SidebarNavigationItem>
</NavigatorButton>
</ItemGroup>
}
/>
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ import {
Button,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { layout } from '@wordpress/icons';
import { layout, symbolFilled } from '@wordpress/icons';
import { useDispatch } from '@wordpress/data';
import { useEntityRecords } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';
@@ -24,19 +24,46 @@ import { useLocation } from '../routes';
import { store as editSiteStore } from '../../store';
import getIsListPage from '../../utils/get-is-list-page';

function omit( object, keys ) {
return Object.fromEntries(
Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )
);
}

const Item = ( { item } ) => {
const linkInfo = useLink( item.params );
if ( item.params ) {
delete item.params;
item = {
...item,
...linkInfo,
};
}
return <SidebarNavigationItem { ...item } />;
const props = item.params
? { ...omit( item, 'params' ), ...linkInfo }
: item;
return <SidebarNavigationItem { ...props } />;
};

const config = {
wp_template: {
path: '/templates',
labels: {
title: __( 'Templates' ),
loading: __( 'Loading templates' ),
notFound: __( 'No templates found' ),
manage: __( 'Manage all templates' ),
},
icon: layout,
},
wp_template_part: {
path: '/template-parts',
labels: {
title: __( 'Template parts' ),
loading: __( 'Loading template parts' ),
notFound: __( 'No template parts found' ),
manage: __( 'Manage all template parts' ),
},
icon: symbolFilled,
},
};

export default function SidebarNavigationScreenTemplates() {
export default function SidebarNavigationScreenTemplates( {
postType = 'wp_template',
} ) {
const { params } = useLocation();
const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -45,7 +72,7 @@ export default function SidebarNavigationScreenTemplates() {

const { records: templates, isResolving: isLoading } = useEntityRecords(
'postType',
'wp_template',
postType,
{
per_page: -1,
}
@@ -55,40 +82,39 @@ export default function SidebarNavigationScreenTemplates() {
if ( isLoading ) {
items = [
{
children: __( 'Loading templates' ),
children: config[ postType ].labels.loading,
},
];
} else if ( ! templates && ! isLoading ) {
items = [
{
children: __( 'No templates found' ),
children: config[ postType ].labels.notFound,
},
];
} else {
items = templates?.map( ( template ) => ( {
params: {
postType: 'wp_template',
postType,
postId: template.id,
},
icon: layout,
icon: config[ postType ].icon,
children: decodeEntities(
template.title?.rendered || template.slug
),
'aria-current':
params.postType === 'wp_template' &&
params.postId === template.id
params.postType === postType && params.postId === template.id
? 'page'
: undefined,
} ) );
}

return (
<NavigatorScreen path="/templates">
<NavigatorScreen path={ config[ postType ].path }>
<SidebarNavigationScreen
parentTitle={ __( 'Design' ) }
title={
<HStack style={ { minHeight: 36 } }>
<div>{ __( 'Templates' ) }</div>
<div>{ config[ postType ].labels.title }</div>
{ ! isMobileViewport && isEditorPage && (
<Button
className="edit-site-layout__edit-button"
@@ -112,11 +138,11 @@ export default function SidebarNavigationScreenTemplates() {

<SidebarNavigationItem
{ ...useLink( {
postType: 'wp_template',
postType,
postId: undefined,
} ) }
style={ { textAlign: 'center' } }
children={ __( 'Manage all templates' ) }
children={ config[ postType ].labels.manage }
/>
</>
}
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/sidebar/index.js
Original file line number Diff line number Diff line change
@@ -16,7 +16,8 @@ export function Sidebar() {
initialPath="/"
>
<SidebarNavigationScreenMain />
<SidebarNavigationScreenTemplates />
<SidebarNavigationScreenTemplates postType="wp_template" />
<SidebarNavigationScreenTemplates postType="wp_template_part" />
</NavigatorProvider>
);
}