@wordpress/edit-site 6.19.0 → 6.19.2

package/src/components/layout/index.js

@@ -44,7 +44,7 @@ import { unlock } from '../../lock-unlock';
 import SaveKeyboardShortcut from '../save-keyboard-shortcut';
 import { useIsSiteEditorLoading } from './hooks';
 import useMovingAnimation from './animation';
-import SidebarContent from '../sidebar';
+import { SidebarContent, SidebarNavigationProvider } from '../sidebar';
 import SaveHub from '../save-hub';
 import SavePanel from '../save-panel';
 
@@ -141,16 +141,18 @@ function Layout() {
 												isResizableFrameOversized
 											}
 										/>
-										<SidebarContent
-											shouldAnimate={
-												routeKey !== 'styles'
-											}
-											routeKey={ routeKey }
-										>
-											<ErrorBoundary>
-												{ areas.sidebar }
-											</ErrorBoundary>
-										</SidebarContent>
+										<SidebarNavigationProvider>
+											<SidebarContent
+												shouldAnimate={
+													routeKey !== 'styles'
+												}
+												routeKey={ routeKey }
+											>
+												<ErrorBoundary>
+													{ areas.sidebar }
+												</ErrorBoundary>
+											</SidebarContent>
+										</SidebarNavigationProvider>
 										<SaveHub />
 										<SavePanel />
 									</motion.div>
@@ -163,17 +165,29 @@ function Layout() {
 
 					{ isMobileViewport && areas.mobile && (
 						<div className="edit-site-layout__mobile">
-							{ canvas !== 'edit' && (
-								<SidebarContent routeKey={ routeKey }>
-									<SiteHubMobile
-										ref={ toggleRef }
-										isTransparent={
-											isResizableFrameOversized
-										}
-									/>
-								</SidebarContent>
-							) }
-							<ErrorBoundary>{ areas.mobile }</ErrorBoundary>
+							<SidebarNavigationProvider>
+								{ canvas !== 'edit' ? (
+									<>
+										<SiteHubMobile
+											ref={ toggleRef }
+											isTransparent={
+												isResizableFrameOversized
+											}
+										/>
+										<SidebarContent routeKey={ routeKey }>
+											<ErrorBoundary>
+												{ areas.mobile }
+											</ErrorBoundary>
+										</SidebarContent>
+										<SaveHub />
+										<SavePanel />
+									</>
+								) : (
+									<ErrorBoundary>
+										{ areas.mobile }
+									</ErrorBoundary>
+								) }
+							</SidebarNavigationProvider>
 						</div>
 					) }
 

package/src/components/layout/style.scss

@@ -56,6 +56,8 @@
 	position: relative;
 	width: 100%;
 	z-index: z-index(".edit-site-layout__canvas-container");
+	display: flex;
+	flex-direction: column;
 
 	/*
 	 * The SiteHubMobile component is displayed

package/src/components/page/style.scss

@@ -1,17 +1,13 @@
 .edit-site-page {
 	color: $gray-800;
 	background: $white;
-	height: calc(100% - #{$header-height});
+	height: 100%;
 	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
 	container: edit-site-page / inline-size;
 
 	@media not (prefers-reduced-motion) {
 		transition: width ease-out 0.2s;
 	}
-
-	@include break-medium() {
-		height: 100%;
-	}
 }
 
 .edit-site-page-header {

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

@@ -32,7 +32,7 @@ export default function PatternsHeader( {
 	const { patternCategories } = usePatternCategories();
 	const templatePartAreas = useSelect(
 		( select ) =>
-			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			select( coreStore ).getCurrentTheme()
 				?.default_template_part_areas || [],
 		[]
 	);

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

@@ -100,7 +100,7 @@ export default function SidebarNavigationScreenMain( { customDescription } ) {
 		);
 	} else {
 		description = __(
-			'Explore block styles and patterns to refine your site'
+			'Explore block styles and patterns to refine your site.'
 		);
 	}
 

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

@@ -8,6 +8,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 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 );
@@ -27,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/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

@@ -1,34 +1,35 @@
-/**
- * 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="/" />
-	);
-}
+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: <MobilePatternsView />,
+		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 />
+			);
+		},
 	},
 };