DataViews now accepts a empty ReactNode for free customization

Author: p-jackson

packages/dataviews/CHANGELOG.md

@@ -8,7 +8,7 @@
 
 ### Features
 
-- Add `empty` prop to `DataViews` to customize the empty state message.
+- `DataViews` empty state can be customized using the new `empty` prop.
 
 ### Bug Fixes
 

packages/dataviews/README.md

@@ -421,27 +421,9 @@ A list of numbers used to control the available item counts per page.
 
 It's optional. Defaults to `[10, 20, 50, 100]`.
 
-#### `empty`: `Object`
+#### `empty`: React node
 
-The empty object configures what should be shown when the `data` is empty.
-
-Example:
-
-```js
-const empty = {
-	heading: 'No pages found',
-	description: 'Your search did not match any pages.',
-	illustration: 'https://example.com/illustration.svg',
-	actions: <Button>Create a new page</Button>,
-};
-```
-
-Properties:
-
--   `heading`: short message describing the empty state. If this is the only property provided then the empty state will render as plain text without any additional styling.
--   `description`: a longer description of the empty state, providing more context or instructions.
--   `illustration`: either a URL to an image or a React component that renders an illustration. This should be purely illustrative as it does not render with any alt text.
--   `actions`: a `<Button>` (or list of `<Button>`s rendered in a fragment) which provide the user with next steps.
+A message or element to be displayed instead of the dataview's default empty message.
 
 ### Composition modes
 
@@ -473,7 +455,6 @@ The following components are available directly under `DataViews`:
 -   `DataViews.Pagination`
 -   `DataViews.BulkActionToolbar`
 -   `DataViews.ViewConfig`
--   `DataViews.Empty`
 
 #### example
 

packages/dataviews/src/components/dataviews-context/index.ts

@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import type { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { createContext, createRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -18,7 +17,6 @@ import type {
 	NormalizedField,
 	SupportedLayouts,
 	NormalizedFilter,
-	EmptyViewProps,
 } from '../../types';
 import type { SetSelection } from '../../private-types';
 import { LAYOUT_TABLE } from '../../constants';
@@ -57,11 +55,7 @@ type DataViewsContextType< Item > = {
 	isShowingFilter: boolean;
 	setIsShowingFilter: ( value: boolean ) => void;
 	perPageSizes?: [ number, number, number, number ];
-	empty: EmptyViewProps;
-};
-
-export const DEFAULT_VIEW_EMPTY = {
-	heading: __( 'No results' ),
+	empty?: ReactNode;
 };
 
 const DataViewsContext = createContext< DataViewsContextType< any > >( {
@@ -87,7 +81,6 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( {
 	filters: [],
 	isShowingFilter: false,
 	setIsShowingFilter: () => {},
-	empty: DEFAULT_VIEW_EMPTY,
 } );
 
 export default DataViewsContext;

packages/dataviews/src/components/dataviews-empty/index.tsx

@@ -7,6 +7,7 @@ import type { ComponentType } from 'react';
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -35,6 +36,7 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 		onClickItem,
 		isItemClickable,
 		renderItemLink,
+		empty = __( 'No results' ),
 	} = useContext( DataViewsContext );
 
 	const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type )
@@ -57,6 +59,7 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 			renderItemLink={ renderItemLink }
 			isItemClickable={ isItemClickable }
 			view={ view }
+			empty={ empty }
 		/>
 	);
 }

packages/dataviews/src/components/dataviews-empty/style.scss

@@ -13,7 +13,7 @@ import { useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import DataViewsContext, { DEFAULT_VIEW_EMPTY } from '../dataviews-context';
+import DataViewsContext from '../dataviews-context';
 import {
 	default as DataViewsFilters,
 	useFilters,
@@ -23,20 +23,13 @@ import DataViewsLayout from '../dataviews-layout';
 import DataViewsFooter from '../dataviews-footer';
 import DataViewsSearch from '../dataviews-search';
 import { BulkActionsFooter } from '../dataviews-bulk-actions';
-import { DataViewsEmpty } from '../dataviews-empty';
 import { DataViewsPagination } from '../dataviews-pagination';
 import DataViewsViewConfig, {
 	DataviewsViewConfigDropdown,
 	ViewTypeMenu,
 } from '../dataviews-view-config';
 import { normalizeFields } from '../../normalize-fields';
-import type {
-	Action,
-	Field,
-	View,
-	SupportedLayouts,
-	EmptyViewProps,
-} from '../../types';
+import type { Action, Field, View, SupportedLayouts } from '../../types';
 import type { SelectionOrUpdater } from '../../private-types';
 type ItemWithId = { id: string };
 
@@ -67,7 +60,7 @@ type DataViewsProps< Item > = {
 	getItemLevel?: ( item: Item ) => number;
 	children?: ReactNode;
 	perPageSizes?: [ number, number, number, number ];
-	empty?: EmptyViewProps;
+	empty?: ReactNode;
 } & ( Item extends ItemWithId
 	? { getItemId?: ( item: Item ) => string }
 	: { getItemId: ( item: Item ) => string } );
@@ -208,7 +201,7 @@ function DataViews< Item >( {
 				isShowingFilter,
 				setIsShowingFilter,
 				perPageSizes,
-				empty: empty ?? DEFAULT_VIEW_EMPTY,
+				empty,
 			} }
 		>
 			<div className="dataviews-wrapper" ref={ containerRef }>
@@ -234,7 +227,6 @@ const DataViewsSubComponents = DataViews as typeof DataViews & {
 	Pagination: typeof DataViewsPagination;
 	Search: typeof DataViewsSearch;
 	ViewConfig: typeof DataviewsViewConfigDropdown;
-	Empty: typeof DataViewsEmpty;
 };
 
 DataViewsSubComponents.BulkActionToolbar = BulkActionsFooter;
@@ -245,6 +237,5 @@ DataViewsSubComponents.LayoutSwitcher = ViewTypeMenu;
 DataViewsSubComponents.Pagination = DataViewsPagination;
 DataViewsSubComponents.Search = DataViewsSearch;
 DataViewsSubComponents.ViewConfig = DataviewsViewConfigDropdown;
-DataViewsSubComponents.Empty = DataViewsEmpty;
 
 export default DataViewsSubComponents;

packages/dataviews/src/components/dataviews-layout/index.tsx

@@ -127,32 +127,7 @@ export const CustomEmpty = () => {
 			onChangeView={ setView }
 			actions={ actions }
 			defaultLayouts={ defaultLayouts }
-			empty={ {
-				heading: view.search ? 'No sites found' : 'No sites',
-				description: view.search
-					? `Your search for “${ view.search }” did not match any sites. Try searching by the site title or domain name.`
-					: 'Get started by creating a new site.',
-				illustration:
-					'https://pd.w.org/2025/05/9376819135a616da1.38400720-768x432.jpeg',
-				actions: (
-					<>
-						{ view.search && (
-							<Button
-								variant="secondary"
-								onClick={ () => {
-									setView( ( oldView ) => ( {
-										...oldView,
-										search: '',
-									} ) );
-								} }
-							>
-								Clear search
-							</Button>
-						) }
-						<Button variant="primary">Add new site</Button>
-					</>
-				),
-			} }
+			empty={ view.search ? 'No sites found' : 'No sites' }
 		/>
 	);
 };
@@ -258,16 +233,7 @@ function PlanetOverview( { planets }: { planets: SpaceObject[] } ) {
 				</VStack>
 			</Grid>
 
-			{ planets.length > 0 ? (
-				<DataViews.Layout className="free-composition-dataviews-layout" />
-			) : (
-				<HStack
-					justify="space-around"
-					className="free-composition-dataviews-empty"
-				>
-					<DataViews.Empty />
-				</HStack>
-			) }
+			<DataViews.Layout className="free-composition-dataviews-layout" />
 		</>
 	);
 }
@@ -317,13 +283,19 @@ export const FreeComposition = () => {
 					table: {},
 					grid: {},
 				} }
-				empty={ {
-					heading: 'No plants',
-					description: `Try a different search because “${ view.search }” returned no results.`,
-					actions: (
+				empty={
+					<VStack
+						justify="space-around"
+						alignment="center"
+						className="free-composition-dataviews-empty"
+					>
+						<Text size={ 18 } as="p">
+							No planets
+						</Text>
+						<Text variant="muted">{ `Try a different search because “${ view.search }” returned no results.` }</Text>
 						<Button variant="secondary">Create new planet</Button>
-					),
-				} }
+					</VStack>
+				}
 			>
 				<PlanetOverview planets={ planets } />
 			</DataViews>

packages/dataviews/src/components/dataviews/index.tsx

@@ -24,7 +24,7 @@
 	inset-block-start: 67px;
 }
 
-.free-composition-dataviews-empty > * {
+.free-composition-dataviews-empty  {
 	border: 1px solid #000;
 	border-radius: 8px;
 	padding: 24px;

packages/dataviews/src/components/dataviews/stories/index.story.tsx

@@ -39,7 +39,6 @@ import type {
 } from '../../types';
 import type { SetSelection } from '../../private-types';
 import { ItemClickWrapper } from '../utils/item-click-wrapper';
-import { DataViewsEmpty } from '../../components/dataviews-empty';
 const { Badge } = unlock( componentsPrivateApis );
 
 interface GridItemProps< Item > {
@@ -264,6 +263,7 @@ function ViewGrid< Item >( {
 	selection,
 	view,
 	className,
+	empty,
 }: ViewGridProps< Item > ) {
 	const { resizeObserverRef } = useContext( DataViewsContext );
 	const titleField = fields.find(
@@ -447,7 +447,7 @@ function ViewGrid< Item >( {
 							'dataviews-no-results': ! isLoading,
 						} ) }
 					>
-						<p>{ isLoading ? <Spinner /> : <DataViewsEmpty /> }</p>
+						<p>{ isLoading ? <Spinner /> : empty }</p>
 					</div>
 				)
 			}