@wordpress/edit-site 6.48.0 → 6.48.2-next.v.202606191442.0

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-foreground-interactive-neutral);
 	display: block;
 	flex-grow: 1;
 	font-size: 15px;
@@ -44,7 +43,7 @@
 	&:hover,
 	&:focus,
 	&:active {
-		color: $gray-200;
+		color: var(--wpds-color-foreground-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-background-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-foreground-interactive-neutral);
 
 	&:hover,
 	&:active {
 		svg {
-			fill: $gray-100;
+			fill: var(--wpds-color-foreground-interactive-neutral-active);
 		}
 	}
 }

package/src/components/welcome-guide/page.js

@@ -58,7 +58,7 @@ export default function WelcomeGuidePage() {
 							<p className="edit-site-welcome-guide__text">
 								{ __(
 									// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
-									'It’s now possible to edit page content in the site editor. To customise other parts of the page like the header and footer switch to editing the template using the settings sidebar.'
+									'It’s now possible to edit page content in the site editor. To customize other parts of the page like the header and footer switch to editing the template using the settings sidebar.'
 								) }
 							</p>
 						</>

package/src/{experimental-admin-bar-in-editor.scss → experimental-omnibar.scss}

@@ -1,5 +1,7 @@
 // Styles for the experimental admin bar in editor.
 
+@use "@wordpress/base-styles/variables" as *;
+
 body.has-admin-bar-in-editor {
 	margin-top: 0;
 	height: 100%;
@@ -22,7 +24,7 @@ body.has-admin-bar-in-editor {
 	}
 
 	.edit-site-sidebar-navigation-screen__title-icon {
-		padding-top: 16px;
+		padding-top: $grid-unit-40;
 	}
 
 	.edit-site-layout__content,
@@ -56,7 +58,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";
@@ -32,7 +31,7 @@
 @use "./components/resizable-frame/style.scss" as *;
 @use "./components/pagination/style.scss" as *;
 @use "./components/sidebar-global-styles/style.scss" as *;
-@use "./experimental-admin-bar-in-editor.scss" as *;
+@use "./experimental-omnibar.scss" as *;
 
 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 ::view-transition-image-pair(root) {
@@ -62,7 +61,7 @@ body.js.site-editor-php {
 }
 
 body.js.site-editor-php {
-	background: $gray-900;
+	background: var(--wpds-color-background-surface-neutral-weak);
 }
 
 .edit-site {