DataViews: set primary field styles (#57846)

Co-authored-by: James Koster <james@jameskoster.co.uk>
WordPress · Jan 16, 2024 · b8ecb81 · b8ecb81
1 parent 23c3a67
commit b8ecb81
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 106 deletions.
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -202,6 +202,44 @@
 	}
 }
 
+.dataviews-view-list__primary-field,
+.dataviews-view-grid__primary-field,
+.dataviews-view-table__primary-field {
+	font-size: $default-font-size;
+	font-weight: 500;
+	color: $gray-900;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	display: block;
+	width: 100%;
+
+	a {
+		text-decoration: none;
+		color: inherit;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		width: 100%;
+
+		&:hover {
+			color: $gray-900;
+		}
+	}
+
+	button.components-button.is-link {
+		text-decoration: none;
+		color: inherit;
+		font-weight: inherit;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+		width: 100%;
+	}
+}
+
 .dataviews-view-grid {
 	margin-bottom: $grid-unit-30;
 	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
@@ -215,26 +253,6 @@
 		grid-template-columns: repeat(4, minmax(0, 1fr)) !important; // Todo: eliminate !important dependency
 	}
 
-	.dataviews-view-grid__card {
-		.dataviews-view-grid__primary-field {
-			.dataviews-view-grid__title-field {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				display: block;
-				font-size: $default-font-size;
-				width: 100%;
-			}
-
-			.dataviews-view-grid__title-field a,
-			button.dataviews-view-grid__title-field {
-				font-weight: 500;
-				color: $gray-900;
-				text-decoration: none;
-			}
-		}
-	}
-
 	.dataviews-view-grid__media {
 		width: 100%;
 		min-height: 200px;
@@ -250,10 +268,6 @@
 		}
 	}
 
-	.dataviews-view-grid__primary-field {
-		min-height: $grid-unit-30;
-	}
-
 	.dataviews-view-grid__fields {
 		position: relative;
 		font-size: 12px;
@@ -296,6 +310,7 @@
 		&:not(.is-selected):hover {
 			color: var(--wp-admin-theme-color);
 
+			.dataviews-view-list__primary-field,
 			.dataviews-view-list__fields {
 				color: var(--wp-admin-theme-color);
 			}
@@ -308,6 +323,7 @@
 			background-color: var(--wp-admin-theme-color);
 			color: $white;
 
+			.dataviews-view-list__primary-field,
 			.dataviews-view-list__fields,
 			.components-button {
 				color: $white;

diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import {
-	FlexBlock,
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -53,13 +52,10 @@ export default function ViewGrid( {
 					<div className="dataviews-view-grid__media">
 						{ mediaField?.render( { item } ) }
 					</div>
-					<HStack
-						className="dataviews-view-grid__primary-field"
-						justify="space-between"
-					>
-						<FlexBlock>
+					<HStack justify="space-between">
+						<HStack className="dataviews-view-grid__primary-field">
 							{ primaryField?.render( { item } ) }
-						</FlexBlock>
+						</HStack>
 						<ItemActions
 							item={ item }
 							actions={ actions }

diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
@@ -92,7 +92,9 @@ export default function ViewList( {
 										) }
 									</div>
 									<VStack spacing={ 1 }>
-										{ primaryField?.render( { item } ) }
+										<span className="dataviews-view-list__primary-field">
+											{ primaryField?.render( { item } ) }
+										</span>
 										<div className="dataviews-view-list__fields">
 											{ visibleFields.map( ( field ) => {
 												return (

diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
@@ -564,7 +564,16 @@ function ViewTable( {
 												field.maxWidth || undefined,
 										} }
 									>
-										<span className="dataviews-view-table__cell-content-wrapper">
+										<span
+											className={ classnames(
+												'dataviews-view-table__cell-content-wrapper',
+												{
+													'dataviews-view-table__primary-field':
+														primaryField?.id ===
+														field.id,
+												}
+											) }
+										>
 											{ field.render( {
 												item,
 											} ) }

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalView as View,
-	__experimentalVStack as VStack,
-	Button,
-} from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -82,10 +78,21 @@ function useView( type ) {
 	const { editEntityRecord } = useDispatch( coreStore );
 
 	const customView = useMemo( () => {
-		return (
-			editedViewRecord?.content && JSON.parse( editedViewRecord?.content )
-		);
+		const storedView =
+			editedViewRecord?.content &&
+			JSON.parse( editedViewRecord?.content );
+		if ( ! storedView ) {
+			return storedView;
+		}
+
+		return {
+			...storedView,
+			layout: {
+				...( DEFAULT_CONFIG_PER_VIEW_TYPE[ storedView?.type ] || {} ),
+			},
+		};
 	}, [ editedViewRecord?.content ] );
+
 	const setCustomView = useCallback(
 		( viewToSet ) => {
 			editEntityRecord(
@@ -224,32 +231,22 @@ export default function PagePages() {
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered,
 				render: ( { item } ) => {
-					return (
-						<VStack spacing={ 1 }>
-							<View
-								as="span"
-								className="dataviews-view-grid__title-field"
-							>
-								{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
-									view.type
-								) ? (
-									<Link
-										params={ {
-											postId: item.id,
-											postType: item.type,
-											canvas: 'edit',
-										} }
-									>
-										{ decodeEntities(
-											item.title?.rendered
-										) || __( '(no title)' ) }
-									</Link>
-								) : (
-									decodeEntities( item.title?.rendered ) ||
-									__( '(no title)' )
-								) }
-							</View>
-						</VStack>
+					return [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
+						view.type
+					) ? (
+						<Link
+							params={ {
+								postId: item.id,
+								postType: item.type,
+								canvas: 'edit',
+							} }
+						>
+							{ decodeEntities( item.title?.rendered ) ||
+								__( '(no title)' ) }
+						</Link>
+					) : (
+						decodeEntities( item.title?.rendered ) ||
+							__( '(no title)' )
 					);
 				},
 				maxWidth: 400,

diff --git a/packages/edit-site/src/components/page-patterns/dataviews-patterns.js b/packages/edit-site/src/components/page-patterns/dataviews-patterns.js
@@ -4,7 +4,6 @@
 import {
 	__experimentalHStack as HStack,
 	Button,
-	__experimentalHeading as Heading,
 	Tooltip,
 	Flex,
 } from '@wordpress/components';
@@ -197,24 +196,24 @@ function Title( { item, categoryId } ) {
 					/>
 				</Tooltip>
 			) }
-			<Flex as="span" gap={ 0 } justify="left">
+			<Flex
+				as="div"
+				gap={ 0 }
+				justify="left"
+				className="edit-site-patterns__pattern-title"
+			>
 				{ item.type === PATTERN_TYPES.theme ? (
-					<span className="dataviews-view-grid__title-field">
-						{ item.title }
-					</span>
+					item.title
 				) : (
-					<Heading level={ 5 }>
-						<Button
-							variant="link"
-							onClick={ onClick }
-							// Required for the grid's roving tab index system.
-							// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
-							tabIndex="-1"
-							className="dataviews-view-grid__title-field"
-						>
-							{ item.title || item.name }
-						</Button>
-					</Heading>
+					<Button
+						variant="link"
+						onClick={ onClick }
+						// Required for the grid's roving tab index system.
+						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
+						tabIndex="-1"
+					>
+						{ item.title || item.name }
+					</Button>
 				) }
 			</Flex>
 		</HStack>

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
@@ -254,6 +254,15 @@
 		top: 0;
 		z-index: 2;
 	}
+
+	.edit-site-patterns__pattern-title {
+		display: block;
+		width: 100%;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: inherit;
+	}
 }
 
 .dataviews-action-modal__duplicate-pattern {

diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
@@ -8,10 +8,8 @@ import removeAccents from 'remove-accents';
  */
 import {
 	Icon,
-	__experimentalView as View,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
 	VisuallyHidden,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -96,28 +94,19 @@ function normalizeSearchInput( input = '' ) {
 
 function TemplateTitle( { item, viewType } ) {
 	if ( viewType === LAYOUT_LIST ) {
-		return (
-			<>
-				{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
-			</>
-		);
+		return decodeEntities( item.title?.rendered ) || __( '(no title)' );
 	}
 
 	return (
-		<VStack spacing={ 1 }>
-			<View as="span" className="dataviews-view-grid__title-field">
-				<Link
-					params={ {
-						postId: item.id,
-						postType: item.type,
-						canvas: 'edit',
-					} }
-				>
-					{ decodeEntities( item.title?.rendered ) ||
-						__( '(no title)' ) }
-				</Link>
-			</View>
-		</VStack>
+		<Link
+			params={ {
+				postId: item.id,
+				postType: item.type,
+				canvas: 'edit',
+			} }
+		>
+			{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
+		</Link>
 	);
 }
 

diff --git a/packages/edit-site/src/components/sidebar-dataviews/default-views.js b/packages/edit-site/src/components/sidebar-dataviews/default-views.js
@@ -15,7 +15,9 @@ import {
 } from '../../utils/constants';
 
 export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
-	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_TABLE ]: {
+		primaryField: 'title',
+	},
 	[ LAYOUT_GRID ]: {
 		mediaField: 'featured-image',
 		primaryField: 'title',