@wordpress/edit-site 6.47.0 → 6.48.1

package/src/components/site-editor-routes/README.md

@@ -6,15 +6,15 @@ When `canvasMode` is not `edit`, the areas available to use are:
 
 | Area | Non-mobile viewport | Mobile viewport |
 | --- | --- | --- |
-| `sidebar` | Always rendered. | Only if `mobile` is not provided. |
+| `sidebar` | Always rendered. | Only if no mobile area (`mobileSidebar`, `mobileContent`, or `preview`) is provided. |
 | `content` | Rendered if provided. | Not rendered. |
 | `preview` | Rendered if provided. | Not rendered. |
 | `edit` | Rendered if provided. | Not rendered. |
-| `mobile` | Not rendered | Rendered as full-screen, if provided. |
+| `mobileSidebar` | Not rendered | Rendered as full-screen (with the themed sidebar background), if provided and `mobileContent` is not provided. |
+| `mobileContent` | Not rendered | Rendered as full-screen (with the white content background), if provided. |
 
 When `canvasMode` is `edit`, the areas available to use are:
 
 | Area | Non-mobile viewport | Mobile viewport |
 | --- | --- | --- |
-| `preview` | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. | Not rendered. |
-| `mobile` | Not rendered | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. |
+| `preview` | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. |

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

@@ -28,7 +28,7 @@ export const homeRoute = {
 				<Editor isHomeRoute />
 			) : undefined;
 		},
-		mobile( { siteData } ) {
+		mobileSidebar( { siteData } ) {
 			if ( ! isThemeDataLoaded( siteData ) ) {
 				return <></>;
 			}

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

@@ -1,29 +1,10 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
 /**
  * Internal dependencies
  */
 import Editor from '../editor';
-import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenIdentity from '../sidebar-navigation-screen-identity';
 import SidebarIdentity from '../sidebar-identity';
 
-const { useLocation } = unlock( routerPrivateApis );
-
-function MobileIdentityView() {
-	const { query = {} } = useLocation();
-	const { canvas } = query;
-
-	if ( canvas === 'edit' ) {
-		return <Editor />;
-	}
-
-	return <SidebarIdentity />;
-}
-
 export const identityRoute = {
 	name: 'identity',
 	path: '/identity',
@@ -31,7 +12,7 @@ export const identityRoute = {
 		sidebar: <SidebarNavigationScreenIdentity />,
 		content: <SidebarIdentity />,
 		preview: <Editor />,
-		mobile: <MobileIdentityView />,
+		mobileContent: <SidebarIdentity />,
 	},
 	widths: {
 		content: 380,

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

@@ -1,30 +1,11 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
 /**
  * Internal dependencies
  */
 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 );
-
-function MobileNavigationItemView() {
-	const { query = {} } = useLocation();
-	const { canvas = 'view' } = query;
-
-	return canvas === 'edit' ? (
-		<Editor />
-	) : (
-		<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
-	);
-}
-
 export const navigationItemRoute = {
 	name: 'navigation-item',
 	path: '/wp_navigation/:postId',
@@ -49,12 +30,12 @@ export const navigationItemRoute = {
 				<SidebarNavigationScreenUnsupported />
 			);
 		},
-		mobile( { siteData } ) {
+		mobileSidebar( { siteData } ) {
 			if ( ! isThemeDataLoaded( siteData ) ) {
 				return <></>;
 			}
 			return siteData.currentTheme.is_block_theme ? (
-				<MobileNavigationItemView />
+				<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
 			) : (
 				<SidebarNavigationScreenUnsupported />
 			);

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

@@ -1,30 +1,11 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
 /**
  * Internal dependencies
  */
 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 );
-
-function MobileNavigationView() {
-	const { query = {} } = useLocation();
-	const { canvas = 'view' } = query;
-
-	return canvas === 'edit' ? (
-		<Editor />
-	) : (
-		<SidebarNavigationScreenNavigationMenus backPath="/" />
-	);
-}
-
 export const navigationRoute = {
 	name: 'navigation',
 	path: '/navigation',
@@ -43,12 +24,12 @@ export const navigationRoute = {
 			const isBlockTheme = siteData.currentTheme?.is_block_theme;
 			return isBlockTheme ? <Editor /> : undefined;
 		},
-		mobile( { siteData } ) {
+		mobileSidebar( { siteData } ) {
 			if ( ! isThemeDataLoaded( siteData ) ) {
 				return <></>;
 			}
 			return siteData.currentTheme.is_block_theme ? (
-				<MobileNavigationView />
+				<SidebarNavigationScreenNavigationMenus backPath="/" />
 			) : (
 				<SidebarNavigationScreenUnsupported />
 			);

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

@@ -24,7 +24,7 @@ export const notFoundRoute = {
 	path: '*',
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
-		mobile: (
+		mobileSidebar: (
 			<SidebarNavigationScreenMain
 				customDescription={ <NotFoundError /> }
 			/>

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

@@ -30,16 +30,7 @@ export const pageItemRoute = {
 				<SidebarNavigationScreenUnsupported />
 			);
 		},
-		mobile( { siteData } ) {
-			if ( ! isThemeDataLoaded( siteData ) ) {
-				return <></>;
-			}
-			return siteData.currentTheme.is_block_theme ? (
-				<Editor />
-			) : (
-				<SidebarNavigationScreenUnsupported />
-			);
-		},
+		// Also rendered on mobile, where this route is only reached at canvas=edit.
 		preview( { siteData } ) {
 			if ( ! isThemeDataLoaded( siteData ) ) {
 				return null;

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

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __ } from '@wordpress/i18n';
 import { resolveSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -18,8 +17,6 @@ import PostList from '../post-list';
 import { unlock } from '../../lock-unlock';
 import { isThemeDataLoaded } from './utils';
 
-const { useLocation } = unlock( routerPrivateApis );
-
 async function isListView( query ) {
 	const { activeView = 'all' } = query;
 	const config = await unlock( resolveSelect( coreStore ) ).getViewConfig(
@@ -40,13 +37,6 @@ async function isListView( query ) {
 	return view.type === 'list';
 }
 
-function MobilePagesView() {
-	const { query = {} } = useLocation();
-	const { canvas = 'view' } = query;
-
-	return canvas === 'edit' ? <Editor /> : <PostList postType="page" />;
-}
-
 export const pagesRoute = {
 	name: 'pages',
 	path: '/page',
@@ -77,16 +67,18 @@ export const pagesRoute = {
 			const isList = await isListView( query );
 			return isList ? <Editor /> : undefined;
 		},
-		mobile( { siteData } ) {
+		mobileSidebar( { siteData } ) {
 			if ( ! isThemeDataLoaded( siteData ) ) {
 				return <></>;
 			}
-			return siteData.currentTheme.is_block_theme ? (
-				<MobilePagesView />
-			) : (
+			return siteData.currentTheme.is_block_theme ? undefined : (
 				<SidebarNavigationScreenUnsupported />
 			);
 		},
+		mobileContent( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? <PostList postType="page" /> : undefined;
+		},
 	},
 	widths: {
 		async content( { query } ) {

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

@@ -17,7 +17,7 @@ export const patternItemRoute = {
 					: undefined;
 			return <SidebarNavigationScreenPatterns backPath={ backPath } />;
 		},
-		mobile: <Editor />,
+		// Also rendered on mobile, where this route is only reached at canvas=edit.
 		preview: <Editor />,
 	},
 };

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

@@ -18,18 +18,19 @@ export const patternsRoute = {
 			return <SidebarNavigationScreenPatterns backPath={ backPath } />;
 		},
 		content: <PagePatterns />,
-		mobile( { siteData, query } ) {
-			const { categoryId } = query;
+		mobileSidebar( { siteData, query } ) {
+			if ( query.categoryId ) {
+				return undefined;
+			}
 			const isBlockTheme = siteData.currentTheme?.is_block_theme;
 			const backPath =
 				isBlockTheme || isClassicThemeWithStyleBookSupport( siteData )
 					? '/'
 					: undefined;
-			return !! categoryId ? (
-				<PagePatterns />
-			) : (
-				<SidebarNavigationScreenPatterns backPath={ backPath } />
-			);
+			return <SidebarNavigationScreenPatterns backPath={ backPath } />;
+		},
+		mobileContent( { query } ) {
+			return query.categoryId ? <PagePatterns /> : undefined;
 		},
 	},
 };

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

@@ -42,7 +42,7 @@ export const stylebookRoute = {
 				/>
 			) : undefined;
 		},
-		mobile( { siteData } ) {
+		mobileContent( { siteData } ) {
 			return isClassicThemeWithStyleBookSupport( siteData ) ? (
 				<StyleBookPreview
 					isStatic

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

@@ -16,17 +16,6 @@ import SidebarGlobalStyles from '../sidebar-global-styles';
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 const { StyleBookPreview } = unlock( editorPrivateApis );
 
-function MobileGlobalStylesUI() {
-	const { query = {} } = useLocation();
-	const { canvas } = query;
-
-	if ( canvas === 'edit' ) {
-		return <Editor />;
-	}
-
-	return <SidebarGlobalStyles />;
-}
-
 function StylesPreviewArea() {
 	const { path, query } = useLocation();
 	const history = useHistory();
@@ -61,7 +50,7 @@ export const stylesRoute = {
 		content: <SidebarGlobalStyles />,
 		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
 		preview: <StylesPreviewArea />,
-		mobile: <MobileGlobalStylesUI />,
+		mobileContent: <SidebarGlobalStyles />,
 	},
 	widths: {
 		content: 380,

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

@@ -17,16 +17,7 @@ const areas = {
 			<SidebarNavigationScreenUnsupported />
 		);
 	},
-	mobile( { siteData } ) {
-		if ( ! isThemeDataLoaded( siteData ) ) {
-			return <></>;
-		}
-		return siteData.currentTheme.is_block_theme ? (
-			<Editor />
-		) : (
-			<SidebarNavigationScreenUnsupported />
-		);
-	},
+	// Also rendered on mobile, where this route is only reached at canvas=edit.
 	preview( { siteData } ) {
 		if ( ! isThemeDataLoaded( siteData ) ) {
 			return null;

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

@@ -9,7 +9,7 @@ export const templatePartItemRoute = {
 	path: '/wp_template_part/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
-		mobile: <Editor />,
+		// Also rendered on mobile, where this route is only reached at canvas=edit.
 		preview: <Editor />,
 	},
 };

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

@@ -70,13 +70,20 @@ export const templatesRoute = {
 			const isListView = await isTemplateListView( query );
 			return isListView ? <Editor /> : undefined;
 		},
-		mobile( { siteData } ) {
+		mobileSidebar( { siteData } ) {
 			if ( ! isThemeDataLoaded( siteData ) ) {
 				return <></>;
 			}
 			if ( ! siteData.currentTheme.is_block_theme ) {
 				return <SidebarNavigationScreenUnsupported />;
 			}
+			return undefined;
+		},
+		mobileContent( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			if ( ! isBlockTheme ) {
+				return undefined;
+			}
 			// Check if the template activation experiment is enabled.
 			const isTemplateActivateEnabled =
 				typeof window !== 'undefined' &&

package/src/components/site-hub/style.scss

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-site-hub {
@@ -25,7 +24,7 @@
 }
 
 .edit-site-site-hub__title .components-button {
-	color: $gray-200;
+	color: var(--wpds-color-fg-interactive-neutral);
 	display: block;
 	flex-grow: 1;
 	font-size: 15px;
@@ -44,7 +43,7 @@
 	&:hover,
 	&:focus,
 	&:active {
-		color: $gray-200;
+		color: var(--wpds-color-fg-interactive-neutral);
 	}
 
 	&:focus {
@@ -55,7 +54,7 @@
 
 	&:focus-visible {
 		// Push the shadow away from the title.
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-900, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-bg-surface-neutral-weak), 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
@@ -82,12 +81,12 @@
 }
 
 .edit-site-site-hub_toggle-command-center {
-	color: $gray-200;
+	color: var(--wpds-color-fg-interactive-neutral);
 
 	&:hover,
 	&:active {
 		svg {
-			fill: $gray-100;
+			fill: var(--wpds-color-fg-interactive-neutral-active);
 		}
 	}
 }

package/src/experimental-admin-bar-in-editor.scss

@@ -56,7 +56,9 @@ body.has-admin-bar-in-editor {
 
 	&.is-fullscreen-mode {
 		.is-entity-save-view-open .interface-interface-skeleton__actions:focus,
-		.is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
+		.is-entity-save-view-open .interface-interface-skeleton__actions:focus-within,
+		.edit-site-layout__actions.is-entity-save-view-open:focus,
+		.edit-site-layout__actions.is-entity-save-view-open:focus-within {
 			top: var(--wp-admin--admin-bar--height, 0);
 		}
 

package/src/store/selectors.js

@@ -4,7 +4,6 @@
 import { store as coreDataStore } from '@wordpress/core-data';
 import { createRegistrySelector, createSelector } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
-import { Platform } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -100,12 +99,9 @@ export const getReusableBlocks = createRegistrySelector( ( select ) => () => {
 		version: '6.8',
 		alternative: `select( 'core/core' ).getEntityRecords( 'postType', 'wp_block' )`,
 	} );
-	const isWeb = Platform.OS === 'web';
-	return isWeb
-		? select( coreDataStore ).getEntityRecords( 'postType', 'wp_block', {
-				per_page: -1,
-		  } )
-		: [];
+	return select( coreDataStore ).getEntityRecords( 'postType', 'wp_block', {
+		per_page: -1,
+	} );
 } );
 
 /**

package/src/style.scss

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/default-custom-properties";
@@ -62,7 +61,7 @@ body.js.site-editor-php {
 }
 
 body.js.site-editor-php {
-	background: $gray-900;
+	background: var(--wpds-color-bg-surface-neutral-weak);
 }
 
 .edit-site {