Add UnsavedWarning to list page too

WordPress · Dec 9, 2021 · 7644e68 · 7644e68
1 parent 3ba1da0
commit 7644e68
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 40 deletions.
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+import { UnsavedChangesWarning } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { Routes } 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 } ) {
+	return (
+		<SlotFillProvider>
+			<UnsavedChangesWarning />
+
+			<Routes>
+				{ ( { params } ) => {
+					const isListPage = getIsListPage( params );
+
+					return (
+						<>
+							{ isListPage ? (
+								<List />
+							) : (
+								<Editor onError={ reboot } />
+							) }
+							{ /* 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>
+	);
+}
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -15,7 +15,6 @@ import {
 	EditorNotices,
 	EditorSnackbars,
 	EntitiesSavedStates,
-	UnsavedChangesWarning,
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
@@ -183,7 +182,6 @@ function Editor( { onError } ) {
 								<BlockContextProvider value={ blockContext }>
 									<GlobalStylesRenderer />
 									<ErrorBoundary onError={ onError }>
-										<UnsavedChangesWarning />
 										<KeyboardShortcuts.Register />
 										<SidebarComplementaryAreaFills />
 										<InterfaceSkeleton

diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
@@ -8,7 +8,6 @@ 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,
@@ -23,14 +22,8 @@ import { getQueryArgs } from '@wordpress/url';
 import './plugins';
 import './hooks';
 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 );
-}
+import EditSiteApp from './components/app';
+import getIsListPage from './utils/get-is-list-page';
 
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
@@ -71,35 +64,7 @@ export function reinitializeEditor( target, settings ) {
 		}
 	}
 
-	render(
-		<SlotFillProvider>
-			<Routes>
-				{ ( { params } ) => {
-					const isListPage = getIsListPage( params );
-
-					return (
-						<>
-							{ isListPage ? (
-								<List />
-							) : (
-								<Editor onError={ reboot } />
-							) }
-							{ /* 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>,
-		target
-	);
+	render( <EditSiteApp reboot={ reboot } />, target );
 }
 
 /**

diff --git a/packages/edit-site/src/utils/get-is-list-page.js b/packages/edit-site/src/utils/get-is-list-page.js
@@ -0,0 +1,11 @@
+/**
+ * Returns if the params match the list page route.
+ *
+ * @param {Object} params          The search params.
+ * @param {string} params.postId   The post ID.
+ * @param {string} params.postType The post type.
+ * @return {boolean} Is list page or not.
+ */
+export default function getIsListPage( { postId, postType } ) {
+	return !! ( ! postId && postType );
+}