Automattic · p-jackson · Aug 14, 2025 · Jul 3, 2025 · Jul 4, 2025 · Jul 8, 2025
@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@wordpress/components';
+import { DataViewsEmptyState } from './';
+
+const meta: Meta< typeof DataViewsEmptyState > = {
+	title: 'client/dashboard/DataViewsEmptyState',
+	component: DataViewsEmptyState,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: [ 'autodocs' ],
+};
+
+export default meta;
+type Story = StoryObj< typeof DataViewsEmptyState >;
+
+export const Default: Story = {
+	args: {
+		title: 'No cats found',
+		description: 'Create a new cat before it will appear here.',
+		actions: (
+			<Button __next40pxDefaultSize variant="primary">
+				Create new cat
+			</Button>
+		),
+		illustration: (
+			<img
+				src="https://live.staticflickr.com/3277/2938134470_c807dc3e47_b.jpg"
+				alt=""
+				width="300px"
+			/>
+		),
+	},
+};
@@ -0,0 +1,42 @@
+import {
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import './styles.scss';
+import { Text } from '../text';
+import type { ReactNode } from 'react';
+
+interface DataViewsEmptyStateProps {
+	actions?: ReactNode;
+	description: string;
+	illustration?: ReactNode;
+	title: string;
+}
+
+export function DataViewsEmptyState( {
+	actions,
+	title,
+	illustration,
+	description,
+}: DataViewsEmptyStateProps ) {
+	return (
+		<VStack spacing={ 6 } alignment="center" className="dashboard-dataviews-empty-state">
+			{ illustration }
+			<VStack spacing={ 2 } alignment="center">
+				<div className="dashboard-dataviews-empty-state__heading">{ title }</div>
+				<Text
+					variant="muted"
+					align="center"
+					className="dashboard-dataviews-empty-state__sub-heading"
+				>
+					{ description }
+				</Text>
+			</VStack>
+			{ actions && (
+				<HStack spacing={ 4 } justify="center" wrap>
+					{ actions }
+				</HStack>
+			) }
+		</VStack>
+	);
+}
@@ -0,0 +1,24 @@
+@import "@wordpress/base-styles/variables";
+@import "@wordpress/base-styles/mixins";
+
+.dashboard-dataviews-empty-state {
+	max-width: 480px;
+	padding-block: $grid-unit-20;
+	box-sizing: border-box;
+
+	img {
+		width: 100%;
+	}
+}
+
+.dashboard-dataviews-empty-state__heading {
+	@include heading-x-large;
+	color: $gray-900;
+	margin: 0;
+}
+
+// Balanced wrapping works better for centered text
+// Extra specificity to override <Text> component styles
+.dashboard-dataviews-empty-state .dashboard-dataviews-empty-state__sub-heading {
+	text-wrap: balance;
+}
@@ -2,7 +2,7 @@ import { useQuery, useSuspenseQuery, useMutation } from '@tanstack/react-query';
 import { useNavigate, useRouter } from '@tanstack/react-router';
 import { Button, Modal } from '@wordpress/components';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useState } from 'react';
 import { useAnalytics } from '../app/analytics';
 import { useAuth } from '../app/auth';
@@ -11,11 +11,13 @@ import { userPreferenceQuery, userPreferenceMutation } from '../app/queries/me-p
 import { sitesQuery } from '../app/queries/sites';
 import { sitesRoute } from '../app/router';
 import DataViewsCard from '../components/dataviews-card';
+import { DataViewsEmptyState } from '../components/dataviews-empty-state';
 import { PageHeader } from '../components/page-header';
 import PageLayout from '../components/page-layout';
 import { getActions } from './actions';
 import AddNewSite from './add-new-site';
 import { getFields } from './fields';
+import noSitesIllustration from './no-sites-illustration.svg';
 import { SitesNotices } from './notices';
 import {
 	getView,
@@ -103,10 +105,27 @@ export default function Sites() {
 		updateViewPreferences( updatedViewPreferences );
 	};
 
+	const hasFilterOrSearch = ( view.filters && view.filters.length > 0 ) || view.search;
+
+	const emptyTitle = hasFilterOrSearch ? __( 'No sites found' ) : __( 'No sites' );
+
+	let emptyDescription = __( 'Get started by creating a new site.' );
+	if ( view.search ) {
+		emptyDescription = sprintf(
+			// Translators: %s is the search term used when looking for sites by title or domain name.
+			__(
+				'Your search for “%s” did not match any sites. Try searching by the site title or domain name.'
+			),
+			view.search
+		);
+	} else if ( hasFilterOrSearch ) {
+		emptyDescription = __( 'Your search did not match any sites.' );
+	}
+
 	return (
 		<>
 			{ isModalOpen && (
-				<Modal title={ __( 'Add New Site' ) } onRequestClose={ () => setIsModalOpen( false ) }>
+				<Modal title={ __( 'Add new site' ) } onRequestClose={ () => setIsModalOpen( false ) }>
 					<AddNewSite context="sites-dashboard" />
 				</Modal>
 			) }
@@ -120,7 +139,7 @@ export default function Sites() {
 								onClick={ () => setIsModalOpen( true ) }
 								__next40pxDefaultSize
 							>
-								{ __( 'Add New Site' ) }
+								{ __( 'Add new site' ) }
 							</Button>
 						}
 					/>
@@ -139,6 +158,44 @@ export default function Sites() {
 						defaultLayouts={ DEFAULT_LAYOUTS }
 						paginationInfo={ paginationInfo }
 						perPageSizes={ DEFAULT_PER_PAGE_SIZES }
+						empty={
+							<DataViewsEmptyState
+								title={ emptyTitle }
+								description={ emptyDescription }
+								illustration={
+									<img src={ noSitesIllustration } alt="" width={ 408 } height={ 280 } />
+								}
+								actions={
+									<>
+										{ view.search && (
+											<Button
+												__next40pxDefaultSize
+												variant="secondary"
+												onClick={ () => {
+													navigate( {
+														search: {
+															...currentSearchParams,
+															view: Object.fromEntries(
+																Object.entries( view ).filter( ( [ key ] ) => key !== 'search' )
+															),
+														},
+													} );
+												} }
+											>
+												{ __( 'Clear search' ) }
+											</Button>
+										) }
+										<Button
+											__next40pxDefaultSize
+											variant="primary"
+											onClick={ () => setIsModalOpen( true ) }
+										>
+											{ __( 'Add new site' ) }
+										</Button>
+									</>
+								}
+							/>
+						}
 					/>
 				</DataViewsCard>
 			</PageLayout>