@wordpress/edit-site 6.48.1 → 6.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.48.1",
+	"version": "6.49.0",
 	"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.49.0",
+		"@wordpress/admin-ui": "^2.4.0",
+		"@wordpress/api-fetch": "^7.49.0",
+		"@wordpress/base-styles": "^10.1.0",
+		"@wordpress/blob": "^4.49.0",
+		"@wordpress/block-editor": "^15.22.0",
+		"@wordpress/block-library": "^10.0.0",
+		"@wordpress/blocks": "^15.22.0",
+		"@wordpress/commands": "^1.49.0",
+		"@wordpress/components": "^36.0.0",
+		"@wordpress/compose": "^8.2.0",
+		"@wordpress/core-data": "^7.49.0",
+		"@wordpress/data": "^10.49.0",
+		"@wordpress/dataviews": "^17.0.0",
+		"@wordpress/date": "^5.49.0",
+		"@wordpress/deprecated": "^4.49.0",
+		"@wordpress/dom": "^4.49.0",
+		"@wordpress/editor": "^14.49.0",
+		"@wordpress/element": "^8.1.0",
+		"@wordpress/escape-html": "^3.49.0",
+		"@wordpress/fields": "^0.41.0",
+		"@wordpress/global-styles-engine": "^1.16.0",
+		"@wordpress/global-styles-ui": "^1.16.0",
+		"@wordpress/hooks": "^4.49.0",
+		"@wordpress/html-entities": "^4.49.0",
+		"@wordpress/i18n": "^6.22.0",
+		"@wordpress/icons": "^15.0.0",
+		"@wordpress/keyboard-shortcuts": "^5.49.0",
+		"@wordpress/keycodes": "^4.49.0",
+		"@wordpress/media-utils": "^5.49.0",
+		"@wordpress/notices": "^5.49.0",
+		"@wordpress/patterns": "^2.49.0",
+		"@wordpress/plugins": "^7.49.0",
+		"@wordpress/preferences": "^4.49.0",
+		"@wordpress/primitives": "^4.49.0",
+		"@wordpress/private-apis": "^1.49.0",
+		"@wordpress/reusable-blocks": "^5.49.0",
+		"@wordpress/router": "^1.49.0",
+		"@wordpress/style-engine": "^2.49.0",
+		"@wordpress/theme": "^0.16.0",
+		"@wordpress/ui": "^0.16.0",
+		"@wordpress/url": "^4.49.0",
+		"@wordpress/viewport": "^6.49.0",
+		"@wordpress/views": "^1.16.0",
+		"@wordpress/widgets": "^4.49.0",
+		"@wordpress/wordcount": "^4.49.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
@@ -107,5 +107,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
+	"gitHead": "0e7112a4f4fde4ea15bd9060489b8f6fe11eb6ca"
 }

package/src/components/add-new-post/index.js

@@ -98,7 +98,6 @@ export default function AddNewPostModal( { postType, onSave, onClose } ) {
 			<form onSubmit={ createPost }>
 				<VStack spacing={ 4 }>
 					<TextControl
-						__next40pxDefaultSize
 						label={ __( 'Title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }

package/src/components/add-new-template/add-custom-generic-template-modal-content.js

@@ -52,7 +52,6 @@ function AddCustomGenericTemplateModalContent( { createTemplate, onBack } ) {
 		<form onSubmit={ onCreateTemplate }>
 			<VStack spacing={ 6 }>
 				<TextControl
-					__next40pxDefaultSize
 					label={ __( 'Name' ) }
 					value={ title }
 					onChange={ setTitle }

package/src/components/add-new-template-legacy/add-custom-generic-template-modal-content.js

@@ -52,7 +52,6 @@ function AddCustomGenericTemplateModalContent( { createTemplate, onBack } ) {
 		<form onSubmit={ onCreateTemplate }>
 			<VStack spacing={ 6 }>
 				<TextControl
-					__next40pxDefaultSize
 					label={ __( 'Name' ) }
 					value={ title }
 					onChange={ setTitle }

package/src/components/layout/index.js

@@ -27,12 +27,11 @@ import {
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as themePrivateApis } from '@wordpress/theme';
+import { ThemeProvider } from '@wordpress/theme';
 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';
 
 /**
@@ -50,7 +49,6 @@ import SavePanel from '../save-panel';
 
 const { useLocation } = unlock( routerPrivateApis );
 const { useStyle, UploadProgressSnackbar } = unlock( editorPrivateApis );
-const { ThemeProvider } = unlock( themePrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 const CONTENT_COLOR = { background: '#ffffff' };
@@ -184,10 +182,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 +202,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/fields.js

@@ -1,16 +1,9 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import { __experimentalHStack as HStack } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import { useState, useMemo, useId } from '@wordpress/element';
+import { useMemo, useId } from '@wordpress/element';
 import { BlockPreview } from '@wordpress/block-editor';
-import { Icon } from '@wordpress/icons';
 import { parse } from '@wordpress/blocks';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
@@ -22,7 +15,6 @@ import {
 	PATTERN_SYNC_TYPES,
 	OPERATOR_IS,
 } from '../../utils/constants';
-import { useAddedBy } from '../page-templates/hooks';
 import { unlock } from '../../lock-unlock';
 
 const { useStyle } = unlock( editorPrivateApis );
@@ -117,42 +109,3 @@ export const patternStatusField = {
 	},
 	enableSorting: false,
 };
-
-function AuthorField( { item } ) {
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
-
-	return (
-		<HStack alignment="left" spacing={ 0 }>
-			{ imageUrl && (
-				<div
-					className={ clsx( 'fields-controls__author-avatar', {
-						'is-loaded': isImageLoaded,
-					} ) }
-				>
-					<img
-						onLoad={ () => setIsImageLoaded( true ) }
-						alt=""
-						src={ imageUrl }
-					/>
-				</div>
-			) }
-			{ ! imageUrl && (
-				<div className="fields-controls__author-icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span className="fields-controls__author-name">{ text }</span>
-		</HStack>
-	);
-}
-
-export const templatePartAuthorField = {
-	label: __( 'Author' ),
-	id: 'author',
-	getValue: ( { item } ) => item.author_text,
-	render: AuthorField,
-	filterBy: {
-		isPrimary: true,
-	},
-};

package/src/components/page-patterns/index.js

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
-import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useView, useViewConfig } from '@wordpress/views';
@@ -26,18 +26,16 @@ import { unlock } from '../../lock-unlock';
 import usePatterns, { useAugmentPatternsWithPermissions } from './use-patterns';
 import PatternsActions from './actions';
 import { useEditPostAction } from '../dataviews-actions';
-import {
-	patternStatusField,
-	previewField,
-	templatePartAuthorField,
-} from './fields';
+import { patternStatusField, previewField } from './fields';
 import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
-const { usePostActions, patternTitleField } = unlock( editorPrivateApis );
+const { usePostActions, usePostFields, patternTitleField } =
+	unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
+const VIEW_CONFIG_FIELDS = [ 'default_view', 'default_layouts' ];
 
 function usePagePatternsHeader( type, categoryId ) {
 	const { patternCategories } = usePatternCategories();
@@ -76,6 +74,7 @@ export default function DataviewsPatterns() {
 		useViewConfig( {
 			kind: 'postType',
 			name: postType,
+			fields: VIEW_CONFIG_FIELDS,
 		} );
 	const { view, updateView, isModified, resetToDefault } = useView( {
 		kind: 'postType',
@@ -105,38 +104,27 @@ export default function DataviewsPatterns() {
 		syncStatus: viewSyncStatus,
 	} );
 
-	const { records } = useEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, {
-		per_page: -1,
+	const templatePartFields = usePostFields( {
+		postType: TEMPLATE_PART_POST_TYPE,
 	} );
-
-	const authors = useMemo( () => {
-		if ( ! records ) {
-			return EMPTY_ARRAY;
-		}
-		const authorsSet = new Set();
-		records.forEach( ( template ) => {
-			authorsSet.add( template.author_text );
-		} );
-		return Array.from( authorsSet ).map( ( author ) => ( {
-			value: author,
-			label: author,
-		} ) );
-	}, [ records ] );
+	const templatePartAuthorField = templatePartFields.find(
+		( field ) => field.id === 'author'
+	);
 
 	const fields = useMemo( () => {
 		const _fields = [ previewField, patternTitleField ];
 
 		if ( postType === PATTERN_TYPES.user ) {
 			_fields.push( patternStatusField );
-		} else if ( postType === TEMPLATE_PART_POST_TYPE ) {
-			_fields.push( {
-				...templatePartAuthorField,
-				elements: authors,
-			} );
+		} else if (
+			postType === TEMPLATE_PART_POST_TYPE &&
+			templatePartAuthorField
+		) {
+			_fields.push( templatePartAuthorField );
 		}
 
 		return _fields;
-	}, [ postType, authors ] );
+	}, [ postType, templatePartAuthorField ] );
 
 	const { data, paginationInfo } = useMemo( () => {
 		// Search is managed server-side as well as filters for patterns.

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,12 +19,14 @@ 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 { previewField } from './fields';
 
-const { usePostActions, templateTitleField } = unlock( editorPrivateApis );
+const { usePostActions, usePostFields } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
 
+const VIEW_CONFIG_FIELDS = [ 'default_view', 'default_layouts', 'view_list' ];
+
 export default function PageTemplates() {
 	const { path, query } = useLocation();
 	const { activeView = 'all', postId } = query;
@@ -37,6 +39,7 @@ export default function PageTemplates() {
 	} = useViewConfig( {
 		kind: 'postType',
 		name: TEMPLATE_POST_TYPE,
+		fields: VIEW_CONFIG_FIELDS,
 	} );
 	const activeViewOverrides = useMemo(
 		() => viewList?.find( ( v ) => v.slug === activeView )?.view ?? {},
@@ -83,32 +86,10 @@ export default function PageTemplates() {
 		[ history, path, view?.type ]
 	);
 
-	const authors = useMemo( () => {
-		if ( ! records ) {
-			return [];
-		}
-		const authorsSet = new Set();
-		records.forEach( ( template ) => {
-			authorsSet.add( template.author_text );
-		} );
-		return Array.from( authorsSet ).map( ( author ) => ( {
-			value: author,
-			label: author,
-		} ) );
-	}, [ records ] );
-
-	const fields = useMemo(
-		() => [
-			previewField,
-			templateTitleField,
-			descriptionField,
-			{
-				...authorField,
-				elements: authors,
-			},
-		],
-		[ authors ]
-	);
+	const postFields = usePostFields( { postType: TEMPLATE_POST_TYPE } );
+	const fields = useMemo( () => {
+		return [ previewField, ...( postFields || [] ) ];
+	}, [ 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-dataviews/index.js

@@ -23,6 +23,8 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 
 const { useLocation } = unlock( routerPrivateApis );
 
+const VIEW_CONFIG_FIELDS = [ 'view_list' ];
+
 const SLUG_TO_ICON = {
 	all: pages,
 	published,
@@ -47,6 +49,7 @@ export default function DataViewsSidebarContent( {
 	const { view_list: viewList } = useViewConfig( {
 		kind: 'postType',
 		name: postType,
+		fields: VIEW_CONFIG_FIELDS,
 	} );
 	if ( ! postType ) {
 		return null;

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);
 	}
 }