@wordpress/boot 0.3.1-next.8b30e05b0.0 → 0.4.0

package/build-types/store/types.d.ts

@@ -55,6 +55,68 @@ export interface CanvasData {
      */
     editLink?: string;
 }
+/**
+ * Route lifecycle configuration exported from route_module.
+ * The module should export a named `route` object with these optional functions.
+ */
+export interface RouteConfig {
+    /**
+     * Pre-navigation hook for authentication, validation, or redirects.
+     * Called before the route is loaded.
+     */
+    beforeLoad?: (context: RouteLoaderContext) => void | Promise<void>;
+    /**
+     * Data preloading function.
+     * Called when the route is being loaded.
+     */
+    loader?: (context: RouteLoaderContext) => Promise<unknown>;
+    /**
+     * Function that returns canvas data for rendering.
+     * - Returns CanvasData to use default editor canvas
+     * - Returns null to use custom canvas component from content_module
+     * - Returns undefined to show no canvas
+     */
+    canvas?: (context: RouteLoaderContext) => Promise<CanvasData | null | undefined>;
+    /**
+     * Function that determines whether to show the inspector panel.
+     * When not defined, defaults to true (always show inspector if component exists).
+     * When it returns false, the inspector is hidden even if an inspector component is exported.
+     *
+     * @example
+     * ```tsx
+     * export const route = {
+     *   inspector: ({ search }) => {
+     *     // Only show inspector when items are selected
+     *     return search.selectedIds?.length > 0;
+     *   },
+     * };
+     * ```
+     */
+    inspector?: (context: RouteLoaderContext) => boolean | Promise<boolean>;
+    /**
+     * Function that returns the document title for the route.
+     * The returned title will be formatted as: "{title} ‹ {siteTitle} — WordPress"
+     * and announced to screen readers for accessibility.
+     *
+     * @param context Route context with params and search
+     * @return The document title string or a Promise resolving to a string
+     *
+     * @example
+     * ```tsx
+     * export const route = {
+     *   title: async ({ params }) => {
+     *     const post = await resolveSelect(coreStore).getEntityRecord(
+     *       'postType',
+     *       params.type,
+     *       params.id
+     *     );
+     *     return post?.title?.rendered || 'Edit Post';
+     *   },
+     * };
+     * ```
+     */
+    title?: (context: RouteLoaderContext) => string | Promise<string>;
+}
 /**
  * Route configuration interface.
  * Routes specify content_module for surfaces and optionally route_module for lifecycle functions.
@@ -75,13 +137,8 @@ export interface Route {
     content_module?: string;
     /**
      * Module path for route lifecycle functions.
-     * The module should export a named export `route` containing:
-     * - beforeLoad?: Pre-navigation hook (authentication, validation, redirects)
-     * - loader?: Data preloading function
-     * - canvas?: Function that returns canvas data for rendering
-     *   - Returns CanvasData to use default editor canvas
-     *   - Returns null to use custom canvas component from content_module
-     *   - Returns undefined to show no canvas
+     * The module should export a named `route` object implementing RouteConfig.
+     * @see RouteConfig for available lifecycle functions.
      */
     route_module?: string;
 }

package/build-types/store/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/store/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtD;;;;;;GAMG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC;AAExD,MAAM,WAAW,QAAQ;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;CACvC;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAClC,MAAM,EAAE,MAAM,CAAE,MAAM,EAAE,MAAM,CAAE,CAAC;IACjC,MAAM,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IAC1B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,KAAK;IACrB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,KAAK;IACrB,SAAS,EAAE,MAAM,CAAE,MAAM,EAAE,QAAQ,CAAE,CAAC;IACtC,MAAM,EAAE,KAAK,EAAE,CAAC;CAChB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/store/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtD;;;;;;GAMG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC;AAExD,MAAM,WAAW,QAAQ;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;CACvC;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAClC,MAAM,EAAE,MAAM,CAAE,MAAM,EAAE,MAAM,CAAE,CAAC;IACjC,MAAM,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IAC1B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAE,OAAO,EAAE,kBAAkB,KAAM,IAAI,GAAG,OAAO,CAAE,IAAI,CAAE,CAAC;IAEvE;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAE,OAAO,EAAE,kBAAkB,KAAM,OAAO,CAAE,OAAO,CAAE,CAAC;IAE/D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CACR,OAAO,EAAE,kBAAkB,KACvB,OAAO,CAAE,UAAU,GAAG,IAAI,GAAG,SAAS,CAAE,CAAC;IAE9C;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,CAAE,OAAO,EAAE,kBAAkB,KAAM,OAAO,GAAG,OAAO,CAAE,OAAO,CAAE,CAAC;IAE5E;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,KAAK,CAAC,EAAE,CAAE,OAAO,EAAE,kBAAkB,KAAM,MAAM,GAAG,OAAO,CAAE,MAAM,CAAE,CAAC;CACtE;AAED;;;GAGG;AACH,MAAM,WAAW,KAAK;IACrB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,KAAK;IACrB,SAAS,EAAE,MAAM,CAAE,MAAM,EAAE,QAAQ,CAAE,CAAC;IACtC,MAAM,EAAE,KAAK,EAAE,CAAC;CAChB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/boot",
-	"version": "0.3.1-next.8b30e05b0.0",
+	"version": "0.4.0",
 	"description": "Minimal boot package for WordPress admin pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,25 +34,26 @@
 	"wpScriptModuleExports": "./build-module/index.js",
 	"types": "build-types",
 	"dependencies": {
-		"@wordpress/admin-ui": "^1.4.1-next.8b30e05b0.0",
-		"@wordpress/commands": "^1.36.1-next.8b30e05b0.0",
-		"@wordpress/components": "^30.9.1-next.8b30e05b0.0",
-		"@wordpress/compose": "^7.36.1-next.8b30e05b0.0",
-		"@wordpress/core-data": "^7.36.1-next.8b30e05b0.0",
-		"@wordpress/data": "^10.36.1-next.8b30e05b0.0",
-		"@wordpress/editor": "^14.36.1-next.8b30e05b0.0",
-		"@wordpress/element": "^6.36.1-next.8b30e05b0.0",
-		"@wordpress/html-entities": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/i18n": "^6.9.1-next.8b30e05b0.0",
-		"@wordpress/icons": "^11.3.1-next.8b30e05b0.0",
-		"@wordpress/keyboard-shortcuts": "^5.36.1-next.8b30e05b0.0",
-		"@wordpress/keycodes": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/lazy-editor": "^1.2.1-next.8b30e05b0.0",
-		"@wordpress/primitives": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/private-apis": "^1.36.1-next.8b30e05b0.0",
-		"@wordpress/route": "^0.2.1-next.8b30e05b0.0",
-		"@wordpress/theme": "^0.3.1-next.8b30e05b0.0",
-		"@wordpress/url": "^4.36.1-next.8b30e05b0.0",
+		"@wordpress/a11y": "^4.37.0",
+		"@wordpress/admin-ui": "^1.5.0",
+		"@wordpress/commands": "^1.37.0",
+		"@wordpress/components": "^31.0.0",
+		"@wordpress/compose": "^7.37.0",
+		"@wordpress/core-data": "^7.37.0",
+		"@wordpress/data": "^10.37.0",
+		"@wordpress/editor": "^14.37.0",
+		"@wordpress/element": "^6.37.0",
+		"@wordpress/html-entities": "^4.37.0",
+		"@wordpress/i18n": "^6.10.0",
+		"@wordpress/icons": "^11.4.0",
+		"@wordpress/keyboard-shortcuts": "^5.37.0",
+		"@wordpress/keycodes": "^4.37.0",
+		"@wordpress/lazy-editor": "^1.3.0",
+		"@wordpress/primitives": "^4.37.0",
+		"@wordpress/private-apis": "^1.37.0",
+		"@wordpress/route": "^0.3.0",
+		"@wordpress/theme": "^0.4.0",
+		"@wordpress/url": "^4.37.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -62,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2466f6bc223f8be98c55e1ac7270e8c3e413eaaf"
+	"gitHead": "2cf13ec6cf86153c9b3cf369bf5c59046f5cd950"
 }

package/src/components/app/router.tsx

@@ -13,12 +13,14 @@ import {
 	privateApis as routePrivateApis,
 	type AnyRoute,
 } from '@wordpress/route';
+import { resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import Root from '../root';
-import type { Route, RouteLoaderContext } from '../../store/types';
+import type { Route, RouteConfig, RouteLoaderContext } from '../../store/types';
 import { unlock } from '../../lock-unlock';
 
 const {
@@ -29,6 +31,7 @@ const {
 	RouterProvider,
 	createBrowserHistory,
 	parseHref,
+	useLoaderData,
 } = unlock( routePrivateApis );
 
 // Not found component
@@ -42,29 +45,6 @@ function NotFoundComponent() {
 	);
 }
 
-function RouteComponent( {
-	stage: Stage,
-	inspector: Inspector,
-}: {
-	stage?: ComponentType;
-	inspector?: ComponentType;
-} ) {
-	return (
-		<>
-			{ Stage && (
-				<div className="boot-layout__stage">
-					<Stage />
-				</div>
-			) }
-			{ Inspector && (
-				<div className="boot-layout__inspector">
-					<Inspector />
-				</div>
-			) }
-		</>
-	);
-}
-
 /**
  * Creates a TanStack route from a Route definition.
  *
@@ -76,12 +56,7 @@ async function createRouteFromDefinition(
 	route: Route,
 	parentRoute: AnyRoute
 ) {
-	// Load route module for lifecycle functions if specified
-	let routeConfig: {
-		beforeLoad?: ( context: RouteLoaderContext ) => void | Promise< void >;
-		loader?: ( context: RouteLoaderContext ) => Promise< unknown >;
-		canvas?: ( context: RouteLoaderContext ) => Promise< any >;
-	} = {};
+	let routeConfig: RouteConfig = {};
 
 	if ( route.route_module ) {
 		const module = await import( route.route_module );
@@ -105,20 +80,32 @@ async function createRouteFromDefinition(
 				search: opts.deps || {},
 			};
 
-			// Call both loader and canvas functions if they exist
-			const [ loaderData, canvasData ] = await Promise.all( [
+			const [ , loaderData, canvasData, titleData ] = await Promise.all( [
+				resolveSelect( coreStore ).getEntityRecord(
+					'root',
+					'__unstableBase'
+				),
 				routeConfig.loader
 					? routeConfig.loader( context )
 					: Promise.resolve( undefined ),
 				routeConfig.canvas
 					? routeConfig.canvas( context )
 					: Promise.resolve( undefined ),
+				routeConfig.title
+					? routeConfig.title( context )
+					: Promise.resolve( undefined ),
 			] );
 
+			let inspector = true;
+			if ( routeConfig.inspector ) {
+				inspector = await routeConfig.inspector( context );
+			}
+
 			return {
 				...( loaderData as any ),
 				canvas: canvasData,
-				// Include content module path so Root can load custom canvas
+				inspector,
+				title: titleData,
 				routeContentModule: route.content_module,
 			};
 		},
@@ -131,13 +118,27 @@ async function createRouteFromDefinition(
 			? await import( route.content_module )
 			: {};
 
+		const Stage = module.stage;
+		const Inspector = module.inspector;
+
 		return createLazyRoute( route.path )( {
-			component: function Component() {
+			component: function RouteComponent() {
+				const { inspector: showInspector } =
+					useLoaderData( { from: route.path } ) ?? {};
+
 				return (
-					<RouteComponent
-						stage={ module.stage }
-						inspector={ module.inspector }
-					/>
+					<>
+						{ Stage && (
+							<div className="boot-layout__stage">
+								<Stage />
+							</div>
+						) }
+						{ Inspector && showInspector && (
+							<div className="boot-layout__inspector">
+								<Inspector />
+							</div>
+						) }
+					</>
 				);
 			},
 		} );

package/src/components/app/use-route-title.ts

@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore, type UnstableBase } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
+import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routePrivateApis } from '@wordpress/route';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useLocation, useMatches } = unlock( routePrivateApis );
+
+/**
+ * Hook that manages document title updates based on route changes.
+ * Formats titles with WordPress conventions and announces them to screen readers.
+ *
+ * This hook should be called from the Root component to ensure it runs on every route.
+ */
+export default function useRouteTitle() {
+	const location = useLocation();
+	const matches = useMatches();
+	const currentMatch = matches[ matches.length - 1 ];
+	const routeTitle = ( currentMatch?.loaderData as any )?.title as
+		| string
+		| undefined;
+
+	const siteTitle = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord< UnstableBase >(
+				'root',
+				'__unstableBase'
+			)?.name,
+		[]
+	);
+
+	const isInitialLocationRef = useRef( true );
+
+	useEffect( () => {
+		isInitialLocationRef.current = false;
+	}, [ location ] );
+
+	useEffect( () => {
+		// Don't update or announce the title for initial page load.
+		if ( isInitialLocationRef.current ) {
+			return;
+		}
+
+		if (
+			routeTitle &&
+			typeof routeTitle === 'string' &&
+			siteTitle &&
+			typeof siteTitle === 'string'
+		) {
+			// Decode entities for display
+			const decodedRouteTitle = decodeEntities( routeTitle );
+			const decodedSiteTitle = decodeEntities( siteTitle );
+
+			// Format title following WordPress admin conventions
+			const formattedTitle = sprintf(
+				/* translators: Admin document title. 1: Admin screen name, 2: Site name. */
+				__( '%1$s ‹ %2$s — WordPress' ),
+				decodedRouteTitle,
+				decodedSiteTitle
+			);
+
+			document.title = formattedTitle;
+
+			// Announce title on route change for screen readers.
+			if ( decodedRouteTitle ) {
+				speak( decodedRouteTitle, 'assertive' );
+			}
+		}
+	}, [ routeTitle, siteTitle, location ] );
+}

package/src/components/canvas/back-button.scss

@@ -32,9 +32,9 @@
 
 	&:focus:not(:active) {
 		outline:
-			var(--wpds-border-width-focus) solid
+			var(--wpds-border-width-interactive-focus) solid
 			var(--wpds-color-stroke-focus-brand);
-		outline-offset: calc(-1 * var(--wpds-border-width-focus));
+		outline-offset: calc(-1 * var(--wpds-border-width-interactive-focus));
 	}
 }
 

package/src/components/navigation/navigation-item/style.scss

@@ -19,7 +19,7 @@
 	}
 
 	// Rounded focus ring
-	border-radius: var(--wpds-border-radius-small, 2px);
+	border-radius: var(--wpds-border-radius-surface-sm, 2px);
 
 	&.active,
 	&:hover,

package/src/components/root/index.tsx

@@ -11,6 +11,17 @@ import { privateApis as routePrivateApis } from '@wordpress/route';
 import { CommandMenu } from '@wordpress/commands';
 import { privateApis as themePrivateApis } from '@wordpress/theme';
 import { EditorSnackbars } from '@wordpress/editor';
+import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
+import {
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+	Button,
+	SlotFillProvider,
+} from '@wordpress/components';
+import { menu } from '@wordpress/icons';
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Page } from '@wordpress/admin-ui';
 
 /**
  * Internal dependencies
@@ -18,15 +29,17 @@ import { EditorSnackbars } from '@wordpress/editor';
 import Sidebar from '../sidebar';
 import SavePanel from '../save-panel';
 import CanvasRenderer from '../canvas-renderer';
+import useRouteTitle from '../app/use-route-title';
 import { unlock } from '../../lock-unlock';
 import type { CanvasData } from '../../store/types';
 import './style.scss';
 
 const { ThemeProvider } = unlock( themePrivateApis );
-const { useMatches, Outlet } = unlock( routePrivateApis );
+const { useLocation, useMatches, Outlet } = unlock( routePrivateApis );
 
 export default function Root() {
 	const matches = useMatches();
+	const location = useLocation();
 	const currentMatch = matches[ matches.length - 1 ];
 	const canvas = ( currentMatch?.loaderData as any )?.canvas as
 		| CanvasData
@@ -36,41 +49,145 @@ export default function Root() {
 		?.routeContentModule as string | undefined;
 	const isFullScreen = canvas && ! canvas.isPreview;
 
+	useRouteTitle();
+
+	// Mobile sidebar state
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ isMobileSidebarOpen, setIsMobileSidebarOpen ] = useState( false );
+	const disableMotion = useReducedMotion();
+	// Close mobile sidebar on viewport resize and path change
+	useEffect( () => {
+		setIsMobileSidebarOpen( false );
+	}, [ location.pathname, isMobileViewport ] );
+
 	return (
-		<ThemeProvider isRoot color={ { bg: '#f8f8f8', primary: '#3858e9' } }>
-			<ThemeProvider color={ { bg: '#1d2327', primary: '#3858e9' } }>
-				<div
-					className={ clsx( 'boot-layout', {
-						'has-canvas': !! canvas || canvas === null,
-						'has-full-canvas': isFullScreen,
-					} ) }
-				>
-					<CommandMenu />
-					<SavePanel />
-					<EditorSnackbars />
-					{ ! isFullScreen && (
-						<div className="boot-layout__sidebar">
-							<Sidebar />
-						</div>
-					) }
-					<div className="boot-layout__surfaces">
-						<ThemeProvider
-							color={ { bg: '#ffffff', primary: '#3858e9' } }
-						>
-							<Outlet />
-						</ThemeProvider>
-						{ /* Render Canvas in Root to prevent remounting on route changes */ }
-						{ ( canvas || canvas === null ) && (
-							<div className="boot-layout__canvas">
-								<CanvasRenderer
-									canvas={ canvas }
-									routeContentModule={ routeContentModule }
+		<SlotFillProvider>
+			<ThemeProvider
+				isRoot
+				color={ { bg: '#f8f8f8', primary: '#3858e9' } }
+			>
+				<ThemeProvider color={ { bg: '#1d2327', primary: '#3858e9' } }>
+					<div
+						className={ clsx( 'boot-layout', {
+							'has-canvas': !! canvas || canvas === null,
+							'has-full-canvas': isFullScreen,
+						} ) }
+					>
+						<CommandMenu />
+						<SavePanel />
+						<EditorSnackbars />
+						{ isMobileViewport && (
+							<Page.SidebarToggleFill>
+								<Button
+									icon={ menu }
+									onClick={ () =>
+										setIsMobileSidebarOpen( true )
+									}
+									label={ __( 'Open navigation panel' ) }
+									size="compact"
 								/>
+							</Page.SidebarToggleFill>
+						) }
+						{ /* Mobile Sidebar Backdrop */ }
+						<AnimatePresence>
+							{ isMobileViewport &&
+								isMobileSidebarOpen &&
+								! isFullScreen && (
+									<motion.div
+										initial={ { opacity: 0 } }
+										animate={ { opacity: 1 } }
+										exit={ { opacity: 0 } }
+										transition={ {
+											type: 'tween',
+											duration: disableMotion ? 0 : 0.2,
+											ease: 'easeOut',
+										} }
+										className="boot-layout__sidebar-backdrop"
+										onClick={ () =>
+											setIsMobileSidebarOpen( false )
+										}
+										onKeyDown={ ( event ) => {
+											if ( event.key === 'Escape' ) {
+												setIsMobileSidebarOpen( false );
+											}
+										} }
+										role="button"
+										tabIndex={ -1 }
+										aria-label={ __(
+											'Close navigation panel'
+										) }
+									/>
+								) }
+						</AnimatePresence>
+						{ /* Mobile Sidebar */ }
+						<AnimatePresence>
+							{ isMobileViewport &&
+								isMobileSidebarOpen &&
+								! isFullScreen && (
+									<motion.div
+										initial={ { x: '-100%' } }
+										animate={ { x: 0 } }
+										exit={ { x: '-100%' } }
+										transition={ {
+											type: 'tween',
+											duration: disableMotion ? 0 : 0.2,
+											ease: 'easeOut',
+										} }
+										className="boot-layout__sidebar is-mobile"
+									>
+										<Sidebar />
+									</motion.div>
+								) }
+						</AnimatePresence>
+						{ /* Desktop Sidebar */ }
+						{ ! isMobileViewport && ! isFullScreen && (
+							<div className="boot-layout__sidebar">
+								<Sidebar />
 							</div>
 						) }
+						<div className="boot-layout__surfaces">
+							<ThemeProvider
+								color={ { bg: '#ffffff', primary: '#3858e9' } }
+							>
+								<Outlet />
+							</ThemeProvider>
+							{ /* Render Canvas in Root to prevent remounting on route changes */ }
+							{ ( canvas || canvas === null ) && (
+								<div
+									className={ clsx( 'boot-layout__canvas', {
+										'has-mobile-drawer':
+											canvas?.isPreview &&
+											isMobileViewport,
+									} ) }
+								>
+									{ canvas?.isPreview && isMobileViewport && (
+										<div className="boot-layout__mobile-sidebar-drawer">
+											<Button
+												icon={ menu }
+												onClick={ () =>
+													setIsMobileSidebarOpen(
+														true
+													)
+												}
+												label={ __(
+													'Open navigation panel'
+												) }
+												size="compact"
+											/>
+										</div>
+									) }
+									<CanvasRenderer
+										canvas={ canvas }
+										routeContentModule={
+											routeContentModule
+										}
+									/>
+								</div>
+							) }
+						</div>
 					</div>
-				</div>
+				</ThemeProvider>
 			</ThemeProvider>
-		</ThemeProvider>
+		</SlotFillProvider>
 	);
 }

package/src/components/root/single-page.tsx

@@ -20,6 +20,7 @@ import CanvasRenderer from '../canvas-renderer';
 import { unlock } from '../../lock-unlock';
 import type { CanvasData } from '../../store/types';
 import './style.scss';
+import useRouteTitle from '../app/use-route-title';
 
 const { useMatches, Outlet } = unlock( routePrivateApis );
 const { ThemeProvider } = unlock( themePrivateApis );
@@ -39,6 +40,8 @@ export default function RootSinglePage() {
 		?.routeContentModule as string | undefined;
 	const isFullScreen = canvas && ! canvas.isPreview;
 
+	useRouteTitle();
+
 	return (
 		<ThemeProvider isRoot color={ { bg: '#f8f8f8', primary: '#3858e9' } }>
 			<ThemeProvider color={ { bg: '#1d2327', primary: '#3858e9' } }>