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 <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Feb 12, 2025 · 0740acc · 0740acc
1 parent fe2195e
commit 0740acc
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
+		),
+	},
+};