@wordpress/edit-site 6.48.1 → 6.49.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,9 +19,20 @@ 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( {
+	isHidden = false,
+	...props
+} ) {
+	if ( isHidden ) {
+		return null;
+	}
+
+	return <SidebarNavigationItemContent { ...props } />;
+}
+
+function SidebarNavigationItemContent( {
 	className,
 	icon,
 	withChevron = false,
@@ -32,11 +40,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 +61,6 @@ export default function SidebarNavigationItem( {
 			navigate( 'forward', `[id="${ uid }"]` );
 		}
 	}
-	const linkProps = useLink( to );
 
 	return (
 		<Item
@@ -60,9 +72,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 +92,7 @@ export default function SidebarNavigationItem( {
 					/>
 				) }
 				{ ! withChevron && suffix }
-			</HStack>
+			</Stack>
 		</Item>
 	);
 }

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

@@ -1,7 +1,7 @@
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-sidebar-navigation-item.components-item {
-	color: var(--wpds-color-fg-interactive-neutral-weak);
+	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;
@@ -10,16 +10,16 @@
 	&:hover,
 	&:focus,
 	&[aria-current="true"] {
-		color: var(--wpds-color-fg-interactive-neutral-active);
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 
 		.edit-site-sidebar-navigation-item__drilldown-indicator {
-			fill: var(--wpds-color-fg-interactive-neutral-active);
+			fill: var(--wpds-color-foreground-interactive-neutral-active);
 		}
 	}
 
 	&[aria-current="true"] {
-		background: var(--wpds-color-bg-interactive-neutral-weak-active);
-		color: var(--wpds-color-fg-interactive-neutral-active);
+		background: var(--wpds-color-background-interactive-neutral-weak-active);
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 		font-weight: $font-weight-medium;
 	}
 
@@ -29,7 +29,7 @@
 	}
 
 	.edit-site-sidebar-navigation-item__drilldown-indicator {
-		fill: var(--wpds-color-fg-interactive-neutral-weak);
+		fill: var(--wpds-color-foreground-interactive-neutral-weak);
 	}
 
 	&.with-suffix {

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

@@ -23,7 +23,7 @@
 	padding: 0 $grid-unit-20;
 
 	.components-text {
-		color: var(--wpds-color-fg-content-neutral);
+		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: var(--wpds-color-bg-surface-neutral-weak);
+	background: var(--wpds-color-background-surface-neutral-weak);
 	padding-top: $grid-unit-60;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
@@ -95,7 +95,7 @@
 .edit-site-sidebar-navigation-screen__footer {
 	position: sticky;
 	bottom: 0;
-	background-color: var(--wpds-color-bg-surface-neutral-weak);
+	background-color: var(--wpds-color-background-surface-neutral-weak);
 	gap: 0;
 	padding: $grid-unit-10 $grid-unit-20;
 	margin: $grid-unit-20 0 0;
@@ -116,20 +116,20 @@
 .edit-site-sidebar-navigation-screen__input-control {
 	width: 100%;
 	.components-input-control__container {
-		background: var(--wpds-color-bg-interactive-neutral-weak);
+		background: var(--wpds-color-background-interactive-neutral-weak);
 
 		.components-button {
-			color: var(--wpds-color-fg-interactive-neutral) !important;
+			color: var(--wpds-color-foreground-interactive-neutral) !important;
 		}
 	}
 	.components-input-control__input {
-		color: var(--wpds-color-fg-interactive-neutral) !important;
-		background: var(--wpds-color-bg-interactive-neutral-weak) !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: var(--wpds-color-fg-content-neutral-weak);
+		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,64 +19,50 @@ 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 }
-					>
-						{ _x( 'Identity', 'site identity' ) }
-					</SidebarNavigationItemIdentity>
-					<SidebarNavigationItem
-						uid="page-navigation-item"
-						to="/page"
-						withChevron
-						icon={ page }
-					>
-						{ __( 'Pages' ) }
-					</SidebarNavigationItem>
-					<SidebarNavigationItem
-						uid="template-navigation-item"
-						to="/template"
-						withChevron
-						icon={ layout }
-					>
-						{ __( 'Templates' ) }
-					</SidebarNavigationItem>
-				</>
-			) }
-			{ ! isBlockBasedTheme && (
-				<SidebarNavigationItem
-					uid="stylebook-navigation-item"
-					to="/stylebook"
-					withChevron
-					icon={ styles }
-				>
-					{ __( 'Styles' ) }
-				</SidebarNavigationItem>
-			) }
+			<SidebarNavigationItem
+				to="/identity"
+				uid="identity-navigation-item"
+				icon={ siteLogo }
+				activeOnRouteName="identity"
+				isHidden={ ! isBlockBasedTheme }
+			>
+				{ _x( 'Identity', 'site identity' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				to={ isBlockBasedTheme ? '/styles' : '/stylebook' }
+				uid={
+					isBlockBasedTheme
+						? 'global-styles-navigation-item'
+						: 'stylebook-navigation-item'
+				}
+				icon={ styles }
+				activeOnRouteName={ isBlockBasedTheme ? 'styles' : undefined }
+				withChevron={ ! isBlockBasedTheme }
+			>
+				{ __( 'Styles' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				uid="page-navigation-item"
+				to="/page"
+				withChevron
+				icon={ page }
+				isHidden={ ! isBlockBasedTheme }
+			>
+				{ __( 'Pages' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				uid="navigation-navigation-item"
+				to="/navigation"
+				withChevron
+				icon={ navigation }
+				isHidden={ ! isBlockBasedTheme }
+			>
+				{ __( 'Navigation' ) }
+			</SidebarNavigationItem>
 			<SidebarNavigationItem
 				uid="patterns-navigation-item"
 				to="/pattern"
@@ -85,6 +71,15 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 			>
 				{ __( 'Patterns' ) }
 			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				uid="template-navigation-item"
+				to="/template"
+				withChevron
+				icon={ layout }
+				isHidden={ ! isBlockBasedTheme }
+			>
+				{ __( 'Templates' ) }
+			</SidebarNavigationItem>
 		</ItemGroup>
 	);
 }

package/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js

@@ -31,7 +31,6 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 			<form className="sidebar-navigation__rename-modal-form">
 				<VStack spacing="3">
 					<TextControl
-						__next40pxDefaultSize
 						value={ editedMenuTitle }
 						placeholder={ __( 'Navigation title' ) }
 						onChange={ setEditedMenuTitle }

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

@@ -1,10 +1,10 @@
 .sidebar-navigation__more-menu {
 	.components-button {
-		color: var(--wpds-color-fg-interactive-neutral);
+		color: var(--wpds-color-foreground-interactive-neutral);
 		&:hover,
 		&:focus,
 		&[aria-current] {
-			color: var(--wpds-color-fg-interactive-neutral);
+			color: var(--wpds-color-foreground-interactive-neutral);
 		}
 	}
 }

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

@@ -23,30 +23,30 @@
 	}
 
 	.block-editor-list-view-block-select-button {
-		color: var(--wpds-color-fg-interactive-neutral-weak);
+		color: var(--wpds-color-foreground-interactive-neutral-weak);
 		&:hover,
 		&:focus,
 		&[aria-current] {
-			color: var(--wpds-color-fg-interactive-neutral-active);
+			color: var(--wpds-color-foreground-interactive-neutral-active);
 		}
 	}
 
 	.block-editor-list-view-block__menu {
-		color: var(--wpds-color-fg-interactive-neutral-weak);
+		color: var(--wpds-color-foreground-interactive-neutral-weak);
 		&:hover,
 		&:focus {
-			color: var(--wpds-color-fg-interactive-neutral-active);
+			color: var(--wpds-color-foreground-interactive-neutral-active);
 		}
 	}
 
 	.block-editor-inserter__toggle {
-		background: var(--wpds-color-bg-interactive-brand-strong);
-		color: var(--wpds-color-fg-interactive-brand-strong);
+		background: var(--wpds-color-background-interactive-brand-strong);
+		color: var(--wpds-color-foreground-interactive-brand-strong);
 
 		&:hover,
 		&:focus {
-			background: var(--wpds-color-bg-interactive-brand-strong-active);
-			color: var(--wpds-color-fg-interactive-brand-strong-active);
+			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/index.js

@@ -27,6 +27,8 @@ import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
 import { unlock } from '../../lock-unlock';
 
+const VIEW_CONFIG_FIELDS = [ 'view_list' ];
+
 const { useLocation } = unlock( routerPrivateApis );
 
 function CategoriesGroup( {
@@ -89,10 +91,12 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 	const { view_list: templatePartViews } = useViewConfig( {
 		kind: 'postType',
 		name: TEMPLATE_PART_POST_TYPE,
+		fields: VIEW_CONFIG_FIELDS,
 	} );
 	const { view_list: patternViews } = useViewConfig( {
 		kind: 'postType',
 		name: PATTERN_TYPES.user,
+		fields: VIEW_CONFIG_FIELDS,
 	} );
 
 	const { templatePartAreas, isLoading, hasTemplateParts } =

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

@@ -16,7 +16,7 @@
 	margin-top: $grid-unit-20;
 
 	p {
-		color: var(--wpds-color-fg-content-neutral-weak);
+		color: var(--wpds-color-foreground-content-neutral-weak);
 	}
 
 	h2 {

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

@@ -24,7 +24,7 @@
 }
 
 .edit-site-site-hub__title .components-button {
-	color: var(--wpds-color-fg-interactive-neutral);
+	color: var(--wpds-color-foreground-interactive-neutral);
 	display: block;
 	flex-grow: 1;
 	font-size: 15px;
@@ -43,7 +43,7 @@
 	&:hover,
 	&:focus,
 	&:active {
-		color: var(--wpds-color-fg-interactive-neutral);
+		color: var(--wpds-color-foreground-interactive-neutral);
 	}
 
 	&:focus {
@@ -54,7 +54,7 @@
 
 	&:focus-visible {
 		// Push the shadow away from the title.
-		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);
+		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;
@@ -81,12 +81,12 @@
 }
 
 .edit-site-site-hub_toggle-command-center {
-	color: var(--wpds-color-fg-interactive-neutral);
+	color: var(--wpds-color-foreground-interactive-neutral);
 
 	&:hover,
 	&:active {
 		svg {
-			fill: var(--wpds-color-fg-interactive-neutral-active);
+			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,

package/src/style.scss

@@ -31,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) {
@@ -61,7 +61,7 @@ body.js.site-editor-php {
 }
 
 body.js.site-editor-php {
-	background: var(--wpds-color-bg-surface-neutral-weak);
+	background: var(--wpds-color-background-surface-neutral-weak);
 }
 
 .edit-site {