Commit 19868f14bfc for woocommerce
commit 19868f14bfc659213cb6bedd7e1f37b139a84841
Author: Jill Q. <jill.quek@automattic.com>
Date: Mon Apr 27 19:28:56 2026 +0800
Add 8px border-radius to WooCommerce editor meta boxes (WP 7.0 alignment) (#64191)
* Add 8px border-radius to WooCommerce editor meta boxes
WordPress 7.0 added 8px border-radius to dashboard widgets, but
editor meta boxes remained square. This creates a visual
inconsistency where the dashboard feels modern but editor screens
feel dated.
Changes:
- Add border-radius: 8px to .postbox and #postdivrich on product,
order, and coupon editor screens (scoped under .wc-wp-version-gte-70)
- Add overflow: hidden to clip internal elements (tab sidebar,
action bars) to the rounded corners
- Exclude inner collapsible panels (.wc-metabox.postbox) which
should remain square
- Fix product description editor (#postdivrich) width alignment
with meta boxes below it (4px margin to match #normal-sortables
padding)
- Cover HPOS order editor via .woocommerce_page_wc-orders selector
Part of: RSM — Woo Sprinkles
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Use CSS custom property for card border-radius
Define --wc-card-border-radius: 8px (matching WP 7.0's $radius-l
token) so the value is centralized. If WP core exposes this as a
CSS custom property in the future, Woo can reference it directly
and get updates for free.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Consolidate HPOS rule with post-type selector list
CodeRabbit pointed out two issues:
1. The HPOS block duplicated the .postbox declarations from the
post-type block above — merging keeps both editors in lockstep.
2. The HPOS block was missing the .wc-metabox.postbox exclusion, so
inner collapsible panels (e.g. attributes, variations) would
have picked up the 8px radius in HPOS contexts too.
Now a single selector list covers product/order CPT/order HPOS/coupon
screens with the same rule. #postdivrich doesn't exist on HPOS but
including it in the combined selector is harmless.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Add BRIDGE comment + TODO tying metabox radius to upstream Trac ticket
Jay Koster flagged on this PR that WP 7.0 core intentionally rounded
#dashboard-widgets .postbox but left editor .postbox containers
(Posts, Pages, Media, Users, plus all plugin meta boxes) square —
meaning this Woo-scoped fix creates a new divergence: a product edit
screen looks rounded while a Post/Page/Media edit screen right next
to it stays square.
The right long-term fix is core-side. I'll file a Trac ticket
proposing Core rounds editor .postbox containers to match the
dashboard widget pattern. Until that lands, this PR remains a
scoped bridge, and the TODO comment tells whoever touches this
next exactly when to remove the Woo-side CSS.
Trac ticket URL placeholder (TBA) will be updated once the ticket
is filed.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Scope description editor margin fix to WP 7.0+
CodeRabbit flagged that the 4px left/right margin on the product
description editor was applied globally, but it only matters on
WP 7.0+ where the meta box radius makes the 8px width misalignment
visible. On earlier WP versions, the boxes are square and the
misalignment isn't noticeable.
Moved the margin rule into the existing .wc-wp-version-gte-70 block
so it only applies on WP 7.0+.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Remove placeholder Trac URL to avoid tripping up reviewers
Kept the TODO comment so the intent is still trackable, but removed
the "ticket/TBA" URL fragment so there's no broken link in the
codebase. Will add the real Trac URL once the upstream ticket is
filed.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
diff --git a/plugins/woocommerce/changelog/add-metabox-border-radius-wp7-alignment b/plugins/woocommerce/changelog/add-metabox-border-radius-wp7-alignment
new file mode 100644
index 00000000000..2daa8e2d9f6
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-metabox-border-radius-wp7-alignment
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Add 8px border-radius to editor meta boxes and product description to align with WP 7.0 dashboard widget styling
diff --git a/plugins/woocommerce/client/legacy/css/_variables.scss b/plugins/woocommerce/client/legacy/css/_variables.scss
index 07fb7a7212e..32d28fa92f2 100644
--- a/plugins/woocommerce/client/legacy/css/_variables.scss
+++ b/plugins/woocommerce/client/legacy/css/_variables.scss
@@ -42,4 +42,6 @@ $subtext: #767676 !default; // small,
--wc-form-border-color: rgba(32, 7, 7, 0.8);
--wc-form-border-radius: 4px;
--wc-form-border-width: 1px;
+ // Matches WP 7.0 $radius-l token (used on dashboard widgets).
+ --wc-card-border-radius: 8px;
}
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 1175b850c77..db37d6b2fa0 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -4275,7 +4275,7 @@ table.wc_shipping {
color: #1e1e1e;
&.wc-backbone-modal .wc-backbone-modal-content {
- border-radius: 8px;
+ border-radius: var(--wc-card-border-radius, 8px);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
max-width: 600px;
@@ -8562,6 +8562,43 @@ table.bar_chart {
height: auto;
color: #1e1e1e;
}
+
+ // Align editor meta box border-radius with WP 7.0's dashboard widgets (8px).
+ // Product, order (CPT + HPOS), and coupon editor screens.
+ //
+ // BRIDGE: WP 7.0 rounded dashboard widgets but left editor .postbox square,
+ // creating an inconsistency (dashboard widgets vs. Posts/Pages/Media/Woo
+ // editors all use the same .postbox class). We're applying the radius
+ // ourselves, scoped to Woo editor screens, as a bridge until Core unifies
+ // this.
+ //
+ // TODO: Remove these rules when Core rounds editor .postbox containers
+ // (upstream Trac ticket to be filed).
+ &.post-type-product,
+ &.post-type-shop_order,
+ &.post-type-shop_coupon,
+ &.woocommerce_page_wc-orders {
+ .postbox,
+ #postdivrich {
+ border-radius: var(--wc-card-border-radius, 8px);
+ overflow: hidden; // Clip internal elements (tab sidebar, action bars) to rounded corners.
+ }
+
+ // Inner collapsible panels (attributes, variations) should stay square.
+ .wc-metabox.postbox {
+ border-radius: 0;
+ overflow: visible;
+ }
+ }
+
+ // Align the product description editor with the meta boxes below it.
+ // #normal-sortables adds 4px of padding around postboxes, which #post-body-content
+ // doesn't, so the description editor ends up 8px wider than neighbouring postboxes
+ // on WP 7.0 (where the radius makes the misalignment visible).
+ &.post-type-product #postdivrich.woocommerce-product-description {
+ margin-left: 4px;
+ margin-right: 4px;
+ }
}
/**