migrate featured image to fields package

WordPress · Sep 18, 2024 · 8356977 · 8356977
1 parent cd9fe2f
commit 8356977
Show file tree

Hide file tree

Showing 19 changed files with 402 additions and 214 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core-data/src/entity-types/attachment.ts b/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.
 			 */

diff --git a/packages/dataviews/src/constants.ts b/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';
diff --git a/packages/dataviews/src/dataforms-layouts/panel/index.tsx b/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 } ) => (

diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/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>

diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/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>
 									) ) }

diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/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>
 	);
 }

diff --git a/packages/dataviews/src/types.ts b/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.
  */

diff --git a/packages/edit-site/package.json b/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",

diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js
@@ -72,7 +72,7 @@ function PostEditForm( { postType, postId } ) {
 		for ( const id of ids ) {
 			if (
 				edits.status !== 'future' &&
-				record.status === 'future' &&
+				record?.status === 'future' &&
 				new Date( record.date ) > new Date()
 			) {
 				edits.date = null;