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

Co-authored-by: Riad Benguella <[email protected]>
Co-authored-by: James Koster <[email protected]>

packages/base-styles/_mixins.scss

@@ -550,3 +550,36 @@
 	}
 	/* stylelint-enable function-comma-space-after */
 }
+
+@mixin custom-scrollbars-on-hover() {
+	visibility: hidden;
+
+	$handle-color: #757575;
+	$track-color: #1e1e1e;
+
+	// WebKit
+	&::-webkit-scrollbar {
+		width: 12px;
+		height: 12px;
+	}
+	&::-webkit-scrollbar-track {
+		background-color: $track-color;
+	}
+	&::-webkit-scrollbar-thumb {
+		background-color: $handle-color;
+		border-radius: 8px;
+		border: 3px solid transparent;
+		background-clip: padding-box;
+	}
+
+	// Firefox 109+ and Chrome 111+
+	scrollbar-color: $handle-color $track-color; // Syntax, "dark", "light", or "#handle-color #track-color"
+	scrollbar-width: thin;
+	scrollbar-gutter: stable;
+
+	&:hover,
+	&:focus,
+	& > * {
+		visibility: visible;
+	}
+}

packages/e2e-tests/specs/experiments/blocks/post-comments-form.test.js

@@ -27,9 +27,10 @@ describe( 'Post Comments Form', () => {
 				'.edit-site-sidebar-navigation-item',
 				{ text: /templates/i }
 			);
-			await expect( page ).toClick( '.components-heading > a', {
-				text: /singular/i,
-			} );
+			await expect( page ).toClick(
+				'.edit-site-sidebar-navigation-item',
+				{ text: /singular/i }
+			);
 			await enterEditMode();
 
 			// Insert post comments form

packages/edit-site/src/components/layout/style.scss

@@ -45,7 +45,9 @@
 .edit-site-layout__sidebar {
 	grid-area: sidebar;
 	z-index: 1;
-	padding-top: $grid-unit-80;
+	overflow-y: auto;
+	max-height: calc(100vh - #{$header-height});
+	@include custom-scrollbars-on-hover;
 
 	// This is only necessary for the exit animation
 	.edit-site-layout.is-full-canvas & {

packages/edit-site/src/components/sidebar-navigation-item/index.js

@@ -9,13 +9,14 @@ import classnames from 'classnames';
 import {
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
-	FlexItem,
+	FlexBlock,
 } from '@wordpress/components';
-import { Icon } from '@wordpress/icons';
+import { chevronRight, Icon } from '@wordpress/icons';
 
 export default function SidebarNavigationItem( {
 	className,
 	icon,
+	withChevron = false,
 	children,
 	...props
 } ) {
@@ -34,7 +35,14 @@ export default function SidebarNavigationItem( {
 						icon={ icon }
 						size={ 24 }
 					/>
-					<FlexItem>{ children }</FlexItem>
+					<FlexBlock>{ children }</FlexBlock>
+					{ withChevron && (
+						<Icon
+							style={ { fill: 'currentcolor' } }
+							icon={ chevronRight }
+							size={ 24 }
+						/>
+					) }
 				</HStack>
 			) }
 			{ ! icon && children }

packages/edit-site/src/components/sidebar-navigation-item/style.scss

@@ -1,9 +1,17 @@
 .edit-site-sidebar-navigation-item.components-item {
 	color: $gray-600;
+	border-width: $border-width-tab;
 
 	&:hover,
-	&:focus,
+	&:focus {
+		color: $white;
+		background: $gray-800;
+		border-width: $border-width-tab;
+	}
+
 	&[aria-current] {
 		color: $white;
+		background: var(--wp-admin-theme-color);
+		border-width: $border-width-tab;
 	}
 }

packages/edit-site/src/components/sidebar-navigation-screen-main/index.js

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalNavigatorButton as NavigatorButton,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { layout, symbolFilled } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+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 isListPage = getIsListPage( params );
+	const isEditorPage = ! isListPage;
+	const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
+	return (
+		<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' );
+							} }
+						>
+							{ __( '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>
+			}
+		/>
+	);
+}