DataViews: Implement isItemClickable and onClickItem props

packages/dataviews/README.md

@@ -318,7 +318,15 @@ The `defaultLayouts` property should be an object that includes properties named
 
 ### `onChangeSelection`: `function`
 
-Callback that signals the user selected one of more items, and takes them as parameter. So far, only the `list` view implements it.
+Callback that signals the user selected one of more items, and takes them as parameter.
+
+### `isClickable`: `function`
+
+A function that determines if a media field or a primary field are clickable. It receives an item as an argument and returns a boolean value indicating whether the item can be clicked.
+
+### `onClick`: `function`
+
+A callback function that is triggered when a user clicks on a media field or primary field. This function is currently implemented only in the `grid` and `list` views.
 
 ## Types
 

packages/dataviews/src/components/dataviews-context/index.ts

@@ -26,6 +26,8 @@ type DataViewsContextType< Item > = {
 	openedFilter: string | null;
 	setOpenedFilter: ( openedFilter: string | null ) => void;
 	getItemId: ( item: Item ) => string;
+	onClick: ( item: Item ) => void;
+	isClickable: ( item: Item ) => boolean;
 	density: number;
 };
 
@@ -43,6 +45,8 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	setOpenedFilter: () => {},
 	openedFilter: null,
 	getItemId: ( item ) => item.id,
+	onClick: () => {},
+	isClickable: () => false,
 	density: 0,
 } );
 

packages/dataviews/src/components/dataviews-layout/index.tsx

@@ -28,6 +28,8 @@ export default function DataViewsLayout() {
 		onChangeSelection,
 		setOpenedFilter,
 		density,
+		onClick,
+		isClickable,
 	} = useContext( DataViewsContext );
 
 	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
@@ -44,6 +46,8 @@ export default function DataViewsLayout() {
 			onChangeSelection={ onChangeSelection }
 			selection={ selection }
 			setOpenedFilter={ setOpenedFilter }
+			onClick={ onClick }
+			isClickable={ isClickable }
 			view={ view }
 			density={ density }
 		/>

packages/dataviews/src/components/dataviews/index.tsx

@@ -44,6 +44,8 @@ type DataViewsProps< Item > = {
 	defaultLayouts: SupportedLayouts;
 	selection?: string[];
 	onChangeSelection?: ( items: string[] ) => void;
+	onClick?: ( item: Item ) => void;
+	isClickable?: ( item: Item ) => boolean;
 	header?: ReactNode;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
@@ -65,6 +67,8 @@ export default function DataViews< Item >( {
 	defaultLayouts,
 	selection: selectionProperty,
 	onChangeSelection,
+	onClick,
+	isClickable,
 	header,
 }: DataViewsProps< Item > ) {
 	const [ selectionState, setSelectionState ] = useState< string[] >( [] );
@@ -110,6 +114,8 @@ export default function DataViews< Item >( {
 				openedFilter,
 				setOpenedFilter,
 				getItemId,
+				isClickable: isClickable ?? ( () => false ),
+				onClick: onClick ?? ( () => {} ),
 				density,
 			} }
 		>

packages/dataviews/src/dataviews-layouts/grid/index.tsx

@@ -29,6 +29,8 @@ interface GridItemProps< Item > {
 	selection: string[];
 	onChangeSelection: SetSelection;
 	getItemId: ( item: Item ) => string;
+	onClick: ( item: Item ) => void;
+	isClickable: ( item: Item ) => boolean;
 	item: Item;
 	actions: Action< Item >[];
 	mediaField?: NormalizedField< Item >;
@@ -41,6 +43,8 @@ interface GridItemProps< Item > {
 function GridItem< Item >( {
 	selection,
 	onChangeSelection,
+	onClick,
+	isClickable,
 	getItemId,
 	item,
 	actions,
@@ -59,6 +63,7 @@ function GridItem< Item >( {
 	const renderedPrimaryField = primaryField?.render ? (
 		<primaryField.render item={ item } />
 	) : null;
+
 	return (
 		<VStack
 			spacing={ 0 }
@@ -81,7 +86,27 @@ function GridItem< Item >( {
 				}
 			} }
 		>
-			<div className="dataviews-view-grid__media">
+			<div
+				className={ clsx( 'dataviews-view-grid__media', {
+					'dataviews-view-grid__media--clickable':
+						isClickable( item ),
+				} ) }
+				tabIndex={ isClickable( item ) ? 0 : undefined }
+				role="button"
+				onClick={ () => {
+					if ( isClickable( item ) ) {
+						onClick( item );
+					}
+				} }
+				onKeyDown={ ( event ) => {
+					if (
+						( event.key === 'Enter' || event.key === '' ) &&
+						isClickable( item )
+					) {
+						onClick( item );
+					}
+				} }
+			>
 				{ renderedMediaField }
 			</div>
 			<SingleSelectionCheckbox
@@ -96,7 +121,27 @@ function GridItem< Item >( {
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<HStack className="dataviews-view-grid__primary-field">
+				<HStack
+					className={ clsx( 'dataviews-view-grid__primary-field', {
+						'dataviews-view-grid__primary-field--clickable':
+							isClickable( item ),
+					} ) }
+					tabIndex={ isClickable( item ) ? 0 : undefined }
+					role="button"
+					onClick={ () => {
+						if ( isClickable( item ) ) {
+							onClick( item );
+						}
+					} }
+					onKeyDown={ ( event ) => {
+						if (
+							( event.key === 'Enter' || event.key === '' ) &&
+							isClickable( item )
+						) {
+							onClick( item );
+						}
+					} }
+				>
 					{ renderedPrimaryField }
 				</HStack>
 				<ItemActions item={ item } actions={ actions } isCompact />
@@ -170,6 +215,8 @@ export default function ViewGrid< Item >( {
 	getItemId,
 	isLoading,
 	onChangeSelection,
+	onClick,
+	isClickable,
 	selection,
 	view,
 	density,
@@ -223,6 +270,8 @@ export default function ViewGrid< Item >( {
 								key={ getItemId( item ) }
 								selection={ selection }
 								onChangeSelection={ onChangeSelection }
+								onClick={ onClick }
+								isClickable={ isClickable }
 								getItemId={ getItemId }
 								item={ item }
 								actions={ actions }

packages/dataviews/src/dataviews-layouts/grid/style.scss

@@ -17,8 +17,13 @@
 
 		.dataviews-view-grid__primary-field {
 			min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button
+
+			&--clickable {
+				cursor: pointer;
+			}
 		}
 
+
 		&.is-selected {
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
@@ -56,6 +61,10 @@
 			border-radius: $grid-unit-05;
 			pointer-events: none;
 		}
+
+		&--clickable {
+			cursor: pointer;
+		}
 	}
 
 	.dataviews-view-grid__fields {

packages/dataviews/src/dataviews-layouts/table/index.tsx

@@ -40,6 +40,8 @@ interface TableColumnFieldProps< Item > {
 	primaryField?: NormalizedField< Item >;
 	field: NormalizedField< Item >;
 	item: Item;
+	isClickable: ( item: Item ) => boolean;
+	onClick: ( item: Item ) => void;
 }
 
 interface TableColumnCombinedProps< Item > {
@@ -48,6 +50,8 @@ interface TableColumnCombinedProps< Item > {
 	field: CombinedField;
 	item: Item;
 	view: ViewTableType;
+	isClickable: ( item: Item ) => boolean;
+	onClick: ( item: Item ) => void;
 }
 
 interface TableColumnProps< Item > {
@@ -56,6 +60,8 @@ interface TableColumnProps< Item > {
 	item: Item;
 	column: string;
 	view: ViewTableType;
+	isClickable: ( item: Item ) => boolean;
+	onClick: ( item: Item ) => void;
 }
 
 interface TableRowProps< Item > {
@@ -69,6 +75,8 @@ interface TableRowProps< Item > {
 	selection: string[];
 	getItemId: ( item: Item ) => string;
 	onChangeSelection: SetSelection;
+	isClickable: ( item: Item ) => boolean;
+	onClick: ( item: Item ) => void;
 }
 
 function TableColumn< Item >( {
@@ -102,13 +110,32 @@ function TableColumnField< Item >( {
 	primaryField,
 	item,
 	field,
+	isClickable,
+	onClick,
 }: TableColumnFieldProps< Item > ) {
 	return (
 		<div
 			className={ clsx( 'dataviews-view-table__cell-content-wrapper', {
 				'dataviews-view-table__primary-field':
 					primaryField?.id === field.id,
+				'dataviews-view-table__primary-field--clickable':
+					isClickable( item ),
 			} ) }
+			tabIndex={ isClickable( item ) ? 0 : undefined }
+			role="button"
+			onClick={ () => {
+				if ( isClickable( item ) ) {
+					onClick( item );
+				}
+			} }
+			onKeyDown={ ( event ) => {
+				if (
+					( event.key === 'Enter' || event.key === '' ) &&
+					isClickable( item )
+				) {
+					onClick( item );
+				}
+			} }
 		>
 			<field.render { ...{ item } } />
 		</div>
@@ -139,6 +166,8 @@ function TableRow< Item >( {
 	primaryField,
 	selection,
 	getItemId,
+	isClickable,
+	onClick,
 	onChangeSelection,
 }: TableRowProps< Item > ) {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
@@ -214,6 +243,8 @@ function TableRow< Item >( {
 					<td key={ column } style={ { width, maxWidth, minWidth } }>
 						<TableColumn
 							primaryField={ primaryField }
+							isClickable={ isClickable }
+							onClick={ onClick }
 							fields={ fields }
 							item={ item }
 							column={ column }
@@ -252,6 +283,8 @@ function ViewTable< Item >( {
 	onChangeSelection,
 	selection,
 	setOpenedFilter,
+	onClick,
+	isClickable,
 	view,
 }: ViewTableProps< Item > ) {
 	const headerMenuRefs = useRef<
@@ -392,6 +425,8 @@ function ViewTable< Item >( {
 								selection={ selection }
 								getItemId={ getItemId }
 								onChangeSelection={ onChangeSelection }
+								onClick={ onClick }
+								isClickable={ isClickable }
 							/>
 						) ) }
 				</tbody>

packages/dataviews/src/types.ts

@@ -498,6 +498,8 @@ export interface ViewBaseProps< Item > {
 	onChangeSelection: SetSelection;
 	selection: string[];
 	setOpenedFilter: ( fieldId: string ) => void;
+	onClick: ( item: Item ) => void;
+	isClickable: ( item: Item ) => boolean;
 	view: View;
 	density: number;
 }

packages/edit-site/src/components/post-fields/index.js

@@ -36,12 +36,7 @@ import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import {
-	LAYOUT_GRID,
-	LAYOUT_TABLE,
-	OPERATOR_IS_ANY,
-} from '../../utils/constants';
-import { default as Link } from '../routes/link';
+import { OPERATOR_IS_ANY } from '../../utils/constants';
 
 // See https://github.com/WordPress/gutenberg/issues/55886
 // We do not support custom statutes at the moment.
@@ -139,7 +134,7 @@ function PostAuthorField( { item } ) {
 	);
 }
 
-function usePostFields( viewType ) {
+function usePostFields() {
 	const { records: authors, isResolving: isLoadingAuthors } =
 		useEntityRecords( 'root', 'user', { per_page: -1 } );
 
@@ -164,30 +159,10 @@ function usePostFields( viewType ) {
 						? item.title
 						: item.title?.raw,
 				render: ( { item } ) => {
-					const addLink =
-						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) &&
-						item.status !== 'trash';
 					const renderedTitle =
 						typeof item.title === 'string'
 							? item.title
 							: item.title?.rendered;
-					const title = addLink ? (
-						<Link
-							params={ {
-								postId: item.id,
-								postType: item.type,
-								canvas: 'edit',
-							} }
-						>
-							{ decodeEntities( renderedTitle ) ||
-								__( '(no title)' ) }
-						</Link>
-					) : (
-						<span>
-							{ decodeEntities( renderedTitle ) ||
-								__( '(no title)' ) }
-						</span>
-					);
 
 					let suffix = '';
 					if ( item.id === frontPageId ) {
@@ -210,7 +185,10 @@ function usePostFields( viewType ) {
 							alignment="center"
 							justify="flex-start"
 						>
-							{ title }
+							<span>
+								{ decodeEntities( renderedTitle ) ||
+									__( '(no title)' ) }
+							</span>
 							{ suffix }
 						</HStack>
 					);
@@ -355,7 +333,7 @@ function usePostFields( viewType ) {
 			},
 			passwordField,
 		],
-		[ authors, viewType, frontPageId, postsPageId ]
+		[ authors, frontPageId, postsPageId ]
 	);
 
 	return {