Restore widths support

packages/dataviews/src/stories/fixtures.js

@@ -167,20 +167,17 @@ export const fields = [
 				<img src={ item.image } alt="" style={ { width: '100%' } } />
 			);
 		},
-		width: 50,
 		enableSorting: false,
 	},
 	{
 		header: 'Title',
 		id: 'title',
-		maxWidth: 400,
 		enableHiding: false,
 		enableGlobalSearch: true,
 	},
 	{
 		header: 'Type',
 		id: 'type',
-		maxWidth: 400,
 		enableHiding: false,
 		elements: [
 			{ value: 'Not a planet', label: 'Not a planet' },
@@ -197,7 +194,6 @@ export const fields = [
 	{
 		header: 'Description',
 		id: 'description',
-		maxWidth: 200,
 		enableSorting: false,
 		enableGlobalSearch: true,
 	},

packages/dataviews/src/stories/index.story.js

@@ -39,6 +39,20 @@ Default.args = {
 		[ LAYOUT_TABLE ]: {
 			layout: {
 				primaryField: 'title',
+				styles: {
+					image: {
+						width: 50,
+					},
+					title: {
+						maxWidth: 400,
+					},
+					type: {
+						maxWidth: 400,
+					},
+					description: {
+						maxWidth: 200,
+					},
+				},
 			},
 		},
 		[ LAYOUT_GRID ]: {

packages/dataviews/src/types.ts

@@ -75,21 +75,6 @@ export type Field< Item > = {
 	 */
 	render?: ( args: { item: Item } ) => ReactNode;
 
-	/**
-	 * The width of the field column.
-	 */
-	width?: string | number;
-
-	/**
-	 * The minimum width of the field column.
-	 */
-	maxWidth?: string | number;
-
-	/**
-	 * The maximum width of the field column.
-	 */
-	minWidth?: string | number;
-
 	/**
 	 * Whether the field is sortable.
 	 */
@@ -270,6 +255,23 @@ export interface CombinedField {
 	direction: 'horizontal' | 'vertical';
 }
 
+export interface ColumnStyle {
+	/**
+	 * The width of the field column.
+	 */
+	width?: string | number;
+
+	/**
+	 * The minimum width of the field column.
+	 */
+	maxWidth?: string | number;
+
+	/**
+	 * The maximum width of the field column.
+	 */
+	minWidth?: string | number;
+}
+
 export interface ViewTable extends ViewBase {
 	type: 'table';
 
@@ -283,6 +285,11 @@ export interface ViewTable extends ViewBase {
 		 * The fields to use as columns.
 		 */
 		combinedFields?: CombinedField[];
+
+		/**
+		 * The styles for the columns.
+		 */
+		styles?: Record< string, ColumnStyle >;
 	};
 }
 

packages/dataviews/src/view-table.tsx

@@ -470,24 +470,23 @@ function TableRow< Item >( {
 					</div>
 				</td>
 			) }
-			{ columns.map( ( column ) => (
-				<td
-					key={ column }
-					/*style={ {
-						width: field.width || undefined,
-						minWidth: field.minWidth || undefined,
-						maxWidth: field.maxWidth || undefined,
-					} }*/
-				>
-					<TableColumn
-						primaryField={ primaryField }
-						fields={ fields }
-						item={ item }
-						column={ column }
-						view={ view }
-					/>
-				</td>
-			) ) }
+			{ columns.map( ( column: string ) => {
+				// Explicits picks the supported styles.
+				const { width, maxWidth, minWidth } =
+					view.layout?.styles?.[ column ] ?? {};
+
+				return (
+					<td key={ column } style={ { width, maxWidth, minWidth } }>
+						<TableColumn
+							primaryField={ primaryField }
+							fields={ fields }
+							item={ item }
+							column={ column }
+							view={ view }
+						/>
+					</td>
+				);
+			} ) }
 			{ !! actions?.length && (
 				// Disable reason: we are not making the element interactive,
 				// but preventing any click events from bubbling up to the
@@ -588,51 +587,52 @@ function ViewTable< Item >( {
 								/>
 							</th>
 						) }
-						{ columns.map( ( column, index ) => (
-							<th
-								key={ column }
-								/*style={ {
-									width: field.width || undefined,
-									minWidth: field.minWidth || undefined,
-									maxWidth: field.maxWidth || undefined,
-								} }*/
-								aria-sort={
-									view.sort?.field === column
-										? sortValues[ view.sort.direction ]
-										: undefined
-								}
-								scope="col"
-							>
-								<HeaderMenu
-									ref={ ( node ) => {
-										if ( node ) {
-											headerMenuRefs.current.set(
-												column,
-												{
-													node,
-													fallback:
-														columns[
-															index > 0
-																? index - 1
-																: 1
-														],
-												}
-											);
-										} else {
-											headerMenuRefs.current.delete(
-												column
-											);
-										}
-									} }
-									fieldId={ column }
-									view={ view }
-									fields={ fields }
-									onChangeView={ onChangeView }
-									onHide={ onHide }
-									setOpenedFilter={ setOpenedFilter }
-								/>
-							</th>
-						) ) }
+						{ columns.map( ( column, index ) => {
+							// Explicits picks the supported styles.
+							const { width, maxWidth, minWidth } =
+								view.layout?.styles?.[ column ] ?? {};
+							return (
+								<th
+									key={ column }
+									style={ { width, maxWidth, minWidth } }
+									aria-sort={
+										view.sort?.field === column
+											? sortValues[ view.sort.direction ]
+											: undefined
+									}
+									scope="col"
+								>
+									<HeaderMenu
+										ref={ ( node ) => {
+											if ( node ) {
+												headerMenuRefs.current.set(
+													column,
+													{
+														node,
+														fallback:
+															columns[
+																index > 0
+																	? index - 1
+																	: 1
+															],
+													}
+												);
+											} else {
+												headerMenuRefs.current.delete(
+													column
+												);
+											}
+										} }
+										fieldId={ column }
+										view={ view }
+										fields={ fields }
+										onChangeView={ onChangeView }
+										onHide={ onHide }
+										setOpenedFilter={ setOpenedFilter }
+									/>
+								</th>
+							);
+						} ) }
 						{ !! actions?.length && (
 							<th className="dataviews-view-table__actions-column">
 								<span className="dataviews-view-table-header">

packages/edit-site/src/components/page-patterns/index.js

@@ -62,6 +62,14 @@ const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
 			primaryField: 'title',
+			styles: {
+				preview: {
+					width: '1%',
+				},
+				author: {
+					width: '1%',
+				},
+			},
 		},
 	},
 	[ LAYOUT_GRID ]: {
@@ -282,7 +290,6 @@ export default function DataviewsPatterns() {
 					<Preview item={ item } viewType={ view.type } />
 				),
 				enableSorting: false,
-				width: '1%',
 			},
 			{
 				header: __( 'Title' ),
@@ -335,7 +342,6 @@ export default function DataviewsPatterns() {
 				filterBy: {
 					isPrimary: true,
 				},
-				width: '1%',
 			} );
 		}
 

packages/edit-site/src/components/page-templates/index.js

@@ -62,6 +62,19 @@ const defaultLayouts = {
 					direction: 'vertical',
 				},
 			],
+			styles: {
+				template: {
+					maxWidth: 400,
+					minWidth: 320,
+				},
+				preview: {
+					minWidth: 120,
+					maxWidth: 120,
+				},
+				author: {
+					width: '1%',
+				},
+			},
 		},
 	},
 	[ LAYOUT_GRID ]: {
@@ -277,8 +290,6 @@ export default function PageTemplates() {
 				render: ( { item } ) => {
 					return <Preview item={ item } viewType={ view.type } />;
 				},
-				minWidth: 120,
-				maxWidth: 120,
 				enableSorting: false,
 			},
 			{
@@ -288,7 +299,6 @@ export default function PageTemplates() {
 				render: ( { item } ) => (
 					<Title item={ item } viewType={ view.type } />
 				),
-				maxWidth: 400,
 				enableHiding: false,
 				enableGlobalSearch: true,
 			},
@@ -304,8 +314,6 @@ export default function PageTemplates() {
 						)
 					);
 				},
-				maxWidth: 400,
-				minWidth: 320,
 				enableSorting: false,
 				enableGlobalSearch: true,
 			},
@@ -317,7 +325,6 @@ export default function PageTemplates() {
 					return <AuthorField viewType={ view.type } item={ item } />;
 				},
 				elements: authors,
-				width: '1%',
 			},
 		],
 		[ authors, view.type ]

packages/edit-site/src/components/posts-app/posts-list.js

@@ -62,6 +62,24 @@ import { usePrevious } from '@wordpress/compose';
 const { usePostActions } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 const EMPTY_ARRAY = [];
+const defaultLayouts = {
+	[ LAYOUT_TABLE ]: {
+		layout: {
+			'featured-image': {
+				width: '1%',
+			},
+			title: {
+				maxWidth: 300,
+			},
+		},
+	},
+	[ LAYOUT_GRID ]: {
+		layout: {},
+	},
+	[ LAYOUT_LIST ]: {
+		layout: {},
+	},
+};
 
 const getFormattedDate = ( dateToDisplay ) =>
 	dateI18n(
@@ -405,7 +423,6 @@ export default function PostsList( { postType } ) {
 					<FeaturedImage item={ item } viewType={ view.type } />
 				),
 				enableSorting: false,
-				width: '1%',
 			},
 			{
 				header: __( 'Title' ),
@@ -459,7 +476,6 @@ export default function PostsList( { postType } ) {
 						</HStack>
 					);
 				},
-				maxWidth: 300,
 				enableHiding: false,
 			},
 			{
@@ -645,6 +661,7 @@ export default function PostsList( { postType } ) {
 				setSelection={ setSelection }
 				onSelectionChange={ onSelectionChange }
 				getItemId={ getItemId }
+				defaultLayouts={ defaultLayouts }
 			/>
 		</Page>
 	);