[wp-trac] [WordPress Trac] #65142: Round editor `.postbox` containers to match WP 7.0 dashboard widgets

[WordPress Trac]

#65142: Round editor `.postbox` containers to match WP 7.0 dashboard widgets
----------------------------+-----------------------------
 Reporter:  jillq           |      Owner:  (none)
     Type:  enhancement     |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:
 Severity:  normal          |   Keywords:
  Focuses:  ui, css         |
----------------------------+-----------------------------
 == Background ==

 WordPress 7.0's admin visual reskin (#64308) introduced an 8px {{{border-
 radius}}} ({{{$radius-l}}}) on dashboard widgets via {{{#dashboard-widgets
 .postbox}}} (see #64549). This modernized the dashboard's appearance
 alongside the rest of the 7.0 reskin — the new Modern color scheme as
 default, taller form elements, 2px radii on buttons and inputs, and so on.

 However, the same {{{.postbox}}} class is used extensively outside the
 dashboard: editor screens for Posts, Pages, Media, Users, custom post
 types, plus every plugin that adds meta boxes (WooCommerce, Yoast,
 Jetpack, ACF, etc.). These retained their square corners.

 The result is a split-personality admin:

  * '''Dashboard:''' rounded, modern-feeling
  * '''Every editor screen, including Edit Media:''' square, dated-feeling

 This is especially visible for plugin authors: a plugin-added meta box on
 an edit screen looks markedly different from a core dashboard widget, even
 though both use {{{.postbox}}}.

 == Problem ==

 Plugins and themes that want to align with WP 7.0's modernized visual
 language currently have three suboptimal choices when it comes to meta
 boxes:

  1. '''Hardcode the values in plugin CSS''' — brittle, silently drifts
 when Core updates the token values, and creates visible inconsistency with
 neighbouring Core screens.
  2. '''Scope the override to plugin-owned screens only''' — fixes the
 plugin's screens but ''widens'' the inconsistency (plugin-screen meta
 boxes look different from core-screen meta boxes using the same class).
  3. '''Don't align''' — fragments the admin visual experience.

 == Proposal ==

 Round editor {{{.postbox}}} containers to 8px, matching the dashboard
 widget pattern already shipped in 7.0. In {{{src/wp-
 admin/css/common.css}}}:

 {{{
 #!css
 .postbox {
     border-radius: $radius-l; /* 8px — matches #dashboard-widgets .postbox
 */
     overflow: hidden; /* clip internal full-width elements (tab sidebars,
 action bars) */
 }
 }}}

 Sites that already rely on the token system introduced in
 {{{_tokens.scss}}} can reference {{{$radius-l}}} directly. Plugins like
 WooCommerce can then remove their scoped bridge styles.

 == Scope considerations ==

  * Some {{{.postbox}}} instances contain full-width children (tab sidebars
 in WP-admin like the product data panel, the {{{#major-publishing-
 actions}}} action bar at the bottom of the publish meta box) that extend
 to the container edge. Adding {{{overflow: hidden}}} to {{{.postbox}}}
 clips these cleanly to the rounded corners. This pattern was verified in
 production via [https://github.com/woocommerce/woocommerce/pull/64191
 woocommerce/woocommerce#64191] (merged commit
 [https://github.com/woocommerce/woocommerce/commit/19868f14bfc659213cb6bedd7e1f37b139a84841
 19868f1]).
  * Inner collapsible panels (e.g. WooCommerce's attributes/variations
 panels using {{{.wc-metabox.postbox}}}) should remain square. Plugins
 handle this on their side since it's plugin-specific markup.
  * The historical #17284 ({{{#major-publishing-actions}}} missing
 {{{border-radius}}}, from 2011) and #18657 ({{{.postbox .hndle}}} in
 backend needs {{{border-radius}}}, also from 2011) flagged related
 clipping issues back when admin postboxes had a 3px radius. The
 {{{overflow: hidden}}} approach proposed here resolves that whole class of
 problem in one place.

 == Benefits ==

  * '''Consistency''' — one visual language across dashboard and editor
 screens.
  * '''Plugins align for free''' — no scoped overrides, no drift when Core
 updates the token.
  * '''Low risk''' — CSS-only, additive, extends a pattern already shipped
 in 7.0.
  * '''Reduces plugin-side maintenance''' — WooCommerce, Yoast, and any
 other plugin shipping scoped fixes can remove them.

 == Prior art ==

  * #64308 — WP 7.0 admin reskin (introduced the radius on dashboard
 widgets).
  * #64549 — Card and container styles, which added the 8px radius to
 dashboard widgets specifically.
  * #65085 — proposal to expose admin design tokens as CSS custom
 properties. If both land, the bridge-style CSS in plugin codebases becomes
 unnecessary.
  * #17284, #18657 — older tickets that surfaced clipping behaviour at the
 postbox edge.

 == Related ==

 WooCommerce shipped [https://github.com/woocommerce/woocommerce/pull/64191
 woocommerce/woocommerce#64191] (merged April 27, 2026 — commit
 [https://github.com/woocommerce/woocommerce/commit/19868f14bfc659213cb6bedd7e1f37b139a84841
 19868f1]) as a scoped bridge — it rounds meta boxes on WooCommerce-owned
 editor screens only ({{{post-type-product}}}, {{{post-type-shop_order}}},
 {{{post-type-shop_coupon}}}, {{{woocommerce_page_wc-orders}}}), with a
 {{{TODO}}} comment tying back to this ticket. If this lands, that bridge
 CSS can be removed in its entirety, and editor meta boxes will be visually
 consistent across core and every plugin.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/65142>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform