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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.48.1",
+	"version": "6.48.2-next.v.202606191442.0+17fe7db8a",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -47,52 +47,52 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.48.1",
-		"@wordpress/admin-ui": "^2.3.1",
-		"@wordpress/api-fetch": "^7.48.1",
-		"@wordpress/base-styles": "^10.0.1",
-		"@wordpress/blob": "^4.48.1",
-		"@wordpress/block-editor": "^15.21.1",
-		"@wordpress/block-library": "^9.48.1",
-		"@wordpress/blocks": "^15.21.1",
-		"@wordpress/commands": "^1.48.1",
-		"@wordpress/components": "^35.0.1",
-		"@wordpress/compose": "^8.1.1",
-		"@wordpress/core-data": "^7.48.1",
-		"@wordpress/data": "^10.48.1",
-		"@wordpress/dataviews": "^16.0.1",
-		"@wordpress/date": "^5.48.1",
-		"@wordpress/deprecated": "^4.48.1",
-		"@wordpress/dom": "^4.48.1",
-		"@wordpress/editor": "^14.48.1",
-		"@wordpress/element": "^8.0.1",
-		"@wordpress/escape-html": "^3.48.1",
-		"@wordpress/fields": "^0.40.1",
-		"@wordpress/global-styles-engine": "^1.15.1",
-		"@wordpress/global-styles-ui": "^1.15.1",
-		"@wordpress/hooks": "^4.48.1",
-		"@wordpress/html-entities": "^4.48.1",
-		"@wordpress/i18n": "^6.21.1",
-		"@wordpress/icons": "^14.0.1",
-		"@wordpress/keyboard-shortcuts": "^5.48.1",
-		"@wordpress/keycodes": "^4.48.1",
-		"@wordpress/media-utils": "^5.48.1",
-		"@wordpress/notices": "^5.48.1",
-		"@wordpress/patterns": "^2.48.1",
-		"@wordpress/plugins": "^7.48.1",
-		"@wordpress/preferences": "^4.48.1",
-		"@wordpress/primitives": "^4.48.1",
-		"@wordpress/private-apis": "^1.48.1",
-		"@wordpress/reusable-blocks": "^5.48.1",
-		"@wordpress/router": "^1.48.1",
-		"@wordpress/style-engine": "^2.48.1",
-		"@wordpress/theme": "^0.15.1",
-		"@wordpress/ui": "^0.15.1",
-		"@wordpress/url": "^4.48.1",
-		"@wordpress/viewport": "^6.48.1",
-		"@wordpress/views": "^1.15.1",
-		"@wordpress/widgets": "^4.48.1",
-		"@wordpress/wordcount": "^4.48.1",
+		"@wordpress/a11y": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/admin-ui": "^2.3.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/api-fetch": "^7.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/base-styles": "^10.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/blob": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/block-editor": "^15.22.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/block-library": "^10.0.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/blocks": "^15.21.3-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/commands": "^1.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/components": "^35.1.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/compose": "^8.1.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/core-data": "^7.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/data": "^10.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/dataviews": "^17.0.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/date": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/deprecated": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/dom": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/editor": "^14.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/element": "^8.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/escape-html": "^3.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/fields": "^0.40.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/global-styles-engine": "^1.15.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/global-styles-ui": "^1.15.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/hooks": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/html-entities": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/i18n": "^6.21.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/icons": "^14.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/keyboard-shortcuts": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/keycodes": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/media-utils": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/notices": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/patterns": "^2.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/plugins": "^7.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/preferences": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/primitives": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/private-apis": "^1.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/reusable-blocks": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/router": "^1.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/style-engine": "^2.49.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/theme": "^0.16.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/ui": "^0.16.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/url": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/viewport": "^6.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/views": "^1.15.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/widgets": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/wordcount": "^4.48.2-next.v.202606191442.0+17fe7db8a",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
@@ -107,5 +107,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
+	"gitHead": "1b6a19222df5a88f161880b5789efb3171d8f425"
 }

package/src/components/layout/index.js

@@ -32,7 +32,6 @@ import { PluginArea } from '@wordpress/plugins';
 import { SnackbarNotices, store as noticesStore } from '@wordpress/notices';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**
@@ -184,10 +183,18 @@ function Layout() {
 												}
 											/>
 										) }
-										<SidebarContent routeKey={ routeKey }>
-											{ areas.mobileContent ? (
-												<ThemeProvider
-													color={ CONTENT_COLOR }
+										{ areas.mobileContent ? (
+											/*
+											 * ThemeProvider wraps SidebarContent (rather than
+											 * just the content) so the scroll wrapper it renders
+											 * inherits the content background tokens. See
+											 * `.edit-site-sidebar__screen-wrapper` in style.scss.
+											 */
+											<ThemeProvider
+												color={ CONTENT_COLOR }
+											>
+												<SidebarContent
+													routeKey={ routeKey }
 												>
 													<div className="edit-site-layout__mobile-content">
 														<ErrorBoundary>
@@ -196,13 +203,17 @@ function Layout() {
 															}
 														</ErrorBoundary>
 													</div>
-												</ThemeProvider>
-											) : (
+												</SidebarContent>
+											</ThemeProvider>
+										) : (
+											<SidebarContent
+												routeKey={ routeKey }
+											>
 												<ErrorBoundary>
 													{ areas.mobileSidebar }
 												</ErrorBoundary>
-											) }
-										</SidebarContent>
+											</SidebarContent>
+										) }
 										<SaveHub />
 										<SavePanel />
 									</>

package/src/components/layout/style.scss

@@ -4,14 +4,14 @@
 
 .edit-site-layout {
 	height: 100%;
-	background: var(--wpds-color-bg-surface-neutral-weak);
-	color: var(--wpds-color-fg-content-neutral);
+	background: var(--wpds-color-background-surface-neutral-weak);
+	color: var(--wpds-color-foreground-content-neutral);
 	display: flex;
 	flex-direction: column;
 
 	// Show a dark background in "frame" mode to avoid edge artifacts.
 	&:not(.is-full-canvas) .editor-visual-editor {
-		background: var(--wpds-color-bg-surface-neutral-weak);
+		background: var(--wpds-color-background-surface-neutral-weak);
 	}
 }
 
@@ -84,7 +84,14 @@
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
-	background: var(--wpds-color-bg-surface-neutral);
+}
+
+// On mobile, the content surface lives on the scroll wrapper
+// (not the inner content element) so it also covers the wrapper's
+// reserved scrollbar gutter, preventing the theme background color from
+// bleeding through.
+.edit-site-sidebar__screen-wrapper:has(.edit-site-layout__mobile-content) {
+	background: var(--wpds-color-background-surface-neutral);
 }
 
 .edit-site-layout__canvas-container {
@@ -110,7 +117,7 @@
 	}
 
 	.edit-site-resizable-frame__inner {
-		color: var(--wpds-color-fg-content-neutral);
+		color: var(--wpds-color-foreground-content-neutral);
 	}
 
 	@include break-medium {
@@ -128,7 +135,7 @@
 			}
 
 			.edit-site-layout:not(.is-full-canvas) & {
-				border-radius: $radius-large;
+				border-radius: var(--wpds-border-radius-xl);
 			}
 
 			&:hover {
@@ -179,7 +186,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	view-transition-name: toggle;
 	/* stylelint-enable  */
 	position: relative;
-	color: var(--wpds-color-fg-interactive-neutral);
+	color: var(--wpds-color-foreground-interactive-neutral);
 	height: $header-height;
 	width: $header-height;
 	overflow: hidden;
@@ -187,12 +194,12 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: var(--wpds-color-bg-surface-neutral-weak);
+	background: var(--wpds-color-background-surface-neutral-weak);
 	border-radius: 0;
 
 	&:hover,
 	&:active {
-		color: var(--wpds-color-fg-interactive-neutral-active);
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 	}
 
 	&:focus-visible,
@@ -235,8 +242,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	left: auto;
 	right: 0;
 	width: $sidebar-width;
-	color: var(--wpds-color-fg-content-neutral);
-	background: var(--wpds-color-bg-surface-neutral-strong);
+	color: var(--wpds-color-foreground-content-neutral);
+	background: var(--wpds-color-background-surface-neutral-strong);
 
 	&:focus,
 	&:focus-within {
@@ -264,7 +271,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	overflow: hidden;
 	box-shadow: $elevation-x-small;
 	@include break-medium() {
-		border-radius: 8px;
+		border-radius: var(--wpds-border-radius-xl);
 		margin: $canvas-padding $canvas-padding $canvas-padding 0;
 	}
 }

package/src/components/page-patterns/style.scss

@@ -92,7 +92,7 @@
 		box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
 		box-sizing: border-box;
 		z-index: 1;
-		background-color: var(--wpds-color-bg-surface-neutral-strong);
+		background-color: var(--wpds-color-background-surface-neutral-strong);
 		width: calc(100% + 2px); // Account for the border width of the token field.
 		left: -1px;
 		min-width: initial;

package/src/components/page-templates/index-legacy.js

@@ -19,9 +19,9 @@ import AddNewTemplate from '../add-new-template-legacy';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
-import { authorField, descriptionField, previewField } from './fields';
+import { authorField, previewField } from './fields';
 
-const { usePostActions, templateTitleField } = unlock( editorPrivateApis );
+const { usePostActions, usePostFields } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
 
@@ -97,18 +97,26 @@ export default function PageTemplates() {
 		} ) );
 	}, [ records ] );
 
-	const fields = useMemo(
-		() => [
+	const postFields = usePostFields( { postType: TEMPLATE_POST_TYPE } );
+	const fields = useMemo( () => {
+		const __fields = [
 			previewField,
-			templateTitleField,
-			descriptionField,
 			{
 				...authorField,
 				elements: authors,
 			},
-		],
-		[ authors ]
-	);
+		];
+		// TODO: Only `description` and `title` are sourced from the shared
+		// `@wordpress/fields` registry so far. The remaining local fields
+		// (e.g. `previewField`, `authorField`) should also be evaluated for
+		// migration to the shared registry.
+		return [
+			...__fields,
+			...( postFields || [] ).filter( ( field ) =>
+				[ 'description', 'title' ].includes( field.id )
+			),
+		];
+	}, [ authors, postFields ] );
 
 	const { data, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( records, view, fields );

package/src/components/page-templates/style.scss

@@ -35,9 +35,4 @@
 .edit-site-list__rename-modal {
 	// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher.
 	z-index: z-index(".edit-site-list__rename-modal");
-	.components-base-control {
-		@include break-medium() {
-			width: $grid-unit * 40;
-		}
-	}
 }

package/src/components/resizable-frame/index.js

@@ -17,7 +17,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { addQueryArgs } from '@wordpress/url';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip } from '@wordpress/ui';
 
 /**

package/src/components/save-hub/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
 
@@ -28,15 +28,15 @@ export default function SaveHub() {
 		};
 	}, [] );
 	return (
-		<HStack className="edit-site-save-hub" alignment="right" spacing={ 4 }>
+		<Stack className="edit-site-save-hub" gap="lg">
 			<SaveButton
 				className="edit-site-save-hub__button"
-				variant={ isDisabled ? null : 'primary' }
+				variant={ isDisabled && ! isSaving ? null : 'primary' }
 				showTooltip={ false }
 				icon={ isDisabled && ! isSaving ? check : null }
 				showReviewMessage
 				__next40pxDefaultSize
 			/>
-		</HStack>
+		</Stack>
 	);
 }

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

@@ -1,11 +1,11 @@
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-save-hub {
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	border-top: 1px solid var(--wpds-color-stroke-surface-neutral);
 	flex-shrink: 0;
 	margin: 0;
-	padding: $grid-unit-20 $canvas-padding;
+	padding: $grid-unit-20;
 }
 
 .edit-site-save-hub__button {
@@ -25,7 +25,7 @@
 	&:not(.is-primary) {
 		&.is-busy,
 		&.is-busy[aria-disabled="true"]:hover {
-			color: var(--wpds-color-fg-interactive-neutral);
+			color: var(--wpds-color-foreground-interactive-neutral);
 		}
 	}
 }

package/src/components/sidebar-button/style.scss

@@ -1,5 +1,5 @@
 .edit-site-sidebar-button {
-	color: var(--wpds-color-fg-interactive-neutral);
+	color: var(--wpds-color-foreground-interactive-neutral);
 	flex-shrink: 0;
 
 	// Focus (resets default button focus and use focus-visible).
@@ -19,6 +19,6 @@
 	&:focus,
 	&:not(:disabled,[aria-disabled="true"]):active,
 	&[aria-expanded="true"] {
-		color: var(--wpds-color-fg-interactive-neutral-active);
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 	}
 }

package/src/components/sidebar-global-styles/style.scss

@@ -24,7 +24,7 @@
 		}
 	}
 	.edit-site-sidebar-button {
-		color: var(--wpds-color-fg-interactive-neutral);
+		color: var(--wpds-color-foreground-interactive-neutral);
 	}
 }
 

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,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