Commit 55305870e55 for woocommerce
commit 55305870e5503c01bc8eed76bec389de9e9b4d58
Author: louwie17 <lourensschep@gmail.com>
Date: Tue Mar 24 09:46:37 2026 +0100
Fix analytics tables showing extra padding on WordPress 7.0 (#63809)
* Fix analytics tables showing extra padding on WordPress 7.0
Set Card/CardBody size to "none" instead of null to use the new explicit
size value added in WordPress 7.0 (Gutenberg #72511). Also removes the
now-unnecessary @ts-expect-error comments.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Keep @ts-expect-error comment with updated size values for CardBody
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
* Add changelog entries for analytics padding fix
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
diff --git a/packages/js/components/changelog/fix-analytics-tables-extra-padding-wp70 b/packages/js/components/changelog/fix-analytics-tables-extra-padding-wp70
new file mode 100644
index 00000000000..b009a89533d
--- /dev/null
+++ b/packages/js/components/changelog/fix-analytics-tables-extra-padding-wp70
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix extra padding on analytics Card and CardBody components on WordPress 7.0 by setting size to "none".
diff --git a/packages/js/components/src/abbreviated-card/index.js b/packages/js/components/src/abbreviated-card/index.js
index 428f4a696a7..f90c6476692 100644
--- a/packages/js/components/src/abbreviated-card/index.js
+++ b/packages/js/components/src/abbreviated-card/index.js
@@ -21,7 +21,7 @@ const AbbreviatedCard = ( {
} ) => {
return (
<Card className={ clsx( 'woocommerce-abbreviated-card', className ) }>
- <CardBody size={ null }>
+ <CardBody size="none">
<Link href={ href } onClick={ onClick } type={ type }>
<div className="woocommerce-abbreviated-card__icon">
<Icon icon={ icon } />
diff --git a/packages/js/components/src/advanced-filters/index.js b/packages/js/components/src/advanced-filters/index.js
index 14a4c022976..0280af97456 100644
--- a/packages/js/components/src/advanced-filters/index.js
+++ b/packages/js/components/src/advanced-filters/index.js
@@ -294,7 +294,7 @@ class AdvancedFilters extends Component {
</Text>
</CardHeader>
{ !! activeFilters.length && (
- <CardBody size={ null }>
+ <CardBody size="none">
<ul
className="woocommerce-filters-advanced__list"
ref={ this.filterListRef }
diff --git a/packages/js/components/src/table/index.tsx b/packages/js/components/src/table/index.tsx
index d052c49acb0..e241618ccf3 100644
--- a/packages/js/components/src/table/index.tsx
+++ b/packages/js/components/src/table/index.tsx
@@ -181,8 +181,8 @@ const TableCard: React.VFC< TableCardProps > = ( {
) }
</CardHeader>
{ /* Ignoring the error to make it backward compatible for now. */ }
- { /* @ts-expect-error: size must be one of small, medium, largel, xSmall, extraSmall. */ }
- <CardBody size={ null }>
+ { /* @ts-expect-error: size must be one of none, small, medium, largel, xSmall, extraSmall. */ }
+ <CardBody size="none">
{ tablePreface && (
<div className="woocommerce-table__preface">
{ tablePreface }
diff --git a/packages/js/components/src/table/stories/table-placeholder.story.tsx b/packages/js/components/src/table/stories/table-placeholder.story.tsx
index 2dfc738413e..42e2d18e4d4 100644
--- a/packages/js/components/src/table/stories/table-placeholder.story.tsx
+++ b/packages/js/components/src/table/stories/table-placeholder.story.tsx
@@ -12,8 +12,7 @@ import { headers } from './index';
export const Basic = () => {
return (
- /* @ts-expect-error: size must be one of small, medium, largel, xSmall, extraSmall. */
- <Card size={ null }>
+ <Card size="none">
<TablePlaceholder caption="Revenue last week" headers={ headers } />
</Card>
);
diff --git a/packages/js/components/src/table/stories/table.story.tsx b/packages/js/components/src/table/stories/table.story.tsx
index 37020d34458..b407a18817c 100644
--- a/packages/js/components/src/table/stories/table.story.tsx
+++ b/packages/js/components/src/table/stories/table.story.tsx
@@ -11,7 +11,7 @@ import { createElement } from '@wordpress/element';
import { rows, headers } from './index';
export const Basic = () => (
- <Card size={ null }>
+ <Card size="none">
<Table
caption="Revenue last week"
rows={ rows }
@@ -23,8 +23,7 @@ export const Basic = () => (
export const NoDataCustomMessage = () => {
return (
- /* @ts-expect-error: size must be one of small, medium, largel, xSmall, extraSmall. */
- <Card size={ null }>
+ <Card size="none">
<Table
caption="Revenue last week"
rows={ [] }
diff --git a/plugins/woocommerce/changelog/fix-analytics-tables-extra-padding-wp70 b/plugins/woocommerce/changelog/fix-analytics-tables-extra-padding-wp70
new file mode 100644
index 00000000000..3fcce892297
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-analytics-tables-extra-padding-wp70
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix extra padding on analytics tables, dashboard charts, leaderboards, and store alerts on WordPress 7.0 by setting Card/CardBody size to "none".
diff --git a/plugins/woocommerce/client/admin/client/analytics/components/leaderboard/index.js b/plugins/woocommerce/client/admin/client/analytics/components/leaderboard/index.js
index 68e3f03c577..1f798ef2082 100644
--- a/plugins/woocommerce/client/admin/client/analytics/components/leaderboard/index.js
+++ b/plugins/woocommerce/client/admin/client/analytics/components/leaderboard/index.js
@@ -105,7 +105,7 @@ export class Leaderboard extends Component {
{ title }
</Text>
</CardHeader>
- <CardBody size={ null }>
+ <CardBody size="none">
<EmptyTable>
{ __(
'No data recorded for the selected time period.',
diff --git a/plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/block.js b/plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/block.js
index 45d6695037b..226d9a08cb7 100644
--- a/plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/block.js
+++ b/plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/block.js
@@ -59,7 +59,7 @@ class ChartBlock extends Component {
{ selectedChart.label }
</Text>
</CardHeader>
- <CardBody size={ null }>
+ <CardBody size="none">
<a
className="screen-reader-text"
href={ getAdminLink(
diff --git a/plugins/woocommerce/client/admin/client/layout/store-alerts/index.js b/plugins/woocommerce/client/admin/client/layout/store-alerts/index.js
index 68a323952c9..7fe70cb2aaf 100644
--- a/plugins/woocommerce/client/admin/client/layout/store-alerts/index.js
+++ b/plugins/woocommerce/client/admin/client/layout/store-alerts/index.js
@@ -300,7 +300,7 @@ export const StoreAlerts = () => {
};
return (
- <Card className={ className } size={ null }>
+ <Card className={ className } size="none">
<CardHeader
className="woocommerce-store-alerts__header"
isBorderless
diff --git a/plugins/woocommerce/client/admin/client/layout/store-alerts/placeholder.js b/plugins/woocommerce/client/admin/client/layout/store-alerts/placeholder.js
index cd888f64c9e..6fe7a80cbab 100644
--- a/plugins/woocommerce/client/admin/client/layout/store-alerts/placeholder.js
+++ b/plugins/woocommerce/client/admin/client/layout/store-alerts/placeholder.js
@@ -17,7 +17,7 @@ class StoreAlertsPlaceholder extends Component {
className
) }
aria-hidden
- size={ null }
+ size="none"
>
<CardHeader isBorderless>
<span className="is-placeholder" />