From fe6f01c782d45abcb9b38d03fd4eb8a517f15487 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 2 Dec 2024 15:27:13 +0100
Subject: [PATCH 01/20] DataViews: Unify layout config

---
 .../dataviews-view-config/index.tsx           | 127 +++++--------
 .../components/dataviews/stories/fixtures.tsx |   3 -
 .../dataviews/stories/index.story.tsx         | 120 ++-----------
 .../src/components/dataviews/style.scss       |  59 +++----
 .../src/dataviews-layouts/grid/index.tsx      | 167 +++++++++---------
 .../src/dataviews-layouts/grid/style.scss     |  35 ++--
 .../dataviews/src/dataviews-layouts/index.ts  |  88 ---------
 .../src/dataviews-layouts/list/index.tsx      |  53 +++---
 .../table/column-header-menu.tsx              |  46 ++---
 .../table/column-primary.tsx                  |  58 ++++++
 .../src/dataviews-layouts/table/index.tsx     | 160 ++++++-----------
 .../src/dataviews-layouts/table/style.scss    |   4 +
 .../utils/get-clickable-item-props.ts         |   6 +-
 packages/dataviews/src/style.scss             |   1 +
 packages/dataviews/src/types.ts               |  56 +-----
 .../src/components/page-patterns/index.js     |  10 +-
 .../src/components/page-templates/index.js    |  39 ++--
 .../src/components/post-list/index.js         |   2 +-
 .../sidebar-dataviews/default-views.js        |  19 +-
 19 files changed, 374 insertions(+), 679 deletions(-)
 create mode 100644 packages/dataviews/src/dataviews-layouts/table/column-primary.tsx

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index f13670f27cdab7..ef96cd755f0d05 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -39,13 +39,8 @@ import {
 	sortIcons,
 	sortLabels,
 } from '../../constants';
-import {
-	VIEW_LAYOUTS,
-	getNotHidableFieldIds,
-	getVisibleFieldIds,
-	getHiddenFieldIds,
-} from '../../dataviews-layouts';
-import type { SupportedLayouts, View, Field } from '../../types';
+import { VIEW_LAYOUTS } from '../../dataviews-layouts';
+import type { NormalizedField, SupportedLayouts, View } from '../../types';
 import DataViewsContext from '../dataviews-context';
 import { unlock } from '../../lock-unlock';
 
@@ -93,6 +88,7 @@ function ViewTypeMenu( {
 								case 'list':
 								case 'grid':
 								case 'table':
+									// @ts-expect-error
 									return onChangeView( {
 										...view,
 										type: e.target.value,
@@ -237,34 +233,28 @@ function ItemsPerPageControl() {
 	);
 }
 
-interface FieldItemProps {
-	id: any;
-	label: string;
-	index: number;
-	isVisible: boolean;
-	isHidable: boolean;
-}
-
 function FieldItem( {
-	field: { id, label, index, isVisible, isHidable },
-	fields,
+	index,
+	field,
 	view,
 	onChangeView,
 }: {
-	field: FieldItemProps;
-	fields: Field< any >[];
+	index?: number;
+	field: NormalizedField< any >;
 	view: View;
 	onChangeView: ( view: View ) => void;
 } ) {
-	const visibleFieldIds = getVisibleFieldIds( view, fields );
+	const visibleFieldIds = view.fields ?? [];
+	const isVisible =
+		index !== undefined && visibleFieldIds.includes( field.id );
 
 	return (
-		<Item key={ id }>
+		<Item key={ field.id }>
 			<HStack
 				expanded
-				className={ `dataviews-field-control__field dataviews-field-control__field-${ id }` }
+				className={ `dataviews-field-control__field dataviews-field-control__field-${ field.id }` }
 			>
-				<span>{ label }</span>
+				<span>{ field.label }</span>
 				<HStack
 					justify="flex-end"
 					expanded={ false }
@@ -284,7 +274,7 @@ function FieldItem( {
 												0,
 												index - 1
 											) ?? [] ),
-											id,
+											field.id,
 											visibleFieldIds[ index - 1 ],
 											...visibleFieldIds.slice(
 												index + 1
@@ -296,7 +286,7 @@ function FieldItem( {
 								label={ sprintf(
 									/* translators: %s: field label */
 									__( 'Move %s up' ),
-									label
+									field.label
 								) }
 							/>
 							<Button
@@ -312,7 +302,7 @@ function FieldItem( {
 												index
 											) ?? [] ),
 											visibleFieldIds[ index + 1 ],
-											id,
+											field.id,
 											...visibleFieldIds.slice(
 												index + 2
 											),
@@ -323,14 +313,14 @@ function FieldItem( {
 								label={ sprintf(
 									/* translators: %s: field label */
 									__( 'Move %s down' ),
-									label
+									field.label
 								) }
 							/>{ ' ' }
 						</>
 					) }
 					<Button
 						className="dataviews-field-control__field-visibility-button"
-						disabled={ ! isHidable }
+						disabled={ ! field.enableHiding }
 						accessibleWhenDisabled
 						size="compact"
 						onClick={ () => {
@@ -338,16 +328,16 @@ function FieldItem( {
 								...view,
 								fields: isVisible
 									? visibleFieldIds.filter(
-											( fieldId ) => fieldId !== id
+											( fieldId ) => fieldId !== field.id
 									  )
-									: [ ...visibleFieldIds, id ],
+									: [ ...visibleFieldIds, field.id ],
 							} );
 							// 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-visibility-button`
+									`.dataviews-field-control__field-${ field.id } .dataviews-field-control__field-visibility-button`
 								);
 								if ( element instanceof HTMLElement ) {
 									element.focus();
@@ -360,12 +350,12 @@ function FieldItem( {
 								? sprintf(
 										/* translators: %s: field label */
 										_x( 'Hide %s', 'field' ),
-										label
+										field.label
 								  )
 								: sprintf(
 										/* translators: %s: field label */
 										_x( 'Show %s', 'field' ),
-										label
+										field.label
 								  )
 						}
 					/>
@@ -375,59 +365,27 @@ function FieldItem( {
 	);
 }
 
+function isDefined< T >( item: T | undefined ): item is T {
+	return !! item;
+}
+
 function FieldControl() {
 	const { view, fields, onChangeView } = useContext( DataViewsContext );
 
-	const visibleFieldIds = useMemo(
-		() => getVisibleFieldIds( view, fields ),
-		[ view, fields ]
+	const togglableFields = [
+		view?.titleField,
+		view?.mediaField,
+		view?.descriptionField,
+	].filter( Boolean );
+	const visibleFieldIds = view.fields ?? [];
+	const hiddenFields = fields.filter(
+		( f ) =>
+			! visibleFieldIds.includes( f.id ) &&
+			! togglableFields.includes( f.id )
 	);
-	const hiddenFieldIds = useMemo(
-		() => getHiddenFieldIds( view, fields ),
-		[ view, fields ]
-	);
-	const notHidableFieldIds = useMemo(
-		() => getNotHidableFieldIds( view ),
-		[ view ]
-	);
-
-	const visibleFields = fields
-		.filter( ( { id } ) => visibleFieldIds.includes( id ) )
-		.map( ( { id, label, enableHiding } ) => {
-			return {
-				id,
-				label,
-				index: visibleFieldIds.indexOf( id ),
-				isVisible: true,
-				isHidable: notHidableFieldIds.includes( id )
-					? false
-					: enableHiding,
-			};
-		} );
-	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
-		view.layout.combinedFields.forEach( ( { id, label } ) => {
-			visibleFields.push( {
-				id,
-				label,
-				index: visibleFieldIds.indexOf( id ),
-				isVisible: true,
-				isHidable: notHidableFieldIds.includes( id ),
-			} );
-		} );
-	}
-	visibleFields.sort( ( a, b ) => a.index - b.index );
-
-	const hiddenFields = fields
-		.filter( ( { id } ) => hiddenFieldIds.includes( id ) )
-		.map( ( { id, label, enableHiding }, index ) => {
-			return {
-				id,
-				label,
-				index,
-				isVisible: false,
-				isHidable: enableHiding,
-			};
-		} );
+	const visibleFields = visibleFieldIds
+		.map( ( fieldId ) => fields.find( ( f ) => f.id === fieldId ) )
+		.filter( isDefined );
 
 	if ( ! visibleFields?.length && ! hiddenFields?.length ) {
 		return null;
@@ -437,13 +395,13 @@ function FieldControl() {
 		<VStack spacing={ 6 } className="dataviews-field-control">
 			{ !! visibleFields?.length && (
 				<ItemGroup isBordered isSeparated>
-					{ visibleFields.map( ( field ) => (
+					{ visibleFields.map( ( field, index ) => (
 						<FieldItem
 							key={ field.id }
 							field={ field }
-							fields={ fields }
 							view={ view }
 							onChangeView={ onChangeView }
+							index={ index }
 						/>
 					) ) }
 				</ItemGroup>
@@ -459,7 +417,6 @@ function FieldControl() {
 								<FieldItem
 									key={ field.id }
 									field={ field }
-									fields={ fields }
 									view={ view }
 									onChangeView={ onChangeView }
 								/>
diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
index 6c74c516853c5b..cd4d3b97e65311 100644
--- a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
+++ b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
@@ -637,9 +637,6 @@ export const fields: Field< SpaceObject >[] = [
 		id: 'title',
 		enableHiding: false,
 		enableGlobalSearch: true,
-		render: ( { item } ) => {
-			return <a href="#nothing">{ item.title }</a>;
-		},
 	},
 	{
 		id: 'date',
diff --git a/packages/dataviews/src/components/dataviews/stories/index.story.tsx b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
index 6161af125b5ca4..1e96ba92a0bea9 100644
--- a/packages/dataviews/src/components/dataviews/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
@@ -7,17 +7,10 @@ import { useState, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import DataViews from '../index';
-import {
-	DEFAULT_VIEW,
-	actions,
-	data,
-	fields,
-	themeData,
-	themeFields,
-} from './fixtures';
+import { DEFAULT_VIEW, actions, data, fields } from './fixtures';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
 import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
-import type { CombinedField, View } from '../../../types';
+import type { View } from '../../../types';
 
 import './style.css';
 
@@ -28,44 +21,18 @@ const meta = {
 export default meta;
 
 const defaultLayouts = {
-	[ LAYOUT_TABLE ]: {
-		layout: {
-			primaryField: 'title',
-			styles: {
-				image: {
-					width: 50,
-				},
-				title: {
-					maxWidth: 400,
-				},
-				type: {
-					maxWidth: 400,
-				},
-				description: {
-					maxWidth: 200,
-				},
-			},
-		},
-	},
-	[ LAYOUT_GRID ]: {
-		layout: {
-			mediaField: 'image',
-			primaryField: 'title',
-		},
-	},
-	[ LAYOUT_LIST ]: {
-		layout: {
-			mediaField: 'image',
-			primaryField: 'title',
-		},
-	},
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {},
+	[ LAYOUT_LIST ]: {},
 };
 
 export const Default = () => {
 	const [ view, setView ] = useState< View >( {
 		...DEFAULT_VIEW,
-		fields: [ 'title', 'description', 'categories' ],
-		layout: defaultLayouts[ DEFAULT_VIEW.type ].layout,
+		fields: [ 'categories' ],
+		titleField: 'title',
+		descriptionField: 'description',
+		mediaField: 'image',
 	} );
 	const { data: shownData, paginationInfo } = useMemo( () => {
 		return filterSortAndPaginate( data, view, fields );
@@ -79,6 +46,11 @@ export const Default = () => {
 			fields={ fields }
 			onChangeView={ setView }
 			actions={ actions }
+			onClickItem={ ( item ) => {
+				// eslint-disable-next-line no-alert
+				alert( 'Clicked: ' + item.title );
+			} }
+			isItemClickable={ () => true }
 			defaultLayouts={ defaultLayouts }
 		/>
 	);
@@ -133,67 +105,3 @@ export const FieldsNoSortableNoHidable = () => {
 		/>
 	);
 };
-
-export const CombinedFields = () => {
-	const defaultLayoutsThemes = {
-		table: {
-			fields: [ 'theme_with_combined', 'theme_with_simple' ],
-			layout: {
-				primaryField: 'name',
-				combinedFields: [
-					{
-						id: 'name_tested',
-						label: 'Theme',
-						children: [ 'name', 'tested' ],
-						direction: 'vertical',
-					},
-					{
-						id: 'theme_with_combined',
-						label: 'Combine combined fields',
-						children: [ 'icon', 'name_tested' ],
-						direction: 'horizontal',
-					},
-					{
-						id: 'theme_with_simple',
-						label: 'Combine simple fields',
-						children: [ 'icon', 'name' ],
-						direction: 'horizontal',
-					},
-				] as CombinedField[],
-				styles: {
-					theme: {
-						maxWidth: 300,
-					},
-				},
-			},
-		},
-		grid: {
-			fields: [ 'description', 'requires', 'tested' ],
-			layout: { primaryField: 'name', columnFields: [ 'description' ] },
-		},
-		list: {
-			fields: [ 'requires', 'tested' ],
-			layout: { primaryField: 'name' },
-		},
-	};
-	const [ view, setView ] = useState< View >( {
-		...DEFAULT_VIEW,
-		fields: defaultLayoutsThemes.table.fields,
-		layout: defaultLayoutsThemes.table.layout,
-	} );
-	const { data: shownData, paginationInfo } = useMemo( () => {
-		return filterSortAndPaginate( themeData, view, themeFields );
-	}, [ view ] );
-
-	return (
-		<DataViews
-			getItemId={ ( item ) => item.name }
-			paginationInfo={ paginationInfo }
-			data={ shownData }
-			view={ view }
-			fields={ themeFields }
-			onChangeView={ setView }
-			defaultLayouts={ defaultLayoutsThemes }
-		/>
-	);
-};
diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index a357679bef1eb9..4e53d817960cd2 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -22,9 +22,32 @@
 	@include reduce-motion( "transition" );
 }
 
-.dataviews-view-list__primary-field,
-.dataviews-view-grid__primary-field,
-.dataviews-view-table__primary-field {
+.dataviews-no-results,
+.dataviews-loading {
+	padding: 0 $grid-unit-60;
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: padding ease-out 0.1s;
+	@include reduce-motion( "transition" );
+}
+
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+	.dataviews__view-actions,
+	.dataviews-filters__container {
+		padding: $grid-unit-15 $grid-unit-30;
+	}
+
+	.dataviews-no-results,
+	.dataviews-loading {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
+	}
+}
+
+.dataviews-primary-field {
 	font-size: $default-font-size;
 	font-weight: 500;
 	color: $gray-700;
@@ -72,34 +95,6 @@
 	}
 }
 
-.dataviews-view-list__primary-field--clickable,
-.dataviews-view-grid__primary-field--clickable,
-.dataviews-view-grid__media--clickable,
-.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable {
+.dataviews-primary-field--clickable {
 	cursor: pointer;
 }
-
-.dataviews-no-results,
-.dataviews-loading {
-	padding: 0 $grid-unit-60;
-	flex-grow: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion( "transition" );
-}
-
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
-@container (max-width: 430px) {
-	.dataviews__view-actions,
-	.dataviews-filters__container {
-		padding: $grid-unit-15 $grid-unit-30;
-	}
-
-	.dataviews-no-results,
-	.dataviews-loading {
-		padding-left: $grid-unit-30;
-		padding-right: $grid-unit-30;
-	}
-}
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index 17053e01604a55..14c00cdaf8c0c5 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -35,11 +35,11 @@ interface GridItemProps< Item > {
 	isItemClickable: ( item: Item ) => boolean;
 	item: Item;
 	actions: Action< Item >[];
+	titleField?: NormalizedField< Item >;
 	mediaField?: NormalizedField< Item >;
-	primaryField?: NormalizedField< Item >;
-	visibleFields: NormalizedField< Item >[];
+	descriptionField?: NormalizedField< Item >;
+	regularFields: NormalizedField< Item >[];
 	badgeFields: NormalizedField< Item >[];
-	columnFields?: string[];
 }
 
 function GridItem< Item >( {
@@ -51,10 +51,10 @@ function GridItem< Item >( {
 	item,
 	actions,
 	mediaField,
-	primaryField,
-	visibleFields,
+	titleField,
+	descriptionField,
+	regularFields,
 	badgeFields,
-	columnFields,
 }: GridItemProps< Item > ) {
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
@@ -62,8 +62,8 @@ function GridItem< Item >( {
 	const renderedMediaField = mediaField?.render ? (
 		<mediaField.render item={ item } />
 	) : null;
-	const renderedPrimaryField = primaryField?.render ? (
-		<primaryField.render item={ item } />
+	const renderedTitleField = titleField?.render ? (
+		<titleField.render item={ item } />
 	) : null;
 
 	const clickableMediaItemProps = getClickableItemProps( {
@@ -77,7 +77,7 @@ function GridItem< Item >( {
 		item,
 		isItemClickable,
 		onClickItem,
-		className: 'dataviews-view-grid__primary-field',
+		className: 'dataviews-view-grid__primary-field dataviews-primary-field',
 	} );
 
 	return (
@@ -108,7 +108,7 @@ function GridItem< Item >( {
 				selection={ selection }
 				onChangeSelection={ onChangeSelection }
 				getItemId={ getItemId }
-				primaryField={ primaryField }
+				primaryField={ titleField }
 				disabled={ ! hasBulkAction }
 			/>
 			<HStack
@@ -116,68 +116,67 @@ function GridItem< Item >( {
 				className="dataviews-view-grid__title-actions"
 			>
 				<div { ...clickablePrimaryItemProps }>
-					{ renderedPrimaryField }
+					{ renderedTitleField }
 				</div>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
-			{ !! badgeFields?.length && (
-				<HStack
-					className="dataviews-view-grid__badge-fields"
-					spacing={ 2 }
-					wrap
-					alignment="top"
-					justify="flex-start"
-				>
-					{ badgeFields.map( ( field ) => {
-						return (
-							<FlexItem
-								key={ field.id }
-								className="dataviews-view-grid__field-value"
-							>
-								<field.render item={ item } />
-							</FlexItem>
-						);
-					} ) }
-				</HStack>
-			) }
-			{ !! visibleFields?.length && (
-				<VStack className="dataviews-view-grid__fields" spacing={ 1 }>
-					{ visibleFields.map( ( field ) => {
-						return (
-							<Flex
-								className={ clsx(
-									'dataviews-view-grid__field',
-									columnFields?.includes( field.id )
-										? 'is-column'
-										: 'is-row'
-								) }
-								key={ field.id }
-								gap={ 1 }
-								justify="flex-start"
-								expanded
-								style={ { height: 'auto' } }
-								direction={
-									columnFields?.includes( field.id )
-										? 'column'
-										: 'row'
-								}
-							>
-								<>
-									<FlexItem className="dataviews-view-grid__field-name">
-										{ field.header }
-									</FlexItem>
-									<FlexItem
-										className="dataviews-view-grid__field-value"
-										style={ { maxHeight: 'none' } }
-									>
-										<field.render item={ item } />
-									</FlexItem>
-								</>
-							</Flex>
-						);
-					} ) }
-				</VStack>
-			) }
+			<VStack spacing={ 1 }>
+				{ descriptionField?.render && (
+					<descriptionField.render item={ item } />
+				) }
+				{ !! badgeFields?.length && (
+					<HStack
+						className="dataviews-view-grid__badge-fields"
+						spacing={ 2 }
+						wrap
+						alignment="top"
+						justify="flex-start"
+					>
+						{ badgeFields.map( ( field ) => {
+							return (
+								<FlexItem
+									key={ field.id }
+									className="dataviews-view-grid__field-value"
+								>
+									<field.render item={ item } />
+								</FlexItem>
+							);
+						} ) }
+					</HStack>
+				) }
+				{ !! regularFields?.length && (
+					<VStack
+						className="dataviews-view-grid__fields"
+						spacing={ 1 }
+					>
+						{ regularFields.map( ( field ) => {
+							return (
+								<Flex
+									className="dataviews-view-grid__field"
+									key={ field.id }
+									gap={ 1 }
+									justify="flex-start"
+									expanded
+									style={ { height: 'auto' } }
+									direction="row"
+								>
+									<>
+										<FlexItem className="dataviews-view-grid__field-name">
+											{ field.header }
+										</FlexItem>
+										<FlexItem
+											className="dataviews-view-grid__field-value"
+											style={ { maxHeight: 'none' } }
+										>
+											<field.render item={ item } />
+										</FlexItem>
+									</>
+								</Flex>
+							);
+						} ) }
+					</VStack>
+				) }
+			</VStack>
 		</VStack>
 	);
 }
@@ -194,20 +193,24 @@ export default function ViewGrid< Item >( {
 	selection,
 	view,
 }: ViewGridProps< Item > ) {
+	const titleField = fields.find(
+		( field ) => field.id === view?.titleField
+	);
 	const mediaField = fields.find(
-		( field ) => field.id === view.layout?.mediaField
+		( field ) => field.id === view?.mediaField
 	);
-	const primaryField = fields.find(
-		( field ) => field.id === view.layout?.primaryField
+	const descriptionField = fields.find(
+		( field ) => field.id === view?.descriptionField
 	);
-	const viewFields = view.fields || fields.map( ( field ) => field.id );
-	const { visibleFields, badgeFields } = fields.reduce(
+	const otherFields = view.fields ?? [];
+	const { regularFields, badgeFields } = fields.reduce(
 		( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {
 			if (
-				! viewFields.includes( field.id ) ||
+				! otherFields.includes( field.id ) ||
 				[
-					view.layout?.mediaField,
-					view?.layout?.primaryField,
+					view?.mediaField,
+					view?.titleField,
+					view?.descriptionField,
 				].includes( field.id )
 			) {
 				return accumulator;
@@ -216,11 +219,11 @@ export default function ViewGrid< Item >( {
 			// otherwise add it to the rest visibleFields array.
 			const key = view.layout?.badgeFields?.includes( field.id )
 				? 'badgeFields'
-				: 'visibleFields';
+				: 'regularFields';
 			accumulator[ key ].push( field );
 			return accumulator;
 		},
-		{ visibleFields: [], badgeFields: [] }
+		{ regularFields: [], badgeFields: [] }
 	);
 	const hasData = !! data?.length;
 	const updatedPreviewSize = useUpdatedPreviewSizeOnViewportChange();
@@ -253,10 +256,10 @@ export default function ViewGrid< Item >( {
 								item={ item }
 								actions={ actions }
 								mediaField={ mediaField }
-								primaryField={ primaryField }
-								visibleFields={ visibleFields }
+								titleField={ titleField }
+								descriptionField={ descriptionField }
+								regularFields={ regularFields }
 								badgeFields={ badgeFields }
-								columnFields={ view.layout?.columnFields }
 							/>
 						);
 					} ) }
diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index f209accc6de15c..07af792d58ce51 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -81,36 +81,23 @@
 		}
 
 		.dataviews-view-grid__field {
-			align-items: flex-start;
 			min-height: $grid-unit-30;
+			align-items: center;
 
-			&:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
-				display: none;
-			}
-
-			&:not(.is-column) {
-				align-items: center;
-
-				.dataviews-view-grid__field-name {
-					width: 35%;
-				}
-
-				.dataviews-view-grid__field-value {
-					width: 65%;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
+			.dataviews-view-grid__field-name {
+				width: 35%;
+				color: $gray-700;
 			}
 
-			&.is-column {
-				& + .is-row {
-					margin-top: $grid-unit-05;
-				}
+			.dataviews-view-grid__field-value {
+				width: 65%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 			}
 
-			.dataviews-view-grid__field-name {
-				color: $gray-700;
+			&:not(:has(.dataviews-view-grid__field-value:not(:empty))) {
+				display: none;
 			}
 		}
 	}
diff --git a/packages/dataviews/src/dataviews-layouts/index.ts b/packages/dataviews/src/dataviews-layouts/index.ts
index 7abdd1eb459328..f2455f81f1560c 100644
--- a/packages/dataviews/src/dataviews-layouts/index.ts
+++ b/packages/dataviews/src/dataviews-layouts/index.ts
@@ -16,7 +16,6 @@ import ViewTable from './table';
 import ViewGrid from './grid';
 import ViewList from './list';
 import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../constants';
-import type { View, Field } from '../types';
 import PreviewSizePicker from './grid/preview-size-picker';
 import DensityPicker from './table/density-picker';
 
@@ -42,90 +41,3 @@ export const VIEW_LAYOUTS = [
 		icon: isRTL() ? formatListBulletsRTL : formatListBullets,
 	},
 ];
-
-export function getNotHidableFieldIds( view: View ): string[] {
-	if ( view.type === 'table' ) {
-		return [ view.layout?.primaryField ]
-			.concat(
-				view.layout?.combinedFields?.flatMap(
-					( field ) => field.children
-				) ?? []
-			)
-			.filter( ( item ): item is string => !! item );
-	}
-
-	if ( view.type === 'grid' ) {
-		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
-			( item ): item is string => !! item
-		);
-	}
-
-	if ( view.type === 'list' ) {
-		return [ view.layout?.primaryField, view.layout?.mediaField ].filter(
-			( item ): item is string => !! item
-		);
-	}
-
-	return [];
-}
-
-function getCombinedFieldIds( view: View ): string[] {
-	const combinedFields: string[] = [];
-	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
-		view.layout.combinedFields.forEach( ( combination ) => {
-			combinedFields.push( ...combination.children );
-		} );
-	}
-	return combinedFields;
-}
-
-export function getVisibleFieldIds(
-	view: View,
-	fields: Field< any >[]
-): string[] {
-	const fieldsToExclude = getCombinedFieldIds( view );
-
-	if ( view.fields ) {
-		return view.fields.filter( ( id ) => ! fieldsToExclude.includes( id ) );
-	}
-
-	const visibleFields = [];
-	if ( view.type === LAYOUT_TABLE && view.layout?.combinedFields ) {
-		visibleFields.push(
-			...view.layout.combinedFields.map( ( { id } ) => id )
-		);
-	}
-	visibleFields.push(
-		...fields
-			.filter( ( { id } ) => ! fieldsToExclude.includes( id ) )
-			.map( ( { id } ) => id )
-	);
-
-	return visibleFields;
-}
-
-export function getHiddenFieldIds(
-	view: View,
-	fields: Field< any >[]
-): string[] {
-	const fieldsToExclude = [
-		...getCombinedFieldIds( view ),
-		...getVisibleFieldIds( view, 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 } ) =>
-				! fieldsToExclude.includes( id ) && enableHiding
-		)
-		.map( ( { id } ) => id );
-}
diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
index 47b9961d97df18..ca844598dc261f 100644
--- a/packages/dataviews/src/dataviews-layouts/list/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -42,10 +42,11 @@ interface ListViewItemProps< Item > {
 	idPrefix: string;
 	isSelected: boolean;
 	item: Item;
+	titleField?: NormalizedField< Item >;
 	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
 	onSelect: ( item: Item ) => void;
-	primaryField?: NormalizedField< Item >;
-	visibleFields: NormalizedField< Item >[];
+	otherFields: NormalizedField< Item >[];
 	onDropdownTriggerKeyDown: React.KeyboardEventHandler< HTMLButtonElement >;
 }
 
@@ -134,10 +135,11 @@ function ListItem< Item >( {
 	idPrefix,
 	isSelected,
 	item,
+	titleField,
 	mediaField,
+	descriptionField,
 	onSelect,
-	primaryField,
-	visibleFields,
+	otherFields,
 	onDropdownTriggerKeyDown,
 }: ListViewItemProps< Item > ) {
 	const itemRef = useRef< HTMLDivElement >( null );
@@ -183,8 +185,8 @@ function ListItem< Item >( {
 		</div>
 	) : null;
 
-	const renderedPrimaryField = primaryField?.render ? (
-		<primaryField.render item={ item } />
+	const renderedTitleField = titleField?.render ? (
+		<titleField.render item={ item } />
 	) : null;
 
 	const usedActions = eligibleActions?.length > 0 && (
@@ -259,18 +261,23 @@ function ListItem< Item >( {
 					>
 						<HStack spacing={ 0 }>
 							<div
-								className="dataviews-view-list__primary-field"
+								className="dataviews-primary-field"
 								id={ labelId }
 							>
-								{ renderedPrimaryField }
+								{ renderedTitleField }
 							</div>
 							{ usedActions }
 						</HStack>
+						{ descriptionField?.render && (
+							<div className="dataviews-view-list__field">
+								<descriptionField.render item={ item } />
+							</div>
+						) }
 						<div
 							className="dataviews-view-list__fields"
 							id={ descriptionId }
 						>
-							{ visibleFields.map( ( field ) => (
+							{ otherFields.map( ( field ) => (
 								<div
 									key={ field.id }
 									className="dataviews-view-list__field"
@@ -310,20 +317,19 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	const selectedItem = data?.findLast( ( item ) =>
 		selection.includes( getItemId( item ) )
 	);
-
-	const mediaField = fields.find(
-		( field ) => field.id === view.layout?.mediaField
-	);
-	const primaryField = fields.find(
-		( field ) => field.id === view.layout?.primaryField
+	const titleField = fields.find( ( field ) => field.id === view.titleField );
+	const mediaField = fields.find( ( field ) => field.id === view.mediaField );
+	const descriptionField = fields.find(
+		( field ) => field.id === view.descriptionField
 	);
-	const viewFields = view.fields || fields.map( ( field ) => field.id );
-	const visibleFields = fields.filter(
+	const otherFields = fields.filter(
 		( field ) =>
-			viewFields.includes( field.id ) &&
-			! [ view.layout?.primaryField, view.layout?.mediaField ].includes(
-				field.id
-			)
+			( view.fields ?? [] ).includes( field.id ) &&
+			! [
+				view.titleField,
+				view.mediaField,
+				view.descriptionField,
+			].includes( field.id )
 	);
 
 	const onSelect = ( item: Item ) =>
@@ -471,8 +477,9 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 						isSelected={ item === selectedItem }
 						onSelect={ onSelect }
 						mediaField={ mediaField }
-						primaryField={ primaryField }
-						visibleFields={ visibleFields }
+						titleField={ titleField }
+						descriptionField={ descriptionField }
+						otherFields={ otherFields }
 						onDropdownTriggerKeyDown={ onDropdownTriggerKeyDown }
 					/>
 				);
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
index 7071e54620f369..9fcbff3bde4873 100644
--- a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
@@ -27,7 +27,6 @@ import type {
 	ViewTable as ViewTableType,
 	Operator,
 } from '../../types';
-import { getVisibleFieldIds } from '../index';
 
 const { Menu } = unlock( componentsPrivateApis );
 
@@ -62,43 +61,34 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	}: HeaderMenuProps< Item >,
 	ref: Ref< HTMLButtonElement >
 ) {
-	const visibleFieldIds = getVisibleFieldIds( view, fields );
+	const visibleFieldIds = view.fields ?? [];
 	const index = visibleFieldIds?.indexOf( fieldId ) as number;
 	const isSorted = view.sort?.field === fieldId;
 	let isHidable = false;
 	let isSortable = false;
 	let canAddFilter = false;
-	let header;
 	let operators: Operator[] = [];
-
-	const combinedField = view.layout?.combinedFields?.find(
-		( f ) => f.id === fieldId
-	);
 	const field = fields.find( ( f ) => f.id === fieldId );
 
-	if ( ! combinedField ) {
-		if ( ! field ) {
-			// No combined or regular field found.
-			return null;
-		}
+	if ( ! field ) {
+		// No combined or regular field found.
+		return null;
+	}
 
-		isHidable = field.enableHiding !== false;
-		isSortable = field.enableSorting !== false;
-		header = field.header;
+	isHidable = field.enableHiding !== false;
+	isSortable = field.enableSorting !== false;
+	const header = field.header;
 
-		operators = sanitizeOperators( field );
-		// Filter can be added:
-		// 1. If the field is not already part of a view's filters.
-		// 2. If the field meets the type and operator requirements.
-		// 3. If it's not primary. If it is, it should be already visible.
-		canAddFilter =
-			! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
-			!! field.elements?.length &&
-			!! operators.length &&
-			! field.filterBy?.isPrimary;
-	} else {
-		header = combinedField.header || combinedField.label;
-	}
+	operators = sanitizeOperators( field );
+	// Filter can be added:
+	// 1. If the field is not already part of a view's filters.
+	// 2. If the field meets the type and operator requirements.
+	// 3. If it's not primary. If it is, it should be already visible.
+	canAddFilter =
+		! view.filters?.some( ( _filter ) => fieldId === _filter.field ) &&
+		!! field.elements?.length &&
+		!! operators.length &&
+		! field.filterBy?.isPrimary;
 
 	return (
 		<Menu
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
new file mode 100644
index 00000000000000..662e3bcbe29648
--- /dev/null
+++ b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+import getClickableItemProps from '../utils/get-clickable-item-props';
+
+function ColumnPrimary< Item >( {
+	item,
+	titleField,
+	mediaField,
+	descriptionField,
+	onClickItem,
+	isItemClickable,
+}: {
+	item: Item;
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
+	onClickItem?: ( item: Item ) => void;
+	isItemClickable: ( item: Item ) => boolean;
+} ) {
+	const clickableProps = getClickableItemProps( {
+		item,
+		isItemClickable,
+		onClickItem,
+		className:
+			'dataviews-view-table__cell-content-wrapper dataviews-primary-field',
+	} );
+	return (
+		<HStack spacing={ 3 } justify="flex-start">
+			{ mediaField && (
+				<div className="dataviews-view-table__cell-content-wrapper dataviews-column-primary__media">
+					<mediaField.render item={ item } />
+				</div>
+			) }
+			<VStack spacing={ 0 }>
+				{ titleField && (
+					<div { ...clickableProps }>
+						<titleField.render item={ item } />
+					</div>
+				) }
+				{ descriptionField && (
+					<descriptionField.render item={ item } />
+				) }
+			</VStack>
+		</HStack>
+	);
+}
+
+export default ColumnPrimary;
diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
index 81d856451bfcdc..c7a223cfa2885e 100644
--- a/packages/dataviews/src/dataviews-layouts/table/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -7,11 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	Spinner,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { Spinner } from '@wordpress/components';
 import { useEffect, useId, useRef, useState } from '@wordpress/element';
 
 /**
@@ -30,39 +26,15 @@ import type {
 	NormalizedField,
 	ViewTable as ViewTableType,
 	ViewTableProps,
-	CombinedField,
 } from '../../types';
 import type { SetSelection } from '../../private-types';
 import ColumnHeaderMenu from './column-header-menu';
-import { getVisibleFieldIds } from '../index';
-import getClickableItemProps from '../utils/get-clickable-item-props';
+import ColumnPrimary from './column-primary';
 
 interface TableColumnFieldProps< Item > {
-	primaryField?: NormalizedField< Item >;
-	field: NormalizedField< Item >;
-	item: Item;
-	isItemClickable: ( item: Item ) => boolean;
-	onClickItem?: ( item: Item ) => void;
-}
-
-interface TableColumnCombinedProps< Item > {
-	primaryField?: NormalizedField< Item >;
-	fields: NormalizedField< Item >[];
-	field: CombinedField;
-	item: Item;
-	view: ViewTableType;
-	isItemClickable: ( item: Item ) => boolean;
-	onClickItem?: ( item: Item ) => void;
-}
-
-interface TableColumnProps< Item > {
-	primaryField?: NormalizedField< Item >;
 	fields: NormalizedField< Item >[];
-	item: Item;
 	column: string;
-	view: ViewTableType;
-	isItemClickable: ( item: Item ) => boolean;
-	onClickItem?: ( item: Item ) => void;
+	item: Item;
 }
 
 interface TableRowProps< Item > {
@@ -72,7 +44,9 @@ interface TableRowProps< Item > {
 	fields: NormalizedField< Item >[];
 	id: string;
 	view: ViewTableType;
-	primaryField?: NormalizedField< Item >;
+	titleField?: NormalizedField< Item >;
+	mediaField?: NormalizedField< Item >;
+	descriptionField?: NormalizedField< Item >;
 	selection: string[];
 	getItemId: ( item: Item ) => string;
 	onChangeSelection: SetSelection;
@@ -80,82 +54,24 @@ interface TableRowProps< Item > {
 	onClickItem?: ( item: Item ) => void;
 }
 
-function TableColumn< Item >( {
-	column,
-	fields,
-	view,
-	...props
-}: TableColumnProps< Item > ) {
-	const field = fields.find( ( f ) => f.id === column );
-	if ( !! field ) {
-		return <TableColumnField { ...props } field={ field } />;
-	}
-	const combinedField = view.layout?.combinedFields?.find(
-		( f ) => f.id === column
-	);
-	if ( !! combinedField ) {
-		return (
-			<TableColumnCombined
-				{ ...props }
-				fields={ fields }
-				view={ view }
-				field={ combinedField }
-			/>
-		);
-	}
-
-	return null;
-}
-
 function TableColumnField< Item >( {
-	primaryField,
 	item,
-	field,
-	isItemClickable,
-	onClickItem,
+	fields,
+	column,
 }: TableColumnFieldProps< Item > ) {
-	const isPrimaryField = primaryField?.id === field.id;
-	const isItemClickableField = ( i: Item ) =>
-		isItemClickable( i ) && isPrimaryField;
+	const field = fields.find( ( f ) => f.id === column );
 
-	const clickableProps = getClickableItemProps( {
-		item,
-		isItemClickable: isItemClickableField,
-		onClickItem,
-		className: 'dataviews-view-table__cell-content',
-	} );
+	if ( ! field ) {
+		return null;
+	}
 
 	return (
-		<div
-			className={ clsx( 'dataviews-view-table__cell-content-wrapper', {
-				'dataviews-view-table__primary-field': isPrimaryField,
-			} ) }
-		>
-			<div { ...clickableProps }>
-				<field.render { ...{ item } } />
-			</div>
+		<div className="dataviews-view-table__cell-content-wrapper">
+			<field.render { ...{ item } } />
 		</div>
 	);
 }
 
-function TableColumnCombined< Item >( {
-	field,
-	...props
-}: TableColumnCombinedProps< Item > ) {
-	const children = field.children.map( ( child ) => (
-		<TableColumn key={ child } { ...props } column={ child } />
-	) );
-
-	if ( field.direction === 'horizontal' ) {
-		return (
-			<HStack spacing={ 3 } justify="flex-start">
-				{ children }
-			</HStack>
-		);
-	}
-	return <VStack spacing={ 0 }>{ children }</VStack>;
-}
-
 function TableRow< Item >( {
 	hasBulkActions,
 	item,
@@ -163,7 +79,9 @@ function TableRow< Item >( {
 	fields,
 	id,
 	view,
-	primaryField,
+	titleField,
+	mediaField,
+	descriptionField,
 	selection,
 	getItemId,
 	isItemClickable,
@@ -185,7 +103,8 @@ function TableRow< Item >( {
 	// `onClick` and can be used to exclude touchscreen devices from certain
 	// behaviours.
 	const isTouchDeviceRef = useRef( false );
-	const columns = getVisibleFieldIds( view, fields );
+	const columns = view.fields ?? [];
+	const hasPrimaryColumn = titleField || mediaField || descriptionField;
 
 	return (
 		<tr
@@ -228,12 +147,24 @@ function TableRow< Item >( {
 							selection={ selection }
 							onChangeSelection={ onChangeSelection }
 							getItemId={ getItemId }
-							primaryField={ primaryField }
+							primaryField={ titleField }
 							disabled={ ! hasPossibleBulkAction }
 						/>
 					</div>
 				</td>
 			) }
+			{ hasPrimaryColumn && (
+				<td>
+					<ColumnPrimary
+						item={ item }
+						titleField={ titleField }
+						mediaField={ mediaField }
+						descriptionField={ descriptionField }
+						isItemClickable={ isItemClickable }
+						onClickItem={ onClickItem }
+					/>
+				</td>
+			) }
 			{ columns.map( ( column: string ) => {
 				// Explicits picks the supported styles.
 				const { width, maxWidth, minWidth } =
@@ -241,14 +172,10 @@ function TableRow< Item >( {
 
 				return (
 					<td key={ column } style={ { width, maxWidth, minWidth } }>
-						<TableColumn
-							primaryField={ primaryField }
-							isItemClickable={ isItemClickable }
-							onClickItem={ onClickItem }
+						<TableColumnField
 							fields={ fields }
 							item={ item }
 							column={ column }
-							view={ view }
 						/>
 					</td>
 				);
@@ -322,12 +249,15 @@ function ViewTable< Item >( {
 		setNextHeaderMenuToFocus( fallback?.node );
 	};
 
-	const columns = getVisibleFieldIds( view, fields );
 	const hasData = !! data?.length;
 
-	const primaryField = fields.find(
-		( field ) => field.id === view.layout?.primaryField
+	const titleField = fields.find( ( field ) => field.id === view.titleField );
+	const mediaField = fields.find( ( field ) => field.id === view.mediaField );
+	const descriptionField = fields.find(
+		( field ) => field.id === view.descriptionField
 	);
+	const hasPrimaryColumn = titleField || mediaField || descriptionField;
+	const columns = view.fields ?? [];
 
 	return (
 		<>
@@ -361,6 +291,13 @@ function ViewTable< Item >( {
 								/>
 							</th>
 						) }
+						{ hasPrimaryColumn && (
+							<th scope="col">
+								<span className="dataviews-view-table-header">
+									{ __( 'Primary' ) }
+								</span>
+							</th>
+						) }
 						{ columns.map( ( column, index ) => {
 							// Explicits picks the supported styles.
 							const { width, maxWidth, minWidth } =
@@ -370,6 +307,7 @@ function ViewTable< Item >( {
 									key={ column }
 									style={ { width, maxWidth, minWidth } }
 									aria-sort={
+										view.sort?.direction &&
 										view.sort?.field === column
 											? sortValues[ view.sort.direction ]
 											: undefined
@@ -427,7 +365,9 @@ function ViewTable< Item >( {
 								fields={ fields }
 								id={ getItemId( item ) || index.toString() }
 								view={ view }
-								primaryField={ primaryField }
+								titleField={ titleField }
+								mediaField={ mediaField }
+								descriptionField={ descriptionField }
 								selection={ selection }
 								getItemId={ getItemId }
 								onChangeSelection={ onChangeSelection }
diff --git a/packages/dataviews/src/dataviews-layouts/table/style.scss b/packages/dataviews/src/dataviews-layouts/table/style.scss
index 3bbb045c73a9d9..5a713dd428c127 100644
--- a/packages/dataviews/src/dataviews-layouts/table/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/table/style.scss
@@ -222,3 +222,7 @@
 		--checkbox-input-size: 16px;
 	}
 }
+
+.dataviews-column-primary__media {
+	max-width: 60px;
+}
diff --git a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
index d952839d376d2c..e03e3a6351ec15 100644
--- a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
+++ b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
@@ -7,14 +7,16 @@ export default function getClickableItemProps< Item >( {
 	item: Item;
 	isItemClickable: ( item: Item ) => boolean;
 	onClickItem?: ( item: Item ) => void;
-	className: string;
+	className?: string;
 } ) {
 	if ( ! isItemClickable( item ) || ! onClickItem ) {
 		return { className };
 	}
 
 	return {
-		className: `${ className } ${ className }--clickable`,
+		className: className
+			? `${ className } ${ className }--clickable`
+			: undefined,
 		role: 'button',
 		tabIndex: 0,
 		onClick: ( event: React.MouseEvent ) => {
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 5639f3cac0da51..781682354c811d 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -3,6 +3,7 @@
 @import "./components/dataviews-filters/style.scss";
 @import "./components/dataviews-footer/style.scss";
 @import "./components/dataviews-pagination/style.scss";
+@import "./components/dataviews-primary-field/style.scss";
 @import "./components/dataviews-item-actions/style.scss";
 @import "./components/dataviews-selection-checkbox/style.scss";
 @import "./components/dataviews-view-config/style.scss";
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 0bce8b8cf2c08a..b68c34fcc76706 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -292,24 +292,21 @@ interface ViewBase {
 	 * The fields to render
 	 */
 	fields?: string[];
-}
-
-export interface CombinedField {
-	id: string;
-
-	label: string;
 
-	header?: string | ReactElement;
+	/**
+	 * Title field
+	 */
+	titleField?: string;
 
 	/**
-	 * The fields to use as columns.
+	 * Media field
 	 */
-	children: string[];
+	mediaField?: string;
 
 	/**
-	 * The direction of the stack.
+	 * Description field
 	 */
-	direction: 'horizontal' | 'vertical';
+	descriptionField?: string;
 }
 
 export interface ColumnStyle {
@@ -335,16 +332,6 @@ export interface ViewTable extends ViewBase {
 	type: 'table';
 
 	layout?: {
-		/**
-		 * The field to use as the primary field.
-		 */
-		primaryField?: string;
-
-		/**
-		 * The fields to use as columns.
-		 */
-		combinedFields?: CombinedField[];
-
 		/**
 		 * The styles for the columns.
 		 */
@@ -359,39 +346,12 @@ export interface ViewTable extends ViewBase {
 
 export interface ViewList extends ViewBase {
 	type: 'list';
-
-	layout?: {
-		/**
-		 * The field to use as the primary field.
-		 */
-		primaryField?: string;
-
-		/**
-		 * The field to use as the media field.
-		 */
-		mediaField?: string;
-	};
 }
 
 export interface ViewGrid extends ViewBase {
 	type: 'grid';
 
 	layout?: {
-		/**
-		 * The field to use as the primary field.
-		 */
-		primaryField?: string;
-
-		/**
-		 * The field to use as the media field.
-		 */
-		mediaField?: string;
-
-		/**
-		 * The fields to use as columns.
-		 */
-		columnFields?: string[];
-
 		/**
 		 * The fields to use as badge fields.
 		 */
diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
index 9a4dedca098030..da6c7878eed98e 100644
--- a/packages/edit-site/src/components/page-patterns/index.js
+++ b/packages/edit-site/src/components/page-patterns/index.js
@@ -41,11 +41,7 @@ const EMPTY_ARRAY = [];
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
-			primaryField: 'title',
 			styles: {
-				preview: {
-					width: '1%',
-				},
 				author: {
 					width: '1%',
 				},
@@ -54,8 +50,6 @@ const defaultLayouts = {
 	},
 	[ LAYOUT_GRID ]: {
 		layout: {
-			mediaField: 'preview',
-			primaryField: 'title',
 			badgeFields: [ 'sync-status' ],
 		},
 	},
@@ -65,8 +59,10 @@ const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 20,
+	titleField: 'title',
+	mediaField: 'preview',
 	layout: defaultLayouts[ LAYOUT_GRID ].layout,
-	fields: [ 'title', 'sync-status' ],
+	fields: [ 'sync-status' ],
 	filters: [],
 };
 
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
index 934fb0be6784d7..663c8971471c97 100644
--- a/packages/edit-site/src/components/page-templates/index.js
+++ b/packages/edit-site/src/components/page-templates/index.js
@@ -34,25 +34,13 @@ const EMPTY_ARRAY = [];
 
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
-		fields: [ 'template', 'author' ],
+		mediaField: 'preview',
 		layout: {
-			primaryField: 'title',
-			combinedFields: [
-				{
-					id: 'template',
-					label: __( 'Template' ),
-					children: [ 'title', 'description' ],
-					direction: 'vertical',
-				},
-			],
 			styles: {
-				template: {
+				__primary: {
 					maxWidth: 400,
 					minWidth: 320,
 				},
-				preview: {
-					width: '1%',
-				},
 				author: {
 					width: '1%',
 				},
@@ -60,18 +48,12 @@ const defaultLayouts = {
 		},
 	},
 	[ LAYOUT_GRID ]: {
-		fields: [ 'title', 'description', 'author' ],
-		layout: {
-			mediaField: 'preview',
-			primaryField: 'title',
-			columnFields: [ 'description' ],
-		},
+		mediaField: 'preview',
+		layout: {},
 	},
 	[ LAYOUT_LIST ]: {
-		fields: [ 'title', 'description', 'author' ],
-		layout: {
-			primaryField: 'title',
-		},
+		mediaField: undefined,
+		layout: {},
 	},
 };
 
@@ -84,9 +66,11 @@ const DEFAULT_VIEW = {
 		field: 'title',
 		direction: 'asc',
 	},
-	fields: defaultLayouts[ LAYOUT_GRID ].fields,
-	layout: defaultLayouts[ LAYOUT_GRID ].layout,
+	titleField: 'title',
+	descriptionField: 'description',
+	fields: [ 'author' ],
 	filters: [],
+	...defaultLayouts[ LAYOUT_GRID ],
 };
 
 export default function PageTemplates() {
@@ -99,8 +83,6 @@ export default function PageTemplates() {
 		return {
 			...DEFAULT_VIEW,
 			type: usedType,
-			layout: defaultLayouts[ usedType ].layout,
-			fields: defaultLayouts[ usedType ].fields,
 			filters:
 				activeView !== 'all'
 					? [
@@ -111,6 +93,7 @@ export default function PageTemplates() {
 							},
 					  ]
 					: [],
+			...defaultLayouts[ usedType ],
 		};
 	}, [ layout, activeView ] );
 	const [ view, setView ] = useState( defaultView );
diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js
index 200aa60ee17977..145a5e8243ac54 100644
--- a/packages/edit-site/src/components/post-list/index.js
+++ b/packages/edit-site/src/components/post-list/index.js
@@ -55,7 +55,7 @@ const getCustomView = ( editedEntityRecord ) => {
 
 	return {
 		...content,
-		layout: defaultLayouts[ content.type ]?.layout,
+		...defaultLayouts[ content.type ],
 	};
 };
 
diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
index 72f4c94fe6bcdd..f015e63cd5291c 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -29,25 +29,18 @@ import {
 export const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
-			primaryField: 'title',
 			styles: {
-				title: {
+				__primary: {
 					maxWidth: 300,
 				},
 			},
 		},
 	},
 	[ LAYOUT_GRID ]: {
-		layout: {
-			mediaField: 'featured_media',
-			primaryField: 'title',
-		},
+		layout: {},
 	},
 	[ LAYOUT_LIST ]: {
-		layout: {
-			primaryField: 'title',
-			mediaField: 'featured_media',
-		},
+		layout: {},
 	},
 };
 
@@ -61,8 +54,10 @@ const DEFAULT_POST_BASE = {
 		field: 'date',
 		direction: 'desc',
 	},
-	fields: [ 'title', 'author', 'status' ],
-	layout: defaultLayouts[ LAYOUT_LIST ].layout,
+	titleField: 'title',
+	mediaField: 'featured_media',
+	fields: [ 'author', 'status' ],
+	...defaultLayouts[ LAYOUT_LIST ],
 };
 
 export function useDefaultViews( { postType } ) {

From b309593b0b8a898fd30397dfd2b85e76d42e26a2 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 3 Dec 2024 09:57:34 +0100
Subject: [PATCH 02/20] Fix build

---
 packages/dataviews/src/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 781682354c811d..5639f3cac0da51 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -3,7 +3,6 @@
 @import "./components/dataviews-filters/style.scss";
 @import "./components/dataviews-footer/style.scss";
 @import "./components/dataviews-pagination/style.scss";
-@import "./components/dataviews-primary-field/style.scss";
 @import "./components/dataviews-item-actions/style.scss";
 @import "./components/dataviews-selection-checkbox/style.scss";
 @import "./components/dataviews-view-config/style.scss";

From 9c1fae32874e889edc79aee630b43d20d9910e7a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 3 Dec 2024 10:32:16 +0100
Subject: [PATCH 03/20] Rename selection checkbox prop

---
 .../src/components/dataviews-selection-checkbox/index.tsx | 8 ++++----
 packages/dataviews/src/dataviews-layouts/grid/index.tsx   | 6 +++---
 packages/dataviews/src/dataviews-layouts/table/index.tsx  | 6 +++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx b/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx
index c71636618716ba..827f061976443e 100644
--- a/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx
+++ b/packages/dataviews/src/components/dataviews-selection-checkbox/index.tsx
@@ -15,7 +15,7 @@ interface DataViewsSelectionCheckboxProps< Item > {
 	onChangeSelection: SetSelection;
 	item: Item;
 	getItemId: ( item: Item ) => string;
-	primaryField?: Field< Item >;
+	titleField?: Field< Item >;
 	disabled: boolean;
 }
 
@@ -24,19 +24,19 @@ export default function DataViewsSelectionCheckbox< Item >( {
 	onChangeSelection,
 	item,
 	getItemId,
-	primaryField,
+	titleField,
 	disabled,
 }: DataViewsSelectionCheckboxProps< Item > ) {
 	const id = getItemId( item );
 	const checked = ! disabled && selection.includes( id );
 	let selectionLabel;
-	if ( primaryField?.getValue && item ) {
+	if ( titleField?.getValue && item ) {
 		// eslint-disable-next-line @wordpress/valid-sprintf
 		selectionLabel = sprintf(
 			checked
 				? /* translators: %s: item title. */ __( 'Deselect item: %s' )
 				: /* translators: %s: item title. */ __( 'Select item: %s' ),
-			primaryField.getValue( { item } )
+			titleField.getValue( { item } )
 		);
 	} else {
 		selectionLabel = checked
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index 14c00cdaf8c0c5..6a25c2e9230330 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -20,7 +20,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import ItemActions from '../../components/dataviews-item-actions';
-import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
 import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
 import type { Action, NormalizedField, ViewGridProps } from '../../types';
 import type { SetSelection } from '../../private-types';
@@ -103,12 +103,12 @@ function GridItem< Item >( {
 			} }
 		>
 			<div { ...clickableMediaItemProps }>{ renderedMediaField }</div>
-			<SingleSelectionCheckbox
+			<DataViewsSelectionCheckbox
 				item={ item }
 				selection={ selection }
 				onChangeSelection={ onChangeSelection }
 				getItemId={ getItemId }
-				primaryField={ titleField }
+				titleField={ titleField }
 				disabled={ ! hasBulkAction }
 			/>
 			<HStack
diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
index c7a223cfa2885e..5a64bb394d6ade 100644
--- a/packages/dataviews/src/dataviews-layouts/table/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -13,7 +13,7 @@ import { useEffect, useId, useRef, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import SingleSelectionCheckbox from '../../components/dataviews-selection-checkbox';
+import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
 import ItemActions from '../../components/dataviews-item-actions';
 import { sortValues } from '../../constants';
 import {
@@ -142,12 +142,12 @@ function TableRow< Item >( {
 					} }
 				>
 					<div className="dataviews-view-table__cell-content-wrapper">
-						<SingleSelectionCheckbox
+						<DataViewsSelectionCheckbox
 							item={ item }
 							selection={ selection }
 							onChangeSelection={ onChangeSelection }
 							getItemId={ getItemId }
-							primaryField={ titleField }
+							titleField={ titleField }
 							disabled={ ! hasPossibleBulkAction }
 						/>
 					</div>

From 9475adbc43552fd5639b720e815d2a2573810408 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 3 Dec 2024 11:51:53 +0100
Subject: [PATCH 04/20] Support showing/hiding title, media and description
 fields

---
 packages/dataviews/CHANGELOG.md               |  15 +
 .../dataviews-view-config/index.tsx           | 265 +++++++++++-------
 .../src/dataviews-layouts/grid/index.tsx      |  42 ++-
 .../src/dataviews-layouts/list/index.tsx      |  31 +-
 .../src/dataviews-layouts/table/index.tsx     |  21 +-
 packages/dataviews/src/types.ts               |  15 +
 .../src/components/page-templates/index.js    |   7 +-
 7 files changed, 268 insertions(+), 128 deletions(-)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index 7ec1b24f8745c0..6b6f8ef6b54e11 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -2,6 +2,21 @@
 
 ## Unreleased
 
+## Breaking Changes
+
+-   Support showing or hiding title, media and description fields ([#67477](https://github.com/WordPress/gutenberg/pull/67477)).
+-   Unify the `title`, `media` and `description` fields for the different layouts. So instead of the previous `view.layout.mediaField`, `view.layout.primaryField` and `view.layout.columnFields`, all the layouts now support these three fields with the following config ([#67477](https://github.com/WordPress/gutenberg/pull/67477)): 
+
+```js
+const view = {
+    type: 'table',
+    titleField: 'title',
+    mediaField: 'media',
+    descriptionField: 'description',
+    fields: [ 'author', 'date' ],
+}
+```
+
 ## Internal
 
 -   Upgraded `@ariakit/react` (v0.4.13) and `@ariakit/test` (v0.4.5) ([#65907](https://github.com/WordPress/gutenberg/pull/65907)).
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index ef96cd755f0d05..e92e537da66981 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -33,12 +33,7 @@ import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import {
-	SORTING_DIRECTIONS,
-	LAYOUT_TABLE,
-	sortIcons,
-	sortLabels,
-} from '../../constants';
+import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
 import { VIEW_LAYOUTS } from '../../dataviews-layouts';
 import type { NormalizedField, SupportedLayouts, View } from '../../types';
 import DataViewsContext from '../dataviews-context';
@@ -234,22 +229,24 @@ function ItemsPerPageControl() {
 }
 
 function FieldItem( {
-	index,
 	field,
-	view,
-	onChangeView,
+	isVisible,
+	isFirst,
+	isLast,
+	onToggleVisibility,
+	onMoveUp,
+	onMoveDown,
 }: {
-	index?: number;
 	field: NormalizedField< any >;
-	view: View;
-	onChangeView: ( view: View ) => void;
+	isVisible: boolean;
+	isFirst?: boolean;
+	isLast?: boolean;
+	onToggleVisibility?: () => void;
+	onMoveUp?: () => void;
+	onMoveDown?: () => void;
 } ) {
-	const visibleFieldIds = view.fields ?? [];
-	const isVisible =
-		index !== undefined && visibleFieldIds.includes( field.id );
-
 	return (
-		<Item key={ field.id }>
+		<Item>
 			<HStack
 				expanded
 				className={ `dataviews-field-control__field dataviews-field-control__field-${ field.id }` }
@@ -260,28 +257,13 @@ function FieldItem( {
 					expanded={ false }
 					className="dataviews-field-control__actions"
 				>
-					{ view.type === LAYOUT_TABLE && isVisible && (
+					{ onMoveUp && onMoveDown && isVisible && (
 						<>
 							<Button
-								disabled={ index < 1 }
+								disabled={ isFirst }
 								accessibleWhenDisabled
 								size="compact"
-								onClick={ () => {
-									onChangeView( {
-										...view,
-										fields: [
-											...( visibleFieldIds.slice(
-												0,
-												index - 1
-											) ?? [] ),
-											field.id,
-											visibleFieldIds[ index - 1 ],
-											...visibleFieldIds.slice(
-												index + 1
-											),
-										],
-									} );
-								} }
+								onClick={ onMoveUp }
 								icon={ chevronUp }
 								label={ sprintf(
 									/* translators: %s: field label */
@@ -290,81 +272,128 @@ function FieldItem( {
 								) }
 							/>
 							<Button
-								disabled={ index >= visibleFieldIds.length - 1 }
+								disabled={ isLast }
 								accessibleWhenDisabled
 								size="compact"
-								onClick={ () => {
-									onChangeView( {
-										...view,
-										fields: [
-											...( visibleFieldIds.slice(
-												0,
-												index
-											) ?? [] ),
-											visibleFieldIds[ index + 1 ],
-											field.id,
-											...visibleFieldIds.slice(
-												index + 2
-											),
-										],
-									} );
-								} }
+								onClick={ onMoveDown }
 								icon={ chevronDown }
 								label={ sprintf(
 									/* translators: %s: field label */
 									__( 'Move %s down' ),
 									field.label
 								) }
-							/>{ ' ' }
+							/>
 						</>
 					) }
-					<Button
-						className="dataviews-field-control__field-visibility-button"
-						disabled={ ! field.enableHiding }
-						accessibleWhenDisabled
-						size="compact"
-						onClick={ () => {
-							onChangeView( {
-								...view,
-								fields: isVisible
-									? visibleFieldIds.filter(
-											( fieldId ) => fieldId !== field.id
+					{ onToggleVisibility && (
+						<Button
+							className="dataviews-field-control__field-visibility-button"
+							disabled={ ! field.enableHiding }
+							accessibleWhenDisabled
+							size="compact"
+							onClick={ onToggleVisibility }
+							icon={ isVisible ? unseen : seen }
+							label={
+								isVisible
+									? sprintf(
+											/* translators: %s: field label */
+											_x( 'Hide %s', 'field' ),
+											field.label
 									  )
-									: [ ...visibleFieldIds, field.id ],
-							} );
-							// 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-${ field.id } .dataviews-field-control__field-visibility-button`
-								);
-								if ( element instanceof HTMLElement ) {
-									element.focus();
-								}
-							}, 50 );
-						} }
-						icon={ isVisible ? unseen : seen }
-						label={
-							isVisible
-								? sprintf(
-										/* translators: %s: field label */
-										_x( 'Hide %s', 'field' ),
-										field.label
-								  )
-								: sprintf(
-										/* translators: %s: field label */
-										_x( 'Show %s', 'field' ),
-										field.label
-								  )
-						}
-					/>
+									: sprintf(
+											/* translators: %s: field label */
+											_x( 'Show %s', 'field' ),
+											field.label
+									  )
+							}
+						/>
+					) }
 				</HStack>
 			</HStack>
 		</Item>
 	);
 }
 
+function RegularFieldItem( {
+	index,
+	field,
+	view,
+	onChangeView,
+}: {
+	index?: number;
+	field: NormalizedField< any >;
+	view: View;
+	onChangeView: ( view: View ) => void;
+} ) {
+	const visibleFieldIds = view.fields ?? [];
+	const isVisible =
+		index !== undefined && visibleFieldIds.includes( field.id );
+
+	return (
+		<FieldItem
+			field={ field }
+			isVisible={ isVisible }
+			isFirst={ !! index && index < 1 }
+			isLast={ !! index && index === visibleFieldIds.length - 1 }
+			onToggleVisibility={ () => {
+				onChangeView( {
+					...view,
+					fields: isVisible
+						? visibleFieldIds.filter(
+								( fieldId ) => fieldId !== field.id
+						  )
+						: [ ...visibleFieldIds, field.id ],
+				} );
+				// 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-${ field.id } .dataviews-field-control__field-visibility-button`
+					);
+					if ( element instanceof HTMLElement ) {
+						element.focus();
+					}
+				}, 50 );
+			} }
+			onMoveUp={
+				index
+					? () => {
+							onChangeView( {
+								...view,
+								fields: [
+									...( visibleFieldIds.slice(
+										0,
+										index - 1
+									) ?? [] ),
+									field.id,
+									visibleFieldIds[ index - 1 ],
+									...visibleFieldIds.slice( index + 1 ),
+								],
+							} );
+					  }
+					: undefined
+			}
+			onMoveDown={
+				index
+					? () => {
+							onChangeView( {
+								...view,
+								fields: [
+									...( visibleFieldIds.slice( 0, index ) ??
+										[] ),
+									visibleFieldIds[ index + 1 ],
+									field.id,
+									...visibleFieldIds.slice( index + 2 ),
+								],
+							} );
+					  }
+					: undefined
+			}
+		/>
+	);
+}
+
 function isDefined< T >( item: T | undefined ): item is T {
 	return !! item;
 }
@@ -390,13 +419,59 @@ function FieldControl() {
 	if ( ! visibleFields?.length && ! hiddenFields?.length ) {
 		return null;
 	}
+	const titleField = fields.find( ( f ) => f.id === view.titleField );
+	const mediaField = fields.find( ( f ) => f.id === view.mediaField );
+	const descriptionField = fields.find(
+		( f ) => f.id === view.descriptionField
+	);
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
 
 	return (
 		<VStack spacing={ 6 } className="dataviews-field-control">
+			{ togglableFields.length > 0 && (
+				<ItemGroup isBordered isSeparated>
+					{ titleField && (
+						<FieldItem
+							field={ titleField }
+							isVisible={ showTitle }
+							onToggleVisibility={ () => {
+								onChangeView( {
+									...view,
+									showTitle: ! showTitle,
+								} );
+							} }
+						/>
+					) }
+					{ mediaField && (
+						<FieldItem
+							field={ mediaField }
+							isVisible={ showMedia }
+							onToggleVisibility={ () => {
+								onChangeView( {
+									...view,
+									showMedia: ! showMedia,
+								} );
+							} }
+						/>
+					) }
+					{ descriptionField && (
+						<FieldItem
+							field={ descriptionField }
+							isVisible={ showDescription }
+							onToggleVisibility={ () => {
+								onChangeView( {
+									...view,
+									showDescription: ! showDescription,
+								} );
+							} }
+						/>
+					) }
+				</ItemGroup>
+			) }
 			{ !! visibleFields?.length && (
 				<ItemGroup isBordered isSeparated>
 					{ visibleFields.map( ( field, index ) => (
-						<FieldItem
+						<RegularFieldItem
 							key={ field.id }
 							field={ field }
 							view={ view }
@@ -414,7 +489,7 @@ function FieldControl() {
 						</BaseControl.VisualLabel>
 						<ItemGroup isBordered isSeparated>
 							{ hiddenFields.map( ( field ) => (
-								<FieldItem
+								<RegularFieldItem
 									key={ field.id }
 									field={ field }
 									view={ view }
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index 6a25c2e9230330..e39756405cd48e 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -22,12 +22,18 @@ import { __ } from '@wordpress/i18n';
 import ItemActions from '../../components/dataviews-item-actions';
 import DataViewsSelectionCheckbox from '../../components/dataviews-selection-checkbox';
 import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions';
-import type { Action, NormalizedField, ViewGridProps } from '../../types';
+import type {
+	Action,
+	NormalizedField,
+	ViewGrid as ViewGridType,
+	ViewGridProps,
+} from '../../types';
 import type { SetSelection } from '../../private-types';
 import getClickableItemProps from '../utils/get-clickable-item-props';
 import { useUpdatedPreviewSizeOnViewportChange } from './preview-size-picker';
 
 interface GridItemProps< Item > {
+	view: ViewGridType;
 	selection: string[];
 	onChangeSelection: SetSelection;
 	getItemId: ( item: Item ) => string;
@@ -43,6 +49,7 @@ interface GridItemProps< Item > {
 }
 
 function GridItem< Item >( {
+	view,
 	selection,
 	onChangeSelection,
 	onClickItem,
@@ -56,15 +63,17 @@ function GridItem< Item >( {
 	regularFields,
 	badgeFields,
 }: GridItemProps< Item > ) {
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
 	const isSelected = selection.includes( id );
 	const renderedMediaField = mediaField?.render ? (
 		<mediaField.render item={ item } />
 	) : null;
-	const renderedTitleField = titleField?.render ? (
-		<titleField.render item={ item } />
-	) : null;
+	const renderedTitleField =
+		showTitle && titleField?.render ? (
+			<titleField.render item={ item } />
+		) : null;
 
 	const clickableMediaItemProps = getClickableItemProps( {
 		item,
@@ -102,15 +111,19 @@ function GridItem< Item >( {
 				}
 			} }
 		>
-			<div { ...clickableMediaItemProps }>{ renderedMediaField }</div>
-			<DataViewsSelectionCheckbox
-				item={ item }
-				selection={ selection }
-				onChangeSelection={ onChangeSelection }
-				getItemId={ getItemId }
-				titleField={ titleField }
-				disabled={ ! hasBulkAction }
-			/>
+			{ showMedia && (
+				<div { ...clickableMediaItemProps }>{ renderedMediaField }</div>
+			) }
+			{ showMedia && (
+				<DataViewsSelectionCheckbox
+					item={ item }
+					selection={ selection }
+					onChangeSelection={ onChangeSelection }
+					getItemId={ getItemId }
+					titleField={ titleField }
+					disabled={ ! hasBulkAction }
+				/>
+			) }
 			<HStack
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
@@ -121,7 +134,7 @@ function GridItem< Item >( {
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
 			<VStack spacing={ 1 }>
-				{ descriptionField?.render && (
+				{ showDescription && descriptionField?.render && (
 					<descriptionField.render item={ item } />
 				) }
 				{ !! badgeFields?.length && (
@@ -248,6 +261,7 @@ export default function ViewGrid< Item >( {
 						return (
 							<GridItem
 								key={ getItemId( item ) }
+								view={ view }
 								selection={ selection }
 								onChangeSelection={ onChangeSelection }
 								onClickItem={ onClickItem }
diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
index ca844598dc261f..a517dc45fe44e7 100644
--- a/packages/dataviews/src/dataviews-layouts/list/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -35,9 +35,15 @@ import {
 	ActionsMenuGroup,
 	ActionModal,
 } from '../../components/dataviews-item-actions';
-import type { Action, NormalizedField, ViewListProps } from '../../types';
+import type {
+	Action,
+	NormalizedField,
+	ViewList as ViewListType,
+	ViewListProps,
+} from '../../types';
 
 interface ListViewItemProps< Item > {
+	view: ViewListType;
 	actions: Action< Item >[];
 	idPrefix: string;
 	isSelected: boolean;
@@ -131,6 +137,7 @@ function PrimaryActionGridCell< Item >( {
 }
 
 function ListItem< Item >( {
+	view,
 	actions,
 	idPrefix,
 	isSelected,
@@ -142,6 +149,7 @@ function ListItem< Item >( {
 	otherFields,
 	onDropdownTriggerKeyDown,
 }: ListViewItemProps< Item > ) {
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const itemRef = useRef< HTMLDivElement >( null );
 	const labelId = `${ idPrefix }-label`;
 	const descriptionId = `${ idPrefix }-description`;
@@ -179,15 +187,17 @@ function ListItem< Item >( {
 
 	const hasOnlyOnePrimaryAction = primaryAction && actions.length === 1;
 
-	const renderedMediaField = mediaField?.render ? (
-		<div className="dataviews-view-list__media-wrapper">
-			<mediaField.render item={ item } />
-		</div>
-	) : null;
+	const renderedMediaField =
+		showMedia && mediaField?.render ? (
+			<div className="dataviews-view-list__media-wrapper">
+				<mediaField.render item={ item } />
+			</div>
+		) : null;
 
-	const renderedTitleField = titleField?.render ? (
-		<titleField.render item={ item } />
-	) : null;
+	const renderedTitleField =
+		showTitle && titleField?.render ? (
+			<titleField.render item={ item } />
+		) : null;
 
 	const usedActions = eligibleActions?.length > 0 && (
 		<HStack spacing={ 3 } className="dataviews-view-list__item-actions">
@@ -268,7 +278,7 @@ function ListItem< Item >( {
 							</div>
 							{ usedActions }
 						</HStack>
-						{ descriptionField?.render && (
+						{ showDescription && descriptionField?.render && (
 							<div className="dataviews-view-list__field">
 								<descriptionField.render item={ item } />
 							</div>
@@ -471,6 +481,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 				return (
 					<ListItem
 						key={ id }
+						view={ view }
 						idPrefix={ id }
 						actions={ actions }
 						item={ item }
diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
index 5a64bb394d6ade..ed617a9199c560 100644
--- a/packages/dataviews/src/dataviews-layouts/table/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -91,7 +91,7 @@ function TableRow< Item >( {
 	const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item );
 	const isSelected = hasPossibleBulkAction && selection.includes( id );
 	const [ isHovered, setIsHovered ] = useState( false );
-
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const handleMouseEnter = () => {
 		setIsHovered( true );
 	};
@@ -104,7 +104,10 @@ function TableRow< Item >( {
 	// behaviours.
 	const isTouchDeviceRef = useRef( false );
 	const columns = view.fields ?? [];
-	const hasPrimaryColumn = titleField || mediaField || descriptionField;
+	const hasPrimaryColumn =
+		( titleField && showTitle ) ||
+		( mediaField && showMedia ) ||
+		( descriptionField && showDescription );
 
 	return (
 		<tr
@@ -157,9 +160,11 @@ function TableRow< Item >( {
 				<td>
 					<ColumnPrimary
 						item={ item }
-						titleField={ titleField }
-						mediaField={ mediaField }
-						descriptionField={ descriptionField }
+						titleField={ showTitle ? titleField : undefined }
+						mediaField={ showMedia ? mediaField : undefined }
+						descriptionField={
+							showDescription ? descriptionField : undefined
+						}
 						isItemClickable={ isItemClickable }
 						onClickItem={ onClickItem }
 					/>
@@ -256,7 +261,11 @@ function ViewTable< Item >( {
 	const descriptionField = fields.find(
 		( field ) => field.id === view.descriptionField
 	);
-	const hasPrimaryColumn = titleField || mediaField || descriptionField;
+	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const hasPrimaryColumn =
+		( titleField && showTitle ) ||
+		( mediaField && showMedia ) ||
+		( descriptionField && showDescription );
 	const columns = view.fields ?? [];
 
 	return (
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index b68c34fcc76706..96fd4a8cd01afc 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -307,6 +307,21 @@ interface ViewBase {
 	 * Description field
 	 */
 	descriptionField?: string;
+
+	/**
+	 * Whether to show the title
+	 */
+	showTitle?: boolean;
+
+	/**
+	 * Whether to show the media
+	 */
+	showMedia?: boolean;
+
+	/**
+	 * Whether to show the description
+	 */
+	showDescription?: boolean;
 }
 
 export interface ColumnStyle {
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
index 663c8971471c97..18280127896e72 100644
--- a/packages/edit-site/src/components/page-templates/index.js
+++ b/packages/edit-site/src/components/page-templates/index.js
@@ -34,7 +34,7 @@ const EMPTY_ARRAY = [];
 
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
-		mediaField: 'preview',
+		showMedia: false,
 		layout: {
 			styles: {
 				__primary: {
@@ -48,11 +48,11 @@ const defaultLayouts = {
 		},
 	},
 	[ LAYOUT_GRID ]: {
-		mediaField: 'preview',
+		showMedia: true,
 		layout: {},
 	},
 	[ LAYOUT_LIST ]: {
-		mediaField: undefined,
+		showMedia: false,
 		layout: {},
 	},
 };
@@ -68,6 +68,7 @@ const DEFAULT_VIEW = {
 	},
 	titleField: 'title',
 	descriptionField: 'description',
+	mediaField: 'preview',
 	fields: [ 'author' ],
 	filters: [],
 	...defaultLayouts[ LAYOUT_GRID ],

From 90c05ed1a4ad075a1e0e445c7f0ff49c68e7ba17 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 3 Dec 2024 11:58:37 +0100
Subject: [PATCH 05/20] Update documentation

---
 packages/dataviews/README.md | 53 ++++++++++--------------------------
 1 file changed, 14 insertions(+), 39 deletions(-)

diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index 04b8a40ff3fa7e..651d87268c28e1 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -165,6 +165,7 @@ const view = {
 		field: 'date',
 		direction: 'desc',
 	},
+	titleField: 'title',
 	fields: [ 'author', 'status' ],
 	layout: {},
 };
@@ -184,50 +185,22 @@ Properties:
 
     -   `field`: the field used for sorting the dataset.
     -   `direction`: the direction to use for sorting, one of `asc` or `desc`.
-
--   `fields`: a list of field `id` that are visible in the UI and the specific order in which they are displayed.
+-   `titleField`: The id of the field reprensenting the title of the record.
+-   `mediaField`: The id of the field reprensenting the media of the record.
+-   `descriptionField`: The id of field the reprensenting the description of the record.
+-   `showTitle`: Whether the title should be shown in the UI. `true` by default.
+-   `showMedia`: Whether the media should be shown in the UI. `true` by default.
+-   `showDescription`: Whether the description should be shown in the UI. `true` by default.
+-   `fields`: a list of remaining field `id` that are visible in the UI and the specific order in which they are displayed.
 -   `layout`: config that is specific to a particular layout type.
 
 ##### Properties of `layout`
 
 | Properties of `layout`                                                                                          | Table | Grid | List |
 | --------------------------------------------------------------------------------------------------------------- | ----- | ---- | ---- |
-| `primaryField`: the field's `id` to be highlighted in each layout. It's not hidable.                            | ✓     | ✓    | ✓    |
-| `mediaField`: the field's `id` to be used for rendering each card's media. It's not hiddable.                   |       | ✓    | ✓    |
-| `columnFields`: a list of field's `id` to render vertically stacked instead of horizontally (the default).      |       | ✓    |      |
 | `badgeFields`: a list of field's `id` to render without label and styled as badges.                             |       | ✓    |      |
-| `combinedFields`: a list of "virtual" fields that are made by combining others. See "Combining fields" section. | ✓     |      |      |
 | `styles`: additional `width`, `maxWidth`, `minWidth` styles for each field column.                              | ✓     |      |      |
 
-##### Combining fields
-
-The `table` layout has the ability to create "virtual" fields that are made out by combining existing ones.
-
-Each "virtual field", has to provide an `id` and `label` (optionally a `header` instead), which have the same meaning as any other field.
-
-Additionally, they need to provide:
-
--   `children`: a list of field's `id` to combine
--   `direction`: how should they be stacked, `vertical` or `horizontal`
-
-For example, this is how you'd define a `site` field which is a combination of a `title` and `description` fields, which are not displayed:
-
-```js
-{
-	fields: [ 'site', 'status' ],
-	layout: {
-		combinedFields: [
-			{
-				id: 'site',
-				label: 'Site',
-				children: [ 'title', 'description' ],
-				direction: 'vertical',
-			}
-		]
-	}
-}
-```
-
 #### `onChangeView`: `function`
 
 Callback executed when the view has changed. It receives the new view object as a parameter.
@@ -255,6 +228,7 @@ function MyCustomPageTable() {
 				value: [ 'publish', 'draft' ],
 			},
 		],
+		titleField: 'title',
 		fields: [ 'author', 'status' ],
 		layout: {},
 	} );
@@ -370,14 +344,15 @@ For example, this is how you'd enable only the table view type:
 ```js
 const defaultLayouts = {
 	table: {
-		layout: {
-			primaryField: 'my-key',
-		},
+		showMedia: false,
 	},
+	grid: {
+		showMedia: true,
+	}
 };
 ```
 
-The `defaultLayouts` property should be an object that includes properties named `table`, `grid`, or `list`. Each of these properties should contain a `layout` property, which holds the configuration for each specific layout type. Check "Properties of layout" for the full list of properties available for each layout's configuration
+The `defaultLayouts` property should be an object that includes properties named `table`, `grid`, or `list`. These properties are applied to the view object each time the user switches to the corresponding layout.
 
 #### `selection`: `string[]`
 

From dccc4244c24cd5e0076fd600bb0782495545ff88 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 3 Dec 2024 15:36:29 +0100
Subject: [PATCH 06/20] Fix small reordering bug

---
 .../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 e92e537da66981..2d0dd1e51c0ff9 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -333,8 +333,10 @@ function RegularFieldItem( {
 		<FieldItem
 			field={ field }
 			isVisible={ isVisible }
-			isFirst={ !! index && index < 1 }
-			isLast={ !! index && index === visibleFieldIds.length - 1 }
+			isFirst={ index !== undefined && index < 1 }
+			isLast={
+				index !== undefined && index === visibleFieldIds.length - 1
+			}
 			onToggleVisibility={ () => {
 				onChangeView( {
 					...view,
@@ -357,7 +359,7 @@ function RegularFieldItem( {
 				}, 50 );
 			} }
 			onMoveUp={
-				index
+				index !== undefined
 					? () => {
 							onChangeView( {
 								...view,
@@ -375,7 +377,7 @@ function RegularFieldItem( {
 					: undefined
 			}
 			onMoveDown={
-				index
+				index !== undefined
 					? () => {
 							onChangeView( {
 								...view,

From 1774ad926679be2feb5530b6abcae972920800e4 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 4 Dec 2024 11:55:40 +0100
Subject: [PATCH 07/20] Merge all item groups

---
 .../dataviews-view-config/index.tsx           | 33 ++++++++-----------
 .../dataviews-view-config/style.scss          |  4 +++
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 2d0dd1e51c0ff9..20825c6e4ab418 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -22,7 +22,6 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	privateApis as componentsPrivateApis,
-	BaseControl,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { memo, useContext, useMemo } from '@wordpress/element';
@@ -429,7 +428,10 @@ function FieldControl() {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 
 	return (
-		<VStack spacing={ 6 } className="dataviews-field-control">
+		<VStack
+			spacing={ 0 }
+			className="dataviews-field-control dataviews-view-config__properties"
+		>
 			{ togglableFields.length > 0 && (
 				<ItemGroup isBordered isSeparated>
 					{ titleField && (
@@ -484,23 +486,16 @@ function FieldControl() {
 				</ItemGroup>
 			) }
 			{ !! hiddenFields?.length && (
-				<>
-					<VStack spacing={ 4 }>
-						<BaseControl.VisualLabel style={ { margin: 0 } }>
-							{ __( 'Hidden' ) }
-						</BaseControl.VisualLabel>
-						<ItemGroup isBordered isSeparated>
-							{ hiddenFields.map( ( field ) => (
-								<RegularFieldItem
-									key={ field.id }
-									field={ field }
-									view={ view }
-									onChangeView={ onChangeView }
-								/>
-							) ) }
-						</ItemGroup>
-					</VStack>
-				</>
+				<ItemGroup isBordered isSeparated>
+					{ hiddenFields.map( ( field ) => (
+						<RegularFieldItem
+							key={ field.id }
+							field={ field }
+							view={ view }
+							onChangeView={ onChangeView }
+						/>
+					) ) }
+				</ItemGroup>
 			) }
 		</VStack>
 	);
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 7fff110337ee3a..4b6150fc8654a6 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -67,3 +67,7 @@
 		top: unset;
 	}
 }
+
+.dataviews-view-config__properties > div {
+	border-radius: 0;
+}

From 667a817a3e5ceb506c9a2b309fd16100def4e874 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 4 Dec 2024 14:34:51 +0100
Subject: [PATCH 08/20] Better design for view config

---
 .../dataviews-view-config/index.tsx           | 140 +++++++++---------
 .../dataviews-view-config/style.scss          |   9 +-
 2 files changed, 81 insertions(+), 68 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 20825c6e4ab418..b13a42c3ac30b2 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -22,6 +22,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	privateApis as componentsPrivateApis,
+	BaseControl,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { memo, useContext, useMemo } from '@wordpress/element';
@@ -428,74 +429,79 @@ function FieldControl() {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 
 	return (
-		<VStack
-			spacing={ 0 }
-			className="dataviews-field-control dataviews-view-config__properties"
-		>
-			{ togglableFields.length > 0 && (
-				<ItemGroup isBordered isSeparated>
-					{ titleField && (
-						<FieldItem
-							field={ titleField }
-							isVisible={ showTitle }
-							onToggleVisibility={ () => {
-								onChangeView( {
-									...view,
-									showTitle: ! showTitle,
-								} );
-							} }
-						/>
-					) }
-					{ mediaField && (
-						<FieldItem
-							field={ mediaField }
-							isVisible={ showMedia }
-							onToggleVisibility={ () => {
-								onChangeView( {
-									...view,
-									showMedia: ! showMedia,
-								} );
-							} }
-						/>
-					) }
-					{ descriptionField && (
-						<FieldItem
-							field={ descriptionField }
-							isVisible={ showDescription }
-							onToggleVisibility={ () => {
-								onChangeView( {
-									...view,
-									showDescription: ! showDescription,
-								} );
-							} }
-						/>
-					) }
-				</ItemGroup>
-			) }
-			{ !! visibleFields?.length && (
-				<ItemGroup isBordered isSeparated>
-					{ visibleFields.map( ( field, index ) => (
-						<RegularFieldItem
-							key={ field.id }
-							field={ field }
-							view={ view }
-							onChangeView={ onChangeView }
-							index={ index }
-						/>
-					) ) }
-				</ItemGroup>
-			) }
+		<VStack className="dataviews-field-control" spacing={ 6 }>
+			<VStack className="dataviews-view-config__properties" spacing={ 0 }>
+				{ togglableFields.length > 0 && (
+					<ItemGroup isBordered isSeparated>
+						{ titleField && (
+							<FieldItem
+								field={ titleField }
+								isVisible={ showTitle }
+								onToggleVisibility={ () => {
+									onChangeView( {
+										...view,
+										showTitle: ! showTitle,
+									} );
+								} }
+							/>
+						) }
+						{ mediaField && (
+							<FieldItem
+								field={ mediaField }
+								isVisible={ showMedia }
+								onToggleVisibility={ () => {
+									onChangeView( {
+										...view,
+										showMedia: ! showMedia,
+									} );
+								} }
+							/>
+						) }
+						{ descriptionField && (
+							<FieldItem
+								field={ descriptionField }
+								isVisible={ showDescription }
+								onToggleVisibility={ () => {
+									onChangeView( {
+										...view,
+										showDescription: ! showDescription,
+									} );
+								} }
+							/>
+						) }
+					</ItemGroup>
+				) }
+				{ !! visibleFields?.length && (
+					<ItemGroup isBordered isSeparated>
+						{ visibleFields.map( ( field, index ) => (
+							<RegularFieldItem
+								key={ field.id }
+								field={ field }
+								view={ view }
+								onChangeView={ onChangeView }
+								index={ index }
+							/>
+						) ) }
+					</ItemGroup>
+				) }
+			</VStack>
+
 			{ !! hiddenFields?.length && (
-				<ItemGroup isBordered isSeparated>
-					{ hiddenFields.map( ( field ) => (
-						<RegularFieldItem
-							key={ field.id }
-							field={ field }
-							view={ view }
-							onChangeView={ onChangeView }
-						/>
-					) ) }
-				</ItemGroup>
+				<VStack spacing={ 4 }>
+					<BaseControl.VisualLabel style={ { margin: 0 } }>
+						{ __( 'Hidden' ) }
+					</BaseControl.VisualLabel>
+					<ItemGroup isBordered isSeparated>
+						{ hiddenFields.map( ( field ) => (
+							<RegularFieldItem
+								key={ field.id }
+								field={ field }
+								view={ view }
+								onChangeView={ onChangeView }
+							/>
+						) ) }
+					</ItemGroup>
+				</VStack>
 			) }
 		</VStack>
 	);
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 4b6150fc8654a6..8c0c549bd37544 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -69,5 +69,12 @@
 }
 
 .dataviews-view-config__properties > div {
-	border-radius: 0;
+	&:not(:last-child) {
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+	&:not(:first-child) {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
 }

From 4de9b58f3aa50992ada892f71390f0ac1c386a7d Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 4 Dec 2024 14:46:37 +0100
Subject: [PATCH 09/20] Fix column header of primary column

---
 .../table/column-header-menu.tsx              | 134 ++++++++++--------
 .../src/dataviews-layouts/table/index.tsx     |  48 ++++---
 2 files changed, 103 insertions(+), 79 deletions(-)

diff --git a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
index 9fcbff3bde4873..763cf83b5c2f93 100644
--- a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
@@ -37,6 +37,7 @@ interface HeaderMenuProps< Item > {
 	onChangeView: ( view: ViewTableType ) => void;
 	onHide: ( field: NormalizedField< Item > ) => void;
 	setOpenedFilter: ( fieldId: string ) => void;
+	canMove?: boolean;
 }
 
 function WithMenuSeparators( { children }: { children: ReactNode } ) {
@@ -58,6 +59,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 		onChangeView,
 		onHide,
 		setOpenedFilter,
+		canMove = true,
 	}: HeaderMenuProps< Item >,
 	ref: Ref< HTMLButtonElement >
 ) {
@@ -178,64 +180,80 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 						</Menu.Item>
 					</Menu.Group>
 				) }
-				<Menu.Group>
-					<Menu.Item
-						prefix={ <Icon icon={ arrowLeft } /> }
-						disabled={ index < 1 }
-						onClick={ () => {
-							onChangeView( {
-								...view,
-								fields: [
-									...( visibleFieldIds.slice(
-										0,
-										index - 1
-									) ?? [] ),
-									fieldId,
-									visibleFieldIds[ index - 1 ],
-									...visibleFieldIds.slice( index + 1 ),
-								],
-							} );
-						} }
-					>
-						<Menu.ItemLabel>{ __( 'Move left' ) }</Menu.ItemLabel>
-					</Menu.Item>
-					<Menu.Item
-						prefix={ <Icon icon={ arrowRight } /> }
-						disabled={ index >= visibleFieldIds.length - 1 }
-						onClick={ () => {
-							onChangeView( {
-								...view,
-								fields: [
-									...( visibleFieldIds.slice( 0, index ) ??
-										[] ),
-									visibleFieldIds[ index + 1 ],
-									fieldId,
-									...visibleFieldIds.slice( index + 2 ),
-								],
-							} );
-						} }
-					>
-						<Menu.ItemLabel>{ __( 'Move right' ) }</Menu.ItemLabel>
-					</Menu.Item>
-					{ isHidable && field && (
-						<Menu.Item
-							prefix={ <Icon icon={ unseen } /> }
-							onClick={ () => {
-								onHide( field );
-								onChangeView( {
-									...view,
-									fields: visibleFieldIds.filter(
-										( id ) => id !== fieldId
-									),
-								} );
-							} }
-						>
-							<Menu.ItemLabel>
-								{ __( 'Hide column' ) }
-							</Menu.ItemLabel>
-						</Menu.Item>
-					) }
-				</Menu.Group>
+				{ ( canMove || isHidable ) && field && (
+					<Menu.Group>
+						{ canMove && (
+							<Menu.Item
+								prefix={ <Icon icon={ arrowLeft } /> }
+								disabled={ index < 1 }
+								onClick={ () => {
+									onChangeView( {
+										...view,
+										fields: [
+											...( visibleFieldIds.slice(
+												0,
+												index - 1
+											) ?? [] ),
+											fieldId,
+											visibleFieldIds[ index - 1 ],
+											...visibleFieldIds.slice(
+												index + 1
+											),
+										],
+									} );
+								} }
+							>
+								<Menu.ItemLabel>
+									{ __( 'Move left' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						) }
+						{ canMove && (
+							<Menu.Item
+								prefix={ <Icon icon={ arrowRight } /> }
+								disabled={ index >= visibleFieldIds.length - 1 }
+								onClick={ () => {
+									onChangeView( {
+										...view,
+										fields: [
+											...( visibleFieldIds.slice(
+												0,
+												index
+											) ?? [] ),
+											visibleFieldIds[ index + 1 ],
+											fieldId,
+											...visibleFieldIds.slice(
+												index + 2
+											),
+										],
+									} );
+								} }
+							>
+								<Menu.ItemLabel>
+									{ __( 'Move right' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						) }
+						{ isHidable && field && (
+							<Menu.Item
+								prefix={ <Icon icon={ unseen } /> }
+								onClick={ () => {
+									onHide( field );
+									onChangeView( {
+										...view,
+										fields: visibleFieldIds.filter(
+											( id ) => id !== fieldId
+										),
+									} );
+								} }
+							>
+								<Menu.ItemLabel>
+									{ __( 'Hide column' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						) }
+					</Menu.Group>
+				) }
 			</WithMenuSeparators>
 		</Menu>
 	);
diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
index ed617a9199c560..b010b3ff154fbb 100644
--- a/packages/dataviews/src/dataviews-layouts/table/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -267,6 +267,17 @@ function ViewTable< Item >( {
 		( mediaField && showMedia ) ||
 		( descriptionField && showDescription );
 	const columns = view.fields ?? [];
+	const headerMenuRef =
+		( column: string, index: number ) => ( node: HTMLButtonElement ) => {
+			if ( node ) {
+				headerMenuRefs.current.set( column, {
+					node,
+					fallback: columns[ index > 0 ? index - 1 : 1 ],
+				} );
+			} else {
+				headerMenuRefs.current.delete( column );
+			}
+		};
 
 	return (
 		<>
@@ -303,7 +314,21 @@ function ViewTable< Item >( {
 						{ hasPrimaryColumn && (
 							<th scope="col">
 								<span className="dataviews-view-table-header">
-									{ __( 'Primary' ) }
+									{ titleField && (
+										<ColumnHeaderMenu
+											ref={ headerMenuRef(
+												titleField.id,
+												0
+											) }
+											fieldId={ titleField.id }
+											view={ view }
+											fields={ fields }
+											onChangeView={ onChangeView }
+											onHide={ onHide }
+											setOpenedFilter={ setOpenedFilter }
+											canMove={ false }
+										/>
+									) }
 								</span>
 							</th>
 						) }
@@ -324,26 +349,7 @@ function ViewTable< Item >( {
 									scope="col"
 								>
 									<ColumnHeaderMenu
-										ref={ ( node ) => {
-											if ( node ) {
-												headerMenuRefs.current.set(
-													column,
-													{
-														node,
-														fallback:
-															columns[
-																index > 0
-																	? index - 1
-																	: 1
-															],
-													}
-												);
-											} else {
-												headerMenuRefs.current.delete(
-													column
-												);
-											}
-										} }
+										ref={ headerMenuRef( column, index ) }
 										fieldId={ column }
 										view={ view }
 										fields={ fields }

From 043b912a4396a4ea5c54577af54ecb187213aa2e Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 08:12:40 +0100
Subject: [PATCH 10/20] Tweak the menu behavior

---
 .../dataviews-view-config/index.tsx           | 126 +++++++++++-------
 1 file changed, 78 insertions(+), 48 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index b13a42c3ac30b2..57bb590cfb8f17 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -426,48 +426,52 @@ function FieldControl() {
 	const descriptionField = fields.find(
 		( f ) => f.id === view.descriptionField
 	);
-	const { showTitle = true, showMedia = true, showDescription = true } = view;
+	const lockedFields = [
+		{
+			field: titleField,
+			isVisibleFlag: 'showTitle',
+		},
+		{
+			field: mediaField,
+			isVisibleFlag: 'showMedia',
+		},
+		{
+			field: descriptionField,
+			isVisibleFlag: 'showDescription',
+		},
+	].filter( ( { field } ) => isDefined( field ) );
+	const visibleLockedFields = lockedFields.filter(
+		( { field, isVisibleFlag } ) =>
+			// @ts-expect-error
+			isDefined( field ) && ( view[ isVisibleFlag ] ?? true )
+	) as Array< { field: NormalizedField< any >; isVisibleFlag: string } >;
+	const hiddenLockedFields = lockedFields.filter(
+		( { field, isVisibleFlag } ) =>
+			// @ts-expect-error
+			isDefined( field ) && ! ( view[ isVisibleFlag ] ?? true )
+	) as Array< { field: NormalizedField< any >; isVisibleFlag: string } >;
 
 	return (
 		<VStack className="dataviews-field-control" spacing={ 6 }>
 			<VStack className="dataviews-view-config__properties" spacing={ 0 }>
-				{ togglableFields.length > 0 && (
+				{ visibleLockedFields.length > 0 && (
 					<ItemGroup isBordered isSeparated>
-						{ titleField && (
-							<FieldItem
-								field={ titleField }
-								isVisible={ showTitle }
-								onToggleVisibility={ () => {
-									onChangeView( {
-										...view,
-										showTitle: ! showTitle,
-									} );
-								} }
-							/>
-						) }
-						{ mediaField && (
-							<FieldItem
-								field={ mediaField }
-								isVisible={ showMedia }
-								onToggleVisibility={ () => {
-									onChangeView( {
-										...view,
-										showMedia: ! showMedia,
-									} );
-								} }
-							/>
-						) }
-						{ descriptionField && (
-							<FieldItem
-								field={ descriptionField }
-								isVisible={ showDescription }
-								onToggleVisibility={ () => {
-									onChangeView( {
-										...view,
-										showDescription: ! showDescription,
-									} );
-								} }
-							/>
+						{ visibleLockedFields.map(
+							( { field, isVisibleFlag } ) => {
+								return (
+									<FieldItem
+										key={ field.id }
+										field={ field }
+										isVisible
+										onToggleVisibility={ () => {
+											onChangeView( {
+												...view,
+												[ isVisibleFlag ]: false,
+											} );
+										} }
+									/>
+								);
+							}
 						) }
 					</ItemGroup>
 				) }
@@ -486,21 +490,47 @@ function FieldControl() {
 				) }
 			</VStack>
 
-			{ !! hiddenFields?.length && (
+			{ ( !! hiddenFields?.length || !! hiddenLockedFields.length ) && (
 				<VStack spacing={ 4 }>
 					<BaseControl.VisualLabel style={ { margin: 0 } }>
 						{ __( 'Hidden' ) }
 					</BaseControl.VisualLabel>
-					<ItemGroup isBordered isSeparated>
-						{ hiddenFields.map( ( field ) => (
-							<RegularFieldItem
-								key={ field.id }
-								field={ field }
-								view={ view }
-								onChangeView={ onChangeView }
-							/>
-						) ) }
-					</ItemGroup>
+					<VStack
+						className="dataviews-view-config__properties"
+						spacing={ 0 }
+					>
+						{ hiddenLockedFields.length > 0 && (
+							<ItemGroup isBordered isSeparated>
+								{ hiddenLockedFields.map(
+									( { field, isVisibleFlag } ) => {
+										return (
+											<FieldItem
+												key={ field.id }
+												field={ field }
+												isVisible={ false }
+												onToggleVisibility={ () => {
+													onChangeView( {
+														...view,
+														[ isVisibleFlag ]: true,
+													} );
+												} }
+											/>
+										);
+									}
+								) }
+							</ItemGroup>
+						) }
+						<ItemGroup isBordered isSeparated>
+							{ hiddenFields.map( ( field ) => (
+								<RegularFieldItem
+									key={ field.id }
+									field={ field }
+									view={ view }
+									onChangeView={ onChangeView }
+								/>
+							) ) }
+						</ItemGroup>
+					</VStack>
 				</VStack>
 			) }
 		</VStack>

From 0fe17cbba09f495e04022178afe6aa3483019fd8 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 14:26:49 +0100
Subject: [PATCH 11/20] Fix cursor of the grid media field

---
 packages/dataviews/src/dataviews-layouts/grid/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss
index 07af792d58ce51..70c94653371d16 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/style.scss
+++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss
@@ -165,3 +165,7 @@
 		padding-right: $grid-unit-30;
 	}
 }
+
+.dataviews-view-grid__media--clickable {
+	cursor: pointer;
+}

From 9b1691db1fe229034041a6b29c6ca5788a994621 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 14:31:30 +0100
Subject: [PATCH 12/20] Fix primary text color

---
 packages/dataviews/src/components/dataviews/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index 4e53d817960cd2..52aea41b1e4541 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -50,7 +50,7 @@
 .dataviews-primary-field {
 	font-size: $default-font-size;
 	font-weight: 500;
-	color: $gray-700;
+	color: $gray-800;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	width: 100%;
@@ -62,7 +62,7 @@
 		overflow: hidden;
 		display: block;
 		flex-grow: 0;
-		color: $gray-900;
+		color: $gray-800;
 
 		&:hover {
 			color: var(--wp-admin-theme-color);

From 5d4862a287401bdda93d42a8d0701f0ecc7c7f72 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 14:38:30 +0100
Subject: [PATCH 13/20] Fix focus loss issue

---
 .../dataviews-view-config/index.tsx           | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 57bb590cfb8f17..6abe843e952261 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -245,6 +245,20 @@ function FieldItem( {
 	onMoveUp?: () => void;
 	onMoveDown?: () => void;
 } ) {
+	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-${ field.id } .dataviews-field-control__field-visibility-button`
+			);
+			if ( element instanceof HTMLElement ) {
+				element.focus();
+			}
+		}, 50 );
+	};
+
 	return (
 		<Item>
 			<HStack
@@ -291,7 +305,10 @@ function FieldItem( {
 							disabled={ ! field.enableHiding }
 							accessibleWhenDisabled
 							size="compact"
-							onClick={ onToggleVisibility }
+							onClick={ () => {
+								onToggleVisibility();
+								focusVisibilityField();
+							} }
 							icon={ isVisible ? unseen : seen }
 							label={
 								isVisible
@@ -346,17 +363,6 @@ function RegularFieldItem( {
 						  )
 						: [ ...visibleFieldIds, field.id ],
 				} );
-				// 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-${ field.id } .dataviews-field-control__field-visibility-button`
-					);
-					if ( element instanceof HTMLElement ) {
-						element.focus();
-					}
-				}, 50 );
 			} }
 			onMoveUp={
 				index !== undefined

From e6f61cd50160f1e9e4dd7b82eb1d47ce2e2f5328 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 14:48:35 +0100
Subject: [PATCH 14/20] Small tweaks per review

---
 .../components/dataviews-view-config/index.tsx |  6 +++++-
 .../src/components/page-patterns/index.js      |  2 +-
 .../src/components/page-templates/index.js     |  6 ------
 .../sidebar-dataviews/default-views.js         | 18 +++---------------
 4 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index 6abe843e952261..b6040b1315ffe1 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -83,9 +83,13 @@ function ViewTypeMenu( {
 								case 'list':
 								case 'grid':
 								case 'table':
+									const viewWithoutLayout = { ...view };
+									if ( 'layout' in viewWithoutLayout ) {
+										delete viewWithoutLayout.layout;
+									}
 									// @ts-expect-error
 									return onChangeView( {
-										...view,
+										...viewWithoutLayout,
 										type: e.target.value,
 										...defaultLayouts[ e.target.value ],
 									} );
diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
index da6c7878eed98e..b23213fa1a6db3 100644
--- a/packages/edit-site/src/components/page-patterns/index.js
+++ b/packages/edit-site/src/components/page-patterns/index.js
@@ -61,9 +61,9 @@ const DEFAULT_VIEW = {
 	perPage: 20,
 	titleField: 'title',
 	mediaField: 'preview',
-	layout: defaultLayouts[ LAYOUT_GRID ].layout,
 	fields: [ 'sync-status' ],
 	filters: [],
+	...defaultLayouts[ LAYOUT_GRID ],
 };
 
 export default function DataviewsPatterns() {
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
index 18280127896e72..0c62b9eb450acc 100644
--- a/packages/edit-site/src/components/page-templates/index.js
+++ b/packages/edit-site/src/components/page-templates/index.js
@@ -37,10 +37,6 @@ const defaultLayouts = {
 		showMedia: false,
 		layout: {
 			styles: {
-				__primary: {
-					maxWidth: 400,
-					minWidth: 320,
-				},
 				author: {
 					width: '1%',
 				},
@@ -49,11 +45,9 @@ const defaultLayouts = {
 	},
 	[ LAYOUT_GRID ]: {
 		showMedia: true,
-		layout: {},
 	},
 	[ LAYOUT_LIST ]: {
 		showMedia: false,
-		layout: {},
 	},
 };
 
diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
index f015e63cd5291c..c08a2c1a57c58e 100644
--- a/packages/edit-site/src/components/sidebar-dataviews/default-views.js
+++ b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -27,21 +27,9 @@ import {
 } from '../../utils/constants';
 
 export const defaultLayouts = {
-	[ LAYOUT_TABLE ]: {
-		layout: {
-			styles: {
-				__primary: {
-					maxWidth: 300,
-				},
-			},
-		},
-	},
-	[ LAYOUT_GRID ]: {
-		layout: {},
-	},
-	[ LAYOUT_LIST ]: {
-		layout: {},
-	},
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {},
+	[ LAYOUT_LIST ]: {},
 };
 
 const DEFAULT_POST_BASE = {

From db408b057bf0ac4706a7f0722f12f6dbe486da84 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 15:23:51 +0100
Subject: [PATCH 15/20] Small tweak

---
 .../dataviews/src/components/dataviews/style.scss | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index 52aea41b1e4541..8ea5ef9643e027 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -83,18 +83,13 @@
 			color: var(--wp-admin-theme-color);
 		}
 	}
-
-	&.dataviews-view-grid__primary-field--clickable span,
-	> .dataviews-view-table__cell-content--clickable span {
-		color: $gray-900;
-
-		&:hover {
-			color: var(--wp-admin-theme-color);
-		}
-		@include link-reset();
-	}
 }
 
 .dataviews-primary-field--clickable {
 	cursor: pointer;
+	color: $gray-800;
+	&:hover {
+		color: var(--wp-admin-theme-color);
+	}
+	@include link-reset();
 }

From 9e8099b344c71899939090e5f053f3ee94fe462a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 16:06:55 +0100
Subject: [PATCH 16/20] Updates per design review

---
 .../dataviews-view-config/index.tsx           | 75 ++++++++++++-------
 .../dataviews-view-config/style.scss          | 15 ++--
 2 files changed, 55 insertions(+), 35 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index b6040b1315ffe1..28e48525ffa73b 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -23,10 +23,18 @@ import {
 	__experimentalText as Text,
 	privateApis as componentsPrivateApis,
 	BaseControl,
+	Icon,
 } 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 {
+	chevronDown,
+	chevronUp,
+	cog,
+	seen,
+	unseen,
+	lock,
+} from '@wordpress/icons';
 import warning from '@wordpress/warning';
 import { useInstanceId } from '@wordpress/compose';
 
@@ -237,6 +245,7 @@ function FieldItem( {
 	isVisible,
 	isFirst,
 	isLast,
+	canMove = true,
 	onToggleVisibility,
 	onMoveUp,
 	onMoveDown,
@@ -245,6 +254,7 @@ function FieldItem( {
 	isVisible: boolean;
 	isFirst?: boolean;
 	isLast?: boolean;
+	canMove?: boolean;
 	onToggleVisibility?: () => void;
 	onMoveUp?: () => void;
 	onMoveDown?: () => void;
@@ -268,38 +278,54 @@ function FieldItem( {
 			<HStack
 				expanded
 				className={ `dataviews-field-control__field dataviews-field-control__field-${ field.id }` }
+				justify="flex-start"
 			>
-				<span>{ field.label }</span>
+				<span className="dataviews-field-control__icon">
+					{ ! canMove && ! field.enableHiding && (
+						<Icon icon={ lock } />
+					) }
+				</span>
+				<span className="dataviews-field-control__label">
+					{ field.label }
+				</span>
 				<HStack
 					justify="flex-end"
 					expanded={ false }
 					className="dataviews-field-control__actions"
 				>
-					{ onMoveUp && onMoveDown && isVisible && (
+					{ isVisible && (
 						<>
 							<Button
-								disabled={ isFirst }
+								disabled={ isFirst || ! canMove }
 								accessibleWhenDisabled
 								size="compact"
 								onClick={ onMoveUp }
 								icon={ chevronUp }
-								label={ sprintf(
-									/* translators: %s: field label */
-									__( 'Move %s up' ),
-									field.label
-								) }
+								label={
+									isFirst || ! canMove
+										? __( "This field can't be moved up" )
+										: sprintf(
+												/* translators: %s: field label */
+												__( 'Move %s up' ),
+												field.label
+										  )
+								}
 							/>
 							<Button
-								disabled={ isLast }
+								disabled={ isLast || ! canMove }
 								accessibleWhenDisabled
 								size="compact"
 								onClick={ onMoveDown }
 								icon={ chevronDown }
-								label={ sprintf(
-									/* translators: %s: field label */
-									__( 'Move %s down' ),
-									field.label
-								) }
+								label={
+									isLast || ! canMove
+										? __( "This field can't be moved down" )
+										: sprintf(
+												/* translators: %s: field label */
+												__( 'Move %s down' ),
+												field.label
+										  )
+								}
 							/>
 						</>
 					) }
@@ -464,7 +490,8 @@ function FieldControl() {
 	return (
 		<VStack className="dataviews-field-control" spacing={ 6 }>
 			<VStack className="dataviews-view-config__properties" spacing={ 0 }>
-				{ visibleLockedFields.length > 0 && (
+				{ ( visibleLockedFields.length > 0 ||
+					!! visibleFields?.length ) && (
 					<ItemGroup isBordered isSeparated>
 						{ visibleLockedFields.map(
 							( { field, isVisibleFlag } ) => {
@@ -479,14 +506,12 @@ function FieldControl() {
 												[ isVisibleFlag ]: false,
 											} );
 										} }
+										canMove={ false }
 									/>
 								);
 							}
 						) }
-					</ItemGroup>
-				) }
-				{ !! visibleFields?.length && (
-					<ItemGroup isBordered isSeparated>
+
 						{ visibleFields.map( ( field, index ) => (
 							<RegularFieldItem
 								key={ field.id }
@@ -509,9 +534,9 @@ function FieldControl() {
 						className="dataviews-view-config__properties"
 						spacing={ 0 }
 					>
-						{ hiddenLockedFields.length > 0 && (
-							<ItemGroup isBordered isSeparated>
-								{ hiddenLockedFields.map(
+						<ItemGroup isBordered isSeparated>
+							{ hiddenLockedFields.length > 0 &&
+								hiddenLockedFields.map(
 									( { field, isVisibleFlag } ) => {
 										return (
 											<FieldItem
@@ -524,13 +549,11 @@ function FieldControl() {
 														[ isVisibleFlag ]: true,
 													} );
 												} }
+												canMove={ false }
 											/>
 										);
 									}
 								) }
-							</ItemGroup>
-						) }
-						<ItemGroup isBordered isSeparated>
 							{ hiddenFields.map( ( field ) => (
 								<RegularFieldItem
 									key={ field.id }
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 8c0c549bd37544..4bebcf9863b6ba 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -68,13 +68,10 @@
 	}
 }
 
-.dataviews-view-config__properties > div {
-	&:not(:last-child) {
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-	&:not(:first-child) {
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
+.dataviews-field-control__icon {
+	width: 24px;
+}
+
+.dataviews-field-control__label {
+	flex-grow: 1;
 }

From 51584f50a725793875eb4c8db66561b882f6d7e9 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 16:17:14 +0100
Subject: [PATCH 17/20] Use icon size

---
 .../dataviews/src/components/dataviews-view-config/style.scss   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 4bebcf9863b6ba..fbf075bc93f75e 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -69,7 +69,7 @@
 }
 
 .dataviews-field-control__icon {
-	width: 24px;
+	width: $icon-size;
 }
 
 .dataviews-field-control__label {

From b9d5e3ff87a4f3b1dc1bd56928acbe199a297fa7 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 16:18:15 +0100
Subject: [PATCH 18/20] Rename primary field classname

---
 packages/dataviews/src/components/dataviews/style.scss        | 4 ++--
 packages/dataviews/src/dataviews-layouts/grid/index.tsx       | 2 +-
 packages/dataviews/src/dataviews-layouts/list/index.tsx       | 2 +-
 .../dataviews/src/dataviews-layouts/table/column-primary.tsx  | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss
index 8ea5ef9643e027..b38447094c99a9 100644
--- a/packages/dataviews/src/components/dataviews/style.scss
+++ b/packages/dataviews/src/components/dataviews/style.scss
@@ -47,7 +47,7 @@
 	}
 }
 
-.dataviews-primary-field {
+.dataviews-title-field {
 	font-size: $default-font-size;
 	font-weight: 500;
 	color: $gray-800;
@@ -85,7 +85,7 @@
 	}
 }
 
-.dataviews-primary-field--clickable {
+.dataviews-title-field--clickable {
 	cursor: pointer;
 	color: $gray-800;
 	&:hover {
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index e39756405cd48e..4e28adf1f3e397 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -86,7 +86,7 @@ function GridItem< Item >( {
 		item,
 		isItemClickable,
 		onClickItem,
-		className: 'dataviews-view-grid__primary-field dataviews-primary-field',
+		className: 'dataviews-view-grid__primary-field dataviews-title-field',
 	} );
 
 	return (
diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
index a517dc45fe44e7..d400cc62741699 100644
--- a/packages/dataviews/src/dataviews-layouts/list/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -271,7 +271,7 @@ function ListItem< Item >( {
 					>
 						<HStack spacing={ 0 }>
 							<div
-								className="dataviews-primary-field"
+								className="dataviews-title-field"
 								id={ labelId }
 							>
 								{ renderedTitleField }
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
index 662e3bcbe29648..6db65be72bdd4c 100644
--- a/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-primary.tsx
@@ -32,7 +32,7 @@ function ColumnPrimary< Item >( {
 		isItemClickable,
 		onClickItem,
 		className:
-			'dataviews-view-table__cell-content-wrapper dataviews-primary-field',
+			'dataviews-view-table__cell-content-wrapper dataviews-title-field',
 	} );
 	return (
 		<HStack spacing={ 3 } justify="flex-start">

From 0a3d61ca261392a4638e51b38c7419bb5cd97736 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 16:26:22 +0100
Subject: [PATCH 19/20] Center the icon

---
 .../dataviews/src/components/dataviews-view-config/style.scss    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index fbf075bc93f75e..8427796b6e15ed 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -69,6 +69,7 @@
 }
 
 .dataviews-field-control__icon {
+	display: flex;
 	width: $icon-size;
 }
 

From 85f25dff9482f1befe34693fd357fe4d1f694949 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 17:41:31 +0100
Subject: [PATCH 20/20] Fix grid without media field

---
 packages/dataviews/src/dataviews-layouts/grid/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index 4e28adf1f3e397..4a016095702026 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -111,10 +111,10 @@ function GridItem< Item >( {
 				}
 			} }
 		>
-			{ showMedia && (
+			{ showMedia && renderedMediaField && (
 				<div { ...clickableMediaItemProps }>{ renderedMediaField }</div>
 			) }
-			{ showMedia && (
+			{ showMedia && renderedMediaField && (
 				<DataViewsSelectionCheckbox
 					item={ item }
 					selection={ selection }