@wordpress/edit-site 5.23.0 → 5.24.0

package/src/components/dataviews/README.md

@@ -5,6 +5,7 @@ This file documents the DataViews UI component, which provides an API to render
 ```js
 <DataViews
 	data={ pages }
+	getItemId={ ( item ) => item.id }
 	isLoading={ isLoadingPages }
 	view={ view }
 	onChangeView={ onChangeView }
@@ -44,8 +45,8 @@ Example:
 	},
 	search: '',
 	filters: [
-		{ field: 'author', operator: 'in', value: 2 },
-		{ field: 'status', operator: 'in', value: 'publish,draft' }
+		{ field: 'author', operator: OPERATOR_IN, value: 2 },
+		{ field: 'status', operator: OPERATOR_IN, value: 'publish,draft' }
 	],
 	hiddenFields: [ 'date', 'featured-image' ],
 	layout: {},
@@ -63,7 +64,9 @@ Example:
     -   `operator`: which type of filter it is. Only `in` available at the moment.
     -   `value`: the actual value selected by the user.
 -   `hiddenFields`: the `id` of the fields that are hidden in the UI.
--   `layout`: ...
+-   `layout`: config that is specific to a particular layout type.
+    -   `mediaField`: used by the `grid` layout. The `id` of the field to be used for rendering each card's media.
+    -   `primaryField`: used by the `grid` layout. The `id` of the field to be used for rendering each card's title.
 
 ### View <=> data
 
@@ -83,8 +86,8 @@ function MyCustomPageList() {
 		},
 		search: '',
 		filters: [
-			{ field: 'author', operator: 'in', value: 2 },
-			{ field: 'status', operator: 'in', value: 'publish,draft' }
+			{ field: 'author', operator: OPERATOR_IN, value: 2 },
+			{ field: 'status', operator: OPERATOR_IN, value: 'publish,draft' }
 		],
 		hiddenFields: [ 'date', 'featured-image' ],
 		layout: {},
@@ -93,10 +96,10 @@ function MyCustomPageList() {
 	const queryArgs = useMemo( () => {
 		const filters = {};
 		view.filters.forEach( ( filter ) => {
-			if ( filter.field === 'status' && filter.operator === 'in' ) {
+			if ( filter.field === 'status' && filter.operator === OPERATOR_IN ) {
 				filters.status = filter.value;
 			}
-			if ( filter.field === 'author' && filter.operator === 'in' ) {
+			if ( filter.field === 'author' && filter.operator === OPERATOR_IN ) {
 				filters.author = filter.value;
 			}
 		} );
@@ -154,11 +157,11 @@ Example:
 				<a href="...">{ item.author }</a>
 			);
 		},
+		type: ENUMERATION_TYPE,
 		elements: [
 			{ value: 1, label: 'Admin' }
 			{ value: 2, label: 'User' }
 		]
-		filters: [ 'in' ],
 		enableSorting: false
 	}
 ]
@@ -169,7 +172,7 @@ Example:
 -   `getValue`: function that returns the value of the field.
 -   `render`: function that renders the field.
 -   `elements`: the set of valid values for the field's value.
--   `filters`: what filter operators are available for the user to use over this field. Only `in` available at the moment.
+-   `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment.
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
 
@@ -183,6 +186,6 @@ Array of operations that can be performed upon each record. Each action is an ob
 -   `icon`: icon to show for primary actions. It's required for a primary action, otherwise the action would be considered secondary.
 -   `isEligible`: function, optional. Whether the action can be performed for a given record. If not present, the action is considered to be eligible for all items. It takes the given record as input.
 -   `isDestructive`: boolean, optional. Whether the action can delete data, in which case the UI would communicate it via red color.
--   `callback`: function, required. Callback function that takes the record as input and performs the required action.
--   `RenderModal`: ReactElement, optional. If an action requires to render contents in a modal, can provide a component which takes as input the record and a `closeModal` function. If this prop is provided, the `callback` property would be ignored.
+-   `callback`: function, required unless `RenderModal` is provided. Callback function that takes the record as input and performs the required action.
+-   `RenderModal`: ReactElement, optional. If an action requires that some UI be rendered in a modal, it can provide a component which takes as props the record as `item` and a `closeModal` function. When this prop is provided, the `callback` property is ignored.
 -   `hideModalHeader`: boolean, optional. This property is used in combination with `RenderModal` and controls the visibility of the modal's header. If the action renders a modal and doesn't hide the header, the action's label is going to be used in the modal's header.

package/src/components/dataviews/add-filter.js

@@ -13,37 +13,34 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { OPERATOR_IN } from './in-filter';
+import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
 
 const {
-	DropdownMenuV2,
-	DropdownSubMenuV2,
-	DropdownSubMenuTriggerV2,
-	DropdownMenuItemV2,
+	DropdownMenuV2: DropdownMenu,
+	DropdownSubMenuV2: DropdownSubMenu,
+	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
+	DropdownMenuItemV2: DropdownMenuItem,
 } = unlock( componentsPrivateApis );
 
-const VALID_OPERATORS = [ OPERATOR_IN ];
-
 export default function AddFilter( { fields, view, onChangeView } ) {
 	const filters = [];
 	fields.forEach( ( field ) => {
-		if ( ! field.filters ) {
+		if ( ! field.type ) {
 			return;
 		}
 
-		field.filters.forEach( ( filter ) => {
-			if ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) {
+		switch ( field.type ) {
+			case ENUMERATION_TYPE:
 				filters.push( {
 					field: field.id,
 					name: field.header,
-					operator: filter,
 					elements: field.elements || [],
 					isVisible: view.filters.some(
-						( f ) => f.field === field.id && f.operator === filter
+						( f ) =>
+							f.field === field.id && f.operator === OPERATOR_IN
 					),
 				} );
-			}
-		} );
+		}
 	} );
 
 	if ( filters.length === 0 ) {
@@ -51,16 +48,16 @@ export default function AddFilter( { fields, view, onChangeView } ) {
 	}
 
 	return (
-		<DropdownMenuV2
+		<DropdownMenu
 			label={ __( 'Add filter' ) }
 			trigger={
 				<Button
 					disabled={ filters.length === view.filters?.length }
 					__experimentalIsFocusable
-					icon={ plus }
 					variant="tertiary"
 					size="compact"
 				>
+					<Icon icon={ plus } style={ { flexShrink: 0 } } />
 					{ __( 'Add filter' ) }
 				</Button>
 			}
@@ -71,18 +68,18 @@ export default function AddFilter( { fields, view, onChangeView } ) {
 				}
 
 				return (
-					<DropdownSubMenuV2
+					<DropdownSubMenu
 						key={ filter.field }
 						trigger={
-							<DropdownSubMenuTriggerV2
+							<DropdownSubMenuTrigger
 								suffix={ <Icon icon={ chevronRightSmall } /> }
 							>
 								{ filter.name }
-							</DropdownSubMenuTriggerV2>
+							</DropdownSubMenuTrigger>
 						}
 					>
 						{ filter.elements.map( ( element ) => (
-							<DropdownMenuItemV2
+							<DropdownMenuItem
 								key={ element.value }
 								onSelect={ () => {
 									onChangeView( ( currentView ) => ( {
@@ -92,7 +89,7 @@ export default function AddFilter( { fields, view, onChangeView } ) {
 											...currentView.filters,
 											{
 												field: filter.field,
-												operator: 'in',
+												operator: OPERATOR_IN,
 												value: element.value,
 											},
 										],
@@ -101,11 +98,11 @@ export default function AddFilter( { fields, view, onChangeView } ) {
 								role="menuitemcheckbox"
 							>
 								{ element.label }
-							</DropdownMenuItemV2>
+							</DropdownMenuItem>
 						) ) }
-					</DropdownSubMenuV2>
+					</DropdownSubMenu>
 				);
 			} ) }
-		</DropdownMenuV2>
+		</DropdownMenu>
 	);
 }

package/src/components/dataviews/constants.js

@@ -0,0 +1,5 @@
+// Field types.
+export const ENUMERATION_TYPE = 'enumeration';
+
+// Filter operators.
+export const OPERATOR_IN = 'in';

package/src/components/dataviews/dataviews.js

@@ -41,6 +41,7 @@ export default function DataViews( {
 	searchLabel = undefined,
 	actions,
 	data,
+	getItemId,
 	isLoading = false,
 	paginationInfo,
 	supportedLayouts,
@@ -55,8 +56,8 @@ export default function DataViews( {
 	return (
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 4 } justify="flex-start">
-				<HStack>
-					<HStack justify="start">
+				<HStack alignment="flex-start">
+					<HStack justify="start" wrap>
 						{ search && (
 							<Search
 								label={ searchLabel }
@@ -70,14 +71,12 @@ export default function DataViews( {
 							onChangeView={ onChangeView }
 						/>
 					</HStack>
-					<HStack justify="end" expanded={ false }>
-						<ViewActions
-							fields={ fields }
-							view={ view }
-							onChangeView={ onChangeView }
-							supportedLayouts={ supportedLayouts }
-						/>
-					</HStack>
+					<ViewActions
+						fields={ fields }
+						view={ view }
+						onChangeView={ onChangeView }
+						supportedLayouts={ supportedLayouts }
+					/>
 				</HStack>
 				<ViewComponent
 					fields={ _fields }
@@ -86,6 +85,7 @@ export default function DataViews( {
 					paginationInfo={ paginationInfo }
 					actions={ actions }
 					data={ data }
+					getItemId={ getItemId }
 					isLoading={ isLoading }
 				/>
 				<Pagination

package/src/components/dataviews/filter-summary.js

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+	Icon,
+} from '@wordpress/components';
+import { chevronDown } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { OPERATOR_IN } from './constants';
+import { unlock } from '../../lock-unlock';
+
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem,
+} = unlock( componentsPrivateApis );
+
+export default function FilterSummary( { filter, view, onChangeView } ) {
+	const filterInView = view.filters.find( ( f ) => f.field === filter.field );
+	const activeElement = filter.elements.find(
+		( element ) => element.value === filterInView?.value
+	);
+
+	return (
+		<DropdownMenu
+			key={ filter.field }
+			trigger={
+				<Button variant="tertiary" size="compact" label={ filter.name }>
+					{ activeElement !== undefined
+						? sprintf(
+								/* translators: 1: Filter name. 2: filter value. e.g.: "Author is Admin". */
+								__( '%1$s is %2$s' ),
+								filter.name,
+								activeElement.label
+						  )
+						: filter.name }
+					<Icon icon={ chevronDown } style={ { flexShrink: 0 } } />
+				</Button>
+			}
+		>
+			{ filter.elements.map( ( element ) => {
+				return (
+					<DropdownMenuCheckboxItem
+						key={ element.value }
+						value={ element.value }
+						checked={ activeElement?.value === element.value }
+						onSelect={ () =>
+							onChangeView( ( currentView ) => ( {
+								...currentView,
+								page: 1,
+								filters: [
+									...view.filters.filter(
+										( f ) => f.field !== filter.field
+									),
+									{
+										field: filter.field,
+										operator: OPERATOR_IN,
+										value:
+											activeElement?.value ===
+											element.value
+												? undefined
+												: element.value,
+									},
+								],
+							} ) )
+						}
+					>
+						{ element.label }
+					</DropdownMenuCheckboxItem>
+				);
+			} ) }
+		</DropdownMenu>
+	);
+}

package/src/components/dataviews/filters.js

@@ -1,62 +1,45 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
-import { default as InFilter, OPERATOR_IN } from './in-filter';
+import FilterSummary from './filter-summary';
 import AddFilter from './add-filter';
 import ResetFilters from './reset-filters';
-
-const VALID_OPERATORS = [ OPERATOR_IN ];
+import { ENUMERATION_TYPE, OPERATOR_IN } from './constants';
 
 export default function Filters( { fields, view, onChangeView } ) {
 	const filters = [];
 	fields.forEach( ( field ) => {
-		if ( ! field.filters ) {
+		if ( ! field.type ) {
 			return;
 		}
 
-		field.filters.forEach( ( filter ) => {
-			if ( VALID_OPERATORS.some( ( operator ) => operator === filter ) ) {
+		switch ( field.type ) {
+			case ENUMERATION_TYPE:
 				filters.push( {
 					field: field.id,
 					name: field.header,
-					operator: filter,
-					elements: [
-						{
-							value: '',
-							label: __( 'All' ),
-						},
-						...( field.elements || [] ),
-					],
+					elements: field.elements || [],
 					isVisible: view.filters.some(
-						( f ) => f.field === field.id && f.operator === filter
+						( f ) =>
+							f.field === field.id && f.operator === OPERATOR_IN
 					),
 				} );
-			}
-		} );
+		}
 	} );
 
-	const filterComponents = filters?.map( ( filter ) => {
+	const filterComponents = filters.map( ( filter ) => {
 		if ( ! filter.isVisible ) {
 			return null;
 		}
 
-		if ( OPERATOR_IN === filter.operator ) {
-			return (
-				<InFilter
-					key={ filter.field + '.' + filter.operator }
-					filter={ filter }
-					view={ view }
-					onChangeView={ onChangeView }
-				/>
-			);
-		}
-
-		return null;
+		return (
+			<FilterSummary
+				key={ filter.field + '.' + filter.operator }
+				filter={ filter }
+				view={ view }
+				onChangeView={ onChangeView }
+			/>
+		);
 	} );
 
 	filterComponents.push(

package/src/components/dataviews/item-actions.js

@@ -2,18 +2,28 @@
  * WordPress dependencies
  */
 import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
 	Button,
 	Modal,
 	__experimentalHStack as HStack,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
 import { moreVertical } from '@wordpress/icons';
 
-function PrimaryActionTrigger( { action, onClick } ) {
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const {
+	DropdownMenuV2Ariakit: DropdownMenu,
+	DropdownMenuGroupV2Ariakit: DropdownMenuGroup,
+	DropdownMenuItemV2Ariakit: DropdownMenuItem,
+	DropdownMenuItemLabelV2Ariakit: DropdownMenuItemLabel,
+} = unlock( componentsPrivateApis );
+
+function ButtonTrigger( { action, onClick } ) {
 	return (
 		<Button
 			label={ action.label }
@@ -25,11 +35,11 @@ function PrimaryActionTrigger( { action, onClick } ) {
 	);
 }
 
-function SecondaryActionTrigger( { action, onClick } ) {
+function DropdownMenuItemTrigger( { action, onClick } ) {
 	return (
-		<MenuItem onClick={ onClick } isDestructive={ action.isDestructive }>
-			{ action.label }
-		</MenuItem>
+		<DropdownMenuItem onClick={ onClick }>
+			<DropdownMenuItemLabel>{ action.label }</DropdownMenuItemLabel>
+		</DropdownMenuItem>
 	);
 }
 
@@ -62,7 +72,33 @@ function ActionWithModal( { action, item, ActionTrigger } ) {
 	);
 }
 
-export default function ItemActions( { item, actions } ) {
+function ActionsDropdownMenuGroup( { actions, item } ) {
+	return (
+		<DropdownMenuGroup>
+			{ actions.map( ( action ) => {
+				if ( !! action.RenderModal ) {
+					return (
+						<ActionWithModal
+							key={ action.id }
+							action={ action }
+							item={ item }
+							ActionTrigger={ DropdownMenuItemTrigger }
+						/>
+					);
+				}
+				return (
+					<DropdownMenuItemTrigger
+						key={ action.id }
+						action={ action }
+						onClick={ () => action.callback( item ) }
+					/>
+				);
+			} ) }
+		</DropdownMenuGroup>
+	);
+}
+
+export default function ItemActions( { item, actions, isCompact } ) {
 	const { primaryActions, secondaryActions } = useMemo( () => {
 		return actions.reduce(
 			( accumulator, action ) => {
@@ -84,8 +120,24 @@ export default function ItemActions( { item, actions } ) {
 	if ( ! primaryActions.length && ! secondaryActions.length ) {
 		return null;
 	}
+	if ( isCompact ) {
+		return (
+			<CompactItemActions
+				item={ item }
+				primaryActions={ primaryActions }
+				secondaryActions={ secondaryActions }
+			/>
+		);
+	}
 	return (
-		<HStack justify="flex-end">
+		<HStack
+			spacing={ 1 }
+			justify="flex-end"
+			style={ {
+				flexShrink: '0',
+				width: 'auto',
+			} }
+		>
 			{ !! primaryActions.length &&
 				primaryActions.map( ( action ) => {
 					if ( !! action.RenderModal ) {
@@ -94,51 +146,63 @@ export default function ItemActions( { item, actions } ) {
 								key={ action.id }
 								action={ action }
 								item={ item }
-								ActionTrigger={ PrimaryActionTrigger }
+								ActionTrigger={ ButtonTrigger }
 							/>
 						);
 					}
 					return (
-						<PrimaryActionTrigger
+						<ButtonTrigger
 							key={ action.id }
 							action={ action }
-							item={ item }
 							onClick={ () => action.callback( item ) }
 						/>
 					);
 				} ) }
 			{ !! secondaryActions.length && (
-				<DropdownMenu icon={ moreVertical } label={ __( 'Actions' ) }>
-					{ () => (
-						<MenuGroup>
-							{ secondaryActions.map( ( action ) => {
-								if ( !! action.RenderModal ) {
-									return (
-										<ActionWithModal
-											key={ action.id }
-											action={ action }
-											item={ item }
-											ActionTrigger={
-												SecondaryActionTrigger
-											}
-										/>
-									);
-								}
-								return (
-									<SecondaryActionTrigger
-										key={ action.id }
-										action={ action }
-										item={ item }
-										onClick={ () =>
-											action.callback( item )
-										}
-									/>
-								);
-							} ) }
-						</MenuGroup>
-					) }
+				<DropdownMenu
+					trigger={
+						<Button
+							size="compact"
+							icon={ moreVertical }
+							label={ __( 'Actions' ) }
+						/>
+					}
+					placement="bottom-end"
+				>
+					<ActionsDropdownMenuGroup
+						actions={ secondaryActions }
+						item={ item }
+					/>
 				</DropdownMenu>
 			) }
 		</HStack>
 	);
 }
+
+function CompactItemActions( { item, primaryActions, secondaryActions } ) {
+	return (
+		<DropdownMenu
+			trigger={
+				<Button
+					size="compact"
+					icon={ moreVertical }
+					label={ __( 'Actions' ) }
+				/>
+			}
+			placement="bottom-end"
+		>
+			{ !! primaryActions.length && (
+				<ActionsDropdownMenuGroup
+					actions={ primaryActions }
+					item={ item }
+				/>
+			) }
+			{ !! secondaryActions.length && (
+				<ActionsDropdownMenuGroup
+					actions={ secondaryActions }
+					item={ item }
+				/>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/dataviews/pagination.js

@@ -48,6 +48,7 @@ function Pagination( {
 								onChangeView( { ...view, page: 1 } )
 							}
 							disabled={ view.page === 1 }
+							__experimentalIsFocusable
 							label={ __( 'First page' ) }
 							icon={ previous }
 							showTooltip
@@ -58,6 +59,7 @@ function Pagination( {
 								onChangeView( { ...view, page: view.page - 1 } )
 							}
 							disabled={ view.page === 1 }
+							__experimentalIsFocusable
 							label={ __( 'Previous page' ) }
 							icon={ chevronLeft }
 							showTooltip
@@ -115,6 +117,7 @@ function Pagination( {
 								onChangeView( { ...view, page: view.page + 1 } )
 							}
 							disabled={ view.page >= totalPages }
+							__experimentalIsFocusable
 							label={ __( 'Next page' ) }
 							icon={ chevronRight }
 							showTooltip
@@ -125,6 +128,7 @@ function Pagination( {
 								onChangeView( { ...view, page: totalPages } )
 							}
 							disabled={ view.page >= totalPages }
+							__experimentalIsFocusable
 							label={ __( 'Last page' ) }
 							icon={ next }
 							showTooltip