From 983ebfc762951bf97fe29fe99483822cb162bfae Mon Sep 17 00:00:00 2001 From: Copons Date: Thu, 24 Sep 2020 14:13:12 +0200 Subject: [PATCH 1/8] Use NavigationBackButton for the dashboard link --- .../left-sidebar/navigation-panel/index.js | 14 ++++++++------ .../left-sidebar/navigation-panel/style.scss | 9 +++++++++ 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js index 9f3e2c5c120ac2..46b66f523152d9 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -4,12 +4,14 @@ import { useState } from '@wordpress/element'; import { __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 ); @@ -17,13 +19,13 @@ const NavigationPanel = () => { return (
- - + + Date: Thu, 24 Sep 2020 14:14:20 +0200 Subject: [PATCH 2/8] Update the NavigationToggle icon button --- .../header/navigation-toggle/index.js | 4 +- .../header/navigation-toggle/style.scss | 51 +++++++++++-------- 2 files changed, 33 insertions(+), 22 deletions(-) diff --git a/packages/edit-site/src/components/header/navigation-toggle/index.js b/packages/edit-site/src/components/header/navigation-toggle/index.js index 8a382823fe5508..59107570866113 100644 --- a/packages/edit-site/src/components/header/navigation-toggle/index.js +++ b/packages/edit-site/src/components/header/navigation-toggle/index.js @@ -35,7 +35,7 @@ function NavigationToggle( { icon, isOpen, onClick } ) { return null; } - let buttonIcon = ; + let buttonIcon = ; if ( siteIconUrl ) { buttonIcon = ( @@ -48,7 +48,7 @@ function NavigationToggle( { icon, isOpen, onClick } ) { } else if ( isRequestingSiteIcon ) { buttonIcon = null; } else if ( icon ) { - buttonIcon = ; + buttonIcon = ; } return ( diff --git a/packages/edit-site/src/components/header/navigation-toggle/style.scss b/packages/edit-site/src/components/header/navigation-toggle/style.scss index d09ba381b481ed..0e0c806d78da85 100644 --- a/packages/edit-site/src/components/header/navigation-toggle/style.scss +++ b/packages/edit-site/src/components/header/navigation-toggle/style.scss @@ -2,43 +2,54 @@ 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; } } .edit-site-navigation-toggle.is-open { + flex-shrink: 0; + height: $header-height + $border-width; // Cover header border width: 300px; + + .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; - &:hover { - color: #ddd; - } -} + &.has-icon { + min-width: $header-height; -.edit-site-navigation-toggle.components-button.has-icon { - justify-content: flex-start; - padding: 0; - height: 32px; - width: 32px; - min-width: 32px; + &: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__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; From 9480efa62e72b5a7384396201c63a5412ffdc4e3 Mon Sep 17 00:00:00 2001 From: Copons Date: Thu, 24 Sep 2020 16:15:05 +0200 Subject: [PATCH 3/8] Add a width to the site logo --- .../src/components/header/navigation-toggle/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/edit-site/src/components/header/navigation-toggle/style.scss b/packages/edit-site/src/components/header/navigation-toggle/style.scss index 0e0c806d78da85..4210fc25a7dea2 100644 --- a/packages/edit-site/src/components/header/navigation-toggle/style.scss +++ b/packages/edit-site/src/components/header/navigation-toggle/style.scss @@ -43,6 +43,10 @@ } } +.edit-site-navigation-toggle__site-icon { + width: 36px; +} + .edit-site-navigation-toggle__site-title { font-style: normal; font-weight: 600; From 34581d721f2faee7034d4fe06d849a2b3fb14a1d Mon Sep 17 00:00:00 2001 From: Copons Date: Fri, 25 Sep 2020 12:10:21 +0200 Subject: [PATCH 4/8] Focus into the navigation on open --- .../src/navigation/back-button/index.js | 17 +++++++++-------- .../left-sidebar/navigation-panel/index.js | 9 +++++++-- 2 files changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/components/src/navigation/back-button/index.js b/packages/components/src/navigation/back-button/index.js index 3752dcfa635f7e..c4e10ab6f157be 100644 --- a/packages/components/src/navigation/back-button/index.js +++ b/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 ( parentMenu ? setActiveMenu( parentMenu, 'right' ) : onClick } + ref={ ref } > { backButtonLabel || parentMenuTitle || __( 'Back' ) } ); } + +export default forwardRef( NavigationBackButton ); diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js index 46b66f523152d9..2e48ec5e041121 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; +import { useEffect, useRef, useState } from '@wordpress/element'; import { __experimentalNavigation as Navigation, __experimentalNavigationBackButton as NavigationBackButton, @@ -15,6 +15,11 @@ import { __ } from '@wordpress/i18n'; const NavigationPanel = () => { const [ showPreview, setShowPreview ] = useState( false ); + const ref = useRef(); + + useEffect( () => { + ref.current.focus(); + }, [ ref ] ); return (
@@ -23,8 +28,8 @@ const NavigationPanel = () => { backButtonLabel={ __( 'Dashboard' ) } className="edit-site-navigation-panel__back-to-dashboard" href="index.php" + ref={ ref } /> - Date: Fri, 25 Sep 2020 12:38:43 +0200 Subject: [PATCH 5/8] Use proper SCSS variable --- .../src/components/left-sidebar/navigation-panel/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss index 57ecf9eaf91216..2e26cc4275e2a7 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss @@ -10,7 +10,7 @@ .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary { border-radius: 0; - border-bottom: 1px solid $gray-700; + border-bottom: $border-width solid $gray-700; height: auto; margin-left: -#{$grid-unit}; padding: $grid-unit $grid-unit-20; From 0b6d64cfa4f8c462f2762957598bd902caa71194 Mon Sep 17 00:00:00 2001 From: Copons Date: Fri, 25 Sep 2020 14:36:54 +0200 Subject: [PATCH 6/8] Adjust back button focus box-shadow --- .../components/left-sidebar/navigation-panel/style.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss index 2e26cc4275e2a7..4bb5b02ab4810f 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss @@ -12,9 +12,14 @@ border-radius: 0; border-bottom: $border-width solid $gray-700; height: auto; - margin-left: -#{$grid-unit}; + 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-20}); + width: calc(100% + #{$grid-unit-15}); + + &:focus:not(:disabled) { + border-bottom-color: transparent; + } } .edit-site-navigation-panel__preview { From c433e81cf5cb2dce74346190eb2efd278a9d99a4 Mon Sep 17 00:00:00 2001 From: Copons Date: Fri, 25 Sep 2020 15:39:50 +0200 Subject: [PATCH 7/8] Animate the sidebar --- .../header/navigation-toggle/style.scss | 7 +- .../left-sidebar/navigation-panel/index.js | 79 ++++++++++++------- 2 files changed, 55 insertions(+), 31 deletions(-) diff --git a/packages/edit-site/src/components/header/navigation-toggle/style.scss b/packages/edit-site/src/components/header/navigation-toggle/style.scss index 4210fc25a7dea2..705dfd62749e15 100644 --- a/packages/edit-site/src/components/header/navigation-toggle/style.scss +++ b/packages/edit-site/src/components/header/navigation-toggle/style.scss @@ -6,7 +6,8 @@ background: $gray-900; border-radius: 0; display: flex; - height: $header-height; + height: $header-height + $border-width; // Cover header border + width: $header-height; } } @@ -15,6 +16,10 @@ 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; } diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js index 2e48ec5e041121..1b0fc3fac25bdc 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -1,8 +1,14 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ import { useEffect, useRef, useState } from '@wordpress/element'; import { + Animate, __experimentalNavigation as Navigation, __experimentalNavigationBackButton as NavigationBackButton, __experimentalNavigationGroup as NavigationGroup, @@ -22,40 +28,53 @@ const NavigationPanel = () => { }, [ ref ] ); return ( -
- - - - - setShowPreview( true ) } - onMouseLeave={ () => setShowPreview( false ) } + + { ( { className: animateClassName } ) => ( +
+ + - - - + + + + setShowPreview( true ) + } + onMouseLeave={ () => + setShowPreview( false ) + } + /> + + + - { showPreview && ( -
- + { showPreview && ( +
+ +
+ ) }
) } -
+ ); }; From b7b6beb49bc5f66a7adaf77391f56a7fa56fccb6 Mon Sep 17 00:00:00 2001 From: Copons Date: Sun, 27 Sep 2020 12:08:22 +0200 Subject: [PATCH 8/8] Make animation linear --- .../header/navigation-toggle/style.scss | 5 +- .../left-sidebar/navigation-panel/index.js | 79 +++++++------------ .../left-sidebar/navigation-panel/style.scss | 13 ++- 3 files changed, 45 insertions(+), 52 deletions(-) diff --git a/packages/edit-site/src/components/header/navigation-toggle/style.scss b/packages/edit-site/src/components/header/navigation-toggle/style.scss index 705dfd62749e15..1cabaef56c0c59 100644 --- a/packages/edit-site/src/components/header/navigation-toggle/style.scss +++ b/packages/edit-site/src/components/header/navigation-toggle/style.scss @@ -17,8 +17,9 @@ width: 300px; // Delay to sync with `NavigationPanel` animation - transition: 93ms cubic-bezier(0, 0, 0.2, 1); - transition-delay: 7ms; + transition: width 80ms linear; + transition-delay: 20ms; + @include reduce-motion("transition"); .edit-site-navigation-toggle__button { background: $gray-900; diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js index 1b0fc3fac25bdc..2e48ec5e041121 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js @@ -1,14 +1,8 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ import { useEffect, useRef, useState } from '@wordpress/element'; import { - Animate, __experimentalNavigation as Navigation, __experimentalNavigationBackButton as NavigationBackButton, __experimentalNavigationGroup as NavigationGroup, @@ -28,53 +22,40 @@ const NavigationPanel = () => { }, [ ref ] ); return ( - - { ( { className: animateClassName } ) => ( -
- - + + + + + setShowPreview( true ) } + onMouseLeave={ () => setShowPreview( false ) } /> - - - - setShowPreview( true ) - } - onMouseLeave={ () => - setShowPreview( false ) - } - /> - - - + + + - { showPreview && ( -
- -
- ) } + { showPreview && ( +
+
) } - +
); }; diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss index 4bb5b02ab4810f..5265d5d982514a 100644 --- a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss +++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss @@ -1,7 +1,18 @@ .edit-site-navigation-panel { - position: relative; + animation: edit-site-navigation-panel__slide-in 0.1s linear; height: 100%; + position: relative; width: 300px; + @include reduce-motion("animation"); + + @keyframes edit-site-navigation-panel__slide-in { + from { + transform: translateX(-100%); + } + to { + transform: translateX(0%); + } + } .components-navigation { height: 100%;