@wordpress/dataviews 12.1.1-next.v.202602271551.0 → 13.0.0

package/src/components/dataviews-layouts/list/index.tsx

@@ -217,6 +217,10 @@ function ListItem< Item >( {
 			<titleField.render item={ item } field={ titleField } />
 		) : null;
 
+	const renderDescription = showDescription && descriptionField?.render;
+	// When we have only the media and title fields, we want to center them vertically in the list item.
+	const hasOnlyMediaAndTitle =
+		!! renderedMediaField && ! renderDescription && ! otherFields.length;
 	const usedActions = eligibleActions?.length > 0 && (
 		<Stack
 			direction="row"
@@ -315,7 +319,7 @@ function ListItem< Item >( {
 					direction="row"
 					gap="md"
 					justify="start"
-					align="flex-start"
+					align={ hasOnlyMediaAndTitle ? 'center' : 'flex-start' }
 					style={ { flex: 1, minWidth: 0 } }
 				>
 					{ renderedMediaField }
@@ -333,7 +337,7 @@ function ListItem< Item >( {
 							</div>
 							{ usedActions }
 						</Stack>
-						{ showDescription && descriptionField?.render && (
+						{ renderDescription && (
 							<div className="dataviews-view-list__field">
 								<descriptionField.render
 									item={ item }

package/src/components/dataviews-layouts/list/style.scss

@@ -170,7 +170,6 @@ div.dataviews-view-list {
 	}
 
 	.dataviews-view-list__field-wrapper {
-		min-height: $grid-unit-05 * 13; // Ensures title is centrally aligned when all fields are hidden
 		flex-grow: 1;
 		min-width: 0;
 	}
@@ -225,10 +224,6 @@ div.dataviews-view-list {
 				height: $grid-unit-05 * 8;
 			}
 
-			.dataviews-view-list__field-wrapper {
-				min-height: $grid-unit-05 * 8;
-			}
-
 			.dataviews-view-list__fields {
 				gap: $grid-unit-10;
 				row-gap: $grid-unit-05;
@@ -257,10 +252,6 @@ div.dataviews-view-list {
 				height: $grid-unit-05 * 16;
 			}
 
-			.dataviews-view-list__field-wrapper {
-				min-height: $grid-unit-05 * 16;
-			}
-
 			.dataviews-view-list__fields {
 				gap: $grid-unit-20;
 				row-gap: $grid-unit-10;

package/src/components/dataviews-layouts/table/index.tsx

@@ -44,6 +44,19 @@ import getDataByGroup from '../utils/get-data-by-group';
 import { PropertiesSection } from '../../dataviews-view-config/properties-section';
 import { useDelayedLoading } from '../../../hooks/use-delayed-loading';
 
+function getEffectiveAlign(
+	explicitAlign: 'start' | 'center' | 'end' | undefined,
+	fieldType: string | undefined
+): 'start' | 'center' | 'end' | undefined {
+	if ( explicitAlign ) {
+		return explicitAlign;
+	}
+	if ( fieldType === 'integer' || fieldType === 'number' ) {
+		return 'end';
+	}
+	return undefined;
+}
+
 interface TableColumnFieldProps< Item > {
 	fields: NormalizedField< Item >[];
 	column: string;
@@ -226,6 +239,8 @@ function TableRow< Item >( {
 				// Explicit picks the supported styles.
 				const { width, maxWidth, minWidth, align } =
 					view.layout?.styles?.[ column ] ?? {};
+				const field = fields.find( ( f ) => f.id === column );
+				const effectiveAlign = getEffectiveAlign( align, field?.type );
 
 				return (
 					<td
@@ -240,7 +255,7 @@ function TableRow< Item >( {
 							fields={ fields }
 							item={ item }
 							column={ column }
-							align={ align }
+							align={ effectiveAlign }
 						/>
 					</td>
 				);
@@ -501,6 +516,13 @@ function ViewTable< Item >( {
 							// Explicit picks the supported styles.
 							const { width, maxWidth, minWidth, align } =
 								view.layout?.styles?.[ column ] ?? {};
+							const field = fields.find(
+								( f ) => f.id === column
+							);
+							const effectiveAlign = getEffectiveAlign(
+								align,
+								field?.type
+							);
 							const canInsertOrMove =
 								view.layout?.enableMoving ?? true;
 							return (
@@ -510,7 +532,7 @@ function ViewTable< Item >( {
 										width,
 										maxWidth,
 										minWidth,
-										textAlign: align,
+										textAlign: effectiveAlign,
 									} }
 									aria-sort={
 										view.sort?.direction &&

package/src/components/dataviews-layouts/table/style.scss

@@ -177,6 +177,7 @@
 
 			&.dataviews-view-table__cell-align-end {
 				justify-content: flex-end;
+				font-variant-numeric: tabular-nums;
 			}
 
 			&.dataviews-view-table__cell-align-center {

package/src/dataform/stories/layout-panel.tsx

@@ -75,6 +75,10 @@ const fields: Field< SamplePost >[] = [
 			{ value: 2, label: 'John' },
 			{ value: 3, label: 'Alice' },
 			{ value: 4, label: 'Bob' },
+			{
+				value: 5,
+				label: 'Superadministratoraccountwithalongunhyphenatedusername',
+			},
 		],
 		setValue: ( { value } ) => ( {
 			author: Number( value ),
@@ -310,7 +314,7 @@ const LayoutPanelComponent = ( {
 	const [ post, setPost ] = useState< SamplePost >( {
 		title: 'Hello, World!',
 		order: 2,
-		author: 1,
+		author: 5,
 		status: 'draft',
 		reviewer: 'fulano',
 		date: '2021-01-01T12:00:00',

package/src/dataviews/stories/empty.tsx

@@ -59,13 +59,7 @@ const EmptyComponent = ( {
 		search: '',
 		page: 1,
 		perPage: 10,
-		layout: {
-			styles: {
-				satellites: {
-					align: 'end' as const,
-				},
-			},
-		},
+		layout: {},
 		filters: [],
 		fields: [ 'title', 'description', 'categories' ],
 	} );

package/src/dataviews/stories/free-composition.tsx

@@ -134,11 +134,6 @@ export const FreeCompositionComponent = () => {
 		page: 1,
 		perPage: 10,
 		layout: {
-			styles: {
-				satellites: {
-					align: 'end' as const,
-				},
-			},
 			enableMoving: false,
 		},
 		filters: [],

package/src/dataviews/stories/layout-table.tsx

@@ -32,13 +32,7 @@ export const LayoutTableComponent = ( {
 		search: '',
 		page: 1,
 		perPage: 10,
-		layout: {
-			styles: {
-				satellites: {
-					align: 'end' as const,
-				},
-			},
-		},
+		layout: {},
 		filters: [],
 		fields: [ 'categories' ],
 		titleField: 'title',

package/src/dataviews/stories/minimal-ui.tsx

@@ -23,11 +23,6 @@ const MinimalUIComponent = ( {
 		page: 1,
 		perPage: 10,
 		layout: {
-			styles: {
-				satellites: {
-					align: 'end' as const,
-				},
-			},
 			enableMoving: false,
 		},
 		filters: [],

package/src/dataviews/stories/with-card.tsx

@@ -24,13 +24,7 @@ const WithCardComponent = () => {
 		search: '',
 		page: 1,
 		perPage: 10,
-		layout: {
-			styles: {
-				satellites: {
-					align: 'end' as const,
-				},
-			},
-		},
+		layout: {},
 		filters: [],
 		fields: [ 'categories' ],
 		titleField: 'title',