From e0468b5c2c841549d9e3184b98b2b7ecaf5aa0f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Fri, 12 Dec 2025 17:27:31 +0100 Subject: [PATCH 1/6] Admin UI: Reskin cards to align with WordPress Design System Update all card and postbox styles to match Gutenberg's component patterns and the WordPress Design System specifications. **Base Card Styles:** - Background: #ffffff (white) - Border: 1px solid rgba(0,0,0,0.1) for subtle appearance - Border radius: 8px for dashboard widgets, plugin cards, theme cards, welcome panel - Border radius: 0 for post editor metaboxes (maintains existing behavior) - Padding: 16px for small cards, 16px 24px for medium cards **Dashboard Widgets:** - Border radius: 8px with rounded corners - Header padding: 12px vertical, 16px horizontal for compact appearance - Content padding: 16px (was 0 12px 12px) - "At a Glance" widget: 16px top padding for proper alignment - "Activity" widget: maintains 12px horizontal padding for layout compatibility - Welcome panel: 8px border radius, 24px padding (was 48px) **Drag and Drop Interactions:** - Gutenberg-style blue highlights using var(--wp-admin-theme-color) - Active drop zones: subtle blue background rgba(var(--wp-admin-theme-color--rgb), 0.04) - Sortable placeholder: 2px solid blue border with 8px border radius - Meta-box-sortables: 4px padding to reserve space for drag feedback - Container margins: adjusted to maintain original layout spacing - No dimensional changes during drag operations **Plugin Cards:** - Border radius: 8px with overflow hidden - Border: rgba(0,0,0,0.1) - Padding: 16px for top and bottom sections - Card bottom: updated border color for consistency **Theme Cards:** - Border radius: 8px with overflow hidden - Background: solid white (removed semi-transparent overlay) - Theme name: 16px padding, border-top instead of inset box-shadow - "Add New Theme" card: maintains transparent background and borderless style **Generic Card Component:** - Border radius: 8px - Padding: 16px 24px (was 0.7em 2em 1em) - Border: rgba(0,0,0,0.1) - Removed box-shadow for cleaner appearance **Post Editor Metaboxes:** - Maintains square corners (border-radius: 0) - Drag interactions: blue background tint, no border - 4px padding on sortables with compensating margins - Collapsed state: header border hidden See #64308. # Conflicts: # src/wp-admin/css/themes.css --- src/wp-admin/css/common.css | 21 ++++++++----- src/wp-admin/css/dashboard.css | 51 ++++++++++++++++++++++---------- src/wp-admin/css/edit.css | 13 +++++--- src/wp-admin/css/forms.css | 8 ++--- src/wp-admin/css/list-tables.css | 12 ++++---- src/wp-admin/css/themes.css | 18 ++++++----- 6 files changed, 79 insertions(+), 44 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index e062a471d7150..f91270c22ec71 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -786,7 +786,7 @@ img.emoji { } .stuffbox .hndle { - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .quicktags { @@ -2155,7 +2155,7 @@ html.wp-toolbar { display: flex; align-items: center; justify-content: space-between; - border-bottom: 1px solid #c3c4c7; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .postbox-header .hndle { @@ -2204,8 +2204,10 @@ html.wp-toolbar { } .sortable-placeholder { - border: 1px dashed #c3c4c7; + border: 2px solid var(--wp-admin-theme-color); + border-radius: 8px; margin-bottom: 20px; + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); } .postbox, @@ -2213,10 +2215,13 @@ html.wp-toolbar { margin-bottom: 20px; padding: 0; line-height: 1; + background: #ffffff; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0; } -.postbox.closed { - border-bottom: 0; +.postbox.closed .postbox-header { + border-bottom: none; } /* user-select is not a part of the CSS standard - may change behavior in the future */ @@ -2227,7 +2232,7 @@ html.wp-toolbar { } .postbox .inside { - padding: 0 12px 12px; + padding: 16px; line-height: 1.4; font-size: 13px; } @@ -2240,7 +2245,7 @@ html.wp-toolbar { } .postbox .inside { - margin: 11px 0; + margin: 0; position: relative; } @@ -2421,7 +2426,7 @@ h1.nav-tab-wrapper, /* Back-compat for pre-4.4 */ .metabox-holder h3.hndle, /* Back-compat for pre-4.4 */ .metabox-holder h2.hndle { font-size: 14px; - padding: 8px 12px; + padding: 16px; margin: 0; line-height: 1.4; } diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index 64aa30dbedeac..56732b9641a14 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -40,7 +40,15 @@ #dashboard-widgets-wrap { overflow: hidden; - margin: 0 -8px; + margin: 0 -4px; +} + +#dashboard-widgets .postbox { + border-radius: 8px; +} + +#dashboard-widgets .postbox-header .hndle { + padding: 12px 16px; } #dashboard-widgets .postbox .inside { @@ -50,20 +58,31 @@ #dashboard-widgets .meta-box-sortables { display: flow-root; /* avoid margin collapsing between parent and first/last child elements */ /* Required min-height to make the jQuery UI Sortable drop zone work. */ - min-height: 100px; - margin: 0 8px 20px; + min-height: 0; + margin: 0 8px 0 0; + padding: 4px; +} + +#dashboard-widgets .meta-box-sortables:not(:empty) { + margin-bottom: 16px; } #dashboard-widgets .postbox-container .empty-container { - outline: 3px dashed #c3c4c7; + border: 2px dashed rgba(0, 0, 0, 0.15); + border-radius: 8px; height: 250px; } -/* Only highlight drop zones when dragging and only in the 2 columns layout. */ +/* Only highlight drop zones when dragging. */ .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables { - outline: 3px dashed #646970; - /* Prevent margin on the child from collapsing with margin on the parent. */ - display: flow-root; + border-radius: 8px; + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + min-height: 100px; +} + +.is-dragging-metaboxes #dashboard-widgets .postbox-container .empty-container { + border: 2px dashed rgba(0, 0, 0, 0.15); + background: rgba(0, 0, 0, 0.01); } #dashboard-widgets .postbox-container .empty-container:after { @@ -121,6 +140,8 @@ overflow: auto; margin: 16px 0; background-color: #151515; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 8px; font-size: 14px; line-height: 1.3; clear: both; @@ -259,11 +280,11 @@ clear: both; display: grid; z-index: 1; - padding: 48px; + padding: 24px; grid-template-columns: repeat(3, 1fr); gap: 32px; align-self: flex-end; - background: #fff; + background: #ffffff; } [class*="welcome-panel-icon"] { @@ -704,7 +725,7 @@ body #dashboard-widgets .postbox form .submit { } #dashboard_right_now .main { - padding: 0 12px 11px; + padding: 16px 16px 11px; } #dashboard_right_now .main p { @@ -892,7 +913,7 @@ body #dashboard-widgets .postbox form .submit { #dashboard_activity .inside { margin: 0; - padding-bottom: 0; + padding: 0 12px; } #dashboard_activity .no-activity { @@ -1298,7 +1319,7 @@ a.rsswidget { #dashboard-widgets #postbox-container-3 .empty-container, #dashboard-widgets #postbox-container-4 .empty-container { - outline: none; + border: none; height: 0; min-height: 0; margin-bottom: 0; @@ -1314,7 +1335,7 @@ a.rsswidget { } #wpbody #dashboard-widgets .metabox-holder.columns-1 .postbox-container .empty-container { - outline: none; + border: none; height: 0; min-height: 0; margin-bottom: 0; @@ -1352,7 +1373,7 @@ a.rsswidget { } #dashboard-widgets #postbox-container-4 .empty-container { - outline: none; + border: none; height: 0; min-height: 0; margin-bottom: 0; diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index 7e4110a8c569e..b442e348e5e38 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -5,6 +5,7 @@ #poststuff #post-body { padding: 0; + margin: 0 -4px; } #poststuff .postbox-container { @@ -167,11 +168,14 @@ body.post-type-wp_navigation .inline-edit-status { /* Post Screen */ +.metabox-holder .postbox-container .meta-box-sortables { + padding: 4px; +} + /* Only highlight drop zones when dragging and only in the 2 columns layout. */ .is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables { - outline: 3px dashed #646970; - /* Prevent margin on the child from collapsing with margin on the parent. */ - display: flow-root; + border-radius: 8px; + background: rgba(var(--wp-admin-theme-color--rgb), 0.04); /* * This min-height is meant to limit jumpiness while dragging. It's equivalent * to the minimum height of the sortable-placeholder which is given by the height @@ -1770,7 +1774,8 @@ table.links-table { } .is-dragging-metaboxes.post-type-attachment #post-body .meta-box-sortables { - outline: none; + border: none; + background: transparent; min-height: 0; margin-bottom: 0; } diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 719be1aad9ba1..e3727f810933e 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -1047,12 +1047,12 @@ table.form-table td .updated p { .card { position: relative; margin-top: 20px; - padding: 0.7em 2em 1em; + padding: 16px 24px; min-width: 255px; max-width: 520px; - border: 1px solid #c3c4c7; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); - background: #fff; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 8px; + background: #ffffff; box-sizing: border-box; } diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 80e652003a33c..9bb79349b6ade 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -1487,9 +1487,11 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { margin: 0 8px 16px; width: 48.5%; width: calc( 50% - 8px ); - background-color: #fff; - border: 1px solid #dcdcde; + background-color: #ffffff; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 8px; box-sizing: border-box; + overflow: hidden; } .plugin-card:nth-child(odd) { @@ -1553,7 +1555,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { .plugin-card-top { position: relative; - padding: 20px 20px 10px; + padding: 16px; min-height: 135px; } @@ -1668,9 +1670,9 @@ div.action-links, .plugin-card-bottom { clear: both; - padding: 12px 20px; + padding: 16px; background-color: #f6f7f7; - border-top: 1px solid #dcdcde; + border-top: 1px solid rgba(0, 0, 0, 0.1); overflow: hidden; } diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index ea62a09cf1ed1..0ee20cc4d6c8f 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -64,9 +64,11 @@ body.js .theme-browser.search-loading { margin: 0 4% 4% 0; position: relative; width: 30.6%; - border: 1px solid #dcdcde; - box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.1); + background: #ffffff; + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 8px; box-sizing: border-box; + overflow: hidden; } .theme-browser .theme:nth-child(3n) { @@ -83,13 +85,12 @@ body.js .theme-browser.search-loading { font-weight: 600; height: 18px; margin: 0; - padding: 15px; - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1); + padding: 16px; + border-top: 1px solid rgba(0, 0, 0, 0.1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - background: #fff; - background: rgba(255, 255, 255, 0.65); + background: #ffffff; } /* Activate and Customize buttons, shown on hover and focus */ @@ -271,8 +272,9 @@ body.js .theme-browser.search-loading { * Add new theme */ .theme-browser .theme.add-new-theme { + background: transparent; border: none; - box-shadow: none; + overflow: visible; } .theme-browser .theme.add-new-theme a { @@ -348,8 +350,8 @@ body.js .theme-browser.search-loading { .theme-browser .theme.add-new-theme .theme-name { background: none; + border: none; text-align: center; - box-shadow: none; font-weight: 400; position: relative; top: 0; From 9e56da2d70a11d3d6962c8841d12b0826236eb75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Wed, 11 Feb 2026 09:24:16 +0100 Subject: [PATCH 2/6] fix allignment of handle-actions inside postbox-header --- src/wp-admin/css/common.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 4d3677e344583..78b4910142100 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -2169,6 +2169,7 @@ html.wp-toolbar { .postbox-header .handle-actions { flex-shrink: 0; + padding-inline-end: 6px; } /* Post box order and toggle buttons. */ From 6bfe0c0d20c348a6d91221373020a08c55cc79bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Wed, 11 Feb 2026 09:26:44 +0100 Subject: [PATCH 3/6] fix use outline instead of border for dragging dashboard widgets --- src/wp-admin/css/dashboard.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index 56732b9641a14..6e1fa2593d04d 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -68,7 +68,8 @@ } #dashboard-widgets .postbox-container .empty-container { - border: 2px dashed rgba(0, 0, 0, 0.15); + outline: 2px dashed rgba(0, 0, 0, 0.15); + outline-offset: -2px; border-radius: 8px; height: 250px; } @@ -81,7 +82,7 @@ } .is-dragging-metaboxes #dashboard-widgets .postbox-container .empty-container { - border: 2px dashed rgba(0, 0, 0, 0.15); + outline: 2px dashed rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.01); } From b7b65c6eca811330a4e82df0bb16d4a90cb8eff2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Wed, 11 Feb 2026 09:33:38 +0100 Subject: [PATCH 4/6] fix use alpha param of rgb instead of rgba --- src/wp-admin/css/common.css | 8 ++++---- src/wp-admin/css/dashboard.css | 10 +++++----- src/wp-admin/css/edit.css | 2 +- src/wp-admin/css/forms.css | 2 +- src/wp-admin/css/list-tables.css | 4 ++-- src/wp-admin/css/themes.css | 4 ++-- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 78b4910142100..079f794703af9 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -787,7 +787,7 @@ img.emoji { } .stuffbox .hndle { - border-bottom: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgb(0, 0, 0, 0.1); } .quicktags { @@ -2156,7 +2156,7 @@ html.wp-toolbar { display: flex; align-items: center; justify-content: space-between; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgb(0, 0, 0, 0.1); } .postbox-header .hndle { @@ -2209,7 +2209,7 @@ html.wp-toolbar { border: 2px solid var(--wp-admin-theme-color); border-radius: 8px; margin-bottom: 20px; - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background: rgb(var(--wp-admin-theme-color--rgb), 0.04); } .postbox, @@ -2218,7 +2218,7 @@ html.wp-toolbar { padding: 0; line-height: 1; background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.1); + border: 1px solid rgb(0, 0, 0, 0.1); border-radius: 0; } diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index 6e1fa2593d04d..efe51a5fa7f26 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -68,7 +68,7 @@ } #dashboard-widgets .postbox-container .empty-container { - outline: 2px dashed rgba(0, 0, 0, 0.15); + outline: 2px dashed rgb(0, 0, 0, 0.15); outline-offset: -2px; border-radius: 8px; height: 250px; @@ -77,13 +77,13 @@ /* Only highlight drop zones when dragging. */ .is-dragging-metaboxes #dashboard-widgets .meta-box-sortables { border-radius: 8px; - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background: rgb(var(--wp-admin-theme-color--rgb), 0.04); min-height: 100px; } .is-dragging-metaboxes #dashboard-widgets .postbox-container .empty-container { - outline: 2px dashed rgba(0, 0, 0, 0.15); - background: rgba(0, 0, 0, 0.01); + outline: 2px dashed rgb(0, 0, 0, 0.15); + background: rgb(0, 0, 0, 0.01); } #dashboard-widgets .postbox-container .empty-container:after { @@ -141,7 +141,7 @@ overflow: auto; margin: 16px 0; background-color: #151515; - border: 1px solid rgba(0, 0, 0, 0.1); + border: 1px solid rgb(0, 0, 0, 0.1); border-radius: 8px; font-size: 14px; line-height: 1.3; diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index b442e348e5e38..8a16b88de2a5e 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -175,7 +175,7 @@ body.post-type-wp_navigation .inline-edit-status { /* Only highlight drop zones when dragging and only in the 2 columns layout. */ .is-dragging-metaboxes .metabox-holder .postbox-container .meta-box-sortables { border-radius: 8px; - background: rgba(var(--wp-admin-theme-color--rgb), 0.04); + background: rgb(var(--wp-admin-theme-color--rgb), 0.04); /* * This min-height is meant to limit jumpiness while dragging. It's equivalent * to the minimum height of the sortable-placeholder which is given by the height diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index e3727f810933e..1436cbbbaf165 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -1050,7 +1050,7 @@ table.form-table td .updated p { padding: 16px 24px; min-width: 255px; max-width: 520px; - border: 1px solid rgba(0, 0, 0, 0.1); + border: 1px solid rgb(0, 0, 0, 0.1); border-radius: 8px; background: #ffffff; box-sizing: border-box; diff --git a/src/wp-admin/css/list-tables.css b/src/wp-admin/css/list-tables.css index 9bb79349b6ade..843b7272cd9e8 100644 --- a/src/wp-admin/css/list-tables.css +++ b/src/wp-admin/css/list-tables.css @@ -1488,7 +1488,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before { width: 48.5%; width: calc( 50% - 8px ); background-color: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.1); + border: 1px solid rgb(0, 0, 0, 0.1); border-radius: 8px; box-sizing: border-box; overflow: hidden; @@ -1672,7 +1672,7 @@ div.action-links, clear: both; padding: 16px; background-color: #f6f7f7; - border-top: 1px solid rgba(0, 0, 0, 0.1); + border-top: 1px solid rgb(0, 0, 0, 0.1); overflow: hidden; } diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index 477e71a53c2cd..f318547a157c3 100644 --- a/src/wp-admin/css/themes.css +++ b/src/wp-admin/css/themes.css @@ -65,7 +65,7 @@ body.js .theme-browser.search-loading { position: relative; width: 30.6%; background: #ffffff; - border: 1px solid rgba(0, 0, 0, 0.1); + border: 1px solid rgb(0, 0, 0, 0.1); border-radius: 8px; box-sizing: border-box; overflow: hidden; @@ -86,7 +86,7 @@ body.js .theme-browser.search-loading { height: 18px; margin: 0; padding: 16px; - border-top: 1px solid rgba(0, 0, 0, 0.1); + border-top: 1px solid rgb(0, 0, 0, 0.1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; From 59e32be341b12cdfb50204036bd5618919d3180b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20K=C3=A4gy?= Date: Wed, 11 Feb 2026 09:33:57 +0100 Subject: [PATCH 5/6] Apply suggestion from @mukeshpanchal27 Co-authored-by: Mukesh Panchal --- src/wp-admin/css/dashboard.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index efe51a5fa7f26..b0a1497064841 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -59,7 +59,7 @@ display: flow-root; /* avoid margin collapsing between parent and first/last child elements */ /* Required min-height to make the jQuery UI Sortable drop zone work. */ min-height: 0; - margin: 0 8px 0 0; + margin-right: 8px; padding: 4px; } From 334bc13ddd2ba8d8ccd7c6ec1d833ab85b32447d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Wed, 11 Feb 2026 12:38:06 +0100 Subject: [PATCH 6/6] fix invisible column --- src/wp-admin/css/dashboard.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index b0a1497064841..92f36a78dde86 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -1324,6 +1324,7 @@ a.rsswidget { height: 0; min-height: 0; margin-bottom: 0; + display: none; } #dashboard-widgets #postbox-container-3 .empty-container:after, @@ -1378,6 +1379,7 @@ a.rsswidget { height: 0; min-height: 0; margin-bottom: 0; + display: none; } #dashboard-widgets #postbox-container-4 .empty-container:after {