diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js
index 4d6cbfc7a6170..9d03ec1ca7662 100644
--- a/packages/edit-site/src/components/navigation-sidebar/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/index.js
@@ -18,30 +18,31 @@ export const {
Slot: NavigationPanelPreviewSlot,
} = createSlotFill( 'EditSiteNavigationPanelPreview' );
-export default function NavigationSidebar( {
- isDefaultOpen = false,
- activeTemplateType,
-} ) {
+const {
+ Fill: NavigationSidebarFill,
+ Slot: NavigationSidebarSlot,
+} = createSlotFill( 'EditSiteNavigationSidebar' );
+
+function NavigationSidebar( { isDefaultOpen = false, activeTemplateType } ) {
const isDesktopViewport = useViewportMatch( 'medium' );
const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
- useEffect( () => {
- // When transitioning to desktop open the navigation if `isDefaultOpen` is true.
- if ( isDefaultOpen && isDesktopViewport ) {
- setIsNavigationPanelOpened( true );
- }
-
- // When transitioning to mobile/tablet, close the navigation.
- if ( ! isDesktopViewport ) {
- setIsNavigationPanelOpened( false );
- }
- }, [ isDefaultOpen, isDesktopViewport, setIsNavigationPanelOpened ] );
+ useEffect(
+ function autoOpenNavigationPanelOnViewportChange() {
+ setIsNavigationPanelOpened( isDefaultOpen && isDesktopViewport );
+ },
+ [ isDefaultOpen, isDesktopViewport, setIsNavigationPanelOpened ]
+ );
return (
- <>
+
-
+
);
}
+
+NavigationSidebar.Slot = NavigationSidebarSlot;
+
+export default NavigationSidebar;
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
index 284327a33e11c..f26ef70ec211d 100644
--- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
+++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
@@ -15,7 +15,6 @@ import {
} from '@wordpress/components';
import { store as coreDataStore } from '@wordpress/core-data';
import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { ESCAPE } from '@wordpress/keycodes';
import { decodeEntities } from '@wordpress/html-entities';
@@ -54,15 +53,6 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
}, [] );
const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
- // Ensures focus is moved to the panel area when it is activated
- // from a separate component (such as document actions in the header).
- const panelRef = useRef();
- useEffect( () => {
- if ( isNavigationOpen ) {
- panelRef.current.focus();
- }
- }, [ activeItem, isNavigationOpen ] );
-
const closeOnEscape = ( event ) => {
if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
event.preventDefault();
@@ -76,8 +66,6 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
className={ classnames( `edit-site-navigation-panel`, {
'is-open': isNavigationOpen,
} ) }
- ref={ panelRef }
- tabIndex="-1"
onKeyDown={ closeOnEscape }
>
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index e8303011c7dd8..b92de5d8b2e47 100644
--- a/packages/edit-site/src/index.js
+++ b/packages/edit-site/src/index.js
@@ -8,13 +8,14 @@ import {
} from '@wordpress/block-library';
import { dispatch, select } from '@wordpress/data';
import { render, unmountComponentAtNode } from '@wordpress/element';
+import { SlotFillProvider } from '@wordpress/components';
import {
__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
__experimentalFetchUrlData as fetchUrlData,
} from '@wordpress/core-data';
import { store as editorStore } from '@wordpress/editor';
import { store as viewportStore } from '@wordpress/viewport';
-import { getQueryArg } from '@wordpress/url';
+import { getQueryArgs } from '@wordpress/url';
/**
* Internal dependencies
@@ -25,6 +26,11 @@ import { store as editSiteStore } from './store';
import { Routes } from './components/routes';
import Editor from './components/editor';
import List from './components/list';
+import NavigationSidebar from './components/navigation-sidebar';
+
+function getIsListPage( { postId, postType } ) {
+ return !! ( ! postId && postType );
+}
/**
* Reinitializes the editor after the user chooses to reboot the editor after
@@ -52,7 +58,11 @@ export function reinitializeEditor( target, settings ) {
defaultTemplatePartAreas: settings.defaultTemplatePartAreas,
} );
- if ( ! getQueryArg( window.location.href, 'postId' ) ) {
+ const isLandingOnListPage = getIsListPage(
+ getQueryArgs( window.location.href )
+ );
+
+ if ( isLandingOnListPage ) {
// Default the navigation panel to be opened when we're in a bigger
// screen and land in the list screen.
dispatch( editSiteStore ).setIsNavigationPanelOpened(
@@ -62,15 +72,32 @@ export function reinitializeEditor( target, settings ) {
}
render(
-
- { ( { params: { postType, postId } } ) => {
- if ( ! postId && postType ) {
- return
;
- }
+
+
+ { ( { params } ) => {
+ const isListPage = getIsListPage( params );
- return ;
- } }
- ,
+ return (
+ <>
+ { isListPage ? (
+
+ ) : (
+
+ ) }
+ { /* Keep the instance of the sidebar to ensure focus will not be lost
+ * when navigating to other pages. */ }
+
+
+ );
+ } }
+
+ ,
target
);
}