From f5ea507f34683951a2062d6357c3586d8af35bdb Mon Sep 17 00:00:00 2001
From: Ankit Kumar Shah <ankit.shah@rtcamp.com>
Date: Tue, 18 Feb 2025 21:11:38 +0530
Subject: [PATCH 1/5] Enhance 404 message styling with Notice component

---
 .../src/components/layout/style.scss          |  1 +
 .../components/site-editor-routes/notfound.js | 21 +++++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 16813e8ac04943..2ffd718d65d0d0 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -264,6 +264,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 
 .edit-site-layout__area__404 {
 	margin: $canvas-padding;
+	color: $gray-800;
 }
 
 .edit-site .components-editor-notices__snackbar {
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..f93954cfcaa5c6 100644
--- a/packages/edit-site/src/components/site-editor-routes/notfound.js
+++ b/packages/edit-site/src/components/site-editor-routes/notfound.js
@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { Notice } from '@wordpress/components';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 
 export const notFoundRoute = {
@@ -15,13 +16,25 @@ export const notFoundRoute = {
 		sidebar: <SidebarNavigationScreenMain />,
 		mobile: (
 			<SidebarNavigationScreenMain
-				customDescription={ __( '404 (Not Found)' ) }
+				customDescription={
+					<Notice
+						status="error"
+						isDismissible={ false }
+						className="edit-site-layout__area__404"
+					>
+						{ __( 'Page not found' ) }
+					</Notice>
+				}
 			/>
 		),
 		content: (
-			<p className="edit-site-layout__area__404">
-				{ __( '404 (Not Found)' ) }
-			</p>
+			<Notice
+				status="error"
+				isDismissible={ false }
+				className="edit-site-layout__area__404"
+			>
+				{ __( 'Page not found' ) }
+			</Notice>
 		),
 	},
 };

From 85bbc582f81957ceccf0eac4b994c6a7a00d5304 Mon Sep 17 00:00:00 2001
From: Ankit Kumar Shah <ankit.shah@rtcamp.com>
Date: Wed, 19 Feb 2025 11:36:00 +0530
Subject: [PATCH 2/5] Improve 404 error message

---
 .../src/components/site-editor-routes/notfound.js         | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

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 f93954cfcaa5c6..030aa643e4428a 100644
--- a/packages/edit-site/src/components/site-editor-routes/notfound.js
+++ b/packages/edit-site/src/components/site-editor-routes/notfound.js
@@ -22,7 +22,9 @@ export const notFoundRoute = {
 						isDismissible={ false }
 						className="edit-site-layout__area__404"
 					>
-						{ __( 'Page not found' ) }
+						{ __(
+							'The requested page could not be found. Please check the URL.'
+						) }
 					</Notice>
 				}
 			/>
@@ -33,7 +35,9 @@ export const notFoundRoute = {
 				isDismissible={ false }
 				className="edit-site-layout__area__404"
 			>
-				{ __( 'Page not found' ) }
+				{ __(
+					'The requested page could not be found. Please check the URL.'
+				) }
 			</Notice>
 		),
 	},

From 3c4f9a33b9d94b56d9bf6d8faf16fddb93748ea4 Mon Sep 17 00:00:00 2001
From: Ankit Kumar Shah <ankit.shah@rtcamp.com>
Date: Thu, 20 Feb 2025 13:37:17 +0530
Subject: [PATCH 3/5] Remove color style from `.edit-site-layout__area__404`

---
 packages/edit-site/src/components/layout/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 2ffd718d65d0d0..16813e8ac04943 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -264,7 +264,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 
 .edit-site-layout__area__404 {
 	margin: $canvas-padding;
-	color: $gray-800;
 }
 
 .edit-site .components-editor-notices__snackbar {

From f04a461b55dcb450042b67f26067203f2730539d Mon Sep 17 00:00:00 2001
From: Ankit Kumar Shah <ankit.shah@rtcamp.com>
Date: Thu, 20 Feb 2025 13:56:04 +0530
Subject: [PATCH 4/5] Update 404 notice implementation with reusable component

---
 .../src/components/layout/style.scss          |  4 ---
 .../components/site-editor-routes/notfound.js | 36 ++++++++-----------
 2 files changed, 15 insertions(+), 25 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/site-editor-routes/notfound.js b/packages/edit-site/src/components/site-editor-routes/notfound.js
index 030aa643e4428a..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,9 +6,19 @@ 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: '*',
@@ -16,29 +26,13 @@ export const notFoundRoute = {
 		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>
 		),
 	},
 };

From 59195ac88c5d029d9075c6b515f2d4c4897371fd Mon Sep 17 00:00:00 2001
From: Ankit Kumar Shah <ankit.shah@rtcamp.com>
Date: Thu, 20 Feb 2025 16:04:00 +0530
Subject: [PATCH 5/5] Fixed DOM nesting validation error by replacing p with
 div

---
 .../src/components/sidebar-navigation-screen/index.js         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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>