From 27b73f6bcecfff1ee90bd4f99bb2d331549b0f36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Sun, 15 Feb 2026 11:17:20 +0100 Subject: [PATCH 1/7] Admin: Add framed layout with scrollable content area and rounded corners. Restructures the admin layout to use a flex-based framed design with a dark background, rounded white content area, scrollable wpbody-content, and consistent spacing for screen meta panels and responsive breakpoints. --- src/wp-admin/admin-footer.php | 7 +- src/wp-admin/css/admin-menu.css | 2 +- src/wp-admin/css/colors/_variables.scss | 2 +- src/wp-admin/css/common.css | 95 +++++++++++++++++++------ 4 files changed, 77 insertions(+), 29 deletions(-) diff --git a/src/wp-admin/admin-footer.php b/src/wp-admin/admin-footer.php index abb020e046459..55976a1ea399f 100644 --- a/src/wp-admin/admin-footer.php +++ b/src/wp-admin/admin-footer.php @@ -17,10 +17,6 @@ global $hook_suffix; ?> -
-
-
- +
+
+
li.current > a.current:after { width: 0; position: absolute; pointer-events: none; - border-right-color: #f0f0f1; + border-right-color: #fff; top: 50%; margin-top: -8px; } diff --git a/src/wp-admin/css/colors/_variables.scss b/src/wp-admin/css/colors/_variables.scss index d37c2b1392f00..860604a74beb1 100644 --- a/src/wp-admin/css/colors/_variables.scss +++ b/src/wp-admin/css/colors/_variables.scss @@ -18,7 +18,7 @@ $notification-color: #d54e21 !default; // global -$body-background: $gray-100 !default; +$body-background: $white !default; $link: #0073aa !default; $link-focus: color.adjust($link, $lightness: 10%) !default; diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 203e6d0e5cf0f..8ba7b0af1b949 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1,32 +1,67 @@ /* 2 column liquid layout */ #wpwrap { - height: auto; - min-height: 100%; + height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)); width: 100%; position: relative; -webkit-font-smoothing: subpixel-antialiased; + background: #1e1e1e; + overflow: hidden; } #wpcontent { height: 100%; - padding-left: 20px; + padding: 0 16px 16px 0; + display: flex; + flex-direction: column; + box-sizing: border-box; } -#wpcontent, -#wpfooter { +#wpcontent { margin-left: 160px; } -.folded #wpcontent, -.folded #wpfooter { +.folded #wpcontent { margin-left: 36px; } +#wpbody { + flex: 1; + min-height: 0; +} + #wpbody-content { - padding-bottom: 65px; - float: left; - width: 100%; - overflow: visible; + position: relative; + padding-bottom: 24px; + height: 100%; + box-sizing: border-box; + overflow-y: auto; + overscroll-behavior: none; + background: #fff; + border-radius: 8px; +} + +/* Block editor frame overrides */ +body.js.block-editor-page #wpwrap { + overflow: hidden; +} + +body.js.block-editor-page #wpbody-content { + padding-bottom: 0; +} + +/* Fullscreen mode: remove frame */ +body.is-fullscreen-mode #wpwrap { + height: 100vh; + background: #fff; +} + +body.is-fullscreen-mode #wpcontent { + padding: 0; + margin-left: 0; +} + +body.is-fullscreen-mode #wpbody-content { + border-radius: 0; } /* inner 2 column liquid layout */ @@ -222,7 +257,7 @@ body { } body { - background: #f0f0f1; + background: #fff; color: #3c434a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; @@ -583,7 +618,8 @@ code { } .wrap { - margin: 10px 20px 0 2px; + margin: 0; + padding: 10px 20px 0 20px; } .wrap > h2:first-child, /* Back-compat for pre-4.4 */ @@ -1852,7 +1888,7 @@ p.auto-update-status { /* screen options and help tabs revert */ #screen-meta { display: none; - margin: 0 20px -1px 0; + margin: 0 20px -1px 20px; position: relative; background-color: #fff; border: 1px solid #c3c4c7; @@ -2352,12 +2388,10 @@ html.wp-toolbar { ------------------------------------------------------------------------------*/ #wpfooter { - position: absolute; - bottom: 0; - left: 0; - right: 0; padding: 10px 20px; color: #50575e; + margin-top: auto; + padding-top: 24px; } #wpfooter p { @@ -2416,8 +2450,8 @@ h3 .nav-tab, /* Back-compat for pre-4.4 */ .nav-tab-active:hover, .nav-tab-active:focus, .nav-tab-active:focus:active { - border-bottom: 1px solid #f0f0f1; - background: #f0f0f1; + border-bottom: 1px solid #fff; + background: #fff; color: #000; } @@ -3990,20 +4024,34 @@ img { -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } + #wpwrap { + height: auto; + overflow: visible; + } + #wpcontent { position: relative; margin-left: 0; - padding-left: 10px; + padding: 0; + height: auto; + display: block; + } + + #wpbody { + min-height: 0; } #wpbody-content { padding-bottom: 100px; + border-radius: 0; + height: auto; + overflow: visible; } .wrap { clear: both; - margin-right: 12px; - margin-left: 0; + margin: 0; + padding: 10px 12px 0; } /* categories */ @@ -4271,6 +4319,7 @@ img { #screen-meta, #screen-meta-links { margin-right: 10px; + margin-left: 10px; } #screen-meta-links { From c4a59b813422f837e7d073fbe9b144926a0087f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Sun, 15 Feb 2026 11:25:38 +0100 Subject: [PATCH 2/7] Admin: Fix block editor frame positioning and dashboard drag zone spacing. Override the editor skeleton's fixed positioning to absolute so it fits within the framed layout, with a 16px bottom offset for the frame gap. Remove padding-bottom from wpbody-content and add margin to dashboard drag zone placeholders. --- src/wp-admin/css/common.css | 12 ++++++++---- src/wp-admin/css/dashboard.css | 1 + 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 8ba7b0af1b949..33ca5f0e25546 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -31,7 +31,6 @@ #wpbody-content { position: relative; - padding-bottom: 24px; height: 100%; box-sizing: border-box; overflow-y: auto; @@ -41,12 +40,17 @@ } /* Block editor frame overrides */ -body.js.block-editor-page #wpwrap { +body.js.block-editor-page #wpbody-content { + padding-bottom: 0; overflow: hidden; } -body.js.block-editor-page #wpbody-content { - padding-bottom: 0; +body.js.block-editor-page .interface-interface-skeleton { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 16px; } /* Fullscreen mode: remove frame */ diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index 1c5d42ea6b1ff..fa9d5613e26d3 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -72,6 +72,7 @@ outline-offset: -2px; border-radius: 8px; height: 250px; + margin: 4px; } /* Only highlight drop zones when dragging. */ From 41d9f37a3cf542db44eeb16a57f635e81f7b4eed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Sun, 15 Feb 2026 11:31:09 +0100 Subject: [PATCH 3/7] Admin: Keep editor skeleton fixed positioning for frame layout. Use the skeleton's native fixed positioning instead of absolute, adjusting right and bottom offsets for the frame gap. Add border-radius and overflow hidden to clip content to rounded corners. Scoped to non-fullscreen mode. --- src/wp-admin/css/common.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 33ca5f0e25546..98675b103b8ac 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -45,12 +45,11 @@ body.js.block-editor-page #wpbody-content { overflow: hidden; } -body.js.block-editor-page .interface-interface-skeleton { - position: absolute; - top: 0; - left: 0; - right: 0; +body.js.block-editor-page:not(.is-fullscreen-mode) .interface-interface-skeleton { + right: 16px; bottom: 16px; + border-radius: 8px; + overflow: hidden; } /* Fullscreen mode: remove frame */ From 921f158fc10cf6458a2c56718b369ce1b1c88cbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Sun, 15 Feb 2026 11:40:32 +0100 Subject: [PATCH 4/7] Admin: Use flex column on wpbody-content for footer and screen meta layout. Make wpbody-content a flex column so the footer sticks to the bottom via margin-top: auto. Use align-self: flex-end on screen-meta-links instead of float so the toggle buttons stay in flow and get pushed down when the help/screen options panel expands. --- src/wp-admin/css/common.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 98675b103b8ac..f8b0188d67849 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -33,6 +33,8 @@ position: relative; height: 100%; box-sizing: border-box; + display: flex; + flex-direction: column; overflow-y: auto; overscroll-behavior: none; background: #fff; @@ -623,6 +625,7 @@ code { .wrap { margin: 0; padding: 10px 20px 0 20px; + margin-top: -32px; } .wrap > h2:first-child, /* Back-compat for pre-4.4 */ @@ -1884,7 +1887,7 @@ p.auto-update-status { } #screen-meta-links { - float: right; + align-self: flex-end; margin: 0 20px 0 0; } @@ -4049,6 +4052,7 @@ img { border-radius: 0; height: auto; overflow: visible; + display: block; } .wrap { From 5668b827ede97e4633d208c3647d50effe5105cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Sun, 15 Feb 2026 12:19:41 +0100 Subject: [PATCH 5/7] fix mobile behavior --- src/wp-admin/css/admin-menu.css | 2 +- src/wp-admin/css/common.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index 7a9e3bcf3fd4f..a122618c17a36 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -663,7 +663,7 @@ li#wp-admin-bar-menu-toggle { .auto-fold #wpcontent { position: relative; margin-left: 0; - padding-left: 10px; + padding-left: 0; } .sticky-menu #adminmenuwrap { diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index f8b0188d67849..eeb78b7e335bb 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -4033,6 +4033,7 @@ img { #wpwrap { height: auto; overflow: visible; + background: none; } #wpcontent { @@ -4053,6 +4054,8 @@ img { height: auto; overflow: visible; display: block; + background: none; + overscroll-behavior: auto; } .wrap { @@ -4330,6 +4333,7 @@ img { } #screen-meta-links { + float: right; margin-bottom: 20px; /* Add margins beneath links for better spacing between boxes and elements */ } From c9dee1affcf42520dd37b9eccdca5d8135346a8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Sun, 15 Feb 2026 12:26:27 +0100 Subject: [PATCH 6/7] fix use 8px instead of 16 --- src/wp-admin/css/common.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index eeb78b7e335bb..8dbe2adb2c246 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -10,7 +10,7 @@ #wpcontent { height: 100%; - padding: 0 16px 16px 0; + padding: 0 8px 8px 0; display: flex; flex-direction: column; box-sizing: border-box; @@ -48,8 +48,8 @@ body.js.block-editor-page #wpbody-content { } body.js.block-editor-page:not(.is-fullscreen-mode) .interface-interface-skeleton { - right: 16px; - bottom: 16px; + right: 8px; + bottom: 8px; border-radius: 8px; overflow: hidden; } From 87f0b121590d945b9309e80f842a8553eb1f718c Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Mon, 16 Feb 2026 14:32:26 -0600 Subject: [PATCH 7/7] Remove background on editor tools (classic editor) Background behind editor tabs & add media button. --- src/wp-admin/css/edit.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index 4fef3a49c35f0..34b3c261324ac 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -445,7 +445,6 @@ form#tags-filter { /* End TinyMCE native fullscreen mode override */ #wp-content-editor-tools { - background-color: #f0f0f1; padding-top: 20px; }