QuickEdit: Add Featured Image Control

packages/base-styles/_z-index.scss

@@ -206,6 +206,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/types.ts

@@ -106,7 +106,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 +159,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;
@@ -181,6 +181,10 @@ export type DataFormControlProps< Item > = {
 	hideLabelFromVision?: boolean;
 };
 
+export type DataViewRenderFieldProps< Item > = {
+	item: Item;
+};
+
 /**
  * The filters applied to the dataset.
  */

packages/edit-site/package.json

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

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

@@ -60,14 +60,20 @@ 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 &&
 				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

@@ -31,9 +31,6 @@ export const defaultLayouts = {
 		layout: {
 			primaryField: 'title',
 			styles: {
-				'featured-image': {
-					width: '1%',
-				},
 				title: {
 					maxWidth: 300,
 				},
@@ -42,14 +39,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',
 		},
 	},
 };

packages/edit-site/src/style.scss

@@ -1,4 +1,5 @@
 @import "../../dataviews/src/style.scss";
+@import "../../fields/src/fields/featured-image/style.scss";
 
 @import "./components/add-new-template/style.scss";
 @import "./components/block-editor/style.scss";
@@ -30,6 +31,7 @@
 @import "./components/editor-canvas-container/style.scss";
 @import "./components/post-edit/style.scss";
 @import "./components/post-list/style.scss";
+@import "./components/post-fields/style.scss";
 @import "./components/resizable-frame/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
 @import "./components/global-styles/font-library-modal/style.scss";

packages/fields/README.md

@@ -38,6 +38,10 @@ Undocumented declaration.
 
 Undocumented declaration.
 
+### featuredImageField
+
+Undocumented declaration.
+
 ### orderField
 
 Undocumented declaration.

packages/fields/package.json

@@ -45,10 +45,12 @@
 		"@wordpress/html-entities": "*",
 		"@wordpress/i18n": "*",
 		"@wordpress/icons": "*",
+		"@wordpress/media-utils": "*",
 		"@wordpress/notices": "*",
 		"@wordpress/patterns": "*",
 		"@wordpress/primitives": "*",
 		"@wordpress/private-apis": "*",
+		"@wordpress/router": "*",
 		"@wordpress/url": "*",
 		"@wordpress/warning": "*",
 		"change-case": "4.1.2",