Site Editor: Fix sidebar plugins (WordPress#67557)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: matiasbenedetto <[email protected]>
im3dabasia · Dec 4, 2024 · 3db5b95 · 3db5b95
1 parent c623252
commit 3db5b95
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js
@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { store as noticesStore } from '@wordpress/notices';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __, sprintf } from '@wordpress/i18n';
-import { PluginArea } from '@wordpress/plugins';
+import { useSelect } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useCallback } from '@wordpress/element';
 
@@ -33,21 +30,9 @@ function AppLayout() {
 
 export default function App() {
 	useRegisterSiteEditorRoutes();
-	const { createErrorNotice } = useDispatch( noticesStore );
 	const routes = useSelect( ( select ) => {
 		return unlock( select( editSiteStore ) ).getRoutes();
 	}, [] );
-	function onPluginAreaError( name ) {
-		createErrorNotice(
-			sprintf(
-				/* translators: %s: plugin name */
-				__(
-					'The "%s" plugin has encountered an error and cannot be rendered.'
-				),
-				name
-			)
-		);
-	}
 	const beforeNavigate = useCallback( ( { path, query } ) => {
 		if ( ! isPreviewingTheme() ) {
 			return { path, query };
@@ -72,7 +57,6 @@ export default function App() {
 			beforeNavigate={ beforeNavigate }
 		>
 			<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
@@ -18,7 +18,7 @@ import {
 	useResizeObserver,
 	usePrevious,
 } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { CommandMenu } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
@@ -29,6 +29,9 @@ import {
 } from '@wordpress/editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { PluginArea } from '@wordpress/plugins';
+import { store as noticesStore } from '@wordpress/notices';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -235,9 +238,24 @@ function Layout() {
 }
 
 export default function LayoutWithGlobalStylesProvider( props ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	function onPluginAreaError( name ) {
+		createErrorNotice(
+			sprintf(
+				/* translators: %s: plugin name */
+				__(
+					'The "%s" plugin has encountered an error and cannot be rendered.'
+				),
+				name
+			)
+		);
+	}
+
 	return (
 		<SlotFillProvider>
 			<GlobalStylesProvider>
+				{ /** This needs to be within the SlotFillProvider */ }
+				<PluginArea onError={ onPluginAreaError } />
 				<Layout { ...props } />
 			</GlobalStylesProvider>
 		</SlotFillProvider>