From 0f7193c79886abbb0c0132e58897cdd596698a2f Mon Sep 17 00:00:00 2001
From: Ankit Kumar Shah <ankit.shah@rtcamp.com>
Date: Thu, 20 Feb 2025 18:12:00 +0530
Subject: [PATCH] Enhance 404 message styling  (#69234)

* Enhance 404 message styling with Notice component

* Improve 404 error message

* Remove color style from `.edit-site-layout__area__404`

* Update 404 notice implementation with reusable component

* Fixed DOM nesting validation error by replacing p with div

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
---
 .../src/components/layout/style.scss          |  4 ----
 .../sidebar-navigation-screen/index.js        |  4 ++--
 .../components/site-editor-routes/notfound.js | 19 +++++++++++++++----
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 16813e8ac04943..caf7dd78da4b34 100644
--- 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/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
index 473b28245eaee5..f5f7e380467c25 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -122,9 +122,9 @@ export default function SidebarNavigationScreen( {
 				</HStack>
 				<div className="edit-site-sidebar-navigation-screen__content">
 					{ description && (
-						<p className="edit-site-sidebar-navigation-screen__description">
+						<div className="edit-site-sidebar-navigation-screen__description">
 							{ description }
-						</p>
+						</div>
 					) }
 					{ content }
 				</div>
diff --git a/packages/edit-site/src/components/site-editor-routes/notfound.js b/packages/edit-site/src/components/site-editor-routes/notfound.js
index ee15e28e06f25a..2a42eb48f10ebf 100644
--- a/packages/edit-site/src/components/site-editor-routes/notfound.js
+++ b/packages/edit-site/src/components/site-editor-routes/notfound.js
@@ -6,8 +6,19 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+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: '*',
@@ -15,13 +26,13 @@ export const notFoundRoute = {
 		sidebar: <SidebarNavigationScreenMain />,
 		mobile: (
 			<SidebarNavigationScreenMain
-				customDescription={ __( '404 (Not Found)' ) }
+				customDescription={ <NotFoundError /> }
 			/>
 		),
 		content: (
-			<p className="edit-site-layout__area__404">
-				{ __( '404 (Not Found)' ) }
-			</p>
+			<Spacer padding={ 2 }>
+				<NotFoundError />
+			</Spacer>
 		),
 	},
 };