@wordpress/edit-site 6.42.0 → 6.43.0

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

@@ -6,9 +6,11 @@ import {
 	__experimentalItem as Item,
 } from '@wordpress/components';
 import { getTemplatePartIcon } from '@wordpress/editor';
+import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { file } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useViewConfig } from '@wordpress/views';
 
 /**
  * Internal dependencies
@@ -28,70 +30,44 @@ import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
 
 function CategoriesGroup( {
-	templatePartAreas,
-	patternCategories,
+	templatePartViews,
+	patternViews,
+	templatePartCounts,
+	patternCounts,
 	currentCategory,
 	currentType,
 } ) {
-	const [ allPatterns, ...otherPatterns ] = patternCategories;
-
 	return (
 		<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-			<CategoryItem
-				key="all"
-				count={ Object.values( templatePartAreas )
-					.map( ( { templateParts } ) => templateParts?.length || 0 )
-					.reduce( ( acc, val ) => acc + val, 0 ) }
-				icon={ getTemplatePartIcon() } /* no name, so it provides the fallback icon */
-				label={ __( 'All template parts' ) }
-				id={ TEMPLATE_PART_ALL_AREAS_CATEGORY }
-				type={ TEMPLATE_PART_POST_TYPE }
-				isActive={
-					currentCategory === TEMPLATE_PART_ALL_AREAS_CATEGORY &&
-					currentType === TEMPLATE_PART_POST_TYPE
-				}
-			/>
-			{ Object.entries( templatePartAreas ).map(
-				( [ area, { label, templateParts, icon } ] ) => (
-					<CategoryItem
-						key={ area }
-						count={ templateParts?.length }
-						icon={ getTemplatePartIcon( icon ) }
-						label={ label }
-						id={ area }
-						type={ TEMPLATE_PART_POST_TYPE }
-						isActive={
-							currentCategory === area &&
-							currentType === TEMPLATE_PART_POST_TYPE
-						}
-					/>
-				)
-			) }
-			<div className="edit-site-sidebar-navigation-screen-patterns__divider" />
-			{ allPatterns && (
+			{ templatePartViews?.map( ( view ) => (
 				<CategoryItem
-					key={ allPatterns.name }
-					count={ allPatterns.count }
-					label={ allPatterns.label }
-					icon={ file }
-					id={ allPatterns.name }
-					type={ PATTERN_TYPES.user }
+					key={ view.slug }
+					count={ templatePartCounts[ view.slug ] }
+					icon={ getTemplatePartIcon(
+						view.slug === TEMPLATE_PART_ALL_AREAS_CATEGORY
+							? undefined
+							: view.slug
+					) }
+					label={ view.title }
+					id={ view.slug }
+					type={ TEMPLATE_PART_POST_TYPE }
 					isActive={
-						currentCategory === `${ allPatterns.name }` &&
-						currentType === PATTERN_TYPES.user
+						currentCategory === view.slug &&
+						currentType === TEMPLATE_PART_POST_TYPE
 					}
 				/>
-			) }
-			{ otherPatterns.map( ( category ) => (
+			) ) }
+			<div className="edit-site-sidebar-navigation-screen-patterns__divider" />
+			{ patternViews?.map( ( view ) => (
 				<CategoryItem
-					key={ category.name }
-					count={ category.count }
-					label={ category.label }
+					key={ view.slug }
+					count={ patternCounts[ view.slug ] }
+					label={ view.title }
 					icon={ file }
-					id={ category.name }
+					id={ view.slug }
 					type={ PATTERN_TYPES.user }
 					isActive={
-						currentCategory === `${ category.name }` &&
+						currentCategory === `${ view.slug }` &&
 						currentType === PATTERN_TYPES.user
 					}
 				/>
@@ -110,9 +86,38 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 			? PATTERN_DEFAULT_CATEGORY
 			: TEMPLATE_PART_ALL_AREAS_CATEGORY );
 
-	const { templatePartAreas, hasTemplateParts, isLoading } =
+	const { view_list: templatePartViews } = useViewConfig( {
+		kind: 'postType',
+		name: TEMPLATE_PART_POST_TYPE,
+	} );
+	const { view_list: patternViews } = useViewConfig( {
+		kind: 'postType',
+		name: PATTERN_TYPES.user,
+	} );
+
+	const { templatePartAreas, isLoading, hasTemplateParts } =
 		useTemplatePartAreas();
-	const { patternCategories, hasPatterns } = usePatternCategories();
+	const templatePartCounts = useMemo( () => {
+		const counts = { [ TEMPLATE_PART_ALL_AREAS_CATEGORY ]: 0 };
+		Object.entries( templatePartAreas ).forEach(
+			( [ area, { templateParts } ] ) => {
+				const count = templateParts?.length || 0;
+				counts[ area ] = count;
+				counts[ TEMPLATE_PART_ALL_AREAS_CATEGORY ] += count;
+			}
+		);
+		return counts;
+	}, [ templatePartAreas ] );
+	const { patternCategories } = usePatternCategories();
+	const patternCounts = useMemo( () => {
+		const counts = {};
+		patternCategories.forEach( ( cat ) => {
+			counts[ cat.name ] = cat.count;
+		} );
+		return counts;
+	}, [ patternCategories ] );
+
+	const hasPatterns = patternCounts[ PATTERN_DEFAULT_CATEGORY ] > 0;
 
 	return (
 		<SidebarNavigationScreen
@@ -133,8 +138,10 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 								</ItemGroup>
 							) }
 							<CategoriesGroup
-								templatePartAreas={ templatePartAreas }
-								patternCategories={ patternCategories }
+								templatePartViews={ templatePartViews }
+								patternViews={ patternViews }
+								templatePartCounts={ templatePartCounts }
+								patternCounts={ patternCounts }
 								currentCategory={ currentCategory }
 								currentType={ postType }
 							/>

package/src/components/sidebar-navigation-screen-templates-browse/content-legacy.js

@@ -1,79 +1,59 @@
 /**
  * WordPress dependencies
  */
-import { useEntityRecords } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { addQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import {
+	commentAuthorAvatar,
+	layout,
+	plugins as pluginIcon,
+	globe,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import { useAddedBy } from '../page-templates/hooks';
-import { layout } from '@wordpress/icons';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-const EMPTY_ARRAY = [];
-
-function TemplateDataviewItem( { template, isActive } ) {
-	const { text, icon } = useAddedBy( template.type, template.id );
-
-	return (
-		<SidebarNavigationItem
-			to={ addQueryArgs( '/template', { activeView: text } ) }
-			icon={ icon }
-			aria-current={ isActive }
-		>
-			{ text }
-		</SidebarNavigationItem>
-	);
-}
+import DataViewsSidebarContent from '../sidebar-dataviews';
 
+const SOURCE_TO_ICON = {
+	user: commentAuthorAvatar,
+	theme: layout,
+	plugin: pluginIcon,
+	site: globe,
+};
 export default function DataviewsTemplatesSidebarContent() {
-	const {
-		query: { activeView = 'all' },
-	} = useLocation();
-	const { records } = useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
-		per_page: -1,
-	} );
-	const firstItemPerAuthorText = useMemo( () => {
-		const firstItemPerAuthor = records?.reduce( ( acc, template ) => {
-			const author = template.author_text;
-			if ( author && ! acc[ author ] ) {
-				acc[ author ] = template;
-			}
-			return acc;
-		}, {} );
-		return (
-			( firstItemPerAuthor && Object.values( firstItemPerAuthor ) ) ??
-			EMPTY_ARRAY
+	const authorSourceMap = useSelect( ( select ) => {
+		const templates = select( coreStore ).getEntityRecords(
+			'postType',
+			TEMPLATE_POST_TYPE,
+			{ per_page: -1 }
 		);
-	}, [ records ] );
+		if ( ! templates ) {
+			return {};
+		}
+		const map = {};
+		for ( const template of templates ) {
+			if (
+				template.author_text &&
+				template.original_source &&
+				! map[ template.author_text ]
+			) {
+				map[ template.author_text ] = template.original_source;
+			}
+		}
+		return map;
+	}, [] );
+
+	const resolveIcon = ( view ) => {
+		const source = authorSourceMap[ view.slug ];
+		return SOURCE_TO_ICON[ source ] ?? layout;
+	};
 
 	return (
-		<ItemGroup className="edit-site-sidebar-navigation-screen-templates-browse">
-			<SidebarNavigationItem
-				to="/template"
-				icon={ layout }
-				aria-current={ activeView === 'all' }
-			>
-				{ __( 'All templates' ) }
-			</SidebarNavigationItem>
-			{ firstItemPerAuthorText.map( ( template ) => {
-				return (
-					<TemplateDataviewItem
-						key={ template.author_text }
-						template={ template }
-						isActive={ activeView === template.author_text }
-					/>
-				);
-			} ) }
-		</ItemGroup>
+		<DataViewsSidebarContent
+			postType={ TEMPLATE_POST_TYPE }
+			resolveIcon={ resolveIcon }
+		/>
 	);
 }

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

@@ -4,15 +4,17 @@
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import Editor from '../editor';
-import { isClassicThemeWithStyleBookSupport } from './utils';
+import { isClassicThemeWithStyleBookSupport, isThemeDataLoaded } from './utils';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
 		sidebar( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ||
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
+			return siteData.currentTheme.is_block_theme ||
 				isClassicThemeWithStyleBookSupport( siteData ) ? (
 				<SidebarNavigationScreenMain />
 			) : (
@@ -27,8 +29,10 @@ export const homeRoute = {
 			) : undefined;
 		},
 		mobile( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ||
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return <></>;
+			}
+			return siteData.currentTheme.is_block_theme ||
 				isClassicThemeWithStyleBookSupport( siteData ) ? (
 				<SidebarNavigationScreenMain />
 			) : (

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

@@ -10,6 +10,7 @@ import Editor from '../editor';
 import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { unlock } from '../../lock-unlock';
+import { isThemeDataLoaded } from './utils';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -29,24 +30,30 @@ export const navigationItemRoute = {
 	path: '/wp_navigation/:postId',
 	areas: {
 		sidebar( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
 			) : (
 				<SidebarNavigationScreenUnsupported />
 			);
 		},
 		preview( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<Editor />
 			) : (
 				<SidebarNavigationScreenUnsupported />
 			);
 		},
 		mobile( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return <></>;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<MobileNavigationItemView />
 			) : (
 				<SidebarNavigationScreenUnsupported />

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

@@ -10,6 +10,7 @@ import Editor from '../editor';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { unlock } from '../../lock-unlock';
+import { isThemeDataLoaded } from './utils';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -29,8 +30,10 @@ export const navigationRoute = {
 	path: '/navigation',
 	areas: {
 		sidebar( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<SidebarNavigationScreenNavigationMenus backPath="/" />
 			) : (
 				<SidebarNavigationScreenUnsupported />
@@ -41,8 +44,10 @@ export const navigationRoute = {
 			return isBlockTheme ? <Editor /> : undefined;
 		},
 		mobile( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return <></>;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<MobileNavigationView />
 			) : (
 				<SidebarNavigationScreenUnsupported />

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

@@ -10,14 +10,17 @@ import Editor from '../editor';
 import DataViewsSidebarContent from '../sidebar-dataviews';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
+import { isThemeDataLoaded } from './utils';
 
 export const pageItemRoute = {
 	name: 'page-item',
 	path: '/page/:postId',
 	areas: {
 		sidebar( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<SidebarNavigationScreen
 					title={ __( 'Pages' ) }
 					backPath="/"
@@ -28,16 +31,20 @@ export const pageItemRoute = {
 			);
 		},
 		mobile( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return <></>;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<Editor />
 			) : (
 				<SidebarNavigationScreenUnsupported />
 			);
 		},
 		preview( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<Editor />
 			) : (
 				<SidebarNavigationScreenUnsupported />

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

@@ -3,6 +3,8 @@
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __ } from '@wordpress/i18n';
+import { resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { loadView } from '@wordpress/views';
 
 /**
@@ -14,21 +16,26 @@ import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-uns
 import DataViewsSidebarContent from '../sidebar-dataviews';
 import PostList from '../post-list';
 import { unlock } from '../../lock-unlock';
-import {
-	DEFAULT_VIEW,
-	getActiveViewOverridesForTab,
-} from '../post-list/view-utils';
+import { isThemeDataLoaded } from './utils';
 
 const { useLocation } = unlock( routerPrivateApis );
 
 async function isListView( query ) {
 	const { activeView = 'all' } = query;
+	const config = await unlock( resolveSelect( coreStore ) ).getViewConfig(
+		'postType',
+		'page'
+	);
+	const defaultView = config?.default_view;
+	const defaultLayouts = config?.default_layouts;
+	const viewEntry = config?.view_list?.find( ( v ) => v.slug === activeView );
 	const view = await loadView( {
 		kind: 'postType',
 		name: 'page',
 		slug: 'default',
-		defaultView: DEFAULT_VIEW,
-		activeViewOverrides: getActiveViewOverridesForTab( activeView ),
+		defaultView,
+		defaultLayouts,
+		activeViewOverrides: viewEntry?.view ?? {},
 	} );
 	return view.type === 'list';
 }
@@ -45,8 +52,10 @@ export const pagesRoute = {
 	path: '/page',
 	areas: {
 		sidebar( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<SidebarNavigationScreen
 					title={ __( 'Pages' ) }
 					backPath="/"
@@ -69,8 +78,10 @@ export const pagesRoute = {
 			return isList ? <Editor /> : undefined;
 		},
 		mobile( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return <></>;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<MobilePagesView />
 			) : (
 				<SidebarNavigationScreenUnsupported />

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

@@ -10,7 +10,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { unlock } from '../../lock-unlock';
-import { isClassicThemeWithStyleBookSupport } from './utils';
+import { isClassicThemeWithStyleBookSupport, isThemeDataLoaded } from './utils';
 
 const { StyleBookPreview } = unlock( editorPrivateApis );
 
@@ -19,6 +19,9 @@ export const stylebookRoute = {
 	path: '/stylebook',
 	areas: {
 		sidebar( { siteData } ) {
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
 			return isClassicThemeWithStyleBookSupport( siteData ) ? (
 				<SidebarNavigationScreen
 					title={ __( 'Styles' ) }
@@ -33,12 +36,18 @@ export const stylebookRoute = {
 		},
 		preview( { siteData } ) {
 			return isClassicThemeWithStyleBookSupport( siteData ) ? (
-				<StyleBookPreview isStatic />
+				<StyleBookPreview
+					isStatic
+					settings={ siteData.editorSettings }
+				/>
 			) : undefined;
 		},
 		mobile( { siteData } ) {
 			return isClassicThemeWithStyleBookSupport( siteData ) ? (
-				<StyleBookPreview isStatic />
+				<StyleBookPreview
+					isStatic
+					settings={ siteData.editorSettings }
+				/>
 			) : undefined;
 		},
 	},

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

@@ -4,27 +4,34 @@
 import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
+import { isThemeDataLoaded } from './utils';
 
 const areas = {
 	sidebar( { siteData } ) {
-		const isBlockTheme = siteData.currentTheme?.is_block_theme;
-		return isBlockTheme ? (
+		if ( ! isThemeDataLoaded( siteData ) ) {
+			return null;
+		}
+		return siteData.currentTheme.is_block_theme ? (
 			<SidebarNavigationScreenTemplatesBrowse backPath="/" />
 		) : (
 			<SidebarNavigationScreenUnsupported />
 		);
 	},
 	mobile( { siteData } ) {
-		const isBlockTheme = siteData.currentTheme?.is_block_theme;
-		return isBlockTheme ? (
+		if ( ! isThemeDataLoaded( siteData ) ) {
+			return <></>;
+		}
+		return siteData.currentTheme.is_block_theme ? (
 			<Editor />
 		) : (
 			<SidebarNavigationScreenUnsupported />
 		);
 	},
 	preview( { siteData } ) {
-		const isBlockTheme = siteData.currentTheme?.is_block_theme;
-		return isBlockTheme ? (
+		if ( ! isThemeDataLoaded( siteData ) ) {
+			return null;
+		}
+		return siteData.currentTheme.is_block_theme ? (
 			<Editor />
 		) : (
 			<SidebarNavigationScreenUnsupported />

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

@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
+import { resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { loadView } from '@wordpress/views';
 
 /**
@@ -11,19 +13,24 @@ import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import PageTemplates from '../page-templates';
 import PageTemplatesLegacy from '../page-templates/index-legacy';
-import {
-	DEFAULT_VIEW,
-	getActiveViewOverridesForTab,
-} from '../page-templates/view-utils';
+import { unlock } from '../../lock-unlock';
+import { isThemeDataLoaded } from './utils';
 
 async function isTemplateListView( query ) {
 	const { activeView = 'active' } = query;
+	const config = await unlock( resolveSelect( coreStore ) ).getViewConfig(
+		'postType',
+		'wp_template'
+	);
+	const defaultView = config?.default_view;
+	const activeViewOverrides =
+		config?.view_list?.find( ( v ) => v.slug === activeView )?.view ?? {};
 	const view = await loadView( {
 		kind: 'postType',
 		name: 'wp_template',
 		slug: 'default',
-		defaultView: DEFAULT_VIEW,
-		activeViewOverrides: getActiveViewOverridesForTab( activeView ),
+		defaultView,
+		activeViewOverrides,
 	} );
 	return view.type === 'list';
 }
@@ -33,8 +40,10 @@ export const templatesRoute = {
 	path: '/template',
 	areas: {
 		sidebar( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			return isBlockTheme ? (
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return null;
+			}
+			return siteData.currentTheme.is_block_theme ? (
 				<SidebarNavigationScreenTemplatesBrowse backPath="/" />
 			) : (
 				<SidebarNavigationScreenUnsupported />
@@ -62,8 +71,10 @@ export const templatesRoute = {
 			return isListView ? <Editor /> : undefined;
 		},
 		mobile( { siteData } ) {
-			const isBlockTheme = siteData.currentTheme?.is_block_theme;
-			if ( ! isBlockTheme ) {
+			if ( ! isThemeDataLoaded( siteData ) ) {
+				return <></>;
+			}
+			if ( ! siteData.currentTheme.is_block_theme ) {
 				return <SidebarNavigationScreenUnsupported />;
 			}
 			// Check if the template activation experiment is enabled.

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

@@ -1,3 +1,15 @@
+/**
+ * Check if the current theme data has been loaded from the REST API.
+ *
+ * @param {Object} siteData - The site data provided by the site editor route area resolvers.
+ * @return {boolean} True if the theme data is available, false otherwise.
+ */
+export function isThemeDataLoaded( siteData ) {
+	return (
+		siteData.currentTheme !== undefined && siteData.currentTheme !== null
+	);
+}
+
 /**
  * Check if the classic theme supports the stylebook.
  *