Site Editor: Unify layout with posts dataviews (WordPress#67162)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ntsekouras <[email protected]>
karthick-murugan · Nov 27, 2024 · dad8215 · dad8215
1 parent 0c34d4e
commit dad8215
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 28 deletions.
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
@@ -1,11 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { SlotFillProvider } from '@wordpress/components';
-import {
-	UnsavedChangesWarning,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -23,7 +18,6 @@ import useSetCommandContext from '../../hooks/commands/use-set-command-context';
 import { useRegisterSiteEditorRoutes } from '../site-editor-routes';
 
 const { RouterProvider } = unlock( routerPrivateApis );
-const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 function AppLayout() {
 	useCommonCommands();
@@ -50,14 +44,9 @@ export default function App() {
 	}
 
 	return (
-		<SlotFillProvider>
-			<GlobalStylesProvider>
-				<UnsavedChangesWarning />
-				<RouterProvider>
-					<AppLayout />
-					<PluginArea onError={ onPluginAreaError } />
-				</RouterProvider>
-			</GlobalStylesProvider>
-		</SlotFillProvider>
+		<RouterProvider>
+			<AppLayout />
+			<PluginArea onError={ onPluginAreaError } />
+		</RouterProvider>
 	);
 }
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -10,6 +10,7 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 	__unstableUseNavigateRegions as useNavigateRegions,
+	SlotFillProvider,
 } from '@wordpress/components';
 import {
 	useReducedMotion,
@@ -23,6 +24,7 @@ import { CommandMenu } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	EditorSnackbars,
+	UnsavedChangesWarning,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
@@ -44,12 +46,12 @@ import SavePanel from '../save-panel';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-const { NavigableRegion } = unlock( editorPrivateApis );
+const { NavigableRegion, GlobalStylesProvider } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
-export default function Layout( { route } ) {
+function Layout( { route } ) {
 	const { params } = useLocation();
 	const { canvas = 'view' } = params;
 	useCommands();
@@ -78,6 +80,7 @@ export default function Layout( { route } ) {
 
 	return (
 		<>
+			<UnsavedChangesWarning />
 			<CommandMenu />
 			{ canvas === 'view' && <SaveKeyboardShortcut /> }
 			<div
@@ -231,3 +234,13 @@ export default function Layout( { route } ) {
 		</>
 	);
 }
+
+export default function LayoutWithGlobalStylesProvider( props ) {
+	return (
+		<SlotFillProvider>
+			<GlobalStylesProvider>
+				<Layout { ...props } />
+			</GlobalStylesProvider>
+		</SlotFillProvider>
+	);
+}
diff --git a/packages/edit-site/src/components/posts-app/index.js b/packages/edit-site/src/components/posts-app/index.js
@@ -1,10 +1,6 @@
 /**
  * WordPress dependencies
  */
-import {
-	UnsavedChangesWarning,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
@@ -16,7 +12,6 @@ import { unlock } from '../../lock-unlock';
 import useActiveRoute from '../layout/router';
 
 const { RouterProvider } = unlock( routerPrivateApis );
-const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 function PostsLayout() {
 	useRegisterPostsAppRoutes();
@@ -26,11 +21,8 @@ function PostsLayout() {
 
 export default function PostsApp() {
 	return (
-		<GlobalStylesProvider>
-			<UnsavedChangesWarning />
-			<RouterProvider>
-				<PostsLayout />
-			</RouterProvider>
-		</GlobalStylesProvider>
+		<RouterProvider>
+			<PostsLayout />
+		</RouterProvider>
 	);
 }