Data View - Page View: Add Featured Image Control

packages/base-styles/_z-index.scss

@@ -211,6 +211,9 @@ $z-layers: (
 
 	// Ensure footer stays above the preview field.
 	".dataviews-footer": 2,
+
+	// Needs to be below media library (.media-model) that has a z-index of 160000.
+	".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown": 160000 - 10,
 );
 
 @function z-index( $key ) {

packages/core-data/src/entity-types/attachment.ts

@@ -14,6 +14,40 @@ import type {
 
 import type { BaseEntityRecords as _BaseEntityRecords } from './base-entity-records';
 
+interface MediaDetails {
+	width: number;
+	height: number;
+	file: string;
+	filesize: number;
+	sizes: { [ key: string ]: Size };
+	image_meta: ImageMeta;
+	original_image?: string;
+}
+interface ImageMeta {
+	aperture: string;
+	credit: string;
+	camera: string;
+	caption: string;
+	created_timestamp: string;
+	copyright: string;
+	focal_length: string;
+	iso: string;
+	shutter_speed: string;
+	title: string;
+	orientation: string;
+	keywords: any[];
+}
+
+interface Size {
+	file: string;
+	width: number;
+	height: number;
+	filesize?: number;
+	mime_type: string;
+	source_url: string;
+	uncropped?: boolean;
+}
+
 declare module './base-entity-records' {
 	export namespace BaseEntityRecords {
 		export interface Attachment< C extends Context > {
@@ -124,7 +158,7 @@ declare module './base-entity-records' {
 			/**
 			 * Details about the media file, specific to its type.
 			 */
-			media_details: Record< string, string >;
+			media_details: MediaDetails;
 			/**
 			 * The ID for the associated post of the attachment.
 			 */

packages/dataviews/src/constants.ts

@@ -68,3 +68,6 @@ export const sortIcons = {
 export const LAYOUT_TABLE = 'table';
 export const LAYOUT_GRID = 'grid';
 export const LAYOUT_LIST = 'list';
+
+// Form layouts.
+export const LAYOUT_PANEL = 'panel';

packages/dataviews/src/dataforms-layouts/panel/index.tsx

@@ -18,6 +18,7 @@ import { closeSmall } from '@wordpress/icons';
  */
 import { normalizeFields } from '../../normalize-fields';
 import type { DataFormProps, NormalizedField, Field } from '../../types';
+import { LAYOUT_PANEL } from '../../constants';
 
 interface FormFieldProps< Item > {
 	data: Item;
@@ -111,7 +112,7 @@ function FormField< Item >( {
 							) }
 							onClick={ onToggle }
 						>
-							<field.render item={ data } />
+							<field.render item={ data } view={ LAYOUT_PANEL } />
 						</Button>
 					) }
 					renderContent={ ( { onClose } ) => (

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

@@ -24,6 +24,7 @@ import SingleSelectionCheckbox from '../../components/dataviews-selection-checkb
 import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
 import type { Action, NormalizedField, ViewGridProps } from '../../types';
 import type { SetSelection } from '../../private-types';
+import { LAYOUT_GRID } from '../../constants';
 
 interface GridItemProps< Item > {
 	selection: string[];
@@ -54,10 +55,10 @@ function GridItem< Item >( {
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
 	const renderedMediaField = mediaField?.render ? (
-		<mediaField.render item={ item } />
+		<mediaField.render item={ item } view={ LAYOUT_GRID } />
 	) : null;
 	const renderedPrimaryField = primaryField?.render ? (
-		<primaryField.render item={ item } />
+		<primaryField.render item={ item } view={ LAYOUT_GRID } />
 	) : null;
 	return (
 		<VStack
@@ -115,7 +116,10 @@ function GridItem< Item >( {
 								key={ field.id }
 								className="dataviews-view-grid__field-value"
 							>
-								<field.render item={ item } />
+								<field.render
+									item={ item }
+									view={ LAYOUT_GRID }
+								/>
 							</FlexItem>
 						);
 					} ) }
@@ -151,7 +155,10 @@ function GridItem< Item >( {
 										className="dataviews-view-grid__field-value"
 										style={ { maxHeight: 'none' } }
 									>
-										<field.render item={ item } />
+										<field.render
+											item={ item }
+											view={ LAYOUT_GRID }
+										/>
 									</FlexItem>
 								</>
 							</Flex>

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

@@ -36,6 +36,7 @@ import {
 	ActionModal,
 } from '../../components/dataviews-item-actions';
 import type { Action, NormalizedField, ViewListProps } from '../../types';
+import { LAYOUT_LIST } from '../../constants';
 
 interface ListViewItemProps< Item > {
 	actions: Action< Item >[];
@@ -178,13 +179,13 @@ function ListItem< Item >( {
 	}, [ actions, item ] );
 
 	const renderedMediaField = mediaField?.render ? (
-		<mediaField.render item={ item } />
+		<mediaField.render item={ item } view={ LAYOUT_LIST } />
 	) : (
 		<div className="dataviews-view-list__media-placeholder"></div>
 	);
 
 	const renderedPrimaryField = primaryField?.render ? (
-		<primaryField.render item={ item } />
+		<primaryField.render item={ item } view={ LAYOUT_LIST } />
 	) : null;
 
 	return (
@@ -249,7 +250,10 @@ function ListItem< Item >( {
 												{ field.label }
 											</VisuallyHidden>
 											<span className="dataviews-view-list__field-value">
-												<field.render item={ item } />
+												<field.render
+													item={ item }
+													view={ LAYOUT_LIST }
+												/>
 											</span>
 										</div>
 									) ) }

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

@@ -19,7 +19,7 @@ import { useEffect, useId, useRef, useState } from '@wordpress/element';
  */
 import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';
 import ItemActions from '../../components/dataviews-item-actions';
-import { sortValues } from '../../constants';
+import { LAYOUT_TABLE, sortValues } from '../../constants';
 import {
 	useSomeItemHasAPossibleBulkAction,
 	useHasAPossibleBulkAction,
@@ -110,7 +110,7 @@ function TableColumnField< Item >( {
 					primaryField?.id === field.id,
 			} ) }
 		>
-			<field.render { ...{ item } } />
+			<field.render { ...{ item } } view={ LAYOUT_TABLE } />
 		</div>
 	);
 }

packages/dataviews/src/types.ts

@@ -7,6 +7,12 @@ import type { ReactElement, ComponentType } from 'react';
  * Internal dependencies
  */
 import type { SetSelection } from './private-types';
+import type {
+	LAYOUT_GRID,
+	LAYOUT_LIST,
+	LAYOUT_PANEL,
+	LAYOUT_TABLE,
+} from './constants';
 
 export type SortDirection = 'asc' | 'desc';
 
@@ -106,7 +112,7 @@ export type Field< Item > = {
 	/**
 	 * Callback used to render the field. Defaults to `field.getValue`.
 	 */
-	render?: ComponentType< { item: Item } >;
+	render?: ComponentType< DataViewRenderFieldProps< Item > >;
 
 	/**
 	 * Callback used to render an edit control for the field.
@@ -159,7 +165,7 @@ export type NormalizedField< Item > = Field< Item > & {
 	label: string;
 	header: string | ReactElement;
 	getValue: ( args: { item: Item } ) => any;
-	render: ComponentType< { item: Item } >;
+	render: ComponentType< DataViewRenderFieldProps< Item > >;
 	Edit: ComponentType< DataFormControlProps< Item > >;
 	sort: ( a: Item, b: Item, direction: SortDirection ) => number;
 	isValid: ( item: Item, context?: ValidationContext ) => boolean;
@@ -189,6 +195,15 @@ export type DataFormControlProps< Item > = {
 	hideLabelFromVision?: boolean;
 };
 
+export type DataViewRenderFieldProps< Item > = {
+	item: Item;
+	view:
+		| typeof LAYOUT_LIST
+		| typeof LAYOUT_GRID
+		| typeof LAYOUT_TABLE
+		| typeof LAYOUT_PANEL;
+};
+
 /**
  * The filters applied to the dataset.
  */

packages/edit-site/package.json

@@ -48,6 +48,7 @@
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/escape-html": "file:../escape-html",
+		"@wordpress/fields": "file:../fields",
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",

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

@@ -60,13 +60,19 @@ function PostEditForm( { postType, postId } ) {
 	);
 	const form = {
 		type: 'panel',
-		fields: [ 'title', 'status', 'date', 'author', 'comment_status' ],
+		fields: [
+			'featured_media',
+			'title',
+			'author',
+			'date',
+			'comment_status',
+		],
 	};
 	const onChange = ( edits ) => {
 		for ( const id of ids ) {
 			if (
 				edits.status !== 'future' &&
-				record.status === 'future' &&
+				record?.status === 'future' &&
 				new Date( record.date ) > new Date()
 			) {
 				edits.date = null;

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

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
+import { featuredImageField } from '@wordpress/fields';
 import {
 	createInterpolateElement,
 	useMemo,
@@ -33,11 +34,9 @@ import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import {
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
-	LAYOUT_LIST,
 	OPERATOR_IS_ANY,
 } from '../../utils/constants';
-import { default as Link, useLink } from '../routes/link';
-import Media from '../media';
+import { default as Link } from '../routes/link';
 
 // See https://github.com/WordPress/gutenberg/issues/55886
 // We do not support custom statutes at the moment.
@@ -81,46 +80,6 @@ const getFormattedDate = ( dateToDisplay ) =>
 		getDate( dateToDisplay )
 	);
 
-function FeaturedImage( { item, viewType } ) {
-	const isDisabled = item.status === 'trash';
-	const { onClick } = useLink( {
-		postId: item.id,
-		postType: item.type,
-		canvas: 'edit',
-	} );
-	const hasMedia = !! item.featured_media;
-	const size =
-		viewType === LAYOUT_GRID
-			? [ 'large', 'full', 'medium', 'thumbnail' ]
-			: [ 'thumbnail', 'medium', 'large', 'full' ];
-	const media = hasMedia ? (
-		<Media
-			className="edit-site-post-list__featured-image"
-			id={ item.featured_media }
-			size={ size }
-		/>
-	) : null;
-	const renderButton = viewType !== LAYOUT_LIST && ! isDisabled;
-	return (
-		<div
-			className={ `edit-site-post-list__featured-image-wrapper is-layout-${ viewType }` }
-		>
-			{ renderButton ? (
-				<button
-					className="edit-site-post-list__featured-image-button"
-					type="button"
-					onClick={ onClick }
-					aria-label={ item.title?.rendered || __( '(no title)' ) }
-				>
-					{ media }
-				</button>
-			) : (
-				media
-			) }
-		</div>
-	);
-}
-
 function PostStatusField( { item } ) {
 	const status = STATUSES.find( ( { value } ) => value === item.status );
 	const label = status?.label || item.status;
@@ -190,15 +149,7 @@ function usePostFields( viewType ) {
 
 	const fields = useMemo(
 		() => [
-			{
-				id: 'featured-image',
-				label: __( 'Featured Image' ),
-				getValue: ( { item } ) => item.featured_media,
-				render: ( { item } ) => (
-					<FeaturedImage item={ item } viewType={ viewType } />
-				),
-				enableSorting: false,
-			},
+			featuredImageField,
 			{
 				label: __( 'Title' ),
 				id: 'title',

packages/edit-site/src/components/post-fields/style.scss

@@ -0,0 +1,3 @@
+.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
+	z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown");
+}

packages/edit-site/src/components/sidebar-dataviews/default-views.js

@@ -30,10 +30,8 @@ export const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
 			primaryField: 'title',
+			mediaField: 'featured_media',
 			styles: {
-				'featured-image': {
-					width: '1%',
-				},
 				title: {
 					maxWidth: 300,
 				},
@@ -42,14 +40,14 @@ export const defaultLayouts = {
 	},
 	[ LAYOUT_GRID ]: {
 		layout: {
-			mediaField: 'featured-image',
+			mediaField: 'featured_media',
 			primaryField: 'title',
 		},
 	},
 	[ LAYOUT_LIST ]: {
 		layout: {
 			primaryField: 'title',
-			mediaField: 'featured-image',
+			mediaField: 'featured_media',
 		},
 	},
 };