Site Editor: Update Navigation Panel Toggle UI

packages/components/src/navigation/back-button/index.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronLeft } from '@wordpress/icons';
 
@@ -15,13 +16,10 @@ import { Icon, chevronLeft } from '@wordpress/icons';
 import { useNavigationContext } from '../context';
 import { MenuBackButtonUI } from '../styles/navigation-styles';
 
-export default function NavigationBackButton( {
-	backButtonLabel,
-	className,
-	href,
-	onClick,
-	parentMenu,
-} ) {
+function NavigationBackButton(
+	{ backButtonLabel, className, href, onClick, parentMenu },
+	ref
+) {
 	const { setActiveMenu, navigationTree } = useNavigationContext();
 
 	const classes = classnames(
@@ -34,14 +32,17 @@ export default function NavigationBackButton( {
 	return (
 		<MenuBackButtonUI
 			className={ classes }
-			isTertiary
 			href={ href }
+			isTertiary
 			onClick={ () =>
 				parentMenu ? setActiveMenu( parentMenu, 'right' ) : onClick
 			}
+			ref={ ref }
 		>
 			<Icon icon={ chevronLeft } />
 			{ backButtonLabel || parentMenuTitle || __( 'Back' ) }
 		</MenuBackButtonUI>
 	);
 }
+
+export default forwardRef( NavigationBackButton );

packages/edit-site/src/components/header/navigation-toggle/index.js

@@ -35,7 +35,7 @@ function NavigationToggle( { icon, isOpen, onClick } ) {
 		return null;
 	}
 
-	let buttonIcon = <Icon size="32px" icon={ wordpress } />;
+	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
 
 	if ( siteIconUrl ) {
 		buttonIcon = (
@@ -48,7 +48,7 @@ function NavigationToggle( { icon, isOpen, onClick } ) {
 	} else if ( isRequestingSiteIcon ) {
 		buttonIcon = null;
 	} else if ( icon ) {
-		buttonIcon = <Icon size="32px" icon={ icon } />;
+		buttonIcon = <Icon size="36px" icon={ icon } />;
 	}
 
 	return (

packages/edit-site/src/components/header/navigation-toggle/style.scss

@@ -2,43 +2,63 @@
 	display: none;
 
 	@include break-medium() {
-		display: flex;
 		align-items: center;
-		background-color: #1e1e1e;
-		height: 61px;
+		background: $gray-900;
 		border-radius: 0;
+		display: flex;
+		height: $header-height + $border-width; // Cover header border
+		width: $header-height;
 	}
 }
 
 .edit-site-navigation-toggle.is-open {
+	flex-shrink: 0;
+	height: $header-height + $border-width; // Cover header border
 	width: 300px;
+
+	// Delay to sync with `NavigationPanel` animation
+	transition: 93ms cubic-bezier(0, 0, 0.2, 1);
+	transition-delay: 7ms;
+
+	.edit-site-navigation-toggle__button {
+		background: $gray-900;
+	}
 }
 
 .edit-site-navigation-toggle__button {
-	color: #fff;
-	margin-left: 14px;
-	margin-right: 14px;
+	align-items: center;
+	background: #23282e; // WP-admin gray.
+	color: $white;
+	height: $header-height + $border-width; // Cover header border
+	width: $header-height;
+
+	&.has-icon {
+		min-width: $header-height;
 
-	&:hover {
-		color: #ddd;
+		&:hover {
+			background: #32373d; // WP-admin light-gray.
+			color: $white;
+		}
+		&:active {
+			color: $white;
+		}
+		&:focus {
+			box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 0 3px $white;
+		}
 	}
 }
 
-.edit-site-navigation-toggle.components-button.has-icon {
-	justify-content: flex-start;
-	padding: 0;
-	height: 32px;
-	width: 32px;
-	min-width: 32px;
+.edit-site-navigation-toggle__site-icon {
+	width: 36px;
 }
 
 .edit-site-navigation-toggle__site-title {
 	font-style: normal;
 	font-weight: 600;
-	font-size: 13px;
-	line-height: 16px;
-	color: #ddd;
-	margin-right: 14px;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
+	color: $gray-300;
+	margin: 0 $grid-unit-20 0 $grid-unit-10;
 
 	display: -webkit-box;
 	-webkit-line-clamp: 2;

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

@@ -1,54 +1,80 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import {
+	Animate,
 	__experimentalNavigation as Navigation,
+	__experimentalNavigationBackButton as NavigationBackButton,
 	__experimentalNavigationGroup as NavigationGroup,
 	__experimentalNavigationItem as NavigationItem,
 	__experimentalNavigationMenu as NavigationMenu,
 } from '@wordpress/components';
 import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { BlockPreview } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 const NavigationPanel = () => {
 	const [ showPreview, setShowPreview ] = useState( false );
+	const ref = useRef();
 
-	return (
-		<div className="edit-site-navigation-panel">
-			<Navigation>
-				<NavigationMenu title="Home">
-					<NavigationItem
-						item="item-back"
-						title="Back to dashboard"
-						href="index.php"
-					/>
+	useEffect( () => {
+		ref.current.focus();
+	}, [ ref ] );
 
-					<NavigationGroup title="Example group">
-						<NavigationItem
-							item="item-preview"
-							title="Hover to show preview"
-							onMouseEnter={ () => setShowPreview( true ) }
-							onMouseLeave={ () => setShowPreview( false ) }
+	return (
+		<Animate type="slide-in" options={ { origin: 'right' } }>
+			{ ( { className: animateClassName } ) => (
+				<div
+					className={ classnames(
+						'edit-site-navigation-panel',
+						animateClassName
+					) }
+				>
+					<Navigation>
+						<NavigationBackButton
+							backButtonLabel={ __( 'Dashboard' ) }
+							className="edit-site-navigation-panel__back-to-dashboard"
+							href="index.php"
+							ref={ ref }
 						/>
-					</NavigationGroup>
-				</NavigationMenu>
-			</Navigation>
+						<NavigationMenu title="Home">
+							<NavigationGroup title="Example group">
+								<NavigationItem
+									item="item-preview"
+									title="Hover to show preview"
+									onMouseEnter={ () =>
+										setShowPreview( true )
+									}
+									onMouseLeave={ () =>
+										setShowPreview( false )
+									}
+								/>
+							</NavigationGroup>
+						</NavigationMenu>
+					</Navigation>
 
-			{ showPreview && (
-				<div className="edit-site-navigation-panel__preview">
-					<BlockPreview
-						blocks={ [
-							getBlockFromExample(
-								'core/paragraph',
-								getBlockType( 'core/paragraph' ).example
-							),
-						] }
-						viewportWidth={ 1200 }
-					/>
+					{ showPreview && (
+						<div className="edit-site-navigation-panel__preview">
+							<BlockPreview
+								blocks={ [
+									getBlockFromExample(
+										'core/paragraph',
+										getBlockType( 'core/paragraph' ).example
+									),
+								] }
+								viewportWidth={ 1200 }
+							/>
+						</div>
+					) }
 				</div>
 			) }
-		</div>
+		</Animate>
 	);
 };
 

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

@@ -8,6 +8,20 @@
 	}
 }
 
+.edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary {
+	border-radius: 0;
+	border-bottom: $border-width solid $gray-700;
+	height: auto;
+	margin-left: -6px; // +2px to display the focus box-shadow
+	margin-top: 2px; // +2px to display the focus box-shadow
+	padding: $grid-unit $grid-unit-20;
+	width: calc(100% + #{$grid-unit-15});
+
+	&:focus:not(:disabled) {
+		border-bottom-color: transparent;
+	}
+}
+
 .edit-site-navigation-panel__preview {
 	display: none;
 	border: $border-width solid $gray-400;