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

package/src/components/sidebar-navigation-item/index.js

@@ -6,11 +6,8 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalItem as Item,
-	__experimentalHStack as HStack,
-	FlexBlock,
-} from '@wordpress/components';
+import { __experimentalItem as Item, FlexBlock } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { isRTL } from '@wordpress/i18n';
 import { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -22,7 +19,7 @@ import { useContext } from '@wordpress/element';
 import { unlock } from '../../lock-unlock';
 import { SidebarNavigationContext } from '../sidebar';
 
-const { useHistory, useLink } = unlock( routerPrivateApis );
+const { useHistory, useLink, useLocation } = unlock( routerPrivateApis );
 
 export default function SidebarNavigationItem( {
 	className,
@@ -32,11 +29,16 @@ export default function SidebarNavigationItem( {
 	uid,
 	to,
 	onClick,
+	activeOnRouteName,
 	children,
 	...props
 } ) {
 	const history = useHistory();
+	const linkProps = useLink( to );
+	const { name } = useLocation();
 	const { navigate } = useContext( SidebarNavigationContext );
+
+	const isActive = activeOnRouteName && name === activeOnRouteName;
 	// If there is no custom click handler, create one that navigates to `params`.
 	function handleClick( e ) {
 		if ( onClick ) {
@@ -48,7 +50,6 @@ export default function SidebarNavigationItem( {
 			navigate( 'forward', `[id="${ uid }"]` );
 		}
 	}
-	const linkProps = useLink( to );
 
 	return (
 		<Item
@@ -60,9 +61,10 @@ export default function SidebarNavigationItem( {
 			id={ uid }
 			onClick={ handleClick }
 			href={ to ? linkProps.href : undefined }
+			aria-current={ isActive ? true : undefined }
 			{ ...props }
 		>
-			<HStack justify="flex-start">
+			<Stack direction="row" align="center" justify="start" gap="sm">
 				{ icon && (
 					<Icon
 						style={ { fill: 'currentcolor' } }
@@ -79,7 +81,7 @@ export default function SidebarNavigationItem( {
 					/>
 				) }
 				{ ! withChevron && suffix }
-			</HStack>
+			</Stack>
 		</Item>
 	);
 }

package/src/components/sidebar-navigation-item/style.scss

@@ -1,8 +1,7 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-sidebar-navigation-item.components-item {
-	color: $gray-600;
+	color: var(--wpds-color-foreground-interactive-neutral-weak);
 	// 6px right padding to align with + button
 	padding: $grid-unit-10 6px $grid-unit-10 $grid-unit-20;
 	border: none;
@@ -11,16 +10,16 @@
 	&:hover,
 	&:focus,
 	&[aria-current="true"] {
-		color: $gray-200;
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 
 		.edit-site-sidebar-navigation-item__drilldown-indicator {
-			fill: $gray-200;
+			fill: var(--wpds-color-foreground-interactive-neutral-active);
 		}
 	}
 
 	&[aria-current="true"] {
-		background: $gray-800;
-		color: $white;
+		background: var(--wpds-color-background-interactive-neutral-weak-active);
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 		font-weight: $font-weight-medium;
 	}
 
@@ -30,7 +29,7 @@
 	}
 
 	.edit-site-sidebar-navigation-item__drilldown-indicator {
-		fill: $gray-600;
+		fill: var(--wpds-color-foreground-interactive-neutral-weak);
 	}
 
 	&.with-suffix {

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

@@ -101,7 +101,6 @@ export default function SidebarNavigationScreen( {
 					) }
 					<Heading
 						className="edit-site-sidebar-navigation-screen__title"
-						color={ '#e0e0e0' /* $gray-200 */ }
 						level={ 1 }
 						size={ 20 }
 					>

package/src/components/sidebar-navigation-screen/style.scss

@@ -23,7 +23,7 @@
 	padding: 0 $grid-unit-20;
 
 	.components-text {
-		color: $gray-400;
+		color: var(--wpds-color-foreground-content-neutral);
 	}
 
 	.components-heading {
@@ -34,7 +34,7 @@
 .edit-site-sidebar-navigation-screen__title-icon {
 	position: sticky;
 	top: 0;
-	background: $gray-900;
+	background: var(--wpds-color-background-surface-neutral-weak);
 	padding-top: $grid-unit-60;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
@@ -95,11 +95,11 @@
 .edit-site-sidebar-navigation-screen__footer {
 	position: sticky;
 	bottom: 0;
-	background-color: $gray-900;
+	background-color: var(--wpds-color-background-surface-neutral-weak);
 	gap: 0;
 	padding: $grid-unit-10 $grid-unit-20;
 	margin: $grid-unit-20 0 0;
-	border-top: 1px solid $gray-800;
+	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);
 
 	.edit-site-sidebar-navigation-screen-details-footer {
 		margin-left: -$grid-unit-20;
@@ -116,20 +116,20 @@
 .edit-site-sidebar-navigation-screen__input-control {
 	width: 100%;
 	.components-input-control__container {
-		background: $gray-800;
+		background: var(--wpds-color-background-interactive-neutral-weak);
 
 		.components-button {
-			color: $gray-200 !important;
+			color: var(--wpds-color-foreground-interactive-neutral) !important;
 		}
 	}
 	.components-input-control__input {
-		color: $gray-200 !important;
-		background: $gray-800 !important;
+		color: var(--wpds-color-foreground-interactive-neutral) !important;
+		background: var(--wpds-color-background-interactive-neutral-weak) !important;
 	}
 	.components-input-control__backdrop {
 		border: 4px !important;
 	}
 	.components-base-control__help {
-		color: $gray-600;
+		color: var(--wpds-color-foreground-content-neutral-weak);
 	}
 }

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -8,6 +8,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { store as editorStore } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { addQueryArgs } from '@wordpress/url';
+import { useGlobalStylesRevisions } from '@wordpress/global-styles-ui';
 
 /**
  * Internal dependencies
@@ -15,23 +16,11 @@ import { addQueryArgs } from '@wordpress/url';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import { useGlobalStylesRevisions } from '@wordpress/global-styles-ui';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-export function SidebarNavigationItemGlobalStyles( props ) {
-	const { name } = useLocation();
-	return (
-		<SidebarNavigationItem
-			{ ...props }
-			aria-current={ name === 'styles' }
-		/>
-	);
-}
-
 export default function SidebarNavigationScreenGlobalStyles() {
 	const history = useHistory();
 	const { path } = useLocation();
@@ -73,9 +62,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				description={ __(
 					'Customize the appearance of your website using the block editor.'
 				) }
-				content={
-					<MainSidebarNavigationContent activeItem="styles-navigation-item" />
-				}
+				content={ <MainSidebarNavigationContent /> }
 				footer={
 					shouldShowGlobalStylesFooter && (
 						<SidebarNavigationScreenDetailsFooter

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

@@ -2,28 +2,13 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { unlock } from '../../lock-unlock';
-import SidebarNavigationItem from '../sidebar-navigation-item';
 import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main';
 
-const { useLocation } = unlock( routerPrivateApis );
-
-export function SidebarNavigationItemIdentity( props ) {
-	const { name } = useLocation();
-	return (
-		<SidebarNavigationItem
-			{ ...props }
-			aria-current={ name === 'identity' }
-		/>
-	);
-}
-
 export default function SidebarNavigationScreenIdentity() {
 	return (
 		<SidebarNavigationScreen

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

@@ -19,36 +19,28 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
-import { SidebarNavigationItemIdentity } from '../sidebar-navigation-screen-identity';
 
 export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 	return (
 		<ItemGroup className="edit-site-sidebar-navigation-screen-main">
 			{ isBlockBasedTheme && (
 				<>
-					<SidebarNavigationItemGlobalStyles
-						to="/styles"
-						uid="global-styles-navigation-item"
-						icon={ styles }
-					>
-						{ __( 'Styles' ) }
-					</SidebarNavigationItemGlobalStyles>
 					<SidebarNavigationItem
-						uid="navigation-navigation-item"
-						to="/navigation"
-						withChevron
-						icon={ navigation }
-					>
-						{ __( 'Navigation' ) }
-					</SidebarNavigationItem>
-					<SidebarNavigationItemIdentity
 						to="/identity"
 						uid="identity-navigation-item"
 						icon={ siteLogo }
+						activeOnRouteName="identity"
 					>
 						{ _x( 'Identity', 'site identity' ) }
-					</SidebarNavigationItemIdentity>
+					</SidebarNavigationItem>
+					<SidebarNavigationItem
+						to="/styles"
+						uid="global-styles-navigation-item"
+						icon={ styles }
+						activeOnRouteName="styles"
+					>
+						{ __( 'Styles' ) }
+					</SidebarNavigationItem>
 					<SidebarNavigationItem
 						uid="page-navigation-item"
 						to="/page"
@@ -58,12 +50,12 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 						{ __( 'Pages' ) }
 					</SidebarNavigationItem>
 					<SidebarNavigationItem
-						uid="template-navigation-item"
-						to="/template"
+						uid="navigation-navigation-item"
+						to="/navigation"
 						withChevron
-						icon={ layout }
+						icon={ navigation }
 					>
-						{ __( 'Templates' ) }
+						{ __( 'Navigation' ) }
 					</SidebarNavigationItem>
 				</>
 			) }
@@ -85,6 +77,16 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 			>
 				{ __( 'Patterns' ) }
 			</SidebarNavigationItem>
+			{ isBlockBasedTheme && (
+				<SidebarNavigationItem
+					uid="template-navigation-item"
+					to="/template"
+					withChevron
+					icon={ layout }
+				>
+					{ __( 'Templates' ) }
+				</SidebarNavigationItem>
+			) }
 		</ItemGroup>
 	);
 }

package/src/components/sidebar-navigation-screen-navigation-menu/style.scss

@@ -1,12 +1,10 @@
-@use "@wordpress/base-styles/colors" as *;
-
 .sidebar-navigation__more-menu {
 	.components-button {
-		color: $gray-200;
+		color: var(--wpds-color-foreground-interactive-neutral);
 		&:hover,
 		&:focus,
 		&[aria-current] {
-			color: $gray-100;
+			color: var(--wpds-color-foreground-interactive-neutral);
 		}
 	}
 }

package/src/components/sidebar-navigation-screen-navigation-menus/style.scss

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-sidebar-navigation-screen__description {
@@ -24,19 +23,30 @@
 	}
 
 	.block-editor-list-view-block-select-button {
-		color: $gray-600;
+		color: var(--wpds-color-foreground-interactive-neutral-weak);
 		&:hover,
 		&:focus,
 		&[aria-current] {
-			color: $white;
+			color: var(--wpds-color-foreground-interactive-neutral-active);
 		}
 	}
 
 	.block-editor-list-view-block__menu {
-		color: $gray-600;
+		color: var(--wpds-color-foreground-interactive-neutral-weak);
 		&:hover,
 		&:focus {
-			color: $white;
+			color: var(--wpds-color-foreground-interactive-neutral-active);
+		}
+	}
+
+	.block-editor-inserter__toggle {
+		background: var(--wpds-color-background-interactive-brand-strong);
+		color: var(--wpds-color-foreground-interactive-brand-strong);
+
+		&:hover,
+		&:focus {
+			background: var(--wpds-color-background-interactive-brand-strong-active);
+			color: var(--wpds-color-foreground-interactive-brand-strong-active);
 		}
 	}
 }

package/src/components/sidebar-navigation-screen-patterns/style.scss

@@ -1,4 +1,3 @@
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-sidebar-navigation-screen-patterns__group {
@@ -17,7 +16,7 @@
 	margin-top: $grid-unit-20;
 
 	p {
-		color: $gray-600;
+		color: var(--wpds-color-foreground-content-neutral-weak);
 	}
 
 	h2 {
@@ -28,6 +27,6 @@
 }
 
 .edit-site-sidebar-navigation-screen-patterns__divider {
-	border-top: 1px solid $gray-800;
+	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);
 	margin: $grid-unit-20 0;
 }

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 />,
 	},
 };