@wordpress/edit-site 5.23.0 → 5.24.0

package/src/components/dataviews/style.scss

@@ -1,8 +1,8 @@
 .dataviews-wrapper {
 	width: 100%;
-	height: 100%;
+	height: calc(100% - #{$grid-unit-40} * 2);
 	overflow: auto;
-	padding: $grid-unit-40;
+	padding: $grid-unit-40 $grid-unit-40 0;
 
 	> div {
 		min-height: 100%;
@@ -11,6 +11,15 @@
 
 .dataviews-pagination {
 	margin-top: auto;
+	position: sticky;
+	bottom: 0;
+	background-color: $white;
+	padding: $grid-unit-20 0;
+	border-top: $border-width solid $gray-200;
+}
+
+.dataviews-filters-options {
+	margin: $grid-unit-40 0 $grid-unit-20;
 }
 
 .dataviews-list-view {
@@ -19,6 +28,7 @@
 	border-color: inherit;
 	border-collapse: collapse;
 	position: relative;
+
 	a {
 		text-decoration: none;
 	}
@@ -37,16 +47,82 @@
 	}
 	tr {
 		border-bottom: 1px solid $gray-100;
+
+		&:last-child {
+			border-bottom: 0;
+		}
+	}
+	thead {
+		tr {
+			border: 0;
+		}
+		th {
+			position: sticky;
+			top: - #{$grid-unit-40}; // Offset the container padding
+			background-color: $white;
+			box-shadow: inset 0 -#{$border-width} 0 $gray-200;
+		}
 	}
 }
 
-.dataviews-view-grid__media {
-	width: 100%;
-	min-height: 200px;
+.dataviews-grid-view {
+	margin-bottom: $grid-unit-30;
+	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+
+	@include break-xlarge() {
+		grid-template-columns: repeat(3, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
+	}
+
+	@include break-huge() {
+		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
+	}
 
-	> * {
-		max-width: 100%;
-		object-fit: cover;
+	.dataviews-view-grid__card {
+		h3 { // Todo: A better way to target this
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+
+	.dataviews-view-grid__media {
+		width: 100%;
+		min-height: 200px;
+		aspect-ratio: 1/1;
+		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+		border-radius: $radius-block-ui * 2;
+		overflow: hidden;
+
+		> * {
+			object-fit: cover;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.dataviews-view-grid__title {
+		min-height: $grid-unit-30;
+
+		a {
+			color: $gray-900;
+			text-decoration: none;
+			font-weight: 500;
+		}
+	}
+
+	.dataviews-view-grid__fields {
+		position: relative;
+		font-size: 12px;
+		line-height: 16px;
+
+		.dataviews-view-grid__field {
+			.dataviews-view-grid__field-header {
+				color: $gray-700;
+			}
+			.dataviews-view-grid__field-value {
+				color: $gray-900;
+			}
+		}
 	}
 }
 

package/src/components/dataviews/view-actions.js

@@ -23,11 +23,11 @@ import { __ } from '@wordpress/i18n';
 import { unlock } from '../../lock-unlock';
 
 const {
-	DropdownMenuV2,
-	DropdownMenuGroupV2,
-	DropdownMenuItemV2,
-	DropdownSubMenuV2,
-	DropdownSubMenuTriggerV2,
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownSubMenuV2: DropdownSubMenu,
+	DropdownSubMenuTriggerV2: DropdownSubMenuTrigger,
 } = unlock( componentsPrivateApis );
 
 const availableViews = [
@@ -57,9 +57,9 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 	}
 	const activeView = _availableViews.find( ( v ) => view.type === v.id );
 	return (
-		<DropdownSubMenuV2
+		<DropdownSubMenu
 			trigger={
-				<DropdownSubMenuTriggerV2
+				<DropdownSubMenuTrigger
 					suffix={
 						<>
 							{ activeView.label }
@@ -68,12 +68,12 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 					}
 				>
 					{ __( 'Layout' ) }
-				</DropdownSubMenuTriggerV2>
+				</DropdownSubMenuTrigger>
 			}
 		>
 			{ _availableViews.map( ( availableView ) => {
 				return (
-					<DropdownMenuItemV2
+					<DropdownMenuItem
 						key={ availableView.id }
 						prefix={
 							availableView.id === view.type && (
@@ -89,19 +89,19 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 						role="menuitemcheckbox"
 					>
 						{ availableView.label }
-					</DropdownMenuItemV2>
+					</DropdownMenuItem>
 				);
 			} ) }
-		</DropdownSubMenuV2>
+		</DropdownSubMenu>
 	);
 }
 
 const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
 function PageSizeMenu( { view, onChangeView } ) {
 	return (
-		<DropdownSubMenuV2
+		<DropdownSubMenu
 			trigger={
-				<DropdownSubMenuTriggerV2
+				<DropdownSubMenuTrigger
 					suffix={
 						<>
 							{ view.perPage }
@@ -111,12 +111,12 @@ function PageSizeMenu( { view, onChangeView } ) {
 				>
 					{ /* TODO: probably label per view type. */ }
 					{ __( 'Rows per page' ) }
-				</DropdownSubMenuTriggerV2>
+				</DropdownSubMenuTrigger>
 			}
 		>
 			{ PAGE_SIZE_VALUES.map( ( size ) => {
 				return (
-					<DropdownMenuItemV2
+					<DropdownMenuItem
 						key={ size }
 						prefix={
 							view.perPage === size && <Icon icon={ check } />
@@ -130,10 +130,10 @@ function PageSizeMenu( { view, onChangeView } ) {
 						role="menuitemcheckbox"
 					>
 						{ size }
-					</DropdownMenuItemV2>
+					</DropdownMenuItem>
 				);
 			} ) }
-		</DropdownSubMenuV2>
+		</DropdownSubMenu>
 	);
 }
 
@@ -145,18 +145,18 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
 		return null;
 	}
 	return (
-		<DropdownSubMenuV2
+		<DropdownSubMenu
 			trigger={
-				<DropdownSubMenuTriggerV2
+				<DropdownSubMenuTrigger
 					suffix={ <Icon icon={ chevronRightSmall } /> }
 				>
 					{ __( 'Fields' ) }
-				</DropdownSubMenuTriggerV2>
+				</DropdownSubMenuTrigger>
 			}
 		>
 			{ hidableFields?.map( ( field ) => {
 				return (
-					<DropdownMenuItemV2
+					<DropdownMenuItem
 						key={ field.id }
 						prefix={
 							! view.hiddenFields?.includes( field.id ) && (
@@ -179,10 +179,10 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
 						role="menuitemcheckbox"
 					>
 						{ field.header }
-					</DropdownMenuItemV2>
+					</DropdownMenuItem>
 				);
 			} ) }
-		</DropdownSubMenuV2>
+		</DropdownSubMenu>
 	);
 }
 
@@ -202,9 +202,9 @@ function SortMenu( { fields, view, onChangeView } ) {
 		( field ) => field.id === view.sort?.field
 	);
 	return (
-		<DropdownSubMenuV2
+		<DropdownSubMenu
 			trigger={
-				<DropdownSubMenuTriggerV2
+				<DropdownSubMenuTrigger
 					suffix={
 						<>
 							{ currentSortedField?.header }
@@ -213,20 +213,20 @@ function SortMenu( { fields, view, onChangeView } ) {
 					}
 				>
 					{ __( 'Sort by' ) }
-				</DropdownSubMenuTriggerV2>
+				</DropdownSubMenuTrigger>
 			}
 		>
 			{ sortableFields?.map( ( field ) => {
 				const sortedDirection = view.sort?.direction;
 				return (
-					<DropdownSubMenuV2
+					<DropdownSubMenu
 						key={ field.id }
 						trigger={
-							<DropdownSubMenuTriggerV2
+							<DropdownSubMenuTrigger
 								suffix={ <Icon icon={ chevronRightSmall } /> }
 							>
 								{ field.header }
-							</DropdownSubMenuTriggerV2>
+							</DropdownSubMenuTrigger>
 						}
 						side="left"
 					>
@@ -237,7 +237,7 @@ function SortMenu( { fields, view, onChangeView } ) {
 									sortedDirection === direction &&
 									field.id === currentSortedField.id;
 								return (
-									<DropdownMenuItemV2
+									<DropdownMenuItem
 										key={ direction }
 										prefix={ <Icon icon={ info.icon } /> }
 										suffix={
@@ -264,14 +264,14 @@ function SortMenu( { fields, view, onChangeView } ) {
 										} }
 									>
 										{ info.label }
-									</DropdownMenuItemV2>
+									</DropdownMenuItem>
 								);
 							}
 						) }
-					</DropdownSubMenuV2>
+					</DropdownSubMenu>
 				);
 			} ) }
-		</DropdownSubMenuV2>
+		</DropdownSubMenu>
 	);
 }
 
@@ -284,8 +284,7 @@ export default function ViewActions( {
 	supportedLayouts,
 } ) {
 	return (
-		<DropdownMenuV2
-			label={ __( 'Actions' ) }
+		<DropdownMenu
 			trigger={
 				<Button
 					variant="tertiary"
@@ -293,12 +292,11 @@ export default function ViewActions( {
 					icon={
 						VIEW_TYPE_ICONS[ view.type ] || VIEW_TYPE_ICONS.list
 					}
-				>
-					{ __( 'View' ) }
-				</Button>
+					label={ __( 'View options' ) }
+				/>
 			}
 		>
-			<DropdownMenuGroupV2>
+			<DropdownMenuGroup>
 				<ViewTypeMenu
 					view={ view }
 					onChangeView={ onChangeView }
@@ -315,7 +313,7 @@ export default function ViewActions( {
 					onChangeView={ onChangeView }
 				/>
 				<PageSizeMenu view={ view } onChangeView={ onChangeView } />
-			</DropdownMenuGroupV2>
-		</DropdownMenuV2>
+			</DropdownMenuGroup>
+		</DropdownMenu>
 	);
 }

package/src/components/dataviews/view-grid.js

@@ -5,61 +5,86 @@ import {
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
-	FlexBlock,
-	Placeholder,
 } from '@wordpress/components';
+import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import ItemActions from './item-actions';
 
-export function ViewGrid( { data, fields, view, actions } ) {
+export function ViewGrid( { data, fields, view, actions, getItemId } ) {
 	const mediaField = fields.find(
 		( field ) => field.id === view.layout.mediaField
 	);
+	const primaryField = fields.find(
+		( field ) => field.id === view.layout.primaryField
+	);
 	const visibleFields = fields.filter(
 		( field ) =>
 			! view.hiddenFields.includes( field.id ) &&
-			field.id !== view.layout.mediaField
+			! [ view.layout.mediaField, view.layout.primaryField ].includes(
+				field.id
+			)
 	);
+	const shownData = useAsyncList( data, { step: 3 } );
 	return (
-		<Grid gap={ 8 } columns={ 2 } alignment="top">
-			{ data.map( ( item, index ) => {
-				return (
-					<VStack key={ index }>
-						<div className="dataviews-view-grid__media">
-							{ mediaField?.render( { item, view } ) || (
-								<Placeholder
-									withIllustration
-									style={ {
-										width: '100%',
-										minHeight: '200px',
-									} }
-								/>
-							) }
-						</div>
-
-						<HStack justify="space-between" alignment="top">
-							<FlexBlock>
-								<VStack>
-									{ visibleFields.map( ( field ) => (
-										<div key={ field.id }>
-											{ field.render( { item, view } ) }
-										</div>
-									) ) }
+		<Grid
+			gap={ 8 }
+			columns={ 2 }
+			alignment="top"
+			className="dataviews-grid-view"
+		>
+			{ shownData.map( ( item, index ) => (
+				<VStack
+					spacing={ 3 }
+					key={ getItemId?.( item ) || index }
+					className="dataviews-view-grid__card"
+				>
+					<div className="dataviews-view-grid__media">
+						{ mediaField?.render( { item, view } ) }
+					</div>
+					<HStack
+						className="dataviews-view-grid__title"
+						justify="space-between"
+					>
+						{ primaryField?.render( { item, view } ) }
+						<ItemActions
+							item={ item }
+							actions={ actions }
+							isCompact
+						/>
+					</HStack>
+					<VStack
+						className="dataviews-view-grid__fields"
+						spacing={ 3 }
+					>
+						{ visibleFields.map( ( field ) => {
+							const renderedValue = field.render( {
+								item,
+								view,
+							} );
+							if ( ! renderedValue ) {
+								return null;
+							}
+							return (
+								<VStack
+									className="dataviews-view-grid__field"
+									key={ field.id }
+									spacing={ 1 }
+								>
+									<div className="dataviews-view-grid__field-header">
+										{ field.header }
+									</div>
+									<div className="dataviews-view-grid__field-value">
+										{ field.render( { item, view } ) }
+									</div>
 								</VStack>
-							</FlexBlock>
-							<FlexBlock>
-								<ItemActions
-									item={ item }
-									actions={ actions }
-								/>
-							</FlexBlock>
-						</HStack>
+							);
+						} ) }
 					</VStack>
-				);
-			} ) }
+				</VStack>
+			) ) }
 		</Grid>
 	);
 }