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 ( , + mobile: ( + + ), + content: ( +

+ { __( '404 (Not Found)' ) } +

+ ), + }, +};