As the Site Editor has evolved to introduce powerful tools for editing templates, styles, navigation menus, and content, the underlying layout and navigation patterns have grown complex. This issue explores refining existing patterns into a more unified and streamlined layout model that improves cohesion, reusability, and navigation across the Site Editor and future admin UI (related: #72106).

Overview

This proposal suggests simplifying the Site Editor’s structure into a set of consistent, reusable layout regions. The aim is to reduce cognitive load, improve visual alignment, and create a more scalable foundation for ongoing admin UI work.

Key changes

• Navigation and structure

• Removes drilldown navigation to reduce click fatigue and disorientation when moving between areas.
• Moves sub-navigation to tabs and/or dropdowns which provide an (optional) additional layer of navigation and can be reused across other admin page types (e.g. Styles).
  • Improves mobile accessibility as tabs remain reachable without having to open the main navigation drawer.
  • Important note: These are not a literal tabs pattern, they would be navigational and require a small new set of components.
• Unlocks potential new layout configurations like including the experimental Quick Edit panel in DataViews List layout.

• Site Editor: Utilise tabs for submenus on DataViews 'pages' rather than drilldown #73251

Defined layout areas
Additional to the sidebar, page layout is composed of a few discrete surfaces with clear responsibilities:

• Header
  • Consistent dimensions and layout across all page types for stronger wayfinding and predictable responsive behavior.
  • Aligns primary action, submenu, and view tools in a single visual system.
  • Addresses existing issue where the filter UI in DataViews List layout gets very cramped very quickly.
• Primary content area
  • Hosts the main content of an admin route.
    • Example: the Pages route displays the Pages list/table/grid.
• Canvas (optional)
  • Displays contextual previews:
    • Isolated previews for individual menus, block patterns, or template parts.
    • Full previews for pages when browsing pages.
    • Site preview in Styles section.
  • Supports additional preview modes such as Style Book, and (in the future) Browse mode.
  • Includes resize handles for responsive previews.
• Secondary panel (optional)
  • Provides flexible space for contextual UIs related to the active route.
  • A page can include multiple secondary panels, but a maximum of one can be visible at a time.
    • Examples: Revisions in Global Styles, Dataview options, Quick edit/Details panel.

Visual density and alignment

• Slightly denser visual rhythm improves general alignment and gives more room to primary content.
• Sidebar width reduced, padding tightened, and typography refined.
• DataView tool access (filters, search, view options) are repositioned for clearer grouping.

Benefits

• Greater visual and behavioral consistency across all Site Editor screens.
• Fewer unique layout templates, reducing design and technical overhead.
• More reusable and composable UI surfaces, aligning with broader design system goals.
• Sets a stronger foundation for future admin UI development.

Contextual mockups

Navigation management

Page management

Global styles

Hypothetical settings

Hypothetical user management

Hypothetical Editor

This isn't the primary focus of this issue, but this mockup demonstrates how the model can consistently translate across 'admin' and 'editor' views.

Next steps

This proposal is meant as a starting point for discussion.
Feedback is especially welcome on:

• How this structure could generalize across other admin interfaces.
• Considerations for extensibility (plugin surfaces, secondary panels, etc.).
• Alignment with existing layout and navigation concepts.

Once there's agreement on the pieces we like (if any 😅) then we can extract individual tasks.