Data View - Page View: Add Featured Image Control

packages/base-styles/_z-index.scss

@@ -213,6 +213,9 @@ $z-layers: (
 
 	// Ensure quick actions toolbar appear above pagination
 	".dataviews-bulk-actions-toolbar": 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/dataviews/src/components/dataform/stories/index.story.tsx

@@ -76,6 +76,11 @@ const fields = [
 			{ value: 'published', label: 'Published' },
 		],
 	},
+	{
+		id: 'image',
+		label: 'Image',
+		type: 'image' as const,
+	},
 ];
 
 export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
@@ -87,6 +92,7 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 		reviewer: 'fulano',
 		date: '2021-01-01T12:00:00',
 		birthdate: '1950-02-23T12:00:00',
+		image: 'https://picsum.photos/200',
 	} );
 
 	const form = {
@@ -98,6 +104,7 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 			'status',
 			'date',
 			'birthdate',
+			'image',
 		],
 	};
 

packages/dataviews/src/dataform-controls/image.tsx

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	FormFileUpload,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { DataFormControlProps } from '../types';
+
+export default function Image< Item >( {
+	data,
+	field,
+	onChange,
+}: DataFormControlProps< Item > ) {
+	const { id } = field;
+	const value = field.getValue( { item: data } );
+
+	const onChangeControl = useCallback(
+		( newValue: string ) =>
+			onChange( {
+				[ id ]: newValue,
+			} ),
+		[ id, onChange ]
+	);
+
+	return (
+		<fieldset className="dataviews-controls__image">
+			{ value && (
+				<img
+					src={ value }
+					alt=""
+					style={ {
+						maxWidth: '200px',
+						maxHeight: '200px',
+					} }
+				/>
+			) }
+			<HStack>
+				<FormFileUpload
+					accept="image/*"
+					onChange={ ( event ) => {
+						if ( event.target.files?.length ) {
+							const objectUrl = URL.createObjectURL(
+								event.target.files[ 0 ]
+							);
+							onChangeControl( objectUrl );
+						}
+					} }
+				>
+					<Button variant="primary">Upload</Button>
+				</FormFileUpload>
+				{ value && (
+					<Button
+						variant="secondary"
+						onClick={ () => {
+							onChangeControl( '' );
+						} }
+					>
+						Clean
+					</Button>
+				) }
+			</HStack>
+		</fieldset>
+	);
+}

packages/dataviews/src/dataform-controls/index.tsx

@@ -16,6 +16,7 @@ import integer from './integer';
 import radio from './radio';
 import select from './select';
 import text from './text';
+import image from './image';
 
 interface FormControls {
 	[ key: string ]: ComponentType< DataFormControlProps< any > >;
@@ -27,6 +28,7 @@ const FORM_CONTROLS: FormControls = {
 	radio,
 	select,
 	text,
+	image,
 };
 
 export function getControl< Item >(

packages/dataviews/src/field-types/image.tsx

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+
+export default {
+	sort: () => 0,
+	isValid: () => true,
+	Edit: 'image',
+};

packages/dataviews/src/field-types/index.tsx

@@ -5,6 +5,7 @@ import type { FieldType, SortDirection, ValidationContext } from '../types';
 import { default as integer } from './integer';
 import { default as text } from './text';
 import { default as datetime } from './datetime';
+import { default as image } from './image';
 
 /**
  *
@@ -25,6 +26,10 @@ export default function getFieldTypeDefinition( type?: FieldType ) {
 		return datetime;
 	}
 
+	if ( 'image' === type ) {
+		return image;
+	}
+
 	return {
 		sort: ( a: any, b: any, direction: SortDirection ) => {
 			if ( typeof a === 'number' && typeof b === 'number' ) {

packages/dataviews/src/types.ts

@@ -42,7 +42,7 @@ export type Operator =
 	| 'isAll'
 	| 'isNotAll';
 
-export type FieldType = 'text' | 'integer' | 'datetime';
+export type FieldType = 'text' | 'integer' | 'datetime' | 'image';
 
 export type ValidationContext = {
 	elements?: Option[];

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

@@ -60,7 +60,13 @@ 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 ) {