Skip to content

Fix analytics tables showing extra padding on WordPress 7.0#63809

Merged
louwie17 merged 4 commits intotrunkfrom
fix/analytics-tables-extra-padding-wp70
Mar 24, 2026
Merged

Fix analytics tables showing extra padding on WordPress 7.0#63809
louwie17 merged 4 commits intotrunkfrom
fix/analytics-tables-extra-padding-wp70

Conversation

@louwie17
Copy link
Copy Markdown
Contributor

@louwie17 louwie17 commented Mar 23, 2026

Submission Review Guidelines:

Changes proposed in this Pull Request:

Fixes extra padding appearing on analytics tables and related card components when running on WordPress 7.0.

WordPress 7.0 (Gutenberg #72511) added a none size value to the Card component. Previously, we were passing size={ null } to suppress default padding, which worked as an undocumented side-effect. With WordPress 7.0 this no longer works as expected and results in extra padding being applied.

This PR updates all affected Card and CardBody usages to use the new explicit size="none" value, and removes the @ts-expect-error comments that were needed when null was the only workaround.

Closes WOOA7S-1158.

Screenshots or screen recordings:

before after
Screenshot 2026-03-23 at 20 09 04 Screenshot 2026-03-23 at 20 09 42

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Setup: Ensure you are running WordPress 7.0 or later ( you can use the WordPress beta tester for this ), please also test against 6.9 to make sure it still works fine there.

Analytics Tables (TableCard)

  1. Go to WooCommerce → Analytics → Revenue (or any analytics report: Orders, Products, Categories, Coupons, etc.).
  2. Verify the data table renders without unexpected top/bottom padding inside the card body — the table content should sit flush against the card borders with no extra whitespace.

Advanced Filters

  1. Go to WooCommerce → Analytics → Orders.
  2. Click Add filter and add one or more filters (e.g. filter by order status).
  3. Verify the active filter chips inside the card body display without extra padding.

Leaderboards (Dashboard)

  1. Go to WooCommerce → Analytics → Overview (dashboard).
  2. Scroll down to the leaderboard section (e.g. Top Products, Top Coupons).
  3. Verify the leaderboard cards render without unexpected padding around their content.
  4. If there is no data for the selected period, verify the "No data recorded for the selected time period." empty state also has no extra padding.

Dashboard Charts

  1. Go to WooCommerce → Analytics → Overview.
  2. Verify the chart cards (Revenue, Orders, etc.) render without extra padding around the chart area.

Abbreviated Cards

  1. Go to WooCommerce → Analytics → Overview.
  2. Verify the small summary cards (e.g. total sales, orders) at the top of the page render without extra padding.

Store Alerts

  1. Use WP-CLI to create an unactioned admin note of type error or update:
wp eval "
  \$note = new \Automattic\WooCommerce\Admin\Notes\Note();
  \$note->set_name( 'test-store-alert' );
  \$note->set_title( 'Test Store Alert' );
  \$note->set_content( 'This is a test store alert.' );
  \$note->set_type( \Automattic\WooCommerce\Admin\Notes\Note::E_WC_ADMIN_NOTE_ERROR );
  \$note->set_status( \Automattic\WooCommerce\Admin\Notes\Note::E_WC_ADMIN_NOTE_UNACTIONED );
  \$note->set_source( 'woocommerce' );
  \$note->set_content_data( (object) array() );
  \$note->save();
  echo 'Note created with ID: ' . \$note->get_id();
  "
  1. Go to WooCommerce → Home.
  2. Verify the store alert card at the top of the page renders without unexpected extra padding around the alert content.

Testing that has already taken place:

Code change reviewed and verified against the Gutenberg PR #72511 which added none as an explicit supported size value for Card/CardBody. The @ts-expect-error suppression comments were also removed since "none" is now a valid type.

Milestone

Changelog entry

  • Automatically create a changelog entry from the details below.
Changelog Entry Details

Significance

  • Patch

Type

  • Fix - Fixes an existing bug

Message

Fix analytics tables and dashboard cards showing extra padding on WordPress 7.0 by setting Card/CardBody size to "none".

Changelog Entry Comment

Comment

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>
@github-actions github-actions bot added package: @woocommerce/components issues related to @woocommerce/components plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Mar 23, 2026
louwie17 and others added 2 commits March 23, 2026 19:57
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 23, 2026

📝 Walkthrough

Walkthrough

Replaced size={null} or unspecified size with the explicit string size="none" across Card/CardBody usages in multiple UI components and Storybook stories; added changelog entries documenting the fix.

Changes

Cohort / File(s) Summary
Core components
packages/js/components/src/abbreviated-card/index.js, packages/js/components/src/advanced-filters/index.js, packages/js/components/src/table/index.tsx
Updated CardBody/Card size prop from null to "none". Adjusted TypeScript expectation in table/index.tsx to include 'none'.
Table stories
packages/js/components/src/table/stories/table-placeholder.story.tsx, packages/js/components/src/table/stories/table.story.tsx
Replaced size={ null } with size="none" in Storybook stories and removed prior @ts-expect-error suppressions.
WooCommerce admin components
plugins/woocommerce/client/admin/client/analytics/components/leaderboard/index.js, plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/block.js, plugins/woocommerce/client/admin/client/layout/store-alerts/index.js, plugins/woocommerce/client/admin/client/layout/store-alerts/placeholder.js
Changed Card/CardBody size prop from null to "none" in empty-state, chart, and alert renderings.
Changelogs
packages/js/components/changelog/fix-analytics-tables-extra-padding-wp70, plugins/woocommerce/changelog/fix-analytics-tables-extra-padding-wp70
Added patch-level changelog entries noting the padding fix by setting size="none" for analytics tables and related components.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title directly and clearly describes the main fix: updating Card/CardBody components to show no extra padding on WordPress 7.0.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check ✅ Passed The pull request description clearly relates to the changeset, explaining the fix for WordPress 7.0 padding issues by updating Card/CardBody size props from null to 'none'.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/analytics-tables-extra-padding-wp70

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/js/components/src/table/index.tsx`:
- Around line 184-185: This PR changes runtime spacing behavior by setting
CardBody size to 'none' in the components package; add a changelog entry for
packages/js/components describing this functional change (reference the CardBody
component and the size prop change) by running `pnpm changelog add` or by
creating a file under packages/js/components/changelog/ with an appropriate
type/brief description, including a short summary of the change and the PR
number so consumers know spacing behavior changed at runtime.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: 81866b90-b626-443e-9846-c6f23b5192bf

📥 Commits

Reviewing files that changed from the base of the PR and between 0b6c602 and a350218.

📒 Files selected for processing (9)
  • packages/js/components/src/abbreviated-card/index.js
  • packages/js/components/src/advanced-filters/index.js
  • packages/js/components/src/table/index.tsx
  • packages/js/components/src/table/stories/table-placeholder.story.tsx
  • packages/js/components/src/table/stories/table.story.tsx
  • plugins/woocommerce/client/admin/client/analytics/components/leaderboard/index.js
  • plugins/woocommerce/client/admin/client/dashboard/dashboard-charts/block.js
  • plugins/woocommerce/client/admin/client/layout/store-alerts/index.js
  • plugins/woocommerce/client/admin/client/layout/store-alerts/placeholder.js

@github-actions
Copy link
Copy Markdown
Contributor

Size Change: +3 B (0%)

Total Size: 5.98 MB

compressed-size-action

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 23, 2026

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.

@louwie17 louwie17 requested a review from a team March 23, 2026 19:06
@github-actions
Copy link
Copy Markdown
Contributor

Testing Guidelines

Hi @woocommerce/ventures,

Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

Reminder: PR reviewers are required to document testing performed. This includes:

  • 🖼️ Screenshots or screen recordings.
  • 📝 List of functionality tested / steps followed.
  • 🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
  • 🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

Copy link
Copy Markdown
Member

@chihsuan chihsuan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Tested on both WP 6.9 and 7.0 and verified that no extra padding is shown. 🚢

@louwie17 louwie17 enabled auto-merge (squash) March 24, 2026 08:34
@louwie17 louwie17 merged commit 5530587 into trunk Mar 24, 2026
35 checks passed
@louwie17 louwie17 deleted the fix/analytics-tables-extra-padding-wp70 branch March 24, 2026 08:46
@github-actions github-actions bot added this to the 10.8.0 milestone Mar 24, 2026
@github-actions github-actions bot added the needs: documentation The issue/PR requires documentation to be added. label Mar 24, 2026
@louwie17 louwie17 modified the milestones: 10.8.0, 10.6.0 Mar 24, 2026
github-actions bot pushed a commit that referenced this pull request Mar 24, 2026
* 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>
github-actions bot pushed a commit that referenced this pull request Mar 24, 2026
* 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>
@woocommercebot
Copy link
Copy Markdown
Collaborator

IMPORTANT: Merging this PR to the appropriate branches is critical to the release process and ensures that the bug does not cause regressions in the future releases.

Cherry picking was successful for release/10.7. Please merge the following PR: [Backport to release/10.7] Fix analytics tables showing extra padding on WordPress 7.0

@woocommercebot
Copy link
Copy Markdown
Collaborator

IMPORTANT: Merging this PR to the appropriate branches is critical to the release process and ensures that the bug does not cause regressions in the future releases.

Cherry picking was successful for release/10.6. Please merge the following PR: [Backport to release/10.6] Fix analytics tables showing extra padding on WordPress 7.0

louwie17 added a commit that referenced this pull request Mar 24, 2026
… on WordPress 7.0 (#63826)

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.



* Keep @ts-expect-error comment with updated size values for CardBody



* Add changelog entries for analytics padding fix



---------

Co-authored-by: louwie17 <lourensschep@gmail.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
louwie17 added a commit that referenced this pull request Mar 24, 2026
… on WordPress 7.0 (#63827)

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.



* Keep @ts-expect-error comment with updated size values for CardBody



* Add changelog entries for analytics padding fix



---------

Co-authored-by: louwie17 <lourensschep@gmail.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs: documentation The issue/PR requires documentation to be added. package: @woocommerce/components issues related to @woocommerce/components plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants