Skip to content

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

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

Merged
youknowriad merged 27 commits into from
Dec 9, 2022
Merged

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

Show file tree
Hide file tree
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
Keep the title sticky
  • Loading branch information
@youknowriad
youknowriad committed Dec 6, 2022
commit d61d0c27edb4d61616d8402375613caf987721c6
4 changes: 0 additions & 4 deletions packages/edit-site/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,10 +210,6 @@ export default function Layout( { onError } ) {
ease: 'easeOut',
} }
className="edit-site-layout__sidebar"
style={ {
paddingTop: canvasPadding,
paddingBottom: canvasPadding,
} }
>
<Sidebar />
</motion.div>
Expand Down
1 change: 0 additions & 1 deletion packages/edit-site/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@
.edit-site-layout__sidebar {
grid-area: sidebar;
z-index: 1;
padding-top: $grid-unit-80;
overflow-y: auto;
max-height: calc(100vh - #{$header-height});

Expand Down
78 changes: 38 additions & 40 deletions packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import {
__experimentalItemGroup as ItemGroup,
__experimentalHStack as HStack,
__experimentalNavigatorScreen as NavigatorScreen,
__experimentalNavigatorButton as NavigatorButton,
Button,
} from '@wordpress/components';
Expand All @@ -30,45 +29,44 @@ export default function SidebarNavigationScreenMain() {
const isMobileViewport = useViewportMatch( 'medium', '<' );

return (
<NavigatorScreen path="/">
<SidebarNavigationScreen
title={
<HStack style={ { minHeight: 36 } }>
<div>{ __( 'Design' ) }</div>
{ ! isMobileViewport && isEditorPage && (
<Button
className="edit-site-layout__edit-button"
label={ __( 'Open the editor' ) }
onClick={ () => {
__unstableSetCanvasMode( 'edit' );
} }
>
{ __( 'Edit' ) }
</Button>
) }
</HStack>
}
content={
<ItemGroup>
<NavigatorButton
as={ SidebarNavigationItem }
path="/templates"
withChevron
icon={ layout }
<SidebarNavigationScreen
path="/"
title={
<HStack style={ { minHeight: 36 } }>
<div>{ __( 'Design' ) }</div>
{ ! isMobileViewport && isEditorPage && (
<Button
className="edit-site-layout__edit-button"
label={ __( 'Open the editor' ) }
onClick={ () => {
__unstableSetCanvasMode( 'edit' );
} }
>
{ __( 'Templates' ) }
</NavigatorButton>
<NavigatorButton
as={ SidebarNavigationItem }
path="/template-parts"
withChevron
icon={ symbolFilled }
>
{ __( 'Template Parts' ) }
</NavigatorButton>
</ItemGroup>
}
/>
</NavigatorScreen>
{ __( 'Edit' ) }
</Button>
) }
</HStack>
}
content={
<ItemGroup>
<NavigatorButton
as={ SidebarNavigationItem }
path="/templates"
withChevron
icon={ layout }
>
{ __( 'Templates' ) }
</NavigatorButton>
<NavigatorButton
as={ SidebarNavigationItem }
path="/template-parts"
withChevron
icon={ symbolFilled }
>
{ __( 'Template Parts' ) }
</NavigatorButton>
</ItemGroup>
}
/>
);
}
76 changes: 37 additions & 39 deletions packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import {
__experimentalItemGroup as ItemGroup,
__experimentalHStack as HStack,
__experimentalNavigatorScreen as NavigatorScreen,
Button,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
Expand Down Expand Up @@ -109,44 +108,43 @@ export default function SidebarNavigationScreenTemplates( {
}

return (
<NavigatorScreen path={ config[ postType ].path }>
<SidebarNavigationScreen
parentTitle={ __( 'Design' ) }
title={
<HStack style={ { minHeight: 36 } }>
<div>{ config[ postType ].labels.title }</div>
{ ! isMobileViewport && isEditorPage && (
<Button
className="edit-site-layout__edit-button"
label={ __( 'Open the editor' ) }
onClick={ () => {
__unstableSetCanvasMode( 'edit' );
} }
>
{ __( 'Edit' ) }
</Button>
) }
</HStack>
}
content={
<>
<ItemGroup>
{ items.map( ( item, index ) => (
<Item item={ item } key={ index } />
) ) }
</ItemGroup>
<SidebarNavigationScreen
path={ config[ postType ].path }
parentTitle={ __( 'Design' ) }
title={
<HStack style={ { minHeight: 36 } }>
<div>{ config[ postType ].labels.title }</div>
{ ! isMobileViewport && isEditorPage && (
<Button
className="edit-site-layout__edit-button"
label={ __( 'Open the editor' ) }
onClick={ () => {
__unstableSetCanvasMode( 'edit' );
} }
>
{ __( 'Edit' ) }
</Button>
) }
</HStack>
}
content={
<>
<ItemGroup>
{ items.map( ( item, index ) => (
<Item item={ item } key={ index } />
) ) }
</ItemGroup>

<SidebarNavigationItem
{ ...useLink( {
postType,
postId: undefined,
} ) }
style={ { textAlign: 'center' } }
children={ config[ postType ].labels.manage }
/>
</>
}
/>
</NavigatorScreen>
<SidebarNavigationItem
{ ...useLink( {
postType,
postId: undefined,
} ) }
style={ { textAlign: 'center' } }
children={ config[ postType ].labels.manage }
/>
</>
}
/>
);
}
57 changes: 34 additions & 23 deletions packages/edit-site/src/components/sidebar-navigation-screen/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,51 @@ import {
__experimentalHStack as HStack,
__experimentalVStack as VStack,
__experimentalNavigatorBackButton as NavigatorBackButton,
__experimentalNavigatorScreen as NavigatorScreen,
} from '@wordpress/components';
import { isRTL, __, sprintf } from '@wordpress/i18n';
import { chevronRight, chevronLeft } from '@wordpress/icons';

export default function SidebarNavigationScreen( {
path,
parentTitle,
title,
content,
} ) {
return (
<VStack spacing={ 6 }>
<HStack spacing={ 4 } justify="flex-start">
{ parentTitle ? (
<NavigatorBackButton
className="edit-site-sidebar-navigation-screen__back"
icon={ isRTL() ? chevronRight : chevronLeft }
aria-label={ sprintf(
/* translators: %s: previous page. */
__( 'Navigate to the previous view: %s' ),
parentTitle
) }
/>
) : (
<div className="edit-site-sidebar-navigation-screen__icon-placeholder" />
) }
<NavigatorScreen
className="edit-site-sidebar-navigation-screen"
path={ path }
>
<VStack spacing={ 6 }>
<HStack
spacing={ 4 }
justify="flex-start"
className="edit-site-sidebar-navigation-screen__title-icon"
>
{ parentTitle ? (
<NavigatorBackButton
className="edit-site-sidebar-navigation-screen__back"
icon={ isRTL() ? chevronRight : chevronLeft }
aria-label={ sprintf(
/* translators: %s: previous page. */
__( 'Navigate to the previous view: %s' ),
parentTitle
) }
/>
) : (
<div className="edit-site-sidebar-navigation-screen__icon-placeholder" />
) }

<div className="edit-site-sidebar-navigation-screen__title">
{ title }
</div>
</HStack>
<div className="edit-site-sidebar-navigation-screen__title">
{ title }
</div>
</HStack>

<nav className="edit-site-sidebar-navigation-screen__content">
{ content }
</nav>
</VStack>
<nav className="edit-site-sidebar-navigation-screen__content">
{ content }
</nav>
</VStack>
</NavigatorScreen>
);
}
16 changes: 16 additions & 0 deletions packages/edit-site/src/components/sidebar-navigation-screen/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,21 @@
.edit-site-sidebar-navigation-screen {
display: flex;
flex-direction: column;
overflow-x: unset !important;
position: relative;
}

.edit-site-sidebar-navigation-screen__content {
margin: 0 $button-size;
flex-grow: 1;
overflow-y: auto;
}

.edit-site-sidebar-navigation-screen__title-icon {
position: sticky;
top: 0;
background: $gray-900;
padding-top: $grid-unit-80;
}

.edit-site-sidebar-navigation-screen__title {
Expand Down
6 changes: 5 additions & 1 deletion packages/edit-site/src/components/sidebar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
.edit-site-sidebar__content.edit-site-sidebar__content {
overflow-x: unset;
}

.edit-site-sidebar__content > div {
// This matches the logo padding
padding: $grid-unit-15;
padding: 0 $grid-unit-15;
}