Add: Media field changin ui to dataviews and content preview field to…

… pages

packages/dataviews/src/components/dataviews-view-config/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { ChangeEvent } from 'react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -25,8 +26,15 @@ import {
 	BaseControl,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { memo, useContext, useMemo } from '@wordpress/element';
-import { chevronDown, chevronUp, cog, seen, unseen } from '@wordpress/icons';
+import { memo, useContext, useMemo, useState } from '@wordpress/element';
+import {
+	chevronDown,
+	chevronUp,
+	cog,
+	seen,
+	unseen,
+	moreVertical,
+} from '@wordpress/icons';
 import warning from '@wordpress/warning';
 import { useInstanceId } from '@wordpress/compose';
 
@@ -37,6 +45,7 @@ import {
 	SORTING_DIRECTIONS,
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
+	LAYOUT_LIST,
 	sortIcons,
 	sortLabels,
 } from '../../constants';
@@ -239,6 +248,47 @@ function ItemsPerPageControl() {
 	);
 }
 
+function BaseFieldItem( {
+	label,
+	subLabel,
+	actions,
+	isInteracting,
+}: {
+	label: string;
+	subLabel?: string;
+	actions: React.ReactNode;
+	isInteracting?: boolean;
+} ) {
+	return (
+		<Item>
+			<HStack
+				expanded
+				className={ clsx( 'dataviews-field-control__field', {
+					'is-interacting': isInteracting,
+				} ) }
+			>
+				<div>
+					<span className="dataviews-field-control__field-label">
+						{ label }
+					</span>
+					{ subLabel && (
+						<span className="dataviews-field-control__field-sub-label">
+							{ subLabel }
+						</span>
+					) }
+				</div>
+				<HStack
+					justify="flex-end"
+					expanded={ false }
+					className="dataviews-field-control__actions"
+				>
+					{ actions }
+				</HStack>
+			</HStack>
+		</Item>
+	);
+}
+
 interface FieldItemProps {
 	id: any;
 	label: string;
@@ -261,17 +311,10 @@ function FieldItem( {
 	const visibleFieldIds = getVisibleFieldIds( view, fields );
 
 	return (
-		<Item key={ id }>
-			<HStack
-				expanded
-				className={ `dataviews-field-control__field dataviews-field-control__field-${ id }` }
-			>
-				<span>{ label }</span>
-				<HStack
-					justify="flex-end"
-					expanded={ false }
-					className="dataviews-field-control__actions"
-				>
+		<BaseFieldItem
+			label={ label }
+			actions={
+				<>
 					{ view.type === LAYOUT_TABLE && isVisible && (
 						<>
 							<Button
@@ -371,12 +414,80 @@ function FieldItem( {
 								  )
 						}
 					/>
-				</HStack>
-			</HStack>
-		</Item>
+				</>
+			}
+		/>
 	);
 }
 
+function PreviewFieldItem( {
+	fields,
+	view,
+	onChangeView,
+}: {
+	fields: Field< any >[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+} ) {
+	const [ isChangingPreview, setIsChangingPreview ] =
+		useState< boolean >( false );
+	const mediaFields = useMemo( () => {
+		return fields.filter( ( field ) => field.isMediaField );
+	}, [ fields ] );
+	if (
+		mediaFields.length >= 2 &&
+		( view.type === LAYOUT_GRID || view.type === LAYOUT_LIST )
+	) {
+		const mediaFieldId = view.layout?.mediaField;
+		const mediaField = mediaFields.find(
+			( field ) => field.id === mediaFieldId
+		);
+		return (
+			<BaseFieldItem
+				label={ __( 'Preview' ) }
+				isInteracting={ isChangingPreview }
+				subLabel={ mediaField?.label }
+				actions={
+					<Menu
+						trigger={
+							<Button
+								size="compact"
+								icon={ moreVertical }
+								label={ __( 'Preview' ) }
+							/>
+						}
+						onOpenChange={ setIsChangingPreview }
+					>
+						{ mediaFields.map( ( field ) => {
+							return (
+								<Menu.RadioItem
+									key={ field.id }
+									value={ field.id }
+									checked={ field.id === mediaFieldId }
+									onChange={ () => {
+										onChangeView( {
+											...view,
+											layout: {
+												...view.layout,
+												mediaField: field.id,
+											},
+										} );
+									} }
+								>
+									<Menu.ItemLabel>
+										{ field.label }
+									</Menu.ItemLabel>
+								</Menu.RadioItem>
+							);
+						} ) }
+					</Menu>
+				}
+			/>
+		);
+	}
+	return null;
+}
+
 function FieldControl() {
 	const { view, fields, onChangeView } = useContext( DataViewsContext );
 
@@ -439,6 +550,11 @@ function FieldControl() {
 		<VStack spacing={ 6 } className="dataviews-field-control">
 			{ !! visibleFields?.length && (
 				<ItemGroup isBordered isSeparated>
+					<PreviewFieldItem
+						fields={ fields }
+						view={ view }
+						onChangeView={ onChangeView }
+					/>
 					{ visibleFields.map( ( field ) => (
 						<FieldItem
 							key={ field.id }

packages/dataviews/src/components/dataviews-view-config/style.scss

@@ -61,9 +61,22 @@
 }
 
 .dataviews-field-control__field:hover,
-.dataviews-field-control__field:focus-within {
+.dataviews-field-control__field:focus-within,
+.dataviews-field-control__field.is-interacting {
 	.dataviews-field-control__actions {
 		position: unset;
 		top: unset;
 	}
 }
+
+.dataviews-field-control__field-label {
+	display: block;
+}
+
+.dataviews-field-control__field-sub-label {
+	margin-top: $grid-unit-10;
+	margin-bottom: 0;
+	font-size: 11px;
+	font-style: normal;
+	color: $gray-700;
+}

packages/dataviews/src/dataviews-layouts/index.ts

@@ -100,24 +100,24 @@ export function getVisibleFieldIds(
 	return visibleFields;
 }
 
+function getMediaFieldIds( fields: Field< any >[] ): string[] {
+	return fields
+		.filter( ( { isMediaField } ) => isMediaField )
+		.map( ( { id } ) => id );
+}
+
 export function getHiddenFieldIds(
 	view: View,
 	fields: Field< any >[]
 ): string[] {
 	const fieldsToExclude = [
 		...getCombinedFieldIds( view ),
 		...getVisibleFieldIds( view, fields ),
+		...( view.type === LAYOUT_GRID || view.type === LAYOUT_LIST
+			? getMediaFieldIds( fields )
+			: [] ),
 	];
 
-	// The media field does not need to be in the view.fields to be displayed.
-	if ( view.type === LAYOUT_GRID && view.layout?.mediaField ) {
-		fieldsToExclude.push( view.layout?.mediaField );
-	}
-
-	if ( view.type === LAYOUT_LIST && view.layout?.mediaField ) {
-		fieldsToExclude.push( view.layout?.mediaField );
-	}
-
 	return fields
 		.filter(
 			( { id, enableHiding } ) =>

packages/dataviews/src/types.ts

@@ -158,6 +158,11 @@ export type Field< Item > = {
 	 * Defaults to `item[ field.id ]`.
 	 */
 	getValue?: ( args: { item: Item } ) => any;
+
+	/**
+	 * True if the field is supposed to be used as a media field.
+	 */
+	isMediaField?: boolean;
 };
 
 export type NormalizedField< Item > = Field< Item > & {

packages/editor/README.md

@@ -379,7 +379,7 @@ _Parameters_
 -   _props.post_ `[Object]`: The post object to edit. This is required.
 -   _props.\_\_unstableTemplate_ `[Object]`: The template object wrapper the edited post. This is optional and can only be used when the post type supports templates (like posts and pages).
 -   _props.settings_ `[Object]`: The settings object to use for the editor. This is optional and can be used to override the default settings.
--   _props.children_ `[Element]`: Children elements for which the BlockEditorProvider context should apply. This is optional.
+-   _props.children_ `[React.ReactNode]`: Children elements for which the BlockEditorProvider context should apply. This is optional.
 
 _Returns_
 

packages/editor/src/components/provider/index.js

@@ -391,14 +391,14 @@ export const ExperimentalEditorProvider = withRegistryProvider(
  *
  * All modification and changes are performed to the `@wordpress/core-data` store.
  *
- * @param {Object}  props                      The component props.
- * @param {Object}  [props.post]               The post object to edit. This is required.
- * @param {Object}  [props.__unstableTemplate] The template object wrapper the edited post.
- *                                             This is optional and can only be used when the post type supports templates (like posts and pages).
- * @param {Object}  [props.settings]           The settings object to use for the editor.
- *                                             This is optional and can be used to override the default settings.
- * @param {Element} [props.children]           Children elements for which the BlockEditorProvider context should apply.
- *                                             This is optional.
+ * @param {Object}          props                      The component props.
+ * @param {Object}          [props.post]               The post object to edit. This is required.
+ * @param {Object}          [props.__unstableTemplate] The template object wrapper the edited post.
+ *                                                     This is optional and can only be used when the post type supports templates (like posts and pages).
+ * @param {Object}          [props.settings]           The settings object to use for the editor.
+ *                                                     This is optional and can be used to override the default settings.
+ * @param {React.ReactNode} [props.children]           Children elements for which the BlockEditorProvider context should apply.
+ *                                                     This is optional.
  *
  * @example
  * ```jsx

packages/editor/src/dataviews/fields/content-preview/content-preview-view.tsx

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+// @ts-ignore
+import { parse } from '@wordpress/blocks';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+	// @ts-ignore
+} from '@wordpress/block-editor';
+import type { BasePost } from '@wordpress/fields';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { EditorProvider } from '../../../components/provider';
+import { unlock } from '../../../lock-unlock';
+// @ts-ignore
+import { store as editorStore } from '../../../store';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+function ContentPreviewContainer( {
+	children,
+}: {
+	children: React.ReactNode;
+} ) {
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	return (
+		<div
+			className="editor-fields-content-preview"
+			style={ {
+				backgroundColor,
+			} }
+		>
+			{ children }
+		</div>
+	);
+}
+
+export default function ContentPreviewView( { item }: { item: BasePost } ) {
+	const settings = useSelect( ( select ) => {
+		return select( editorStore ).getEditorSettings();
+	}, [] );
+
+	const content =
+		typeof item.content === 'string' ? item.content : item.content.raw;
+	const blocks = useMemo( () => {
+		return parse( content );
+	}, [ content ] );
+	const isEmpty = ! blocks?.length;
+	// Wrap everything in a block editor provider to ensure 'styles' that are needed
+	// for the previews are synced between the site editor store and the block editor store.
+	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
+	// render patterns inside the previews.
+	// TODO: Same approach is used in the patterns list and it becomes obvious that some of
+	// the block editor settings are needed in context where we don't have the block editor.
+	// Explore how we can solve this in a better way.
+	return (
+		<EditorProvider post={ item } settings={ settings }>
+			<ContentPreviewContainer>
+				{ isEmpty && (
+					<span className="editor-fields-content-preview__empty">
+						{ __( 'Empty content' ) }
+					</span>
+				) }
+				{ ! isEmpty && (
+					<BlockPreview.Async>
+						<BlockPreview blocks={ blocks } />
+					</BlockPreview.Async>
+				) }
+			</ContentPreviewContainer>
+		</EditorProvider>
+	);
+}