From 0740acc08b4034c0d2b60790ae7627fb894f9106 Mon Sep 17 00:00:00 2001
From: Carolina Nymark <myazalea@hotmail.com>
Date: Wed, 12 Feb 2025 05:04:52 +0100
Subject: [PATCH] Fix: Site Editor should display a 404 message (#69009)

Add a 404 message to the Site Editor.
Add a new "notfound" route to the site editor routes.
Pass a custom description to SidebarNavigationScreenMain, to display the 404 message on smaller screen widths.

Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
---
 .../src/components/layout/style.scss          |  4 +++
 .../sidebar-navigation-screen-main/index.js   | 25 ++++++++++-------
 .../components/site-editor-routes/index.js    |  2 ++
 .../components/site-editor-routes/notfound.js | 27 +++++++++++++++++++
 4 files changed, 48 insertions(+), 10 deletions(-)
 create mode 100644 packages/edit-site/src/components/site-editor-routes/notfound.js

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index caf7dd78da4b34..16813e8ac04943 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -262,6 +262,10 @@ 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-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index abcc7183f6604e..f4114782853cef 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -77,7 +77,7 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 	);
 }
 
-export default function SidebarNavigationScreenMain() {
+export default function SidebarNavigationScreenMain( { customDescription } ) {
 	const isBlockBasedTheme = useSelect(
 		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
 		[]
@@ -91,19 +91,24 @@ export default function SidebarNavigationScreenMain() {
 		setEditorCanvasContainerView( undefined );
 	}, [ setEditorCanvasContainerView ] );
 
+	let description;
+	if ( customDescription ) {
+		description = customDescription;
+	} else if ( isBlockBasedTheme ) {
+		description = __(
+			'Customize the appearance of your website using the block editor.'
+		);
+	} else {
+		description = __(
+			'Explore block styles and patterns to refine your site'
+		);
+	}
+
 	return (
 		<SidebarNavigationScreen
 			isRoot
 			title={ __( 'Design' ) }
-			description={
-				isBlockBasedTheme
-					? __(
-							'Customize the appearance of your website using the block editor.'
-					  )
-					: __(
-							'Explore block styles and patterns to refine your site'
-					  )
-			}
+			description={ description }
 			content={
 				<MainSidebarNavigationContent
 					isBlockBasedTheme={ isBlockBasedTheme }
diff --git a/packages/edit-site/src/components/site-editor-routes/index.js b/packages/edit-site/src/components/site-editor-routes/index.js
index 232cb640cff264..fe2210ae6e5e64 100644
--- a/packages/edit-site/src/components/site-editor-routes/index.js
+++ b/packages/edit-site/src/components/site-editor-routes/index.js
@@ -21,6 +21,7 @@ import { templateItemRoute } from './template-item';
 import { pagesRoute } from './pages';
 import { pageItemRoute } from './page-item';
 import { stylebookRoute } from './stylebook';
+import { notFoundRoute } from './notfound';
 
 const routes = [
 	pageItemRoute,
@@ -35,6 +36,7 @@ const routes = [
 	stylesRoute,
 	homeRoute,
 	stylebookRoute,
+	notFoundRoute,
 ];
 
 export function useRegisterSiteEditorRoutes() {
diff --git a/packages/edit-site/src/components/site-editor-routes/notfound.js b/packages/edit-site/src/components/site-editor-routes/notfound.js
new file mode 100644
index 00000000000000..ee15e28e06f25a
--- /dev/null
+++ b/packages/edit-site/src/components/site-editor-routes/notfound.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+
+export const notFoundRoute = {
+	name: 'notfound',
+	path: '*',
+	areas: {
+		sidebar: <SidebarNavigationScreenMain />,
+		mobile: (
+			<SidebarNavigationScreenMain
+				customDescription={ __( '404 (Not Found)' ) }
+			/>
+		),
+		content: (
+			<p className="edit-site-layout__area__404">
+				{ __( '404 (Not Found)' ) }
+			</p>
+		),
+	},
+};