@wordpress/edit-site 6.17.1 → 6.19.0

package/src/components/page-templates/style.scss

@@ -23,6 +23,8 @@
 		position: relative;
 		width: 120px;
 		max-height: 160px;
+		text-wrap: balance; // Fallback for Safari.
+		text-wrap: pretty;
 
 		&::after {
 			content: "";

package/src/components/resizable-frame/index.js

@@ -254,7 +254,7 @@ function ResizableFrame( {
 				}
 			} }
 			whileHover={
-				canvas === 'view'
+				canvas === 'view' && isBlockTheme
 					? {
 							scale: 1.005,
 							transition: {

package/src/components/save-panel/index.js

@@ -31,7 +31,11 @@ const { EntitiesSavedStatesExtensible, NavigableRegion } =
 	unlock( privateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
-const EntitiesSavedStatesForPreview = ( { onClose, renderDialog } ) => {
+const EntitiesSavedStatesForPreview = ( {
+	onClose,
+	renderDialog,
+	variant,
+} ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();
 	let activateSaveLabel;
 	if ( isDirtyProps.isDirty ) {
@@ -76,22 +80,28 @@ const EntitiesSavedStatesForPreview = ( { onClose, renderDialog } ) => {
 				saveEnabled: true,
 				saveLabel: activateSaveLabel,
 				renderDialog,
+				variant,
 			} }
 		/>
 	);
 };
 
-const _EntitiesSavedStates = ( { onClose, renderDialog } ) => {
+const _EntitiesSavedStates = ( { onClose, renderDialog, variant } ) => {
 	if ( isPreviewingTheme() ) {
 		return (
 			<EntitiesSavedStatesForPreview
 				onClose={ onClose }
 				renderDialog={ renderDialog }
+				variant={ variant }
 			/>
 		);
 	}
 	return (
-		<EntitiesSavedStates close={ onClose } renderDialog={ renderDialog } />
+		<EntitiesSavedStates
+			close={ onClose }
+			renderDialog={ renderDialog }
+			variant={ variant }
+		/>
 	);
 };
 
@@ -130,12 +140,10 @@ export default function SavePanel() {
 			<Modal
 				className="edit-site-save-panel__modal"
 				onRequestClose={ onClose }
-				__experimentalHideHeader
-				contentLabel={ __(
-					'Save site, content, and template changes'
-				) }
+				title={ __( 'Review changes' ) }
+				size="small"
 			>
-				<_EntitiesSavedStates onClose={ onClose } />
+				<_EntitiesSavedStates onClose={ onClose } variant="inline" />
 			</Modal>
 		) : null;
 	}

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

@@ -36,7 +36,6 @@ export default function SidebarNavigationScreen( {
 	isRoot,
 	title,
 	actions,
-	meta,
 	content,
 	footer,
 	description,
@@ -121,19 +120,11 @@ 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">
+						<div className="edit-site-sidebar-navigation-screen__description">
 							{ description }
-						</p>
+						</div>
 					) }
 					{ content }
 				</div>

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/navigation-item.js

@@ -6,7 +6,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { NAVIGATION_POST_TYPE } from '../../utils/constants';
 import Editor from '../editor';
 import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import { unlock } from '../../lock-unlock';
@@ -20,9 +19,7 @@ function MobileNavigationItemView() {
 	return canvas === 'edit' ? (
 		<Editor />
 	) : (
-		<SidebarNavigationScreenNavigationMenu
-			backPath={ { postType: NAVIGATION_POST_TYPE } }
-		/>
+		<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
 	);
 }
 

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

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Notice, __experimentalSpacer as Spacer } from '@wordpress/components';
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+
+function NotFoundError() {
+	return (
+		<Notice status="error" isDismissible={ false }>
+			{ __(
+				'The requested page could not be found. Please check the URL.'
+			) }
+		</Notice>
+	);
+}
+
+export const notFoundRoute = {
+	name: 'notfound',
+	path: '*',
+	areas: {
+		sidebar: <SidebarNavigationScreenMain />,
+		mobile: (
+			<SidebarNavigationScreenMain
+				customDescription={ <NotFoundError /> }
+			/>
+		),
+		content: (
+			<Spacer padding={ 2 }>
+				<NotFoundError />
+			</Spacer>
+		),
+	},
+};

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

@@ -1,8 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import PagePatterns from '../page-patterns';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobilePatternsView() {
+	const { query = {} } = useLocation();
+	const { categoryId } = query;
+
+	return !! categoryId ? (
+		<PagePatterns />
+	) : (
+		<SidebarNavigationScreenPatterns backPath="/" />
+	);
+}
 
 export const patternsRoute = {
 	name: 'patterns',
@@ -10,6 +29,6 @@ export const patternsRoute = {
 	areas: {
 		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
 		content: <PagePatterns />,
-		mobile: <PagePatterns />,
+		mobile: <MobilePatternsView />,
 	},
 };

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/site-hub/index.js

@@ -28,8 +28,8 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../lock-unlock';
-const { useHistory } = unlock( routerPrivateApis );
 import { SidebarNavigationContext } from '../sidebar';
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const SiteHub = memo(
 	forwardRef( ( { isTransparent }, ref ) => {
@@ -117,29 +117,25 @@ export default SiteHub;
 
 export const SiteHubMobile = memo(
 	forwardRef( ( { isTransparent }, ref ) => {
+		const { path } = useLocation();
 		const history = useHistory();
 		const { navigate } = useContext( SidebarNavigationContext );
 
-		const { dashboardLink, isBlockTheme, homeUrl, siteTitle } = useSelect(
-			( select ) => {
-				const { getSettings } = unlock( select( editSiteStore ) );
-
-				const { getEntityRecord, getCurrentTheme } =
-					select( coreStore );
-				const _site = getEntityRecord( 'root', 'site' );
-				return {
-					dashboardLink: getSettings().__experimentalDashboardLink,
-					isBlockTheme: getCurrentTheme()?.is_block_theme,
-					homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-					siteTitle:
-						! _site?.title && !! _site?.url
-							? filterURLForDisplay( _site?.url )
-							: _site?.title,
-				};
-			},
-			[]
-		);
+		const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
+			const { getSettings } = unlock( select( editSiteStore ) );
+			const { getEntityRecord } = select( coreStore );
+			const _site = getEntityRecord( 'root', 'site' );
+			return {
+				dashboardLink: getSettings().__experimentalDashboardLink,
+				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+				siteTitle:
+					! _site?.title && !! _site?.url
+						? filterURLForDisplay( _site?.url )
+						: _site?.title,
+			};
+		}, [] );
 		const { open: openCommandCenter } = useDispatch( commandsStore );
+		const isRoot = path === '/';
 
 		return (
 			<div className="edit-site-site-hub">
@@ -160,7 +156,7 @@ export const SiteHubMobile = memo(
 								transform: 'scale(0.5)',
 								borderRadius: 4,
 							} }
-							{ ...( ! isBlockTheme
+							{ ...( isRoot
 								? {
 										href: dashboardLink,
 										label: __( 'Go to the Dashboard' ),

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

package/src/components/welcome-guide/page.js

@@ -57,6 +57,7 @@ export default function WelcomeGuidePage() {
 							</h1>
 							<p className="edit-site-welcome-guide__text">
 								{ __(
+									// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
 									'It’s now possible to edit page content in the site editor. To customise other parts of the page like the header and footer switch to editing the template using the settings sidebar.'
 								) }
 							</p>