@wordpress/edit-site 6.42.0 → 6.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.42.0",
+	"version": "6.43.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -48,50 +48,50 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.42.0",
-		"@wordpress/admin-ui": "^1.10.0",
-		"@wordpress/api-fetch": "^7.42.0",
-		"@wordpress/base-styles": "^6.18.0",
-		"@wordpress/blob": "^4.42.0",
-		"@wordpress/block-editor": "^15.15.0",
-		"@wordpress/block-library": "^9.42.0",
-		"@wordpress/blocks": "^15.15.0",
-		"@wordpress/commands": "^1.42.0",
-		"@wordpress/components": "^32.4.0",
-		"@wordpress/compose": "^7.42.0",
-		"@wordpress/core-data": "^7.42.0",
-		"@wordpress/data": "^10.42.0",
-		"@wordpress/dataviews": "^13.1.0",
-		"@wordpress/date": "^5.42.0",
-		"@wordpress/deprecated": "^4.42.0",
-		"@wordpress/dom": "^4.42.0",
-		"@wordpress/editor": "^14.42.0",
-		"@wordpress/element": "^6.42.0",
-		"@wordpress/escape-html": "^3.42.0",
-		"@wordpress/fields": "^0.34.0",
-		"@wordpress/global-styles-engine": "^1.9.0",
-		"@wordpress/global-styles-ui": "^1.9.0",
-		"@wordpress/hooks": "^4.42.0",
-		"@wordpress/html-entities": "^4.42.0",
-		"@wordpress/i18n": "^6.15.0",
-		"@wordpress/icons": "^12.0.0",
-		"@wordpress/keyboard-shortcuts": "^5.42.0",
-		"@wordpress/keycodes": "^4.42.0",
-		"@wordpress/media-utils": "^5.42.0",
-		"@wordpress/notices": "^5.42.0",
-		"@wordpress/patterns": "^2.42.0",
-		"@wordpress/plugins": "^7.42.0",
-		"@wordpress/preferences": "^4.42.0",
-		"@wordpress/primitives": "^4.42.0",
-		"@wordpress/private-apis": "^1.42.0",
-		"@wordpress/reusable-blocks": "^5.42.0",
-		"@wordpress/router": "^1.42.0",
-		"@wordpress/style-engine": "^2.42.0",
-		"@wordpress/url": "^4.42.0",
-		"@wordpress/viewport": "^6.42.0",
-		"@wordpress/views": "^1.9.0",
-		"@wordpress/widgets": "^4.42.0",
-		"@wordpress/wordcount": "^4.42.0",
+		"@wordpress/a11y": "^4.43.0",
+		"@wordpress/admin-ui": "^1.11.0",
+		"@wordpress/api-fetch": "^7.43.0",
+		"@wordpress/base-styles": "^6.19.0",
+		"@wordpress/blob": "^4.43.0",
+		"@wordpress/block-editor": "^15.16.0",
+		"@wordpress/block-library": "^9.43.0",
+		"@wordpress/blocks": "^15.16.0",
+		"@wordpress/commands": "^1.43.0",
+		"@wordpress/components": "^32.5.0",
+		"@wordpress/compose": "^7.43.0",
+		"@wordpress/core-data": "^7.43.0",
+		"@wordpress/data": "^10.43.0",
+		"@wordpress/dataviews": "^14.0.0",
+		"@wordpress/date": "^5.43.0",
+		"@wordpress/deprecated": "^4.43.0",
+		"@wordpress/dom": "^4.43.0",
+		"@wordpress/editor": "^14.43.0",
+		"@wordpress/element": "^6.43.0",
+		"@wordpress/escape-html": "^3.43.0",
+		"@wordpress/fields": "^0.35.0",
+		"@wordpress/global-styles-engine": "^1.10.0",
+		"@wordpress/global-styles-ui": "^1.10.0",
+		"@wordpress/hooks": "^4.43.0",
+		"@wordpress/html-entities": "^4.43.0",
+		"@wordpress/i18n": "^6.16.0",
+		"@wordpress/icons": "^12.1.0",
+		"@wordpress/keyboard-shortcuts": "^5.43.0",
+		"@wordpress/keycodes": "^4.43.0",
+		"@wordpress/media-utils": "^5.43.0",
+		"@wordpress/notices": "^5.43.0",
+		"@wordpress/patterns": "^2.43.0",
+		"@wordpress/plugins": "^7.43.0",
+		"@wordpress/preferences": "^4.43.0",
+		"@wordpress/primitives": "^4.43.0",
+		"@wordpress/private-apis": "^1.43.0",
+		"@wordpress/reusable-blocks": "^5.43.0",
+		"@wordpress/router": "^1.43.0",
+		"@wordpress/style-engine": "^2.43.0",
+		"@wordpress/url": "^4.43.0",
+		"@wordpress/viewport": "^6.43.0",
+		"@wordpress/views": "^1.10.0",
+		"@wordpress/widgets": "^4.43.0",
+		"@wordpress/wordcount": "^4.43.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -106,5 +106,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
+	"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
 }

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

@@ -9,7 +9,7 @@ import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useView } from '@wordpress/views';
+import { useView, useViewConfig } from '@wordpress/views';
 import { useSelect } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -17,8 +17,6 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import {
-	LAYOUT_GRID,
-	LAYOUT_TABLE,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_DEFAULT_CATEGORY,
@@ -40,31 +38,6 @@ const { usePostActions, patternTitleField } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
-const defaultLayouts = {
-	[ LAYOUT_TABLE ]: {
-		layout: {
-			styles: {
-				author: {
-					width: '1%',
-				},
-			},
-		},
-	},
-	[ LAYOUT_GRID ]: {
-		layout: {
-			badgeFields: [ 'sync-status' ],
-		},
-	},
-};
-const DEFAULT_VIEW = {
-	type: LAYOUT_GRID,
-	perPage: 20,
-	titleField: 'title',
-	mediaField: 'preview',
-	fields: [ 'sync-status' ],
-	filters: [],
-	...defaultLayouts[ LAYOUT_GRID ],
-};
 
 function usePagePatternsHeader( type, categoryId ) {
 	const { patternCategories } = usePatternCategories();
@@ -99,11 +72,17 @@ export default function DataviewsPatterns() {
 	const { postType = 'wp_block', categoryId: categoryIdFromURL } = query;
 	const history = useHistory();
 	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
+	const { default_view: defaultView, default_layouts: defaultLayouts } =
+		useViewConfig( {
+			kind: 'postType',
+			name: postType,
+		} );
 	const { view, updateView, isModified, resetToDefault } = useView( {
 		kind: 'postType',
 		name: postType,
 		slug: 'default',
-		defaultView: DEFAULT_VIEW,
+		defaultView,
+		defaultLayouts,
 		queryParams: {
 			page: query.pageNumber,
 			search: query.search,
@@ -235,7 +214,7 @@ export default function DataviewsPatterns() {
 					} }
 					view={ view }
 					onChangeView={ updateView }
-					defaultLayouts={ defaultLayouts }
+					defaultLayouts={ defaultLayouts ?? {} }
 					onReset={ isModified ? resetToDefault : false }
 				/>
 			</Page>

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

@@ -10,7 +10,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { addQueryArgs } from '@wordpress/url';
 import { useEvent } from '@wordpress/compose';
-import { useView } from '@wordpress/views';
+import { useView, useViewConfig } from '@wordpress/views';
 
 /**
  * Internal dependencies
@@ -20,11 +20,6 @@ import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
 import { authorField, descriptionField, previewField } from './fields';
-import {
-	defaultLayouts,
-	DEFAULT_VIEW,
-	getActiveViewOverridesForTab,
-} from './view-utils';
 
 const { usePostActions, templateTitleField } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -32,13 +27,20 @@ const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
 
 export default function PageTemplates() {
 	const { path, query } = useLocation();
-	const { activeView = 'active', postId } = query;
+	const { activeView = 'all', postId } = query;
 	const [ selection, setSelection ] = useState( [ postId ] );
 
-	const defaultView = DEFAULT_VIEW;
+	const {
+		default_view: defaultView,
+		default_layouts: defaultLayouts,
+		view_list: viewList,
+	} = useViewConfig( {
+		kind: 'postType',
+		name: TEMPLATE_POST_TYPE,
+	} );
 	const activeViewOverrides = useMemo(
-		() => getActiveViewOverridesForTab( activeView ),
-		[ activeView ]
+		() => viewList?.find( ( v ) => v.slug === activeView )?.view ?? {},
+		[ viewList, activeView ]
 	);
 	const { view, updateView, isModified, resetToDefault } = useView( {
 		kind: 'postType',
@@ -46,6 +48,7 @@ export default function PageTemplates() {
 		slug: 'default',
 		defaultView,
 		activeViewOverrides,
+		defaultLayouts,
 		queryParams: {
 			page: query.pageNumber,
 			search: query.search,
@@ -150,7 +153,7 @@ export default function PageTemplates() {
 					history.navigate( `/wp_template/${ id }?canvas=edit` );
 				} }
 				selection={ selection }
-				defaultLayouts={ defaultLayouts }
+				defaultLayouts={ defaultLayouts ?? {} }
 				onReset={
 					isModified
 						? () => {

package/src/components/post-list/index.js

@@ -14,7 +14,7 @@ import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useEvent, usePrevious } from '@wordpress/compose';
 import { addQueryArgs } from '@wordpress/url';
-import { useView } from '@wordpress/views';
+import { useView, useViewConfig } from '@wordpress/views';
 
 /**
  * Internal dependencies
@@ -33,11 +33,7 @@ import {
 	useEditPostAction,
 	useQuickEditPostAction,
 } from '../dataviews-actions';
-import {
-	defaultLayouts,
-	DEFAULT_VIEW,
-	getActiveViewOverridesForTab,
-} from './view-utils';
+
 import useNotesCount from './use-notes-count';
 import { QuickEditModal } from './quick-edit-modal';
 
@@ -60,16 +56,25 @@ export default function PostList( { postType } ) {
 	const { path, query } = useLocation();
 	const { activeView = 'all', postId, quickEdit = false } = query;
 	const history = useHistory();
-	const defaultView = DEFAULT_VIEW;
+	const {
+		default_view: defaultView,
+		default_layouts: defaultLayouts,
+		view_list: viewList,
+		form: quickEditForm,
+	} = useViewConfig( {
+		kind: 'postType',
+		name: postType,
+	} );
 	const activeViewOverrides = useMemo(
-		() => getActiveViewOverridesForTab( activeView ),
-		[ activeView ]
+		() => viewList?.find( ( v ) => v.slug === activeView )?.view ?? {},
+		[ viewList, activeView ]
 	);
 	const { view, updateView, isModified, resetToDefault } = useView( {
 		kind: 'postType',
 		name: postType,
 		slug: 'default',
 		defaultView,
+		defaultLayouts,
 		activeViewOverrides,
 		queryParams: {
 			page: query.pageNumber,
@@ -317,7 +322,7 @@ export default function PostList( { postType } ) {
 				} }
 				getItemId={ getItemId }
 				getItemLevel={ getItemLevel }
-				defaultLayouts={ defaultLayouts }
+				defaultLayouts={ defaultLayouts ?? {} }
 				onReset={
 					isModified
 						? () => {
@@ -335,6 +340,7 @@ export default function PostList( { postType } ) {
 						postType={ postType }
 						postId={ selection }
 						closeModal={ closeQuickEditModal }
+						quickEditForm={ quickEditForm }
 					/>
 				) }
 		</Page>

package/src/components/post-list/quick-edit-modal.js

@@ -22,7 +22,12 @@ const { usePostFields, PostCardPanel } = unlock( editorPrivateApis );
 
 const fieldsWithBulkEditSupport = [ 'status', 'date', 'author', 'discussion' ];
 
-export function QuickEditModal( { postType, postId, closeModal } ) {
+export function QuickEditModal( {
+	postType,
+	postId,
+	closeModal,
+	quickEditForm,
+} ) {
 	const isBulk = postId.length > 1;
 
 	const [ localEdits, setLocalEdits ] = useState( {} );
@@ -93,61 +98,21 @@ export function QuickEditModal( { postType, postId, closeModal } ) {
 	);
 
 	const form = useMemo( () => {
-		const allFields = [
-			{
-				id: 'featured_media',
-				layout: {
-					type: 'regular',
-					labelPosition: 'none',
-				},
-			},
-			{
-				id: 'post-content-info',
-				layout: { type: 'regular', labelPosition: 'none' },
-			},
-			{
-				id: 'status',
-				label: __( 'Status' ),
-				children: [
-					{
-						id: 'status',
-						layout: { type: 'regular', labelPosition: 'none' },
-					},
-					'scheduled_date',
-					'password',
-				],
-			},
-			'author',
-			'date',
-			'slug',
-			'parent',
-			{
-				id: 'discussion',
-				label: __( 'Discussion' ),
-				children: [
-					{
-						id: 'comment_status',
-						layout: { type: 'regular', labelPosition: 'none' },
-					},
-					'ping_status',
-				],
-			},
-			'template',
-		];
-
+		if ( ! quickEditForm ) {
+			return { layout: { type: 'panel' }, fields: [] };
+		}
+		if ( ! isBulk ) {
+			return quickEditForm;
+		}
 		return {
-			layout: {
-				type: 'panel',
-			},
-			fields: isBulk
-				? allFields.filter( ( field ) =>
-						fieldsWithBulkEditSupport.includes(
-							typeof field === 'string' ? field : field.id
-						)
-				  )
-				: allFields,
+			...quickEditForm,
+			fields: ( quickEditForm.fields ?? [] ).filter( ( field ) =>
+				fieldsWithBulkEditSupport.includes(
+					typeof field === 'string' ? field : field.id
+				)
+			),
 		};
-	}, [ isBulk ] );
+	}, [ isBulk, quickEditForm ] );
 
 	const onChange = ( edits ) => {
 		const currentData = { ...record, ...localEdits };

package/src/components/post-list/style.scss

@@ -68,6 +68,8 @@
 	}
 }
 
+// TODO: These styles should be absorbed by DataForm API.
+// @see https://github.com/WordPress/gutenberg/issues/75916
 .fields-controls__password {
 	border-top: $border-width solid $gray-200;
 	padding-top: $grid-unit-20;

package/src/components/sidebar-dataviews/index.js

@@ -3,34 +3,51 @@
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
+import {
+	trash,
+	pages,
+	drafts,
+	published,
+	scheduled,
+	pending,
+	notAllowed,
+} from '@wordpress/icons';
+import { useViewConfig } from '@wordpress/views';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import DataViewItem from './dataview-item';
-import { getDefaultViews } from '../post-list/view-utils';
+import SidebarNavigationItem from '../sidebar-navigation-item';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function DataViewsSidebarContent( { postType } ) {
+const SLUG_TO_ICON = {
+	all: pages,
+	published,
+	future: scheduled,
+	drafts,
+	pending,
+	private: notAllowed,
+	trash,
+};
+const defaultResolveIcon = ( view ) => {
+	return SLUG_TO_ICON[ view.slug ];
+};
+
+export default function DataViewsSidebarContent( {
+	postType,
+	resolveIcon = defaultResolveIcon,
+} ) {
 	const {
+		path,
 		query: { activeView = 'all' },
 	} = useLocation();
-	const postTypeObject = useSelect(
-		( select ) => {
-			const { getPostType } = select( coreStore );
-			return getPostType( postType );
-		},
-		[ postType ]
-	);
-	const defaultViews = useMemo(
-		() => getDefaultViews( postTypeObject ),
-		[ postTypeObject ]
-	);
+	const { view_list: viewList } = useViewConfig( {
+		kind: 'postType',
+		name: postType,
+	} );
 	if ( ! postType ) {
 		return null;
 	}
@@ -38,16 +55,21 @@ export default function DataViewsSidebarContent( { postType } ) {
 	return (
 		<>
 			<ItemGroup className="edit-site-sidebar-dataviews">
-				{ defaultViews.map( ( dataview ) => {
+				{ viewList?.map( ( view ) => {
+					const isActive = view.slug === activeView;
+					const slug = view.slug === 'all' ? undefined : view.slug;
+					const icon = resolveIcon( view );
 					return (
-						<DataViewItem
-							key={ dataview.slug }
-							slug={ dataview.slug }
-							title={ dataview.title }
-							icon={ dataview.icon }
-							type={ dataview.view.type }
-							isActive={ dataview.slug === activeView }
-						/>
+						<SidebarNavigationItem
+							key={ view.slug }
+							icon={ icon }
+							to={ addQueryArgs( path, {
+								activeView: slug,
+							} ) }
+							aria-current={ isActive ? 'true' : undefined }
+						>
+							{ view.title }
+						</SidebarNavigationItem>
 					);
 				} ) }
 			</ItemGroup>

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

@@ -5,19 +5,3 @@
 	margin-left: -$grid-unit-20;
 	margin-right: -$grid-unit-20;
 }
-
-.edit-site-sidebar-dataviews-dataview-item {
-	border-radius: $radius-small;
-
-	&:hover,
-	&:focus,
-	&[aria-current] {
-		color: $gray-200;
-	}
-
-	&.is-selected {
-		background: $gray-800;
-		font-weight: $font-weight-medium;
-		color: $white;
-	}
-}