Reset focus after route navigation in Site Editor

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

@@ -1,66 +1,56 @@
 /**
  * WordPress dependencies
  */
-import { SlotFillProvider } from '@wordpress/components';
-import { UnsavedChangesWarning } from '@wordpress/editor';
-import { store as noticesStore } from '@wordpress/notices';
-import { useDispatch } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-import { PluginArea } from '@wordpress/plugins';
+import { useSelect } from '@wordpress/data';
+import { store as interfaceStore } from '@wordpress/interface';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { Routes } from '../routes';
+import { store as editSiteStore } from '../../store';
+import { useLocation } from '../routes';
 import Editor from '../editor';
 import List from '../list';
-import NavigationSidebar from '../navigation-sidebar';
 import getIsListPage from '../../utils/get-is-list-page';
 
 export default function EditSiteApp( { reboot } ) {
-	const { createErrorNotice } = useDispatch( noticesStore );
+	const { params } = useLocation();
+	const {
+		isInserterOpen,
+		isListViewOpen,
+		sidebarIsOpened,
+		postType,
+	} = useSelect(
+		( select ) => {
+			const { isInserterOpened, isListViewOpened } = select(
+				editSiteStore
+			);
 
-	function onPluginAreaError( name ) {
-		createErrorNotice(
-			sprintf(
-				/* translators: %s: plugin name */
-				__(
-					'The "%s" plugin has encountered an error and cannot be rendered.'
-				),
-				name
-			)
-		);
-	}
-
-	return (
-		<SlotFillProvider>
-			<UnsavedChangesWarning />
+			// The currently selected entity to display. Typically template or template part.
+			return {
+				isInserterOpen: isInserterOpened(),
+				isListViewOpen: isListViewOpened(),
+				sidebarIsOpened: !! select(
+					interfaceStore
+				).getActiveComplementaryArea( editSiteStore.name ),
+				postType: select( coreStore ).getPostType( params.postType ),
+			};
+		},
+		[ params.postType ]
+	);
 
-			<Routes>
-				{ ( { params } ) => {
-					const isListPage = getIsListPage( params );
+	const isListPage = getIsListPage( params );
 
-					return (
-						<>
-							{ isListPage ? (
-								<List />
-							) : (
-								<Editor onError={ reboot } />
-							) }
-							<PluginArea onError={ onPluginAreaError } />
-							{ /* Keep the instance of the sidebar to ensure focus will not be lost
-							 * when navigating to other pages. */ }
-							<NavigationSidebar
-								// Open the navigation sidebar by default when in the list page.
-								isDefaultOpen={ !! isListPage }
-								activeTemplateType={
-									isListPage ? params.postType : undefined
-								}
-							/>
-						</>
-					);
-				} }
-			</Routes>
-		</SlotFillProvider>
-	);
+	return isListPage
+		? List.renderLayout( {
+				postType,
+				activeTemplateType: params.postType,
+		  } )
+		: Editor.renderLayout( {
+				isInserterOpen,
+				isListViewOpen,
+				sidebarIsOpened,
+				reboot,
+		  } );
 }

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

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { EntitiesSavedStates } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function EditorActions() {
+	const isEntitiesSavedStatesOpen = useSelect(
+		( select ) => select( editSiteStore ).getIsEntitiesSavedStatesOpen(),
+		[]
+	);
+	const { setIsEntitiesSavedStatesOpen } = useDispatch( editSiteStore );
+	const openEntitiesSavedStates = useCallback(
+		() => setIsEntitiesSavedStatesOpen( true ),
+		[ setIsEntitiesSavedStatesOpen ]
+	);
+	const closeEntitiesSavedStates = useCallback(
+		() => setIsEntitiesSavedStatesOpen( false ),
+		[ setIsEntitiesSavedStatesOpen ]
+	);
+
+	return 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 }
+				aria-expanded={ false }
+			>
+				{ __( 'Open save panel' ) }
+			</Button>
+		</div>
+	);
+}