@wordpress/edit-site 6.18.0 → 6.19.1

package/src/components/page-patterns/use-patterns.js

@@ -25,8 +25,11 @@ const EMPTY_PATTERN_LIST = [];
 
 const selectTemplateParts = createSelector(
 	( select, categoryId, search = '' ) => {
-		const { getEntityRecords, isResolving: isResolvingSelector } =
-			select( coreStore );
+		const {
+			getEntityRecords,
+			getCurrentTheme,
+			isResolving: isResolvingSelector,
+		} = select( coreStore );
 
 		const query = { per_page: -1 };
 		const templateParts =
@@ -36,9 +39,7 @@ const selectTemplateParts = createSelector(
 		// In the case where a custom template part area has been removed we need
 		// the current list of areas to cross check against so orphaned template
 		// parts can be treated as uncategorized.
-		const knownAreas =
-			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
-				?.default_template_part_areas || [];
+		const knownAreas = getCurrentTheme()?.default_template_part_areas || [];
 
 		const templatePartAreas = knownAreas.map( ( area ) => area.area );
 
@@ -79,8 +80,7 @@ const selectTemplateParts = createSelector(
 			TEMPLATE_PART_POST_TYPE,
 			{ per_page: -1 },
 		] ),
-		select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
-			?.default_template_part_areas,
+		select( coreStore ).getCurrentTheme()?.default_template_part_areas,
 	]
 );
 

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

@@ -87,23 +87,25 @@ function SidebarContentWrapper( { children, shouldAnimate } ) {
 	);
 }
 
-export default function SidebarContent( {
-	routeKey,
-	shouldAnimate,
-	children,
-} ) {
+export function SidebarNavigationProvider( { children } ) {
 	const [ navState ] = useState( createNavState );
 
 	return (
 		<SidebarNavigationContext.Provider value={ navState }>
-			<div className="edit-site-sidebar__content">
-				<SidebarContentWrapper
-					shouldAnimate={ shouldAnimate }
-					key={ routeKey }
-				>
-					{ children }
-				</SidebarContentWrapper>
-			</div>
+			{ children }
 		</SidebarNavigationContext.Provider>
 	);
 }
+
+export function SidebarContent( { routeKey, shouldAnimate, children } ) {
+	return (
+		<div className="edit-site-sidebar__content">
+			<SidebarContentWrapper
+				shouldAnimate={ shouldAnimate }
+				key={ routeKey }
+			>
+				{ children }
+			</SidebarContentWrapper>
+		</div>
+	);
+}

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

@@ -122,9 +122,9 @@ export default function SidebarNavigationScreen( {
 				</HStack>
 				<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-patterns/index.js

@@ -120,6 +120,7 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 			description={ __(
 				'Manage what patterns are available when editing the site.'
 			) }
+			isRoot={ ! backPath }
 			backPath={ backPath }
 			content={
 				<>

package/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js

@@ -17,7 +17,7 @@ const useTemplatePartsGroupedByArea = ( items ) => {
 
 	const templatePartAreas = useSelect(
 		( select ) =>
-			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			select( coreStore ).getCurrentTheme()
 				?.default_template_part_areas || [],
 		[]
 	);

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

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Notice, __experimentalSpacer as Spacer } from '@wordpress/components';
+
+export default function SidebarNavigationScreenUnsupported() {
+	return (
+		<Spacer padding={ 3 }>
+			<Notice status="warning" isDismissible={ false }>
+				{ __(
+					'The theme you are currently using does not support this screen.'
+				) }
+			</Notice>
+		</Spacer>
+	);
+}

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

@@ -2,14 +2,38 @@
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import Editor from '../editor';
+import { isClassicThemeWithStyleBookSupport } from './utils';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
-		sidebar: <SidebarNavigationScreenMain />,
-		preview: <Editor isHomeRoute />,
-		mobile: <SidebarNavigationScreenMain />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ||
+				isClassicThemeWithStyleBookSupport( siteData ) ? (
+				<SidebarNavigationScreenMain />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ||
+				isClassicThemeWithStyleBookSupport( siteData ) ? (
+				<Editor isHomeRoute />
+			) : undefined;
+		},
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ||
+				isClassicThemeWithStyleBookSupport( siteData ) ? (
+				<SidebarNavigationScreenMain />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };

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

@@ -6,9 +6,9 @@ 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 SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -20,9 +20,7 @@ function MobileNavigationItemView() {
 	return canvas === 'edit' ? (
 		<Editor />
 	) : (
-		<SidebarNavigationScreenNavigationMenu
-			backPath={ { postType: NAVIGATION_POST_TYPE } }
-		/>
+		<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
 	);
 }
 
@@ -30,10 +28,29 @@ export const navigationItemRoute = {
 	name: 'navigation-item',
 	path: '/wp_navigation/:postId',
 	areas: {
-		sidebar: (
-			<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
-		),
-		preview: <Editor />,
-		mobile: <MobileNavigationItemView />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<Editor />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<MobileNavigationItemView />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };

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

@@ -8,6 +8,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Editor from '../editor';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -27,8 +28,25 @@ export const navigationRoute = {
 	name: 'navigation',
 	path: '/navigation',
 	areas: {
-		sidebar: <SidebarNavigationScreenNavigationMenus backPath="/" />,
-		preview: <Editor />,
-		mobile: <MobileNavigationView />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreenNavigationMenus backPath="/" />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? <Editor /> : undefined;
+		},
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<MobileNavigationView />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };

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

@@ -6,8 +6,19 @@ 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: '*',
@@ -15,13 +26,13 @@ export const notFoundRoute = {
 		sidebar: <SidebarNavigationScreenMain />,
 		mobile: (
 			<SidebarNavigationScreenMain
-				customDescription={ __( '404 (Not Found)' ) }
+				customDescription={ <NotFoundError /> }
 			/>
 		),
 		content: (
-			<p className="edit-site-layout__area__404">
-				{ __( '404 (Not Found)' ) }
-			</p>
+			<Spacer padding={ 2 }>
+				<NotFoundError />
+			</Spacer>
 		),
 	},
 };

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

@@ -9,19 +9,39 @@ import { __ } from '@wordpress/i18n';
 import Editor from '../editor';
 import DataViewsSidebarContent from '../sidebar-dataviews';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 
 export const pageItemRoute = {
 	name: 'page-item',
 	path: '/page/:postId',
 	areas: {
-		sidebar: (
-			<SidebarNavigationScreen
-				title={ __( 'Pages' ) }
-				backPath="/"
-				content={ <DataViewsSidebarContent postType="page" /> }
-			/>
-		),
-		mobile: <Editor />,
-		preview: <Editor />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreen
+					title={ __( 'Pages' ) }
+					backPath="/"
+					content={ <DataViewsSidebarContent postType="page" /> }
+				/>
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<Editor />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<Editor />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };

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

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
  */
 import Editor from '../editor';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import DataViewsSidebarContent from '../sidebar-dataviews';
 import PostList from '../post-list';
 import { unlock } from '../../lock-unlock';
@@ -27,21 +28,40 @@ export const pagesRoute = {
 	name: 'pages',
 	path: '/page',
 	areas: {
-		sidebar: (
-			<SidebarNavigationScreen
-				title={ __( 'Pages' ) }
-				backPath="/"
-				content={ <DataViewsSidebarContent postType="page" /> }
-			/>
-		),
-		content: <PostList postType="page" />,
-		preview( { query } ) {
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreen
+					title={ __( 'Pages' ) }
+					backPath="/"
+					content={ <DataViewsSidebarContent postType="page" /> }
+				/>
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		content( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? <PostList postType="page" /> : undefined;
+		},
+		preview( { query, siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			if ( ! isBlockTheme ) {
+				return undefined;
+			}
 			const isListView =
 				( query.layout === 'list' || ! query.layout ) &&
 				query.isCustom !== 'true';
 			return isListView ? <Editor /> : undefined;
 		},
-		mobile: <MobilePagesView />,
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<MobilePagesView />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 		edit( { query } ) {
 			const hasQuickEdit =
 				( query.layout ?? 'list' ) !== 'list' && !! query.quickEdit;

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

@@ -3,12 +3,20 @@
  */
 import Editor from '../editor';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+import { isClassicThemeWithStyleBookSupport } from './utils';
 
 export const patternItemRoute = {
 	name: 'pattern-item',
 	path: '/wp_block/:postId',
 	areas: {
-		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			const backPath =
+				isBlockTheme || isClassicThemeWithStyleBookSupport( siteData )
+					? '/'
+					: undefined;
+			return <SidebarNavigationScreenPatterns backPath={ backPath } />;
+		},
 		mobile: <Editor />,
 		preview: <Editor />,
 	},

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

@@ -3,13 +3,33 @@
  */
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import PagePatterns from '../page-patterns';
+import { isClassicThemeWithStyleBookSupport } from './utils';
 
 export const patternsRoute = {
 	name: 'patterns',
 	path: '/pattern',
 	areas: {
-		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			const backPath =
+				isBlockTheme || isClassicThemeWithStyleBookSupport( siteData )
+					? '/'
+					: undefined;
+			return <SidebarNavigationScreenPatterns backPath={ backPath } />;
+		},
 		content: <PagePatterns />,
-		mobile: <PagePatterns />,
+		mobile( { siteData, query } ) {
+			const { categoryId } = query;
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			const backPath =
+				isBlockTheme || isClassicThemeWithStyleBookSupport( siteData )
+					? '/'
+					: undefined;
+			return !! categoryId ? (
+				<PagePatterns />
+			) : (
+				<SidebarNavigationScreenPatterns backPath={ backPath } />
+			);
+		},
 	},
 };

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

@@ -7,22 +7,36 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { StyleBookPreview } from '../style-book';
+import { isClassicThemeWithStyleBookSupport } from './utils';
 
 export const stylebookRoute = {
 	name: 'stylebook',
 	path: '/stylebook',
 	areas: {
-		sidebar: (
-			<SidebarNavigationScreen
-				title={ __( 'Styles' ) }
-				backPath="/"
-				description={ __(
-					`Preview your website's visual identity: colors, typography, and blocks.`
-				) }
-			/>
-		),
-		preview: <StyleBookPreview isStatic />,
-		mobile: <StyleBookPreview isStatic />,
+		sidebar( { siteData } ) {
+			return isClassicThemeWithStyleBookSupport( siteData ) ? (
+				<SidebarNavigationScreen
+					title={ __( 'Styles' ) }
+					backPath="/"
+					description={ __(
+						`Preview your website's visual identity: colors, typography, and blocks.`
+					) }
+				/>
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			return isClassicThemeWithStyleBookSupport( siteData ) ? (
+				<StyleBookPreview isStatic />
+			) : undefined;
+		},
+		mobile( { siteData } ) {
+			return isClassicThemeWithStyleBookSupport( siteData ) ? (
+				<StyleBookPreview isStatic />
+			) : undefined;
+		},
 	},
 };

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

@@ -3,13 +3,35 @@
  */
 import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 
 export const templateItemRoute = {
 	name: 'template-item',
 	path: '/wp_template/*postId',
 	areas: {
-		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		mobile: <Editor />,
-		preview: <Editor />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreenTemplatesBrowse backPath="/" />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<Editor />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<Editor />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };

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

@@ -3,19 +3,41 @@
  */
 import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import PageTemplates from '../page-templates';
 
 export const templatesRoute = {
 	name: 'templates',
 	path: '/template',
 	areas: {
-		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		content: <PageTemplates />,
-		preview( { query } ) {
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreenTemplatesBrowse backPath="/" />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		content( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? <PageTemplates /> : undefined;
+		},
+		preview( { query, siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			if ( ! isBlockTheme ) {
+				return undefined;
+			}
 			const isListView = query.layout === 'list';
 			return isListView ? <Editor /> : undefined;
 		},
-		mobile: <PageTemplates />,
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<PageTemplates />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 	widths: {
 		content( { query } ) {