Use slot/fill for NavigationSidebar

packages/edit-site/src/components/editor/index.js

@@ -3,12 +3,7 @@
  */
 import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	SlotFillProvider,
-	Popover,
-	Button,
-	Notice,
-} from '@wordpress/components';
+import { Popover, Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';
 import {
@@ -176,114 +171,112 @@ function Editor( { onError } ) {
 			<URLQueryController />
 			{ isReady && (
 				<ShortcutProvider>
-					<SlotFillProvider>
-						<EntityProvider kind="root" type="site">
-							<EntityProvider
-								kind="postType"
-								type={ templateType }
-								id={ entityId }
-							>
-								<GlobalStylesProvider>
-									<BlockContextProvider
-										value={ blockContext }
-									>
-										<GlobalStylesRenderer />
-										<ErrorBoundary onError={ onError }>
-											<UnsavedChangesWarning />
-											<KeyboardShortcuts.Register />
-											<SidebarComplementaryAreaFills />
-											<InterfaceSkeleton
-												labels={ interfaceLabels }
-												secondarySidebar={ secondarySidebar() }
-												sidebar={
-													sidebarIsOpened && (
-														<ComplementaryArea.Slot scope="core/edit-site" />
-													)
-												}
-												drawer={ <NavigationSidebar /> }
-												header={
-													<Header
+					<EntityProvider kind="root" type="site">
+						<EntityProvider
+							kind="postType"
+							type={ templateType }
+							id={ entityId }
+						>
+							<GlobalStylesProvider>
+								<BlockContextProvider value={ blockContext }>
+									<GlobalStylesRenderer />
+									<ErrorBoundary onError={ onError }>
+										<UnsavedChangesWarning />
+										<KeyboardShortcuts.Register />
+										<SidebarComplementaryAreaFills />
+										<InterfaceSkeleton
+											labels={ interfaceLabels }
+											secondarySidebar={ secondarySidebar() }
+											sidebar={
+												sidebarIsOpened && (
+													<ComplementaryArea.Slot scope="core/edit-site" />
+												)
+											}
+											drawer={
+												<NavigationSidebar.Slot />
+											}
+											header={
+												<Header
+													openEntitiesSavedStates={
+														openEntitiesSavedStates
+													}
+												/>
+											}
+											notices={ <EditorSnackbars /> }
+											content={
+												<>
+													<EditorNotices />
+													{ template && (
+														<BlockEditor
+															setIsInserterOpen={
+																setIsInserterOpened
+															}
+														/>
+													) }
+													{ templateResolved &&
+														! template &&
+														settings?.siteUrl &&
+														entityId && (
+															<Notice
+																status="warning"
+																isDismissible={
+																	false
+																}
+															>
+																{ __(
+																	"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
+																) }
+															</Notice>
+														) }
+													<KeyboardShortcuts
 														openEntitiesSavedStates={
 															openEntitiesSavedStates
 														}
 													/>
-												}
-												notices={ <EditorSnackbars /> }
-												content={
-													<>
-														<EditorNotices />
-														{ template && (
-															<BlockEditor
-																setIsInserterOpen={
-																	setIsInserterOpened
-																}
-															/>
-														) }
-														{ templateResolved &&
-															! template &&
-															settings?.siteUrl &&
-															entityId && (
-																<Notice
-																	status="warning"
-																	isDismissible={
-																		false
-																	}
-																>
-																	{ __(
-																		"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-																	) }
-																</Notice>
-															) }
-														<KeyboardShortcuts
-															openEntitiesSavedStates={
-																openEntitiesSavedStates
+												</>
+											}
+											actions={
+												<>
+													{ isEntitiesSavedStatesOpen ? (
+														<EntitiesSavedStates
+															close={
+																closeEntitiesSavedStates
 															}
 														/>
-													</>
-												}
-												actions={
-													<>
-														{ isEntitiesSavedStatesOpen ? (
-															<EntitiesSavedStates
-																close={
-																	closeEntitiesSavedStates
+													) : (
+														<div className="edit-site-editor__toggle-save-panel">
+															<Button
+																variant="secondary"
+																className="edit-site-editor__toggle-save-panel-button"
+																onClick={
+																	openEntitiesSavedStates
 																}
-															/>
-														) : (
-															<div className="edit-site-editor__toggle-save-panel">
-																<Button
-																	variant="secondary"
-																	className="edit-site-editor__toggle-save-panel-button"
-																	onClick={
-																		openEntitiesSavedStates
-																	}
-																	aria-expanded={
-																		false
-																	}
-																>
-																	{ __(
-																		'Open save panel'
-																	) }
-																</Button>
-															</div>
-														) }
-													</>
-												}
-												footer={ <BlockBreadcrumb /> }
-												shortcuts={ {
-													previous: previousShortcut,
-													next: nextShortcut,
-												} }
-											/>
-											<WelcomeGuide />
-											<Popover.Slot />
-											<PluginArea />
-										</ErrorBoundary>
-									</BlockContextProvider>
-								</GlobalStylesProvider>
-							</EntityProvider>
+																aria-expanded={
+																	false
+																}
+															>
+																{ __(
+																	'Open save panel'
+																) }
+															</Button>
+														</div>
+													) }
+												</>
+											}
+											footer={ <BlockBreadcrumb /> }
+											shortcuts={ {
+												previous: previousShortcut,
+												next: nextShortcut,
+											} }
+										/>
+										<WelcomeGuide />
+										<Popover.Slot />
+										<PluginArea />
+									</ErrorBoundary>
+								</BlockContextProvider>
+							</GlobalStylesProvider>
 						</EntityProvider>
-					</SlotFillProvider>
+					</EntityProvider>
 				</ShortcutProvider>
 			) }
 		</>

packages/edit-site/src/components/list/index.js

@@ -21,9 +21,14 @@ import Header from './header';
 import NavigationSidebar from '../navigation-sidebar';
 import Table from './table';
 import { store as editSiteStore } from '../../store';
+import { useLocation } from '../routes';
 import useTitle from '../routes/use-title';
 
-export default function List( { templateType } ) {
+export default function List() {
+	const {
+		params: { postType: templateType },
+	} = useLocation();
+
 	useRegisterShortcuts();
 
 	const { previousShortcut, nextShortcut, isNavigationOpen } = useSelect(
@@ -78,12 +83,7 @@ export default function List( { templateType } ) {
 				...detailedRegionLabels,
 			} }
 			header={ <Header templateType={ templateType } /> }
-			drawer={
-				<NavigationSidebar
-					activeTemplateType={ templateType }
-					isDefaultOpen
-				/>
-			}
+			drawer={ <NavigationSidebar.Slot /> }
 			notices={ <EditorSnackbars /> }
 			content={
 				<main className="edit-site-list-main">

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 (
-		<>
+		<NavigationSidebarFill>
 			<NavigationToggle />
 			<NavigationPanel activeItem={ activeTemplateType } />
 			<NavigationPanelPreviewSlot />
-		</>
+		</NavigationSidebarFill>
 	);
 }
+
+NavigationSidebar.Slot = NavigationSidebarSlot;
+
+export default NavigationSidebar;

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 }
 		>
 			<div className="edit-site-navigation-panel__inner">