Enhance 404 message styling

[Infinite-Null]

Closes: #69174

What?

This PR improves the error message displayed on 404 (Not Found) pages in the Site Editor.

Testing Instructions

1. Navigate to the Site Editor
2. Try to access a non-existent template by entering an invalid URL:

/wp-admin/site-editor.php?p=%2Ftemplate-fdgfdgdfg

3. Verify the error appears as a proper error Notice component.

Screenshots

Desktop

Before	After

Mobile

Before	After

[Infinite-Null]

After PR #69226 gets merged. This line won't be necessary.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

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>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Infinite-Null]

Hi @t-hamano
I have included the Notice component and improved the 404 message in this PR. I would truly appreciate it if you could take a moment to review the updated 404 message and the Notice component.

[t-hamano]

Thanks for the PR!

Now that #69226 has been merged, the color overrides are no longer necessary. Can you rebase this PR?

Here are three things I noticed:

---

The browser console gives me an error: I think we need to replace the description wrapper with a div tag instead of a p tag:

react-dom.js?ver=18:73 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

---

This may be a matter of preference, but you can also do something simpler like this:

function NotFonundError() {
	return (
		<Notice status="error" isDismissible={ false }>
			{ __(
				'The requested page could not be found. Please check the URL.'
			) }
		</Notice>
	);
}

export const notFoundRoute = {
	areas: {
		mobile: (
			<SidebarNavigationScreenMain
				customDescription={ <NotFonundError /> }
			/>
		),
		content: (
			<Spacer padding={ 2 }>
				<NotFonundError />
			</Spacer>
		),
	},
};

---

I'm a bit undecided whether to use the error or warning status.

[joedolson]

I'm a bit undecided whether to use the error or warning status.

I'm somewhat inclined towards error; but also fairly undecided.

[Infinite-Null]

Hi @t-hamano,
Thank you for the feedback.
I have updated the implementation and made NotFoundError a reusable component and used it in both content and mobile areas. Also removed:

.edit-site-layout__area__404 {
	margin: $canvas-padding;
}

as it is no longer required.

Please review it at your convenience.

[t-hamano]

Thanks for the update!

Can you fix this browser console error?

The browser console gives me an error: I think we need to replace the description wrapper with a div tag instead of a p tag:

react-dom.js?ver=18:73 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

[Infinite-Null]

Hi @t-hamano,
I have fixed the console error as you suggested Please review it at your convenience.
Thank You!

[t-hamano]

I think the error status is fine for now.

By the way, we plan to display some text when you access a screen where the classic theme is not allowed to be used (#69005).

Let's take into consideration the status of the PR and if we think a warning status would be more appropriate, we can address it in a follow-up.

[Infinite-Null]

Hi @t-hamano, I was wondering if adding an E2E test for the 404 page would be beneficial. I’m unsure if it. Do you think it’s worth adding? If so, I’d love to work on it.

[t-hamano]

I was wondering if adding an E2E test for the 404 page would be beneficial.

Yes, I think that's a good idea.