diff --git a/package-lock.json b/package-lock.json
index ded852521693f6..acace7b65e4102 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55032,7 +55032,9 @@
 				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/components": "file:../components",
 				"@wordpress/compose": "file:../compose",
+				"@wordpress/date": "file:../date",
 				"@wordpress/element": "file:../element",
+				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/keycodes": "file:../keycodes",
@@ -70377,7 +70379,9 @@
 				"@wordpress/a11y": "file:../a11y",
 				"@wordpress/components": "file:../components",
 				"@wordpress/compose": "file:../compose",
+				"@wordpress/date": "file:../date",
 				"@wordpress/element": "file:../element",
+				"@wordpress/html-entities": "file:../html-entities",
 				"@wordpress/i18n": "file:../i18n",
 				"@wordpress/icons": "file:../icons",
 				"@wordpress/keycodes": "file:../keycodes",
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index c0d0a01cbc3e28..df904e87e0e22b 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -150,25 +150,16 @@ Example:
 [
 	{
 		id: 'date',
+		type: 'date',
 		header: __( 'Date' ),
 		getValue: ( { item } ) => item.date,
-		render: ( { item } ) => {
-			return (
-				<time>{ getFormattedDate( item.date ) }</time>
-			);
-		},
 		enableHiding: false
 	},
 	{
 		id: 'author',
+		type: 'enumeration',
 		header: __( 'Author' ),
 		getValue: ( { item } ) => item.author,
-		render: ( { item } ) => {
-			return (
-				<a href="...">{ item.author }</a>
-			);
-		},
-		type: 'enumeration',
 		elements: [
 			{ value: 1, label: 'Admin' }
 			{ value: 2, label: 'User' }
@@ -179,11 +170,11 @@ Example:
 ```
 
 -   `id`: identifier for the field. Unique.
+-   `type`: the type of the field. Used to render the field and generate the proper filters. See "Field types".
 -   `header`: the field's name to be shown in the UI.
 -   `getValue`: function that returns the value of the field.
--   `render`: function that renders the field.
+-   `formats`: a list of modifications to the default render provided for the field. See "Format".
 -   `elements`: the set of valid values for the field's value.
--   `type`: the type of the field. Used to generate the proper filters. Only `enumeration` available at the moment. See "Field types".
 -   `enableSorting`: whether the data can be sorted by the given field. True by default.
 -   `enableHiding`: whether the field can be hidden. True by default.
 -   `filterBy`: configuration for the filters.
@@ -211,10 +202,64 @@ Array of operations that can be performed upon each record. Each action is an ob
     - `list`: the view uses a list layout.
 - Field types:
     - `enumeration`: the field value should be taken and can be filtered from a closed list of elements.
+    - `date`: the field value is a date.
+    - `text`: the field value is a string.
+    - `img`: the field value is an image.
 - Operator types:
     - `in`: operator to be used in filters for fields of type `enumeration`.
     - `notIn`: operator to be used in filters for fields of type `enumeration`.
 
+## Formats
+
+Each format is an object whose shape is:
+
+```js
+{
+	type: 'format-type',
+	renderProps: ( { item } ) => { return { newProp: '...' }; },
+	renderChildren: ( { item } ) => { return Component; }
+}
+```
+
+Existing formats are:
+
+- `link`: format that declares the field should contain a link with the given props (href, etc.).
+
+```js
+{
+	type: 'link',
+	renderProps: ( { item } ) => ({ href: 'new-url-based-on-item' }),
+},
+```
+
+- `empty`: format that declares the field wants to render an empty state different from the default.
+
+```js
+{
+	type: 'empty',
+	renderChildren: ( { item } ) => { return __( '(no title)' ); },
+},
+```
+
+- `prefix`: format that renders a component as a prefix to the default render. Example: used to render an icon before.
+
+```js
+{
+	type: 'prefix',
+	renderChildren: ( { item } ) => { return <Icon icon={ iconBasedOnItem } >; },
+}
+```
+
+- `after`: format that renders a component. Similar to CSS pseudo-element `::after`.
+
+```js
+{
+	type: 'after',
+	renderProps: ( { item } ) => ({ className: '...' }),
+	renderChildren: ( { item }) => { return <Label item={item}>; },
+}
+```
+
 ## Contributing to this package
 
 This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index 1872480d759c37..98cc611ad84813 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -31,7 +31,9 @@
 		"@wordpress/a11y": "file:../a11y",
 		"@wordpress/components": "file:../components",
 		"@wordpress/compose": "file:../compose",
+		"@wordpress/date": "file:../date",
 		"@wordpress/element": "file:../element",
+		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/keycodes": "file:../keycodes",
diff --git a/packages/dataviews/src/constants.js b/packages/dataviews/src/constants.js
index 387050a1dca5b6..ba20a6f200fba7 100644
--- a/packages/dataviews/src/constants.js
+++ b/packages/dataviews/src/constants.js
@@ -18,6 +18,8 @@ import ViewList from './view-list';
 
 // Field types.
 export const ENUMERATION_TYPE = 'enumeration';
+export const DATE_TYPE = 'date';
+export const TEXT_TYPE = 'text';
 
 // Filter operators.
 export const OPERATOR_IN = 'in';
diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
index 9e7b45d04ef87f..ecca27dcc22434 100644
--- a/packages/dataviews/src/dataviews.js
+++ b/packages/dataviews/src/dataviews.js
@@ -14,7 +14,13 @@ import Pagination from './pagination';
 import ViewActions from './view-actions';
 import Filters from './filters';
 import Search from './search';
-import { VIEW_LAYOUTS } from './constants';
+import {
+	VIEW_LAYOUTS,
+	DATE_TYPE,
+	ENUMERATION_TYPE,
+	TEXT_TYPE,
+} from './constants';
+import { renderDate, renderEnumeration, renderText } from './types';
 
 export default function DataViews( {
 	view,
@@ -42,11 +48,32 @@ export default function DataViews( {
 		( v ) => v.type === view.type
 	).component;
 	const _fields = useMemo( () => {
-		return fields.map( ( field ) => ( {
-			...field,
-			render: field.render || field.getValue,
-		} ) );
+		return fields.map( ( field ) => {
+			// Normalize formats.
+			field.formats = field.formats || [];
+
+			// Normalize render.
+			switch ( field.type ) {
+				case DATE_TYPE:
+					field.render = ( { item } ) =>
+						renderDate( { field, item } );
+					break;
+				case ENUMERATION_TYPE:
+					field.render = ( { item } ) =>
+						renderEnumeration( { field, item } );
+					break;
+				case TEXT_TYPE:
+					field.render = ( { item } ) =>
+						renderText( { field, item } );
+					break;
+				default:
+					field.render = field.render || field.getValue;
+			}
+
+			return field;
+		} );
 	}, [ fields ] );
+
 	return (
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 0 } justify="flex-start">
@@ -63,13 +90,13 @@ export default function DataViews( {
 							/>
 						) }
 						<Filters
-							fields={ fields }
+							fields={ _fields }
 							view={ view }
 							onChangeView={ onChangeView }
 						/>
 					</HStack>
 					<ViewActions
-						fields={ fields }
+						fields={ _fields }
 						view={ view }
 						onChangeView={ onChangeView }
 						supportedLayouts={ supportedLayouts }
diff --git a/packages/dataviews/src/types.js b/packages/dataviews/src/types.js
new file mode 100644
index 00000000000000..27844ece869b0e
--- /dev/null
+++ b/packages/dataviews/src/types.js
@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import { dateI18n, getDate, getSettings } from '@wordpress/date';
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	VisuallyHidden,
+} from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
+import { sprintf, __ } from '@wordpress/i18n';
+
+const renderLinkFormat = ( { format, item, children } ) => {
+	const props = format.renderProps( { item } );
+	return <a { ...props }>{ children }</a>;
+};
+
+const renderDateFormat = ( { children } ) => {
+	const formattedDate = dateI18n(
+		getSettings().formats.datetimeAbbreviated,
+		getDate( children )
+	);
+	return <time>{ formattedDate }</time>;
+};
+
+const renderAfterFormat = ( { format, item } ) => {
+	const props = format.renderProps( { item } );
+	return <span { ...props }>{ format.renderChildren( { item } ) }</span>;
+};
+
+// TODO: remove field prop?
+const renderEmptyFormat = ( { format, item, field } ) => {
+	if ( format ) {
+		const props = format.renderProps ? format.renderProps( { item } ) : {};
+		return <Text { ...props }>{ format.renderChildren( { item } ) }</Text>;
+	}
+
+	return (
+		<>
+			<Text variant="muted" aria-hidden="true">
+				&#8212;
+			</Text>
+			<VisuallyHidden>
+				{ sprintf(
+					/* translators: %s: field description or field id, e.g.: "No author." */
+					__( 'No %s.' ),
+					field.description?.toLowerCase() || field.id
+				) }
+			</VisuallyHidden>
+		</>
+	);
+};
+
+const renderPrefixFormat = ( { format, item, children } ) => {
+	return (
+		<HStack alignment="left" spacing={ 1 }>
+			{ format.renderChildren( { item } ) }
+			<span>{ children }</span>
+		</HStack>
+	);
+};
+
+export const renderDate = ( { field, item } ) => {
+	field.formats.unshift( { type: 'date' } );
+
+	return renderText( { field, item } );
+};
+
+export const renderText = ( { field, item } ) => {
+	const value = decodeEntities( field.getValue( { item } ) );
+	if ( ! value ) {
+		const emptyFormat = field.formats.find(
+			( format ) => format.type === 'empty'
+		);
+		return renderEmptyFormat( { format: emptyFormat, item, field } );
+	}
+
+	const result = field.formats.reduce( ( acc, format ) => {
+		if ( format.type === 'link' ) {
+			return renderLinkFormat( { format, item, children: acc } );
+		}
+		if ( format.type === 'date' ) {
+			return renderDateFormat( { format, item, children: acc } );
+		}
+		return acc;
+	}, value );
+
+	const prefixFormat = field.formats.find(
+		( format ) => format.type === 'prefix'
+	);
+	if ( prefixFormat ) {
+		return renderPrefixFormat( {
+			format: prefixFormat,
+			item,
+			children: result,
+		} );
+	}
+
+	const afterFormat = field.formats.find(
+		( format ) => format.type === 'after'
+	);
+	if ( afterFormat ) {
+		return (
+			<VStack spacing={ 1 }>
+				{ result }
+				{ renderAfterFormat( { format: afterFormat, item } ) }
+			</VStack>
+		);
+	}
+	return result;
+};
+
+export const renderEnumeration = renderText;
diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
index 516264946d1f67..b598ff4264902e 100644
--- a/packages/dataviews/src/view-list.js
+++ b/packages/dataviews/src/view-list.js
@@ -30,6 +30,9 @@ export default function ViewList( {
 	const primaryField = fields.find(
 		( field ) => field.id === view.layout.primaryField
 	);
+	primaryField.formats = primaryField.formats.filter(
+		( format ) => format.type !== 'link'
+	);
 	const visibleFields = fields.filter(
 		( field ) =>
 			! view.hiddenFields.includes( field.id ) &&
@@ -72,7 +75,9 @@ export default function ViewList( {
 								</div>
 								<HStack>
 									<VStack spacing={ 1 }>
-										{ primaryField?.render( { item } ) }
+										<span>
+											{ primaryField?.render( { item } ) }
+										</span>
 										<div className="dataviews-list-view__fields">
 											{ visibleFields.map( ( field ) => {
 												return (
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index c92ce35ebe46dc..e377ad3658d0f6 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -1,15 +1,9 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalHeading as Heading,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
-import { dateI18n, getDate, getSettings } from '@wordpress/date';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { DataViews } from '@wordpress/dataviews';
@@ -18,10 +12,13 @@ import { DataViews } from '@wordpress/dataviews';
  * Internal dependencies
  */
 import Page from '../page';
-import Link from '../routes/link';
+import { useLink } from '../routes/link';
+
 import { default as DEFAULT_VIEWS } from '../sidebar-dataviews/default-views';
 import {
 	ENUMERATION_TYPE,
+	DATE_TYPE,
+	TEXT_TYPE,
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
 	LAYOUT_LIST,
@@ -55,6 +52,13 @@ const defaultConfigPerViewType = {
 	},
 };
 
+const LinkFormat = ( { item } ) =>
+	useLink( {
+		postId: item.id,
+		postType: item.type,
+		canvas: 'edit',
+	} );
+
 function useView( type ) {
 	const {
 		params: { activeView = 'all', isCustom = 'false' },
@@ -193,6 +197,7 @@ export default function PagePages() {
 		() => [
 			{
 				id: 'featured-image',
+				// type: 'media', // TODO: add media type.
 				header: __( 'Featured Image' ),
 				getValue: ( { item } ) => item.featured_media,
 				render: ( { item } ) =>
@@ -212,34 +217,18 @@ export default function PagePages() {
 			{
 				header: __( 'Title' ),
 				id: 'title',
-				getValue: ( { item } ) => item.title?.rendered || item.slug,
-				render: ( { item } ) => {
-					return (
-						<VStack spacing={ 1 }>
-							<Heading as="h3" level={ 5 } weight={ 500 }>
-								{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
-									view.type
-								) ? (
-									<Link
-										params={ {
-											postId: item.id,
-											postType: item.type,
-											canvas: 'edit',
-										} }
-									>
-										{ decodeEntities(
-											item.title?.rendered || item.slug
-										) || __( '(no title)' ) }
-									</Link>
-								) : (
-									decodeEntities(
-										item.title?.rendered || item.slug
-									) || __( '(no title)' )
-								) }
-							</Heading>
-						</VStack>
-					);
-				},
+				type: TEXT_TYPE,
+				getValue: ( { item } ) => item.title?.rendered, // TODO: see styles for pages without title (link).
+				formats: [
+					{
+						type: 'link',
+						renderProps: LinkFormat,
+					},
+					{
+						type: 'empty',
+						renderChildren: () => __( '(no title)' ),
+					},
+				],
 				maxWidth: 400,
 				enableHiding: false,
 			},
@@ -270,14 +259,8 @@ export default function PagePages() {
 			{
 				header: __( 'Date' ),
 				id: 'date',
+				type: DATE_TYPE,
 				getValue: ( { item } ) => item.date,
-				render: ( { item } ) => {
-					const formattedDate = dateI18n(
-						getSettings().formats.datetimeAbbreviated,
-						getDate( item.date )
-					);
-					return <time>{ formattedDate }</time>;
-				},
 			},
 		],
 		[ authors, view ]
diff --git a/packages/edit-site/src/components/page-templates/dataviews-templates.js b/packages/edit-site/src/components/page-templates/dataviews-templates.js
index e51f9ba970c4cd..6c696acab62af0 100644
--- a/packages/edit-site/src/components/page-templates/dataviews-templates.js
+++ b/packages/edit-site/src/components/page-templates/dataviews-templates.js
@@ -6,18 +6,10 @@ import removeAccents from 'remove-accents';
 /**
  * WordPress dependencies
  */
-import {
-	Icon,
-	__experimentalView as View,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	VisuallyHidden,
-} from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useCallback } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
 import { parse } from '@wordpress/blocks';
 import {
 	BlockPreview,
@@ -29,11 +21,12 @@ import { DataViews } from '@wordpress/dataviews';
  * Internal dependencies
  */
 import Page from '../page';
-import Link from '../routes/link';
+import { useLink } from '../routes/link';
 import { useAddedBy, AvatarImage } from '../list/added-by';
 import {
 	TEMPLATE_POST_TYPE,
 	ENUMERATION_TYPE,
+	TEXT_TYPE,
 	OPERATOR_IN,
 	OPERATOR_NOT_IN,
 	LAYOUT_GRID,
@@ -77,48 +70,34 @@ function normalizeSearchInput( input = '' ) {
 	return removeAccents( input.trim().toLowerCase() );
 }
 
-// TODO: these are going to be reused in the template part list.
-// That's the reason for leaving the template parts code for now.
-function TemplateTitle( { item } ) {
+const LinkFormat = ( { item } ) =>
+	useLink( {
+		postId: item.id,
+		postType: item.type,
+		canvas: 'edit',
+	} );
+
+const AfterFormatProps = () => ( {
+	className: 'edit-site-list-added-by__customized-info',
+} );
+
+const AfterFormatChildren = ( { item } ) => {
 	const { isCustomized } = useAddedBy( item.type, item.id );
-	return (
-		<VStack spacing={ 1 }>
-			<View as="h3">
-				<Link
-					params={ {
-						postId: item.id,
-						postType: item.type,
-						canvas: 'edit',
-					} }
-				>
-					{ decodeEntities( item.title?.rendered || item.slug ) ||
-						__( '(no title)' ) }
-				</Link>
-			</View>
-			{ isCustomized && (
-				<span className="edit-site-list-added-by__customized-info">
-					{ item.type === TEMPLATE_POST_TYPE
-						? _x( 'Customized', 'template' )
-						: _x( 'Customized', 'template part' ) }
-				</span>
-			) }
-		</VStack>
-	);
-}
+	if ( ! isCustomized ) {
+		return null;
+	}
 
-function AuthorField( { item } ) {
-	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
-	return (
-		<HStack alignment="left" spacing={ 1 }>
-			{ imageUrl ? (
-				<AvatarImage imageUrl={ imageUrl } />
-			) : (
-				<div className="edit-site-list-added-by__icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span>{ text }</span>
-		</HStack>
+	return _x( 'Customized', 'template' );
+};
+
+function AuthorFormat( { item } ) {
+	const { icon, imageUrl } = useAddedBy( item.type, item.id );
+	return imageUrl ? (
+		<AvatarImage imageUrl={ imageUrl } />
+	) : (
+		<div className="edit-site-list-added-by__icon">
+			<Icon icon={ icon } />
+		</div>
 	);
 }
 
@@ -176,6 +155,7 @@ export default function DataviewsTemplates() {
 			{
 				header: __( 'Preview' ),
 				id: 'preview',
+				// type: 'media', // TODO: add media type.
 				render: ( { item } ) => {
 					return (
 						<TemplatePreview
@@ -191,29 +171,28 @@ export default function DataviewsTemplates() {
 			{
 				header: __( 'Template' ),
 				id: 'title',
-				getValue: ( { item } ) => item.title?.rendered || item.slug,
-				render: ( { item } ) => <TemplateTitle item={ item } />,
+				type: TEXT_TYPE,
+				getValue: ( { item } ) => item.title?.rendered,
+				formats: [
+					{ type: 'link', renderProps: LinkFormat },
+					{
+						type: 'after',
+						renderProps: AfterFormatProps,
+						renderChildren: AfterFormatChildren,
+					},
+					{
+						type: 'empty',
+						renderChildren: () => __( '(no title)' ),
+					},
+				],
 				maxWidth: 400,
 				enableHiding: false,
 			},
 			{
 				header: __( 'Description' ),
 				id: 'description',
+				type: TEXT_TYPE,
 				getValue: ( { item } ) => item.description,
-				render: ( { item } ) => {
-					return item.description ? (
-						decodeEntities( item.description )
-					) : (
-						<>
-							<Text variant="muted" aria-hidden="true">
-								&#8212;
-							</Text>
-							<VisuallyHidden>
-								{ __( 'No description.' ) }
-							</VisuallyHidden>
-						</>
-					);
-				},
 				maxWidth: 200,
 				enableSorting: false,
 			},
@@ -221,9 +200,7 @@ export default function DataviewsTemplates() {
 				header: __( 'Author' ),
 				id: 'author',
 				getValue: ( { item } ) => item.author_text,
-				render: ( { item } ) => {
-					return <AuthorField item={ item } />;
-				},
+				formats: [ { type: 'prefix', renderChildren: AuthorFormat } ],
 				enableHiding: false,
 				type: ENUMERATION_TYPE,
 				elements: authors,
diff --git a/packages/edit-site/src/utils/constants.js b/packages/edit-site/src/utils/constants.js
index f5ca89b9fb62cd..1c4a644456f87a 100644
--- a/packages/edit-site/src/utils/constants.js
+++ b/packages/edit-site/src/utils/constants.js
@@ -50,5 +50,7 @@ export const LAYOUT_GRID = 'grid';
 export const LAYOUT_TABLE = 'table';
 export const LAYOUT_LIST = 'list';
 export const ENUMERATION_TYPE = 'enumeration';
+export const DATE_TYPE = 'date';
+export const TEXT_TYPE = 'text';
 export const OPERATOR_IN = 'in';
 export const OPERATOR_NOT_IN = 'notIn';