From 688df4449b0c2a95649bb5da1d3e10de3a06969e Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 19 Nov 2021 16:36:52 +0800 Subject: [PATCH 1/3] Close and open the nav sidebar in the list page --- .../edit-site/src/components/list/index.js | 4 +--- .../components/navigation-sidebar/index.js | 22 ++++++++++++++++--- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/list/index.js b/packages/edit-site/src/components/list/index.js index 654dfc7fa4987..2e6e8ea8757c3 100644 --- a/packages/edit-site/src/components/list/index.js +++ b/packages/edit-site/src/components/list/index.js @@ -5,7 +5,6 @@ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { InterfaceSkeleton } from '@wordpress/interface'; import { __, sprintf } from '@wordpress/i18n'; -import { useViewportMatch } from '@wordpress/compose'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; /** @@ -18,7 +17,6 @@ import Table from './table'; export default function List( { templateType } ) { useRegisterShortcuts(); - const isDesktopViewport = useViewportMatch( 'medium' ); const { previousShortcut, nextShortcut } = useSelect( ( select ) => { return { @@ -64,8 +62,8 @@ export default function List( { templateType } ) { header={
} drawer={ } content={ diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js index 4f0d0f7bc63ed..238a6027c8ebd 100644 --- a/packages/edit-site/src/components/navigation-sidebar/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/index.js @@ -1,8 +1,9 @@ /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; +import { useEffect, useState } from '@wordpress/element'; import { createSlotFill } from '@wordpress/components'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -16,10 +17,25 @@ export const { } = createSlotFill( 'EditSiteNavigationPanelPreview' ); export default function NavigationSidebar( { - defaultIsOpen = false, + isDefaultOpen = false, activeTemplateType, } ) { - const [ isNavigationOpen, setIsNavigationOpen ] = useState( defaultIsOpen ); + const isDesktopViewport = useViewportMatch( 'medium' ); + const [ isNavigationOpen, setIsNavigationOpen ] = useState( + isDefaultOpen && isDesktopViewport + ); + + useEffect( () => { + // When transitioning to desktop open the navigation if `isDefaultOpen` is true. + if ( isDefaultOpen && isDesktopViewport && ! isNavigationOpen ) { + setIsNavigationOpen( true ); + } + + // When transitioning to mobile/tablet, close the navigation. + if ( ! isDesktopViewport && isNavigationOpen ) { + setIsNavigationOpen( false ); + } + }, [ isDefaultOpen, isDesktopViewport, isNavigationOpen ] ); return ( <> From 84e0c784a96b0436227e4f2e32376d0ea1a2f79f Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 22 Nov 2021 11:48:26 +0800 Subject: [PATCH 2/3] Remove superflouous prop --- packages/edit-site/src/components/editor/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index b1487e27e4b20..d69820882bf22 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -219,11 +219,7 @@ function Editor( { initialSettings, onError } ) { ) } - drawer={ - - } + drawer={ } header={
Date: Mon, 22 Nov 2021 12:02:27 +0800 Subject: [PATCH 3/3] Tidy up effect --- .../edit-site/src/components/navigation-sidebar/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js index 238a6027c8ebd..143b933f56c80 100644 --- a/packages/edit-site/src/components/navigation-sidebar/index.js +++ b/packages/edit-site/src/components/navigation-sidebar/index.js @@ -27,15 +27,15 @@ export default function NavigationSidebar( { useEffect( () => { // When transitioning to desktop open the navigation if `isDefaultOpen` is true. - if ( isDefaultOpen && isDesktopViewport && ! isNavigationOpen ) { + if ( isDefaultOpen && isDesktopViewport ) { setIsNavigationOpen( true ); } // When transitioning to mobile/tablet, close the navigation. - if ( ! isDesktopViewport && isNavigationOpen ) { + if ( ! isDesktopViewport ) { setIsNavigationOpen( false ); } - }, [ isDefaultOpen, isDesktopViewport, isNavigationOpen ] ); + }, [ isDefaultOpen, isDesktopViewport ] ); return ( <>