Skip to content

Dashboard: Add compact variant to EmptyState.Wrapper #109807

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
StevenDufresne merged 4 commits into from
Apr 6, 2026
Merged

Dashboard: Add compact variant to EmptyState.Wrapper #109807

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
569206c
Dashboard: Add compact variant to EmptyState.Wrapper
StevenDufresne Apr 3, 2026
8318eb6
Dashboard: Fix compact empty state padding override scope
StevenDufresne Apr 3, 2026
33ab50a
Dashboard: Use flat selectors for compact empty state styles
StevenDufresne Apr 3, 2026
c7da1ca
Apply suggestion from @claude[bot]
StevenDufresne Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions client/dashboard/components/empty-state/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,26 @@ export const WithoutContentWrapper: Story = {
},
};

export const CompactWrapper: Story = {
render: ( args ) => (
<EmptyState.Wrapper isCompact>
<EmptyState { ...args } />
</EmptyState.Wrapper>
),
args: {
children: (
<>
<EmptyState.Header>
<EmptyState.Title>Site blocked</EmptyState.Title>
<EmptyState.Description>
This site has been blocked and is no longer accessible.
</EmptyState.Description>
</EmptyState.Header>
</>
),
},
};

export const WithContainerAndCallout: Story = {
render: ( args ) => (
<EmptyState.Wrapper>
Expand Down
13 changes: 10 additions & 3 deletions client/dashboard/components/empty-state/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { __experimentalVStack as VStack } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import clsx from 'clsx';
import { useLayoutEffect, useRef, type ReactNode } from 'react';
import { ActionList } from '../action-list';
import { Card, CardBody } from '../card';
Expand All @@ -18,9 +19,11 @@ function EmptyState( { children }: { children?: ReactNode } ) {

function EmptyStateWrapper( {
isBorderless = false,
isCompact = false,
children,
}: {
isBorderless?: boolean;
isCompact?: boolean;
children: ReactNode;
} ) {
const cardRef = useRef< HTMLElement >( null );
Expand All @@ -29,15 +32,19 @@ function EmptyStateWrapper( {
// This keeps the visual layout stable between view transitions. It's fine if
// the wrapper expands beyond this initial calculation after layout changes.
useLayoutEffect( () => {
if ( ! cardRef.current ) {
if ( isCompact || ! cardRef.current ) {
return;
}
const rect = cardRef.current.getBoundingClientRect();
cardRef.current.style.setProperty( '--dashboard-empty-state-offset', `${ rect.top }px` );
}, [] );
}, [ isCompact ] );

const className = clsx( 'dashboard-empty-state__wrapper', {
'is-compact': isCompact,
} );

return (
<Card ref={ cardRef } className="dashboard-empty-state__wrapper" isBorderless={ isBorderless }>
<Card ref={ cardRef } className={ className } isBorderless={ isBorderless }>
<CardBody>
<VStack spacing={ 8 } alignment="center" className="dashboard-empty-state__wrapper-content">
{ children }
Expand Down
11 changes: 11 additions & 0 deletions client/dashboard/components/empty-state/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,17 @@
}
}

.dashboard-empty-state__wrapper.is-compact {
min-height: 0;
justify-content: flex-start;
}

.dashboard-empty-state__wrapper.is-compact .dashboard-empty-state__wrapper-content {
@include break-medium {
padding-block: 0;
}
}

.dashboard-empty-state__wrapper-content {
@include break-medium {
padding-block: $grid-unit-40;
Expand Down
9 changes: 8 additions & 1 deletion client/dashboard/me/blocked-sites/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { store as noticesStore } from '@wordpress/notices';
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import Breadcrumbs from '../../app/breadcrumbs';
import { DataViewsCard } from '../../components/dataviews';
import EmptyState from '../../components/empty-state';
import InlineSupportLink from '../../components/inline-support-link';
import { PageHeader } from '../../components/page-header';
import PageLayout from '../../components/page-layout';
Expand Down Expand Up @@ -150,7 +151,13 @@ export default function BlockedSites() {
}
>
{ ! isLoading && sites.length === 0 ? (
<p>{ __( "You haven't blocked any sites yet." ) }</p>
<EmptyState.Wrapper isCompact>
<EmptyState>
<EmptyState.Description>
{ __( "You haven't blocked any sites yet." ) }
</EmptyState.Description>
</EmptyState>
</EmptyState.Wrapper>
) : (
<DataViewsCard ref={ ref }>
<DataViews< BlockedSite >
Expand Down
Loading