@wordpress/edit-site 6.19.0 → 6.19.1

package/build-style/posts.css

@@ -1289,6 +1289,8 @@ div.dataviews-view-list {
   position: relative;
   width: 100%;
   z-index: 2;
+  display: flex;
+  flex-direction: column;
   /*
    * The SiteHubMobile component is displayed
    * for pages that do not have a sidebar,
@@ -1493,7 +1495,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-page {
   color: #2f2f2f;
   background: #fff;
-  height: calc(100% - 60px);
+  height: 100%;
   /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
   container: edit-site-page/inline-size;
 }
@@ -1502,11 +1504,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     transition: width ease-out 0.2s;
   }
 }
-@media (min-width: 782px) {
-  .edit-site-page {
-    height: 100%;
-  }
-}
 
 .edit-site-page-header {
   padding: 16px 48px;
@@ -1585,7 +1582,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _gddau_slide-from-right {
+@keyframes _fwjws_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -1595,7 +1592,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _gddau_slide-from-left {
+@keyframes _fwjws_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -1651,10 +1648,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _gddau_slide-from-left;
+  animation-name: _fwjws_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _gddau_slide-from-right;
+  animation-name: _fwjws_slide-from-right;
 }
 
 .edit-site-site-hub {

package/build-style/style-rtl.css

@@ -2114,7 +2114,7 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
 .edit-site-page {
   color: #2f2f2f;
   background: #fff;
-  height: calc(100% - 60px);
+  height: 100%;
   /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
   container: edit-site-page/inline-size;
 }
@@ -2123,11 +2123,6 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
     transition: width ease-out 0.2s;
   }
 }
-@media (min-width: 782px) {
-  .edit-site-page {
-    height: 100%;
-  }
-}
 
 .edit-site-page-header {
   padding: 16px 48px;
@@ -2533,6 +2528,8 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   position: relative;
   width: 100%;
   z-index: 2;
+  display: flex;
+  flex-direction: column;
   /*
    * The SiteHubMobile component is displayed
    * for pages that do not have a sidebar,
@@ -2770,7 +2767,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _xk1qy_slide-from-right {
+@keyframes _x51ri_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2780,7 +2777,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _xk1qy_slide-from-left {
+@keyframes _x51ri_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2836,10 +2833,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _xk1qy_slide-from-left;
+  animation-name: _x51ri_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _xk1qy_slide-from-right;
+  animation-name: _x51ri_slide-from-right;
 }
 
 .edit-site-sidebar-button {

package/build-style/style.css

@@ -2115,7 +2115,7 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
 .edit-site-page {
   color: #2f2f2f;
   background: #fff;
-  height: calc(100% - 60px);
+  height: 100%;
   /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
   container: edit-site-page/inline-size;
 }
@@ -2124,11 +2124,6 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
     transition: width ease-out 0.2s;
   }
 }
-@media (min-width: 782px) {
-  .edit-site-page {
-    height: 100%;
-  }
-}
 
 .edit-site-page-header {
   padding: 16px 48px;
@@ -2534,6 +2529,8 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   position: relative;
   width: 100%;
   z-index: 2;
+  display: flex;
+  flex-direction: column;
   /*
    * The SiteHubMobile component is displayed
    * for pages that do not have a sidebar,
@@ -2771,7 +2768,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _xk1qy_slide-from-right {
+@keyframes _x51ri_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2781,7 +2778,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _xk1qy_slide-from-left {
+@keyframes _x51ri_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2837,10 +2834,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _xk1qy_slide-from-left;
+  animation-name: _x51ri_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _xk1qy_slide-from-right;
+  animation-name: _x51ri_slide-from-right;
 }
 
 .edit-site-sidebar-button {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.19.0",
+	"version": "6.19.1",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,46 +30,46 @@
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.19.0",
-		"@wordpress/api-fetch": "^7.19.0",
-		"@wordpress/blob": "^4.19.0",
-		"@wordpress/block-editor": "^14.14.0",
-		"@wordpress/block-library": "^9.19.0",
-		"@wordpress/blocks": "^14.8.0",
-		"@wordpress/commands": "^1.19.0",
-		"@wordpress/components": "^29.5.0",
-		"@wordpress/compose": "^7.19.0",
-		"@wordpress/core-commands": "^1.19.0",
-		"@wordpress/core-data": "^7.19.0",
-		"@wordpress/data": "^10.19.0",
-		"@wordpress/dataviews": "^4.15.0",
-		"@wordpress/date": "^5.19.0",
-		"@wordpress/deprecated": "^4.19.0",
-		"@wordpress/dom": "^4.19.0",
-		"@wordpress/editor": "^14.19.0",
-		"@wordpress/element": "^6.19.0",
-		"@wordpress/escape-html": "^3.19.0",
-		"@wordpress/fields": "^0.11.0",
-		"@wordpress/hooks": "^4.19.0",
-		"@wordpress/html-entities": "^4.19.0",
-		"@wordpress/i18n": "^5.19.0",
-		"@wordpress/icons": "^10.19.0",
-		"@wordpress/keyboard-shortcuts": "^5.19.0",
-		"@wordpress/keycodes": "^4.19.0",
-		"@wordpress/media-utils": "^5.19.0",
-		"@wordpress/notices": "^5.19.0",
-		"@wordpress/patterns": "^2.19.0",
-		"@wordpress/plugins": "^7.19.0",
-		"@wordpress/preferences": "^4.19.0",
-		"@wordpress/primitives": "^4.19.0",
-		"@wordpress/private-apis": "^1.19.0",
-		"@wordpress/reusable-blocks": "^5.19.0",
-		"@wordpress/router": "^1.19.0",
-		"@wordpress/style-engine": "^2.19.0",
-		"@wordpress/url": "^4.19.0",
-		"@wordpress/viewport": "^6.19.0",
-		"@wordpress/widgets": "^4.19.0",
-		"@wordpress/wordcount": "^4.19.0",
+		"@wordpress/a11y": "^4.19.1",
+		"@wordpress/api-fetch": "^7.19.1",
+		"@wordpress/blob": "^4.19.1",
+		"@wordpress/block-editor": "^14.14.1",
+		"@wordpress/block-library": "^9.19.1",
+		"@wordpress/blocks": "^14.8.1",
+		"@wordpress/commands": "^1.19.1",
+		"@wordpress/components": "^29.5.1",
+		"@wordpress/compose": "^7.19.1",
+		"@wordpress/core-commands": "^1.19.1",
+		"@wordpress/core-data": "^7.19.1",
+		"@wordpress/data": "^10.19.1",
+		"@wordpress/dataviews": "^4.15.1",
+		"@wordpress/date": "^5.19.1",
+		"@wordpress/deprecated": "^4.19.1",
+		"@wordpress/dom": "^4.19.1",
+		"@wordpress/editor": "^14.19.1",
+		"@wordpress/element": "^6.19.1",
+		"@wordpress/escape-html": "^3.19.1",
+		"@wordpress/fields": "^0.11.1",
+		"@wordpress/hooks": "^4.19.1",
+		"@wordpress/html-entities": "^4.19.1",
+		"@wordpress/i18n": "^5.19.1",
+		"@wordpress/icons": "^10.19.1",
+		"@wordpress/keyboard-shortcuts": "^5.19.1",
+		"@wordpress/keycodes": "^4.19.1",
+		"@wordpress/media-utils": "^5.19.1",
+		"@wordpress/notices": "^5.19.1",
+		"@wordpress/patterns": "^2.19.1",
+		"@wordpress/plugins": "^7.19.1",
+		"@wordpress/preferences": "^4.19.1",
+		"@wordpress/primitives": "^4.19.1",
+		"@wordpress/private-apis": "^1.19.1",
+		"@wordpress/reusable-blocks": "^5.19.1",
+		"@wordpress/router": "^1.19.1",
+		"@wordpress/style-engine": "^2.19.1",
+		"@wordpress/url": "^4.19.1",
+		"@wordpress/viewport": "^6.19.1",
+		"@wordpress/widgets": "^4.19.1",
+		"@wordpress/wordcount": "^4.19.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d6b0b20fa927b110140dc7fdd906a7e0bf662004"
+	"gitHead": "6f49fee89f840761f7fedf662713cbd4a71723e9"
 }

package/src/components/add-new-template/utils.js

@@ -68,8 +68,7 @@ export const useExistingTemplates = () => {
 export const useDefaultTemplateTypes = () => {
 	return useSelect(
 		( select ) =>
-			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
-				?.default_template_types || [],
+			select( coreStore ).getCurrentTheme()?.default_template_types || [],
 		[]
 	);
 };

package/src/components/app/index.js

@@ -3,7 +3,8 @@
  */
 import { useSelect } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -30,9 +31,15 @@ function AppLayout() {
 
 export default function App() {
 	useRegisterSiteEditorRoutes();
-	const routes = useSelect( ( select ) => {
-		return unlock( select( editSiteStore ) ).getRoutes();
+	const { routes, currentTheme, editorSettings } = useSelect( ( select ) => {
+		return {
+			routes: unlock( select( editSiteStore ) ).getRoutes(),
+			currentTheme: select( coreStore ).getCurrentTheme(),
+			// This is a temp solution until the has_theme_json value is available for the current theme.
+			editorSettings: select( editSiteStore ).getSettings(),
+		};
 	}, [] );
+
 	const beforeNavigate = useCallback( ( { path, query } ) => {
 		if ( ! isPreviewingTheme() ) {
 			return { path, query };
@@ -50,11 +57,19 @@ export default function App() {
 		};
 	}, [] );
 
+	const matchResolverArgsValue = useMemo(
+		() => ( {
+			siteData: { currentTheme, editorSettings },
+		} ),
+		[ currentTheme, editorSettings ]
+	);
+
 	return (
 		<RouterProvider
 			routes={ routes }
 			pathArg="p"
 			beforeNavigate={ beforeNavigate }
+			matchResolverArgs={ matchResolverArgsValue }
 		>
 			<AppLayout />
 		</RouterProvider>

package/src/components/editor/use-editor-title.js

@@ -19,8 +19,11 @@ const { getTemplateInfo } = unlock( editorPrivateApis );
 function useEditorTitle( postType, postId ) {
 	const { title, isLoaded } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, hasFinishedResolution } =
-				select( coreStore );
+			const {
+				getEditedEntityRecord,
+				getCurrentTheme,
+				hasFinishedResolution,
+			} = select( coreStore );
 
 			if ( ! postId ) {
 				return { isLoaded: false };
@@ -33,10 +36,7 @@ function useEditorTitle( postType, postId ) {
 			);
 
 			const { default_template_types: templateTypes = [] } =
-				select( coreStore ).getEntityRecord(
-					'root',
-					'__unstableBase'
-				) ?? {};
+				getCurrentTheme() ?? {};
 
 			const templateInfo = getTemplateInfo( {
 				template: _record,

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,27 @@ 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>
+									</>
+								) : (
+									<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-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 />
+			);
+		},
 	},
 };