[wp-trac] [WordPress Trac] #64641: Admin Reskin: Add framed layout to wp-admin with scrollable content area

[WordPress Trac]

#64641: Admin Reskin: Add framed layout to wp-admin with scrollable content area
----------------------------+-----------------------------
 Reporter:  fabiankaegy     |      Owner:  (none)
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:
 Severity:  normal          |   Keywords:
  Focuses:  ui, css         |
----------------------------+-----------------------------
 This ticket introduces a framed layout for `wp-admin` as part of the
 WordPress 7.0 (or 7.1) admin visual refresh (#64308).

 == Why This Matters ==

 The current admin layout uses a flat, full-bleed design where the content
 area fills the entire viewport. A framed layout with a visible background,
 rounded corners, and consistent spacing creates a more modern, focused
 interface that better separates navigation from content and matches the
 design already used in the Site Editor. It also matches what the new wp-
 boot powered screens such as the new Appearance -> Fonts screen look like.

 == Proposed Scope ==

 '''Layout structure:'''
  * `#wpwrap` uses a fixed viewport height with a dark background
 (`#1e1e1e`)
  * `#wpcontent` becomes a flex column with padding to create the frame gap
 on right and bottom edges
  * `#wpbody-content` gets a white background, `border-radius: 8px`, and
 `overflow-y: auto` for independent scrolling
  * `#wpbody-content` uses `display: flex; flex-direction: column` to keep
 the footer at the bottom via `margin-top: auto`

 '''Block editor integration:'''
  * The editor's `.interface-interface-skeleton` keeps its native
 `position: fixed` to preserve z-index stacking
  * Non-fullscreen mode gets `right: 16px`, `bottom: 16px`, `border-radius:
 8px`, and `overflow: hidden` to fit within the frame
  * Fullscreen mode removes the frame entirely (no border-radius, no
 padding, no margin)

 '''Footer:'''
  * `#wpfooter` is moved inside `#wpbody-content` so it participates in the
 scroll area
  * Uses `margin-top: auto` within the flex column to always sit at the
 bottom

 '''Screen meta (Help / Screen Options):'''
  * `#screen-meta-links` uses `align-self: flex-end` instead of `float:
 right` to work within the flex column layout
  * `#screen-meta` panel stays in normal flow so expanding it pushes
 content down

 '''Responsive:'''
  * On small screens, the frame is removed: `border-radius: 0`, `overflow:
 visible`, `height: auto`
  * Screen meta margins adjust to `10px` on both sides

 == Key Principles ==

  * '''CSS-Only Changes''': Layout achieved through CSS, with one small
 change in `admin-footer.php` to reorder the footer position in the DOM
  * '''Backward Compatibility''': All existing selectors preserved, block
 editor z-index behavior maintained by keeping `position: fixed`
  * '''Fullscreen Unaffected''': Fullscreen mode strips the frame for a
 clean, borderless experience
  * '''Accessibility''': Scrollable content area uses `overscroll-behavior:
 none` to prevent scroll chaining, focus styles remain visible

 == What This Is NOT ==

  * No changes to the admin menu or admin bar
  * No changes to admin color scheme values
  * No JavaScript modifications
  * No changes to block editor internal layout

 == Testing Approach ==

 Test across multiple admin screens with varying content lengths:

  * Short-content pages (Tools, Import/Export) — footer should be at the
 bottom, not floating mid-page
  * Long-content pages (Posts list, Settings) — content should scroll
 within the frame with visible border-radius
  * Block editor (Post, Page) — editor should fit within the frame with
 rounded corners in non-fullscreen mode
  * Block editor fullscreen — frame should be completely removed
  * Help / Screen Options panels — expanding should push content down,
 toggle buttons should move with the panel
  * Dashboard — drag zone placeholders should have proper spacing

 Verify at 100% and 200% zoom, in RTL layout, and on mobile viewport widths
 (frame should be disabled).

 == Related Resources ==

  * Parent ticket: #64308

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