Update 404 notice implementation with reusable component

WordPress · Feb 20, 2025 · f04a461 · f04a461
1 parent 3c4f9a3
commit f04a461
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 25 deletions.
diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -262,10 +262,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	}
 }
 
-.edit-site-layout__area__404 {
-	margin: $canvas-padding;
-}
-
 .edit-site .components-editor-notices__snackbar {
 	position: fixed;
 	right: 0;

diff --git a/packages/edit-site/src/components/site-editor-routes/notfound.js b/packages/edit-site/src/components/site-editor-routes/notfound.js
@@ -6,39 +6,33 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { Notice } from '@wordpress/components';
+import { Notice, __experimentalSpacer as Spacer } from '@wordpress/components';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 
+function NotFoundError() {
+	return (
+		<Notice status="error" isDismissible={ false }>
+			{ __(
+				'The requested page could not be found. Please check the URL.'
+			) }
+		</Notice>
+	);
+}
+
 export const notFoundRoute = {
 	name: 'notfound',
 	path: '*',
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
 		mobile: (
 			<SidebarNavigationScreenMain
-				customDescription={
-					<Notice
-						status="error"
-						isDismissible={ false }
-						className="edit-site-layout__area__404"
-					>
-						{ __(
-							'The requested page could not be found. Please check the URL.'
-						) }
-					</Notice>
-				}
+				customDescription={ <NotFoundError /> }
 			/>
 		),
 		content: (
-			<Notice
-				status="error"
-				isDismissible={ false }
-				className="edit-site-layout__area__404"
-			>
-				{ __(
-					'The requested page could not be found. Please check the URL.'
-				) }
-			</Notice>
+			<Spacer padding={ 2 }>
+				<NotFoundError />
+			</Spacer>
 		),
 	},
 };