Admin Reskin: Add framed layout to wp-admin with scrollable content area

[fabiankaegy]

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

Trac ticket: https://core.trac.wordpress.org/ticket/64641

[fabiankaegy]

I know this is a very late addition and I'm totally fine if we decide to punt this to 7.1.

But I did want to open the PR now since I feel it really ties the admin reskin changes together nicely :)

[TobiasBg]

Looks nice! From the perspective of a plugin developer, I'm in favor of getting this into 7.0: Devs are going to have to check and potentially adjust styling for custom admin screens already, due to the other Admin Reskin changes. Having them repeat this for 7.1, if this ticket doesn't make it into 7.0, does feel unnecessary.