From cfe2cc0c245c63008c778bf5389ae287e84ec118 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Mon, 16 Dec 2024 18:07:02 +0000
Subject: [PATCH 01/10] Add: Media field changing ui to Dataviews and content
 preview field to posts and pages.

---
 .../dataviews-view-config/index.tsx           | 204 ++++++++++++++++--
 .../dataviews-view-config/style.scss          |  17 +-
 packages/dataviews/src/types.ts               |   5 +
 packages/editor/README.md                     |   2 +-
 .../editor/src/components/provider/index.js   |   2 +-
 .../content-preview/content-preview-view.tsx  | 108 ++++++++++
 .../fields/content-preview/index.tsx          |  22 ++
 .../fields/content-preview/style.scss         |  21 ++
 .../src/dataviews/store/private-actions.ts    |   2 +
 packages/editor/src/style.scss                |   1 +
 packages/fields/README.md                     |   4 +
 .../fields/src/fields/featured-image/index.ts |   1 +
 packages/fields/src/index.ts                  |   2 +-
 13 files changed, 364 insertions(+), 27 deletions(-)
 create mode 100644 packages/editor/src/dataviews/fields/content-preview/content-preview-view.tsx
 create mode 100644 packages/editor/src/dataviews/fields/content-preview/index.tsx
 create mode 100644 packages/editor/src/dataviews/fields/content-preview/style.scss

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 0b3512714e14a4..c1fe6b130a1610 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, ReactNode } from 'react';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -26,7 +27,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { memo, useContext, useMemo } from '@wordpress/element';
+import { memo, useContext, useMemo, useState } from '@wordpress/element';
 import {
 	chevronDown,
 	chevronUp,
@@ -34,6 +35,7 @@ import {
 	seen,
 	unseen,
 	lock,
+	moreVertical,
 } from '@wordpress/icons';
 import warning from '@wordpress/warning';
 import { useInstanceId } from '@wordpress/compose';
@@ -253,24 +255,34 @@ function ItemsPerPageControl() {
 	);
 }
 
-function FieldItem( {
-	field,
+function BaseFieldItem( {
+	fieldId,
+	label,
+	subLabel,
 	isVisible,
 	isFirst,
 	isLast,
 	canMove = true,
+	canHide = true,
+	isInteracting = false,
 	onToggleVisibility,
 	onMoveUp,
 	onMoveDown,
+	additionalActions,
 }: {
-	field: NormalizedField< any >;
+	fieldId: string;
+	label: string;
+	subLabel?: string;
 	isVisible: boolean;
 	isFirst?: boolean;
 	isLast?: boolean;
 	canMove?: boolean;
+	canHide?: boolean;
+	isInteracting?: boolean;
 	onToggleVisibility?: () => void;
 	onMoveUp?: () => void;
 	onMoveDown?: () => void;
+	additionalActions?: ReactNode;
 } ) {
 	const focusVisibilityField = () => {
 		// Focus the visibility button to avoid focus loss.
@@ -278,7 +290,7 @@ function FieldItem( {
 		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
 		setTimeout( () => {
 			const element = document.querySelector(
-				`.dataviews-field-control__field-${ field.id } .dataviews-field-control__field-visibility-button`
+				`.dataviews-field-control__field-${ fieldId } .dataviews-field-control__field-visibility-button`
 			);
 			if ( element instanceof HTMLElement ) {
 				element.focus();
@@ -290,16 +302,25 @@ function FieldItem( {
 		<Item>
 			<HStack
 				expanded
-				className={ `dataviews-field-control__field dataviews-field-control__field-${ field.id }` }
+				className={ clsx(
+					'dataviews-field-control__field',
+					`dataviews-field-control__field-${ fieldId }`,
+					{ 'is-interacting': isInteracting }
+				) }
 				justify="flex-start"
 			>
 				<span className="dataviews-field-control__icon">
-					{ ! canMove && ! field.enableHiding && (
-						<Icon icon={ lock } />
-					) }
+					{ ! canMove && ! canHide && <Icon icon={ lock } /> }
 				</span>
+				<span className="dataviews-field-control__label-sub-label-container">
 				<span className="dataviews-field-control__label">
-					{ field.label }
+						{ label }
+					</span>
+					{ subLabel && (
+						<span className="dataviews-field-control__sub-label">
+							{ subLabel }
+						</span>
+					) }
 				</span>
 				<HStack
 					justify="flex-end"
@@ -320,7 +341,7 @@ function FieldItem( {
 										: sprintf(
 												/* translators: %s: field label */
 												__( 'Move %s up' ),
-												field.label
+												label
 										  )
 								}
 							/>
@@ -336,7 +357,7 @@ function FieldItem( {
 										: sprintf(
 												/* translators: %s: field label */
 												__( 'Move %s down' ),
-												field.label
+												label
 										  )
 								}
 							/>
@@ -345,7 +366,7 @@ function FieldItem( {
 					{ onToggleVisibility && (
 						<Button
 							className="dataviews-field-control__field-visibility-button"
-							disabled={ ! field.enableHiding }
+							disabled={ ! canHide }
 							accessibleWhenDisabled
 							size="compact"
 							onClick={ () => {
@@ -358,22 +379,58 @@ function FieldItem( {
 									? sprintf(
 											/* translators: %s: field label */
 											_x( 'Hide %s', 'field' ),
-											field.label
+											label
 									  )
 									: sprintf(
 											/* translators: %s: field label */
 											_x( 'Show %s', 'field' ),
-											field.label
+											label
 									  )
 							}
 						/>
 					) }
+					{ additionalActions }
 				</HStack>
 			</HStack>
 		</Item>
 	);
 }
 
+function FieldItem( {
+	field,
+	isVisible,
+	isFirst,
+	isLast,
+	canMove = true,
+	onToggleVisibility,
+	onMoveUp,
+	onMoveDown,
+}: {
+	field: NormalizedField< any >;
+	isVisible: boolean;
+	isFirst?: boolean;
+	isLast?: boolean;
+	canMove?: boolean;
+	onToggleVisibility?: () => void;
+	onMoveUp?: () => void;
+	onMoveDown?: () => void;
+} ) {
+	return (
+		<BaseFieldItem
+			fieldId={ field.id }
+			label={ field.label }
+			isVisible={ isVisible }
+			isFirst={ isFirst }
+			isLast={ isLast }
+			canMove={ canMove }
+			canHide={ field.enableHiding }
+			onToggleVisibility={ onToggleVisibility }
+			onMoveUp={ onMoveUp }
+			onMoveDown={ onMoveDown }
+		/>
+	);
+}
+
 function RegularFieldItem( {
 	index,
 	field,
@@ -445,6 +502,77 @@ function RegularFieldItem( {
 	);
 }
 
+function MediaFieldItem( {
+	view,
+	onChangeView,
+	isVisible = true,
+	mediaFields,
+	activeField,
+}: {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	isVisible?: boolean;
+	mediaFields: NormalizedField< any >[];
+	activeField: NormalizedField< any > | undefined;
+} ) {
+	const [ isChangingPreview, setIsChangingPreview ] =
+		useState< boolean >( false );
+	if ( ! activeField ) {
+		return null;
+	}
+	return (
+		<BaseFieldItem
+			fieldId="preview"
+			label={ __( 'Preview' ) }
+			subLabel={ activeField.label }
+			isVisible={ isVisible }
+			onToggleVisibility={ () => {
+				onChangeView( {
+					...view,
+					showMedia: ! isVisible,
+				} );
+			} }
+			canMove={ false }
+			canHide
+			isInteracting={ isChangingPreview }
+			additionalActions={
+				isVisible && (
+					<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 === view.mediaField }
+									onChange={ () => {
+										onChangeView( {
+											...view,
+											mediaField: field.id,
+										} );
+									} }
+								>
+									<Menu.ItemLabel>
+										{ field.label }
+									</Menu.ItemLabel>
+								</Menu.RadioItem>
+							);
+						} ) }
+					</Menu>
+				)
+			}
+		/>
+	);
+}
+
 function isDefined< T >( item: T | undefined ): item is T {
 	return !! item;
 }
@@ -461,7 +589,8 @@ function FieldControl() {
 	const hiddenFields = fields.filter(
 		( f ) =>
 			! visibleFieldIds.includes( f.id ) &&
-			! togglableFields.includes( f.id )
+			! togglableFields.includes( f.id ) &&
+			! f.isMediaField
 	);
 	const visibleFields = visibleFieldIds
 		.map( ( fieldId ) => fields.find( ( f ) => f.id === fieldId ) )
@@ -475,6 +604,23 @@ function FieldControl() {
 	const descriptionField = fields.find(
 		( f ) => f.id === view.descriptionField
 	);
+
+	const mediaFields = fields.filter( ( f ) => f.isMediaField );
+
+	let mediaFieldUI;
+	if ( mediaFields.length > 1 ) {
+		const isMediaFieldVisible =
+			isDefined( mediaField ) && ( view.showMedia ?? true );
+		mediaFieldUI = (
+			<MediaFieldItem
+				view={ view }
+				onChangeView={ onChangeView }
+				isVisible={ isMediaFieldVisible }
+				mediaFields={ mediaFields }
+				activeField={ mediaField }
+			/>
+		);
+	}
 	const lockedFields = [
 		{
 			field: titleField,
@@ -483,6 +629,7 @@ function FieldControl() {
 		{
 			field: mediaField,
 			isVisibleFlag: 'showMedia',
+			ui: mediaFieldUI,
 		},
 		{
 			field: descriptionField,
@@ -493,12 +640,20 @@ function FieldControl() {
 		( { field, isVisibleFlag } ) =>
 			// @ts-expect-error
 			isDefined( field ) && ( view[ isVisibleFlag ] ?? true )
-	) as Array< { field: NormalizedField< any >; isVisibleFlag: string } >;
+	) as Array< {
+		field: NormalizedField< any >;
+		isVisibleFlag: string;
+		ui?: ReactNode;
+	} >;
 	const hiddenLockedFields = lockedFields.filter(
 		( { field, isVisibleFlag } ) =>
 			// @ts-expect-error
 			isDefined( field ) && ! ( view[ isVisibleFlag ] ?? true )
-	) as Array< { field: NormalizedField< any >; isVisibleFlag: string } >;
+	) as Array< {
+		field: NormalizedField< any >;
+		isVisibleFlag: string;
+		ui?: ReactNode;
+	} >;
 
 	return (
 		<VStack className="dataviews-field-control" spacing={ 6 }>
@@ -507,8 +662,9 @@ function FieldControl() {
 					!! visibleFields?.length ) && (
 					<ItemGroup isBordered isSeparated>
 						{ visibleLockedFields.map(
-							( { field, isVisibleFlag } ) => {
+							( { field, isVisibleFlag, ui } ) => {
 								return (
+									ui ?? (
 									<FieldItem
 										key={ field.id }
 										field={ field }
@@ -521,6 +677,7 @@ function FieldControl() {
 										} }
 										canMove={ false }
 									/>
+									)
 								);
 							}
 						) }
@@ -550,8 +707,9 @@ function FieldControl() {
 						<ItemGroup isBordered isSeparated>
 							{ hiddenLockedFields.length > 0 &&
 								hiddenLockedFields.map(
-									( { field, isVisibleFlag } ) => {
+									( { field, isVisibleFlag, ui } ) => {
 										return (
+											ui ?? (
 											<FieldItem
 												key={ field.id }
 												field={ field }
@@ -559,11 +717,13 @@ function FieldControl() {
 												onToggleVisibility={ () => {
 													onChangeView( {
 														...view,
-														[ isVisibleFlag ]: true,
+															[ isVisibleFlag ]:
+																true,
 													} );
 												} }
 												canMove={ false }
 											/>
+											)
 										);
 									}
 								) }
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 692dddfb7a90b4..fc38e345ec4ce2 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -68,7 +68,8 @@
 }
 
 .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;
@@ -80,6 +81,18 @@
 	width: $icon-size;
 }
 
-.dataviews-field-control__label {
+.dataviews-field-control__label-sub-label-container {
 	flex-grow: 1;
 }
+
+.dataviews-field-control__label {
+	display: block;
+}
+
+.dataviews-field-control__sub-label {
+	margin-top: $grid-unit-10;
+	margin-bottom: 0;
+	font-size: 11px;
+	font-style: normal;
+	color: $gray-700;
+}
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 820f75364df204..ffbe607c109d97 100644
--- a/packages/dataviews/src/types.ts
+++ b/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 > & {
diff --git a/packages/editor/README.md b/packages/editor/README.md
index c006ec097982c9..3119f3f289637a 100644
--- a/packages/editor/README.md
+++ b/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_
 
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index 1259eae623de93..08f41e014d6003 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -397,7 +397,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
  *                                             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.
+ * @param {React.ReactNode} [props.children]           Children elements for which the BlockEditorProvider context should apply.
  *                                             This is optional.
  *
  * @example
diff --git a/packages/editor/src/dataviews/fields/content-preview/content-preview-view.tsx b/packages/editor/src/dataviews/fields/content-preview/content-preview-view.tsx
new file mode 100644
index 00000000000000..abe1256d21b8e8
--- /dev/null
+++ b/packages/editor/src/dataviews/fields/content-preview/content-preview-view.tsx
@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+	// @ts-ignore
+} from '@wordpress/block-editor';
+import type { BasePost } from '@wordpress/fields';
+import { useSelect } from '@wordpress/data';
+import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-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( {
+	template,
+	post,
+}: {
+	template: any;
+	post: any;
+} ) {
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const [ postBlocks ] = useEntityBlockEditor( 'postType', post.type, {
+		id: post.id,
+	} );
+	const [ templateBlocks ] = useEntityBlockEditor(
+		'postType',
+		template?.type,
+		{
+			id: template?.id,
+		}
+	);
+	const blocks = template && templateBlocks ? templateBlocks : postBlocks;
+	const isEmpty = ! blocks?.length;
+	return (
+		<div
+			className="editor-fields-content-preview"
+			style={ {
+				backgroundColor,
+			} }
+		>
+			{ isEmpty && (
+				<span className="editor-fields-content-preview__empty">
+					{ __( 'Empty content' ) }
+				</span>
+			) }
+			{ ! isEmpty && (
+				<BlockPreview.Async>
+					<BlockPreview blocks={ blocks } />
+				</BlockPreview.Async>
+			) }
+		</div>
+	);
+}
+
+export default function ContentPreviewView( { item }: { item: BasePost } ) {
+	const { settings, template } = useSelect(
+		( select ) => {
+			const { canUser, getPostType, getTemplateId, getEntityRecord } =
+				unlock( select( coreStore ) );
+			const canViewTemplate = canUser( 'read', {
+				kind: 'postType',
+				name: 'wp_template',
+			} );
+			const _settings = select( editorStore ).getEditorSettings();
+			// @ts-ignore
+			const supportsTemplateMode = _settings.supportsTemplateMode;
+			const isViewable = getPostType( item.type )?.viewable ?? false;
+
+			const templateId =
+				supportsTemplateMode && isViewable && canViewTemplate
+					? getTemplateId( item.type, item.id )
+					: null;
+			return {
+				settings: _settings,
+				template: templateId
+					? getEntityRecord( 'postType', 'wp_template', templateId )
+					: undefined,
+			};
+		},
+		[ item.type, item.id ]
+	);
+	// 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 }
+			__unstableTemplate={ template }
+		>
+			<ContentPreviewContainer template={ template } post={ item } />
+		</EditorProvider>
+	);
+}
diff --git a/packages/editor/src/dataviews/fields/content-preview/index.tsx b/packages/editor/src/dataviews/fields/content-preview/index.tsx
new file mode 100644
index 00000000000000..53c8acca396b04
--- /dev/null
+++ b/packages/editor/src/dataviews/fields/content-preview/index.tsx
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import type { BasePost } from '@wordpress/fields';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ContentPreviewView from './content-preview-view';
+
+const contentPreviewField: Field< BasePost > = {
+	type: 'text',
+	id: 'content-preview',
+	label: __( 'Content preview' ),
+	render: ContentPreviewView,
+	enableSorting: false,
+	isMediaField: true,
+};
+
+export default contentPreviewField;
diff --git a/packages/editor/src/dataviews/fields/content-preview/style.scss b/packages/editor/src/dataviews/fields/content-preview/style.scss
new file mode 100644
index 00000000000000..4f204dc5108c9b
--- /dev/null
+++ b/packages/editor/src/dataviews/fields/content-preview/style.scss
@@ -0,0 +1,21 @@
+.editor-fields-content-preview {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	border-radius: $radius-medium;
+
+	.dataviews-view-table & {
+		width: 96px;
+		flex-grow: 0;
+	}
+
+	.block-editor-block-preview__container,
+	.editor-fields-content-preview__empty {
+		margin-top: auto;
+		margin-bottom: auto;
+	}
+}
+
+.editor-fields-content-preview__empty {
+	text-align: center;
+}
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
index 2119b52756e964..d9e81311fd1c16 100644
--- a/packages/editor/src/dataviews/store/private-actions.ts
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -38,6 +38,7 @@ import {
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import contentPreviewField from '../fields/content-preview';
 import { unlock } from '../../lock-unlock';
 
 export function registerEntityAction< Item >(
@@ -175,6 +176,7 @@ export const registerPostTypeSchema =
 			postTypeConfig.supports?.comments && commentStatusField,
 			templateField,
 			passwordField,
+			contentPreviewField,
 		].filter( Boolean );
 		if ( postTypeConfig.supports?.title ) {
 			let _titleField;
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index 1a8103ae2b16c4..c3366d6aa2266f 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -54,3 +54,4 @@
 @import "./components/table-of-contents/style.scss";
 @import "./components/text-editor/style.scss";
 @import "./components/visual-editor/style.scss";
+@import "./dataviews/fields/content-preview/style.scss";
diff --git a/packages/fields/README.md b/packages/fields/README.md
index 9ca08991aca51f..e8224a1e4849ac 100644
--- a/packages/fields/README.md
+++ b/packages/fields/README.md
@@ -18,6 +18,10 @@ npm install @wordpress/fields --save
 
 Author field for BasePost.
 
+### BasePost
+
+Undocumented declaration.
+
 ### BasePostWithEmbeddedAuthor
 
 Undocumented declaration.
diff --git a/packages/fields/src/fields/featured-image/index.ts b/packages/fields/src/fields/featured-image/index.ts
index d6f22176fc6704..1e3d31b718c1b1 100644
--- a/packages/fields/src/fields/featured-image/index.ts
+++ b/packages/fields/src/fields/featured-image/index.ts
@@ -18,6 +18,7 @@ const featuredImageField: Field< BasePost > = {
 	Edit: FeaturedImageEdit,
 	render: FeaturedImageView,
 	enableSorting: false,
+	isMediaField: true,
 };
 
 /**
diff --git a/packages/fields/src/index.ts b/packages/fields/src/index.ts
index 1658c9d8c51eee..bf1e4dfda2ddfd 100644
--- a/packages/fields/src/index.ts
+++ b/packages/fields/src/index.ts
@@ -1,4 +1,4 @@
 export * from './fields';
 export * from './actions';
 export { default as CreateTemplatePartModal } from './components/create-template-part-modal';
-export type { BasePostWithEmbeddedAuthor, PostType } from './types';
+export type { BasePostWithEmbeddedAuthor, BasePost, PostType } from './types';

From e5f07a385dab86c7e3e33c845f773880ebeeebe9 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 17 Dec 2024 12:50:42 +0000
Subject: [PATCH 02/10] update menu code

---
 .../src/components/dataviews-view-config/index.tsx     | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index c1fe6b130a1610..236ec3bc12f23b 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -537,16 +537,17 @@ function MediaFieldItem( {
 			isInteracting={ isChangingPreview }
 			additionalActions={
 				isVisible && (
-					<Menu
-						trigger={
+					<Menu onOpenChange={ setIsChangingPreview }>
+						<Menu.TriggerButton
+							render={
 							<Button
 								size="compact"
 								icon={ moreVertical }
 								label={ __( 'Preview' ) }
 							/>
 						}
-						onOpenChange={ setIsChangingPreview }
-					>
+						/>
+						<Menu.Popover>
 						{ mediaFields.map( ( field ) => {
 							return (
 								<Menu.RadioItem
@@ -566,6 +567,7 @@ function MediaFieldItem( {
 								</Menu.RadioItem>
 							);
 						} ) }
+						</Menu.Popover>
 					</Menu>
 				)
 			}

From 5de23a1500d0670b355b9cd1dd7566f40d747502 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 17 Dec 2024 13:00:06 +0000
Subject: [PATCH 03/10] naming changes

---
 .../dataviews-view-config/index.tsx           | 56 +++++++++----------
 packages/dataviews/src/types.ts               |  2 +-
 .../fields/content-preview/index.tsx          |  2 +-
 .../fields/src/fields/featured-image/index.ts |  2 +-
 4 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 236ec3bc12f23b..2a5bb145f6654b 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -256,9 +256,9 @@ function ItemsPerPageControl() {
 }
 
 function BaseFieldItem( {
-	fieldId,
+	identifier,
 	label,
-	subLabel,
+	description,
 	isVisible,
 	isFirst,
 	isLast,
@@ -270,9 +270,9 @@ function BaseFieldItem( {
 	onMoveDown,
 	additionalActions,
 }: {
-	fieldId: string;
+	identifier: string;
 	label: string;
-	subLabel?: string;
+	description?: string;
 	isVisible: boolean;
 	isFirst?: boolean;
 	isLast?: boolean;
@@ -290,7 +290,7 @@ function BaseFieldItem( {
 		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
 		setTimeout( () => {
 			const element = document.querySelector(
-				`.dataviews-field-control__field-${ fieldId } .dataviews-field-control__field-visibility-button`
+				`.dataviews-field-control__field-${ identifier } .dataviews-field-control__field-visibility-button`
 			);
 			if ( element instanceof HTMLElement ) {
 				element.focus();
@@ -316,9 +316,9 @@ function BaseFieldItem( {
 				<span className="dataviews-field-control__label">
 						{ label }
 					</span>
-					{ subLabel && (
+					{ description && (
 						<span className="dataviews-field-control__sub-label">
-							{ subLabel }
+							{ description }
 						</span>
 					) }
 				</span>
@@ -417,7 +417,7 @@ function FieldItem( {
 } ) {
 	return (
 		<BaseFieldItem
-			fieldId={ field.id }
+			identifier={ field.id }
 			label={ field.label }
 			isVisible={ isVisible }
 			isFirst={ isFirst }
@@ -502,17 +502,17 @@ function RegularFieldItem( {
 	);
 }
 
-function MediaFieldItem( {
+function PreviewFieldItem( {
 	view,
 	onChangeView,
 	isVisible = true,
-	mediaFields,
+	previewFields,
 	activeField,
 }: {
 	view: View;
 	onChangeView: ( view: View ) => void;
 	isVisible?: boolean;
-	mediaFields: NormalizedField< any >[];
+	previewFields: NormalizedField< any >[];
 	activeField: NormalizedField< any > | undefined;
 } ) {
 	const [ isChangingPreview, setIsChangingPreview ] =
@@ -522,9 +522,9 @@ function MediaFieldItem( {
 	}
 	return (
 		<BaseFieldItem
-			fieldId="preview"
+			identifier="preview"
 			label={ __( 'Preview' ) }
-			subLabel={ activeField.label }
+			description={ activeField.label }
 			isVisible={ isVisible }
 			onToggleVisibility={ () => {
 				onChangeView( {
@@ -548,7 +548,7 @@ function MediaFieldItem( {
 						}
 						/>
 						<Menu.Popover>
-						{ mediaFields.map( ( field ) => {
+							{ previewFields.map( ( field ) => {
 							return (
 								<Menu.RadioItem
 									key={ field.id }
@@ -592,7 +592,7 @@ function FieldControl() {
 		( f ) =>
 			! visibleFieldIds.includes( f.id ) &&
 			! togglableFields.includes( f.id ) &&
-			! f.isMediaField
+			! f.isPreviewField
 	);
 	const visibleFields = visibleFieldIds
 		.map( ( fieldId ) => fields.find( ( f ) => f.id === fieldId ) )
@@ -602,24 +602,24 @@ function FieldControl() {
 		return null;
 	}
 	const titleField = fields.find( ( f ) => f.id === view.titleField );
-	const mediaField = fields.find( ( f ) => f.id === view.mediaField );
+	const previewField = fields.find( ( f ) => f.id === view.mediaField );
 	const descriptionField = fields.find(
 		( f ) => f.id === view.descriptionField
 	);
 
-	const mediaFields = fields.filter( ( f ) => f.isMediaField );
+	const previewFields = fields.filter( ( f ) => f.isPreviewField );
 
-	let mediaFieldUI;
-	if ( mediaFields.length > 1 ) {
-		const isMediaFieldVisible =
-			isDefined( mediaField ) && ( view.showMedia ?? true );
-		mediaFieldUI = (
-			<MediaFieldItem
+	let previewFieldUI;
+	if ( previewFields.length > 1 ) {
+		const isPreviewFieldVisible =
+			isDefined( previewField ) && ( view.showMedia ?? true );
+		previewFieldUI = (
+			<PreviewFieldItem
 				view={ view }
 				onChangeView={ onChangeView }
-				isVisible={ isMediaFieldVisible }
-				mediaFields={ mediaFields }
-				activeField={ mediaField }
+				isVisible={ isPreviewFieldVisible }
+				previewFields={ previewFields }
+				activeField={ previewField }
 			/>
 		);
 	}
@@ -629,9 +629,9 @@ function FieldControl() {
 			isVisibleFlag: 'showTitle',
 		},
 		{
-			field: mediaField,
+			field: previewField,
 			isVisibleFlag: 'showMedia',
-			ui: mediaFieldUI,
+			ui: previewFieldUI,
 		},
 		{
 			field: descriptionField,
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index ffbe607c109d97..6d1cb32cf34465 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -162,7 +162,7 @@ export type Field< Item > = {
 	/**
 	 * True if the field is supposed to be used as a media field.
 	 */
-	isMediaField?: boolean;
+	isPreviewField?: boolean;
 };
 
 export type NormalizedField< Item > = Field< Item > & {
diff --git a/packages/editor/src/dataviews/fields/content-preview/index.tsx b/packages/editor/src/dataviews/fields/content-preview/index.tsx
index 53c8acca396b04..3c1d9386f4f544 100644
--- a/packages/editor/src/dataviews/fields/content-preview/index.tsx
+++ b/packages/editor/src/dataviews/fields/content-preview/index.tsx
@@ -16,7 +16,7 @@ const contentPreviewField: Field< BasePost > = {
 	label: __( 'Content preview' ),
 	render: ContentPreviewView,
 	enableSorting: false,
-	isMediaField: true,
+	isPreviewField: true,
 };
 
 export default contentPreviewField;
diff --git a/packages/fields/src/fields/featured-image/index.ts b/packages/fields/src/fields/featured-image/index.ts
index 1e3d31b718c1b1..9c8ab9681ada19 100644
--- a/packages/fields/src/fields/featured-image/index.ts
+++ b/packages/fields/src/fields/featured-image/index.ts
@@ -18,7 +18,7 @@ const featuredImageField: Field< BasePost > = {
 	Edit: FeaturedImageEdit,
 	render: FeaturedImageView,
 	enableSorting: false,
-	isMediaField: true,
+	isPreviewField: true,
 };
 
 /**

From a604caf1aac34fa4b43dec0cd1d5af35be8f933f Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 17 Dec 2024 13:51:07 +0000
Subject: [PATCH 04/10] comment specifying is intereacting

---
 .../src/components/dataviews-view-config/index.tsx        | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 2a5bb145f6654b..c1b564994b7771 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -304,7 +304,13 @@ function BaseFieldItem( {
 				expanded
 				className={ clsx(
 					'dataviews-field-control__field',
-					`dataviews-field-control__field-${ fieldId }`,
+					`dataviews-field-control__field-${ identifier }`,
+					// The actions are hidden when the mouse is not hovering the item, or focus
+					// is outside the item.
+					// For actions that require a popover, a menu etc, that would mean that when the interactive element
+					// opens and the focus goes there the actions would be hidden.
+					// To avoid that we add a class to the item, that makes sure actions are visible while there is some
+					// interaction with the item.
 					{ 'is-interacting': isInteracting }
 				) }
 				justify="flex-start"

From fd3144845f071d3902689c158ea22fca8c4b2ab2 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 17 Dec 2024 15:37:36 +0000
Subject: [PATCH 05/10] feedbacl

---
 .../components/dataviews-view-config/index.tsx    | 15 +++++++--------
 .../content-preview/content-preview-view.tsx      |  6 +++---
 .../dataviews/fields/content-preview/index.tsx    |  8 ++++----
 .../editor/src/dataviews/store/private-actions.ts |  6 ++++--
 packages/fields/src/types.ts                      |  1 +
 5 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index c1b564994b7771..ef803c4180063f 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -268,7 +268,7 @@ function BaseFieldItem( {
 	onToggleVisibility,
 	onMoveUp,
 	onMoveDown,
-	additionalActions,
+	children,
 }: {
 	identifier: string;
 	label: string;
@@ -282,7 +282,7 @@ function BaseFieldItem( {
 	onToggleVisibility?: () => void;
 	onMoveUp?: () => void;
 	onMoveDown?: () => void;
-	additionalActions?: ReactNode;
+	children?: ReactNode;
 } ) {
 	const focusVisibilityField = () => {
 		// Focus the visibility button to avoid focus loss.
@@ -395,7 +395,7 @@ function BaseFieldItem( {
 							}
 						/>
 					) }
-					{ additionalActions }
+					{ children }
 				</HStack>
 			</HStack>
 		</Item>
@@ -541,8 +541,8 @@ function PreviewFieldItem( {
 			canMove={ false }
 			canHide
 			isInteracting={ isChangingPreview }
-			additionalActions={
-				isVisible && (
+		>
+			{ isVisible && (
 					<Menu onOpenChange={ setIsChangingPreview }>
 						<Menu.TriggerButton
 							render={
@@ -575,9 +575,8 @@ function PreviewFieldItem( {
 						} ) }
 						</Menu.Popover>
 					</Menu>
-				)
-			}
-		/>
+			) }
+		</BaseFieldItem>
 	);
 }
 
diff --git a/packages/editor/src/dataviews/fields/content-preview/content-preview-view.tsx b/packages/editor/src/dataviews/fields/content-preview/content-preview-view.tsx
index abe1256d21b8e8..0a5b8387163083 100644
--- a/packages/editor/src/dataviews/fields/content-preview/content-preview-view.tsx
+++ b/packages/editor/src/dataviews/fields/content-preview/content-preview-view.tsx
@@ -21,7 +21,7 @@ import { store as editorStore } from '../../../store';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-function ContentPreviewContainer( {
+function PostPreviewContainer( {
 	template,
 	post,
 }: {
@@ -62,7 +62,7 @@ function ContentPreviewContainer( {
 	);
 }
 
-export default function ContentPreviewView( { item }: { item: BasePost } ) {
+export default function PostPreviewView( { item }: { item: BasePost } ) {
 	const { settings, template } = useSelect(
 		( select ) => {
 			const { canUser, getPostType, getTemplateId, getEntityRecord } =
@@ -102,7 +102,7 @@ export default function ContentPreviewView( { item }: { item: BasePost } ) {
 			settings={ settings }
 			__unstableTemplate={ template }
 		>
-			<ContentPreviewContainer template={ template } post={ item } />
+			<PostPreviewContainer template={ template } post={ item } />
 		</EditorProvider>
 	);
 }
diff --git a/packages/editor/src/dataviews/fields/content-preview/index.tsx b/packages/editor/src/dataviews/fields/content-preview/index.tsx
index 3c1d9386f4f544..9016ef22632ab9 100644
--- a/packages/editor/src/dataviews/fields/content-preview/index.tsx
+++ b/packages/editor/src/dataviews/fields/content-preview/index.tsx
@@ -8,15 +8,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import ContentPreviewView from './content-preview-view';
+import PostPreviewView from './content-preview-view';
 
-const contentPreviewField: Field< BasePost > = {
+const postPreviewField: Field< BasePost > = {
 	type: 'text',
 	id: 'content-preview',
 	label: __( 'Content preview' ),
-	render: ContentPreviewView,
+	render: PostPreviewView,
 	enableSorting: false,
 	isPreviewField: true,
 };
 
-export default contentPreviewField;
+export default postPreviewField;
diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts
index d9e81311fd1c16..82c2c8911c7c96 100644
--- a/packages/editor/src/dataviews/store/private-actions.ts
+++ b/packages/editor/src/dataviews/store/private-actions.ts
@@ -38,7 +38,7 @@ import {
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
-import contentPreviewField from '../fields/content-preview';
+import postPreviewField from '../fields/content-preview';
 import { unlock } from '../../lock-unlock';
 
 export function registerEntityAction< Item >(
@@ -176,7 +176,9 @@ export const registerPostTypeSchema =
 			postTypeConfig.supports?.comments && commentStatusField,
 			templateField,
 			passwordField,
-			contentPreviewField,
+			postTypeConfig.supports?.editor &&
+				postTypeConfig.viewable &&
+				postPreviewField,
 		].filter( Boolean );
 		if ( postTypeConfig.supports?.title ) {
 			let _titleField;
diff --git a/packages/fields/src/types.ts b/packages/fields/src/types.ts
index 1b251d125b1be8..bff76206081053 100644
--- a/packages/fields/src/types.ts
+++ b/packages/fields/src/types.ts
@@ -100,6 +100,7 @@ export interface PostType {
 		author?: string;
 		thumbnail?: string;
 		comments?: string;
+		editor?: boolean;
 	};
 }
 

From 38e8ece6552283421dea254f041873ba1290b9ee Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 27 Dec 2024 14:15:48 +0000
Subject: [PATCH 06/10] add media type remove flag

---
 .../dataviews-view-config/index.tsx           | 68 +++++++++----------
 packages/dataviews/src/types.ts               |  7 +-
 .../fields/content-preview/index.tsx          |  3 +-
 .../fields/src/fields/featured-image/index.ts |  3 +-
 4 files changed, 37 insertions(+), 44 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index ef803c4180063f..ccc6a49efa9261 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -319,7 +319,7 @@ function BaseFieldItem( {
 					{ ! canMove && ! canHide && <Icon icon={ lock } /> }
 				</span>
 				<span className="dataviews-field-control__label-sub-label-container">
-				<span className="dataviews-field-control__label">
+					<span className="dataviews-field-control__label">
 						{ label }
 					</span>
 					{ description && (
@@ -543,18 +543,18 @@ function PreviewFieldItem( {
 			isInteracting={ isChangingPreview }
 		>
 			{ isVisible && (
-					<Menu onOpenChange={ setIsChangingPreview }>
-						<Menu.TriggerButton
-							render={
+				<Menu onOpenChange={ setIsChangingPreview }>
+					<Menu.TriggerButton
+						render={
 							<Button
 								size="compact"
 								icon={ moreVertical }
 								label={ __( 'Preview' ) }
 							/>
 						}
-						/>
-						<Menu.Popover>
-							{ previewFields.map( ( field ) => {
+					/>
+					<Menu.Popover>
+						{ previewFields.map( ( field ) => {
 							return (
 								<Menu.RadioItem
 									key={ field.id }
@@ -573,8 +573,8 @@ function PreviewFieldItem( {
 								</Menu.RadioItem>
 							);
 						} ) }
-						</Menu.Popover>
-					</Menu>
+					</Menu.Popover>
+				</Menu>
 			) }
 		</BaseFieldItem>
 	);
@@ -597,7 +597,7 @@ function FieldControl() {
 		( f ) =>
 			! visibleFieldIds.includes( f.id ) &&
 			! togglableFields.includes( f.id ) &&
-			! f.isPreviewField
+			f.type !== 'media'
 	);
 	const visibleFields = visibleFieldIds
 		.map( ( fieldId ) => fields.find( ( f ) => f.id === fieldId ) )
@@ -612,7 +612,7 @@ function FieldControl() {
 		( f ) => f.id === view.descriptionField
 	);
 
-	const previewFields = fields.filter( ( f ) => f.isPreviewField );
+	const previewFields = fields.filter( ( f ) => f.type === 'media' );
 
 	let previewFieldUI;
 	if ( previewFields.length > 1 ) {
@@ -672,18 +672,18 @@ function FieldControl() {
 							( { field, isVisibleFlag, ui } ) => {
 								return (
 									ui ?? (
-									<FieldItem
-										key={ field.id }
-										field={ field }
-										isVisible
-										onToggleVisibility={ () => {
-											onChangeView( {
-												...view,
-												[ isVisibleFlag ]: false,
-											} );
-										} }
-										canMove={ false }
-									/>
+										<FieldItem
+											key={ field.id }
+											field={ field }
+											isVisible
+											onToggleVisibility={ () => {
+												onChangeView( {
+													...view,
+													[ isVisibleFlag ]: false,
+												} );
+											} }
+											canMove={ false }
+										/>
 									)
 								);
 							}
@@ -717,19 +717,19 @@ function FieldControl() {
 									( { field, isVisibleFlag, ui } ) => {
 										return (
 											ui ?? (
-											<FieldItem
-												key={ field.id }
-												field={ field }
-												isVisible={ false }
-												onToggleVisibility={ () => {
-													onChangeView( {
-														...view,
+												<FieldItem
+													key={ field.id }
+													field={ field }
+													isVisible={ false }
+													onToggleVisibility={ () => {
+														onChangeView( {
+															...view,
 															[ isVisibleFlag ]:
 																true,
-													} );
-												} }
-												canMove={ false }
-											/>
+														} );
+													} }
+													canMove={ false }
+												/>
 											)
 										);
 									}
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 6d1cb32cf34465..8ea13ed0b459cc 100644
--- a/packages/dataviews/src/types.ts
+++ b/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' | 'media';
 
 export type ValidationContext = {
 	elements?: Option[];
@@ -158,11 +158,6 @@ 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.
-	 */
-	isPreviewField?: boolean;
 };
 
 export type NormalizedField< Item > = Field< Item > & {
diff --git a/packages/editor/src/dataviews/fields/content-preview/index.tsx b/packages/editor/src/dataviews/fields/content-preview/index.tsx
index 9016ef22632ab9..5dadc599ea232e 100644
--- a/packages/editor/src/dataviews/fields/content-preview/index.tsx
+++ b/packages/editor/src/dataviews/fields/content-preview/index.tsx
@@ -11,12 +11,11 @@ import { __ } from '@wordpress/i18n';
 import PostPreviewView from './content-preview-view';
 
 const postPreviewField: Field< BasePost > = {
-	type: 'text',
+	type: 'media',
 	id: 'content-preview',
 	label: __( 'Content preview' ),
 	render: PostPreviewView,
 	enableSorting: false,
-	isPreviewField: true,
 };
 
 export default postPreviewField;
diff --git a/packages/fields/src/fields/featured-image/index.ts b/packages/fields/src/fields/featured-image/index.ts
index 9c8ab9681ada19..7e17fb482e01c9 100644
--- a/packages/fields/src/fields/featured-image/index.ts
+++ b/packages/fields/src/fields/featured-image/index.ts
@@ -13,12 +13,11 @@ import { FeaturedImageView } from './featured-image-view';
 
 const featuredImageField: Field< BasePost > = {
 	id: 'featured_media',
-	type: 'text',
+	type: 'media',
 	label: __( 'Featured Image' ),
 	Edit: FeaturedImageEdit,
 	render: FeaturedImageView,
 	enableSorting: false,
-	isPreviewField: true,
 };
 
 /**

From 757d1fcb36f31c210aa2ec62f31d6b594ff08ff1 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 27 Dec 2024 15:43:28 +0000
Subject: [PATCH 07/10] refect field item logic

---
 .../dataviews-view-config/index.tsx           | 226 +++++++-----------
 1 file changed, 92 insertions(+), 134 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index ccc6a49efa9261..54edf0e8a6e045 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -255,42 +255,84 @@ function ItemsPerPageControl() {
 	);
 }
 
-function BaseFieldItem( {
-	identifier,
+function PreviewOptions( {
+	previewOptions,
+	onChangePreviewOption,
+	onMenuOpenChange,
+	activeOption,
+}: {
+	previewOptions?: Array< { label: string; id: string } >;
+	onChangePreviewOption?: ( newPreviewOption: string ) => void;
+	onMenuOpenChange: ( isOpen: boolean ) => void;
+	activeOption?: string;
+} ) {
+	return (
+		<Menu onOpenChange={ onMenuOpenChange }>
+			<Menu.TriggerButton
+				render={
+					<Button
+						size="compact"
+						icon={ moreVertical }
+						label={ __( 'Preview' ) }
+					/>
+				}
+			/>
+			<Menu.Popover>
+				{ previewOptions?.map( ( { id, label } ) => {
+					return (
+						<Menu.RadioItem
+							key={ id }
+							value={ id }
+							checked={ id === activeOption }
+							onChange={ () => {
+								onChangePreviewOption?.( id );
+							} }
+						>
+							<Menu.ItemLabel>{ label }</Menu.ItemLabel>
+						</Menu.RadioItem>
+					);
+				} ) }
+			</Menu.Popover>
+		</Menu>
+	);
+}
+function FieldItem( {
+	field,
 	label,
 	description,
 	isVisible,
 	isFirst,
 	isLast,
 	canMove = true,
-	canHide = true,
-	isInteracting = false,
 	onToggleVisibility,
 	onMoveUp,
 	onMoveDown,
-	children,
+	previewOptions,
+	onChangePreviewOption,
 }: {
-	identifier: string;
-	label: string;
+	field: NormalizedField< any >;
+	label?: string;
 	description?: string;
 	isVisible: boolean;
 	isFirst?: boolean;
 	isLast?: boolean;
 	canMove?: boolean;
-	canHide?: boolean;
-	isInteracting?: boolean;
 	onToggleVisibility?: () => void;
 	onMoveUp?: () => void;
 	onMoveDown?: () => void;
-	children?: ReactNode;
+	previewOptions?: Array< { label: string; id: string } >;
+	onChangePreviewOption?: ( newPreviewOption: string ) => void;
 } ) {
+	const [ isChangingPreviewOption, setIsChangingPreviewOption ] =
+		useState< boolean >( false );
+
 	const focusVisibilityField = () => {
 		// Focus the visibility button to avoid focus loss.
 		// Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.
 		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
 		setTimeout( () => {
 			const element = document.querySelector(
-				`.dataviews-field-control__field-${ identifier } .dataviews-field-control__field-visibility-button`
+				`.dataviews-field-control__field-${ field.id } .dataviews-field-control__field-visibility-button`
 			);
 			if ( element instanceof HTMLElement ) {
 				element.focus();
@@ -304,23 +346,25 @@ function BaseFieldItem( {
 				expanded
 				className={ clsx(
 					'dataviews-field-control__field',
-					`dataviews-field-control__field-${ identifier }`,
+					`dataviews-field-control__field-${ field.id }`,
 					// The actions are hidden when the mouse is not hovering the item, or focus
 					// is outside the item.
 					// For actions that require a popover, a menu etc, that would mean that when the interactive element
 					// opens and the focus goes there the actions would be hidden.
 					// To avoid that we add a class to the item, that makes sure actions are visible while there is some
 					// interaction with the item.
-					{ 'is-interacting': isInteracting }
+					{ 'is-interacting': isChangingPreviewOption }
 				) }
 				justify="flex-start"
 			>
 				<span className="dataviews-field-control__icon">
-					{ ! canMove && ! canHide && <Icon icon={ lock } /> }
+					{ ! canMove && ! field.enableHiding && (
+						<Icon icon={ lock } />
+					) }
 				</span>
 				<span className="dataviews-field-control__label-sub-label-container">
 					<span className="dataviews-field-control__label">
-						{ label }
+						{ label || field.label }
 					</span>
 					{ description && (
 						<span className="dataviews-field-control__sub-label">
@@ -347,7 +391,7 @@ function BaseFieldItem( {
 										: sprintf(
 												/* translators: %s: field label */
 												__( 'Move %s up' ),
-												label
+												field.label
 										  )
 								}
 							/>
@@ -363,7 +407,7 @@ function BaseFieldItem( {
 										: sprintf(
 												/* translators: %s: field label */
 												__( 'Move %s down' ),
-												label
+												field.label
 										  )
 								}
 							/>
@@ -372,7 +416,7 @@ function BaseFieldItem( {
 					{ onToggleVisibility && (
 						<Button
 							className="dataviews-field-control__field-visibility-button"
-							disabled={ ! canHide }
+							disabled={ ! field.enableHiding }
 							accessibleWhenDisabled
 							size="compact"
 							onClick={ () => {
@@ -385,58 +429,30 @@ function BaseFieldItem( {
 									? sprintf(
 											/* translators: %s: field label */
 											_x( 'Hide %s', 'field' ),
-											label
+											field.label
 									  )
 									: sprintf(
 											/* translators: %s: field label */
 											_x( 'Show %s', 'field' ),
-											label
+											field.label
 									  )
 							}
 						/>
 					) }
-					{ children }
+					{ previewOptions && (
+						<PreviewOptions
+							previewOptions={ previewOptions }
+							onChangePreviewOption={ onChangePreviewOption }
+							onMenuOpenChange={ setIsChangingPreviewOption }
+							activeOption={ field.id }
+						/>
+					) }
 				</HStack>
 			</HStack>
 		</Item>
 	);
 }
 
-function FieldItem( {
-	field,
-	isVisible,
-	isFirst,
-	isLast,
-	canMove = true,
-	onToggleVisibility,
-	onMoveUp,
-	onMoveDown,
-}: {
-	field: NormalizedField< any >;
-	isVisible: boolean;
-	isFirst?: boolean;
-	isLast?: boolean;
-	canMove?: boolean;
-	onToggleVisibility?: () => void;
-	onMoveUp?: () => void;
-	onMoveDown?: () => void;
-} ) {
-	return (
-		<BaseFieldItem
-			identifier={ field.id }
-			label={ field.label }
-			isVisible={ isVisible }
-			isFirst={ isFirst }
-			isLast={ isLast }
-			canMove={ canMove }
-			canHide={ field.enableHiding }
-			onToggleVisibility={ onToggleVisibility }
-			onMoveUp={ onMoveUp }
-			onMoveDown={ onMoveDown }
-		/>
-	);
-}
-
 function RegularFieldItem( {
 	index,
 	field,
@@ -508,78 +524,6 @@ function RegularFieldItem( {
 	);
 }
 
-function PreviewFieldItem( {
-	view,
-	onChangeView,
-	isVisible = true,
-	previewFields,
-	activeField,
-}: {
-	view: View;
-	onChangeView: ( view: View ) => void;
-	isVisible?: boolean;
-	previewFields: NormalizedField< any >[];
-	activeField: NormalizedField< any > | undefined;
-} ) {
-	const [ isChangingPreview, setIsChangingPreview ] =
-		useState< boolean >( false );
-	if ( ! activeField ) {
-		return null;
-	}
-	return (
-		<BaseFieldItem
-			identifier="preview"
-			label={ __( 'Preview' ) }
-			description={ activeField.label }
-			isVisible={ isVisible }
-			onToggleVisibility={ () => {
-				onChangeView( {
-					...view,
-					showMedia: ! isVisible,
-				} );
-			} }
-			canMove={ false }
-			canHide
-			isInteracting={ isChangingPreview }
-		>
-			{ isVisible && (
-				<Menu onOpenChange={ setIsChangingPreview }>
-					<Menu.TriggerButton
-						render={
-							<Button
-								size="compact"
-								icon={ moreVertical }
-								label={ __( 'Preview' ) }
-							/>
-						}
-					/>
-					<Menu.Popover>
-						{ previewFields.map( ( field ) => {
-							return (
-								<Menu.RadioItem
-									key={ field.id }
-									value={ field.id }
-									checked={ field.id === view.mediaField }
-									onChange={ () => {
-										onChangeView( {
-											...view,
-											mediaField: field.id,
-										} );
-									} }
-								>
-									<Menu.ItemLabel>
-										{ field.label }
-									</Menu.ItemLabel>
-								</Menu.RadioItem>
-							);
-						} ) }
-					</Menu.Popover>
-				</Menu>
-			) }
-		</BaseFieldItem>
-	);
-}
-
 function isDefined< T >( item: T | undefined ): item is T {
 	return !! item;
 }
@@ -618,13 +562,27 @@ function FieldControl() {
 	if ( previewFields.length > 1 ) {
 		const isPreviewFieldVisible =
 			isDefined( previewField ) && ( view.showMedia ?? true );
-		previewFieldUI = (
-			<PreviewFieldItem
-				view={ view }
-				onChangeView={ onChangeView }
+		previewFieldUI = isDefined( previewField ) && (
+			<FieldItem
+				key={ previewField.id }
+				field={ previewField }
+				label={ __( 'Preview' ) }
+				description={ previewField.label }
 				isVisible={ isPreviewFieldVisible }
-				previewFields={ previewFields }
-				activeField={ previewField }
+				onToggleVisibility={ () => {
+					onChangeView( {
+						...view,
+						showMedia: ! isPreviewFieldVisible,
+					} );
+				} }
+				canMove={ false }
+				previewOptions={ previewFields.map( ( field ) => ( {
+					label: field.label,
+					id: field.id,
+				} ) ) }
+				onChangePreviewOption={ ( newPreviewId ) =>
+					onChangeView( { ...view, mediaField: newPreviewId } )
+				}
 			/>
 		);
 	}

From 24bbb1d6d6dc285ef8edbcc6c2f11786078d797c Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 27 Dec 2024 16:06:56 +0000
Subject: [PATCH 08/10] Document BasePost interface

---
 packages/fields/src/types.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/fields/src/types.ts b/packages/fields/src/types.ts
index bff76206081053..d9594c58e09793 100644
--- a/packages/fields/src/types.ts
+++ b/packages/fields/src/types.ts
@@ -32,6 +32,9 @@ interface EmbeddedAuthor {
 	author: Author[];
 }
 
+/**
+ * BasePost interface used for all post types.
+ */
 export interface BasePost extends CommonPost {
 	comment_status?: 'open' | 'closed';
 	excerpt?: string | { raw: string; rendered: string };

From 722ac2777a66a91c23c81185c301a30822b59b3e Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 7 Jan 2025 13:16:18 +0000
Subject: [PATCH 09/10] fix focus loose and unable to close panel

---
 .../components/dataviews-view-config/index.tsx    | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 54edf0e8a6e045..c80591caee255e 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -266,11 +266,25 @@ function PreviewOptions( {
 	onMenuOpenChange: ( isOpen: boolean ) => void;
 	activeOption?: string;
 } ) {
+	const focusPreviewOptionsField = ( id: string ) => {
+		// Focus the visibility button to avoid focus loss.
+		// Our code is safe against the component being unmounted, so we don't need to worry about cleaning the timeout.
+		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
+		setTimeout( () => {
+			const element = document.querySelector(
+				`.dataviews-field-control__field-${ id } .dataviews-field-control__field-preview-options-button`
+			);
+			if ( element instanceof HTMLElement ) {
+				element.focus();
+			}
+		}, 50 );
+	};
 	return (
 		<Menu onOpenChange={ onMenuOpenChange }>
 			<Menu.TriggerButton
 				render={
 					<Button
+						className="dataviews-field-control__field-preview-options-button"
 						size="compact"
 						icon={ moreVertical }
 						label={ __( 'Preview' ) }
@@ -286,6 +300,7 @@ function PreviewOptions( {
 							checked={ id === activeOption }
 							onChange={ () => {
 								onChangePreviewOption?.( id );
+								focusPreviewOptionsField( id );
 							} }
 						>
 							<Menu.ItemLabel>{ label }</Menu.ItemLabel>

From f713ffe4c5836e0612e102ce0122a80b0ea93f97 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 7 Jan 2025 13:38:48 +0000
Subject: [PATCH 10/10] lint fix

---
 packages/editor/src/components/provider/index.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index 08f41e014d6003..133a52e2ce01bc 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/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 {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.
+ *                                                     This is optional.
  *
  * @example
  * ```jsx