Site editor: Rework navigation panel animations (#26158)

WordPress · Oct 20, 2020 · e4a9d33 · e4a9d33
1 parent ebff8b5
commit e4a9d33
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 85 deletions.
diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
@@ -5,7 +5,11 @@
 	height: $header-height;
 	box-sizing: border-box;
 	width: 100%;
-	padding-left: $header-height;
+
+	padding-left: 60px;
+	transition: padding-left 20ms linear;
+	transition-delay: 80ms;
+	@include reduce-motion("transition");
 
 	.edit-site-header_start,
 	.edit-site-header_end {
@@ -43,6 +47,8 @@
 body.is-navigation-sidebar-open {
 	.edit-site-header {
 		padding-left: 0;
+		transition: padding-left 20ms linear;
+		transition-delay: 0ms;
 
 		.edit-site-header_start {
 			flex-basis: $header-toolbar-min-width;

diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js
@@ -17,7 +17,7 @@ const NavigationSidebar = () => {
 	return (
 		<>
 			<NavigationToggle isOpen={ isNavigationOpen } />
-			{ isNavigationOpen && <NavigationPanel /> }
+			<NavigationPanel isOpen={ isNavigationOpen } />
 		</>
 	);
 };

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -17,22 +22,46 @@ export const {
 	Slot: NavigationPanelPreviewSlot,
 } = createSlotFill( 'EditSiteNavigationPanelPreview' );
 
-const NavigationPanel = () => {
+const NavigationPanel = ( { isOpen } ) => {
 	const [ contentActiveMenu, setContentActiveMenu ] = useState( MENU_ROOT );
-	const templatesActiveMenu = useSelect(
-		( select ) => select( 'core/edit-site' ).getNavigationPanelActiveMenu(),
-		[]
-	);
+	const { templatesActiveMenu, siteTitle } = useSelect( ( select ) => {
+		const { getNavigationPanelActiveMenu } = select( 'core/edit-site' );
+		const { getEntityRecord } = select( 'core' );
+
+		const siteData =
+			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+
+		return {
+			templatesActiveMenu: getNavigationPanelActiveMenu(),
+			siteTitle: siteData.name,
+		};
+	}, [] );
 
 	return (
-		<div className="edit-site-navigation-panel">
-			{ ( contentActiveMenu === MENU_ROOT ||
-				templatesActiveMenu !== MENU_ROOT ) && <TemplatesNavigation /> }
-
-			{ ( templatesActiveMenu === MENU_ROOT ||
-				contentActiveMenu !== MENU_ROOT ) && (
-				<ContentNavigation onActivateMenu={ setContentActiveMenu } />
-			) }
+		<div
+			className={ classnames( `edit-site-navigation-panel`, {
+				'is-open': isOpen,
+			} ) }
+		>
+			<div className="edit-site-navigation-panel__inner">
+				<div className="edit-site-navigation-panel__site-title-container">
+					<div className="edit-site-navigation-panel__site-title">
+						{ siteTitle }
+					</div>
+				</div>
+
+				{ ( contentActiveMenu === MENU_ROOT ||
+					templatesActiveMenu !== MENU_ROOT ) && (
+					<TemplatesNavigation />
+				) }
+
+				{ ( templatesActiveMenu === MENU_ROOT ||
+					contentActiveMenu !== MENU_ROOT ) && (
+					<ContentNavigation
+						onActivateMenu={ setContentActiveMenu }
+					/>
+				) }
+			</div>
 
 			<NavigationPanelPreviewSlot />
 		</div>

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss
@@ -1,18 +1,42 @@
 .edit-site-navigation-panel {
-	animation: edit-site-navigation-panel__slide-in 0.1s linear;
 	height: 100%;
-	width: $nav-sidebar-width;
+	position: relative;
+	width: 0;
+	overflow: hidden;
 	background: $gray-900;
-	@include reduce-motion("animation");
+	transition: width 100ms linear;
+	@include reduce-motion("transition");
+}
 
-	@keyframes edit-site-navigation-panel__slide-in {
-		from {
-			transform: translateX(-100%);
-		}
-		to {
-			transform: translateX(0%);
-		}
-	}
+.edit-site-navigation-panel.is-open {
+	width: $nav-sidebar-width;
+}
+
+.edit-site-navigation-panel__inner {
+	position: relative;
+	width: $nav-sidebar-width;
+	height: 100%;
+}
+
+.edit-site-navigation-panel__site-title-container {
+	height: $header-height;
+	padding-left: $header-height;
+	margin: 0 $grid-unit-20 0 $grid-unit-10;
+	display: flex;
+	align-items: center;
+}
+
+.edit-site-navigation-panel__site-title {
+	font-style: normal;
+	font-weight: 600;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
+	color: $gray-300;
+
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
 }
 
 .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary {

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
@@ -7,29 +7,26 @@ import { __ } from '@wordpress/i18n';
 import { wordpress } from '@wordpress/icons';
 
 function NavigationToggle( { icon, isOpen } ) {
-	const {
-		isActive,
-		isRequestingSiteIcon,
-		siteIconUrl,
-		siteTitle,
-	} = useSelect( ( select ) => {
-		const { isFeatureActive } = select( 'core/edit-site' );
-		const { getEntityRecord } = select( 'core' );
-		const { isResolving } = select( 'core/data' );
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+	const { isActive, isRequestingSiteIcon, siteIconUrl } = useSelect(
+		( select ) => {
+			const { isFeatureActive } = select( 'core/edit-site' );
+			const { getEntityRecord } = select( 'core' );
+			const { isResolving } = select( 'core/data' );
+			const siteData =
+				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 
-		return {
-			isActive: isFeatureActive( 'fullscreenMode' ),
-			isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
-				'root',
-				'__unstableBase',
-				undefined,
-			] ),
-			siteIconUrl: siteData.site_icon_url,
-			siteTitle: siteData.name,
-		};
-	}, [] );
+			return {
+				isActive: isFeatureActive( 'fullscreenMode' ),
+				isRequestingSiteIcon: isResolving( 'core', 'getEntityRecord', [
+					'root',
+					'__unstableBase',
+					undefined,
+				] ),
+				siteIconUrl: siteData.site_icon_url,
+			};
+		},
+		[]
+	);
 
 	const { setIsNavigationPanelOpened } = useDispatch( 'core/edit-site' );
 
@@ -67,12 +64,6 @@ function NavigationToggle( { icon, isOpen } ) {
 			>
 				{ buttonIcon }
 			</Button>
-
-			{ isOpen && (
-				<div className="edit-site-navigation-toggle__site-title">
-					{ siteTitle }
-				</div>
-			) }
 		</div>
 	);
 }

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss
@@ -13,28 +13,13 @@
 	}
 }
 
-.edit-site-navigation-toggle.is-open {
-	flex-shrink: 0;
-	height: $header-height + $border-width; // Cover header border
-	width: 300px;
-	position: static;
-
-	// Delay to sync with `NavigationPanel` animation
-	transition: width 80ms linear;
-	transition-delay: 20ms;
-	@include reduce-motion("transition");
-
-	.edit-site-navigation-toggle__button {
-		background: $gray-900;
-	}
-}
-
 .edit-site-navigation-toggle__button {
 	align-items: center;
-	background: #23282e; // WP-admin gray.
+	background: $gray-900;
 	color: $white;
 	height: $header-height + $border-width; // Cover header border
 	width: $header-height;
+	z-index: 1;
 
 	&.has-icon {
 		min-width: $header-height;
@@ -55,17 +40,3 @@
 .edit-site-navigation-toggle__site-icon {
 	width: 36px;
 }
-
-.edit-site-navigation-toggle__site-title {
-	font-style: normal;
-	font-weight: 600;
-	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;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-}