@wordpress/edit-site 6.17.0 → 6.18.0

package/src/components/sidebar-navigation-screen/index.js

@@ -36,7 +36,6 @@ export default function SidebarNavigationScreen( {
 	isRoot,
 	title,
 	actions,
-	meta,
 	content,
 	footer,
 	description,
@@ -121,14 +120,6 @@ export default function SidebarNavigationScreen( {
 						</div>
 					) }
 				</HStack>
-				{ meta && (
-					<>
-						<div className="edit-site-sidebar-navigation-screen__meta">
-							{ meta }
-						</div>
-					</>
-				) }
-
 				<div className="edit-site-sidebar-navigation-screen__content">
 					{ description && (
 						<p className="edit-site-sidebar-navigation-screen__description">

package/src/components/sidebar-navigation-screen/style.scss

@@ -27,29 +27,6 @@
 	}
 }
 
-.edit-site-sidebar-navigation-screen__meta {
-	margin: 0 0 $grid-unit-20 $grid-unit-20;
-	color: $gray-400;
-	.components-text {
-		color: $gray-400;
-	}
-}
-
-.edit-site-sidebar-navigation-screen__page-link {
-	color: $gray-600;
-	display: inline-block;
-	word-break: break-word;
-
-	&:hover,
-	&:focus {
-		color: $white;
-	}
-
-	.components-external-link__icon {
-		margin-left: $grid-unit-05;
-	}
-}
-
 .edit-site-sidebar-navigation-screen__title-icon {
 	position: sticky;
 	top: 0;

package/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 }

package/src/components/site-editor-routes/home.js

@@ -2,14 +2,14 @@
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
-		preview: <MaybeEditor showEditor={ false } />,
+		preview: <Editor isHomeRoute />,
 		mobile: <SidebarNavigationScreenMain />,
 	},
 };

package/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() {

package/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>
+		),
+	},
+};

package/src/components/site-editor-routes/template-item.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 
 export const templateItemRoute = {
@@ -9,7 +9,7 @@ export const templateItemRoute = {
 	path: '/wp_template/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		mobile: <MaybeEditor />,
-		preview: <MaybeEditor />,
+		mobile: <Editor />,
+		preview: <Editor />,
 	},
 };

package/src/components/site-editor-routes/template-part-item.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 
 export const templatePartItemRoute = {
@@ -9,7 +9,7 @@ export const templatePartItemRoute = {
 	path: '/wp_template_part/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
-		mobile: <MaybeEditor />,
-		preview: <MaybeEditor />,
+		mobile: <Editor />,
+		preview: <Editor />,
 	},
 };

package/src/components/style-book/index.js

@@ -24,7 +24,6 @@ import {
 } from '@wordpress/block-editor';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect, dispatch } from '@wordpress/data';
-import { useResizeObserver } from '@wordpress/compose';
 import {
 	useMemo,
 	useState,
@@ -227,7 +226,6 @@ function StyleBook( {
 	userConfig = {},
 	path = '',
 } ) {
-	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const colors = useMultiOriginPalettes();
@@ -282,7 +280,6 @@ function StyleBook( {
 		>
 			<div
 				className={ clsx( 'edit-site-style-book', {
-					'is-wide': sizes.width > 600,
 					'is-button': !! onClick,
 				} ) }
 				style={ {
@@ -290,7 +287,6 @@ function StyleBook( {
 					background: backgroundColor,
 				} }
 			>
-				{ resizeObserver }
 				{ showTabs ? (
 					<Tabs>
 						<div className="edit-site-style-book__tablist-container">
@@ -331,7 +327,6 @@ function StyleBook( {
 										isSelected={ isSelected }
 										onSelect={ onSelect }
 										settings={ settings }
-										sizes={ sizes }
 										title={ tab.title }
 										goTo={ goTo }
 									/>
@@ -346,7 +341,6 @@ function StyleBook( {
 						onClick={ onClick }
 						onSelect={ onSelect }
 						settings={ settings }
-						sizes={ sizes }
 						goTo={ goTo }
 					/>
 				) }
@@ -420,7 +414,6 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 		onChangeSection( `/blocks/${ encodeURIComponent( blockName ) }` );
 	};
 
-	const [ resizeObserver, sizes ] = useResizeObserver();
 	const colors = useMultiOriginPalettes();
 	const examples = getExamples( colors );
 	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
@@ -489,14 +482,12 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 
 	return (
 		<div className="edit-site-style-book">
-			{ resizeObserver }
 			<BlockEditorProvider settings={ settings }>
 				<GlobalStylesRenderer disableRootPadding />
 				<StyleBookBody
 					examples={ displayedExamples }
 					settings={ settings }
 					goTo={ goTo }
-					sizes={ sizes }
 					isSelected={ ! isStatic ? isSelected : null }
 					onSelect={ ! isStatic ? onSelect : null }
 				/>
@@ -511,7 +502,6 @@ export const StyleBookBody = ( {
 	onClick,
 	onSelect,
 	settings,
-	sizes,
 	title,
 	goTo,
 } ) => {
@@ -574,9 +564,7 @@ export const StyleBookBody = ( {
 					'body { cursor: pointer; } body * { pointer-events: none; }' }
 			</style>
 			<Examples
-				className={ clsx( 'edit-site-style-book__examples', {
-					'is-wide': sizes.width > 600,
-				} ) }
+				className="edit-site-style-book__examples"
 				filteredExamples={ examples }
 				label={
 					title