@wordpress/boot 0.3.0 → 0.3.1-next.738bb1424.0

package/src/components/app/router.tsx

@@ -7,20 +7,21 @@ import type { ComponentType } from 'react';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { Page } from '@wordpress/admin-ui';
 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 { CanvasData, Route, RouteLoaderContext } from '../../store/types';
+import type { Route, RouteConfig, RouteLoaderContext } from '../../store/types';
 import { unlock } from '../../lock-unlock';
-import Canvas from '../canvas';
 
 const {
 	createLazyRoute,
@@ -30,7 +31,7 @@ const {
 	RouterProvider,
 	createBrowserHistory,
 	parseHref,
-	useMatches,
+	useLoaderData,
 } = unlock( routePrivateApis );
 
 // Not found component
@@ -44,51 +45,6 @@ function NotFoundComponent() {
 	);
 }
 
-function RouteComponent( {
-	stage: Stage,
-	inspector: Inspector,
-	canvas: CustomCanvas,
-}: {
-	stage?: ComponentType;
-	inspector?: ComponentType;
-	canvas?: ComponentType;
-} ) {
-	// Get canvas data from the current route's loader
-	const matches = useMatches();
-	const currentMatch = matches[ matches.length - 1 ];
-	const canvasData = ( currentMatch?.loaderData as any )?.canvas as
-		| CanvasData
-		| null
-		| undefined;
-
-	return (
-		<>
-			{ Stage && (
-				<div className="boot-layout__stage">
-					<Stage />
-				</div>
-			) }
-			{ Inspector && (
-				<div className="boot-layout__inspector">
-					<Inspector />
-				</div>
-			) }
-			{ /* Render custom canvas when canvas() returns null */ }
-			{ canvasData === null && CustomCanvas && (
-				<div className="boot-layout__canvas">
-					<CustomCanvas />
-				</div>
-			) }
-			{ /* Render default canvas when canvas() returns CanvasData */ }
-			{ canvasData && (
-				<div className="boot-layout__canvas">
-					<Canvas canvas={ canvasData } />
-				</div>
-			) }
-		</>
-	);
-}
-
 /**
  * Creates a TanStack route from a Route definition.
  *
@@ -96,52 +52,65 @@ function RouteComponent( {
  * @param parentRoute Parent route.
  * @return Tanstack Route.
  */
-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 >;
-	} = {};
-
-	if ( route.route_module ) {
-		const module = await import( route.route_module );
-		routeConfig = module.route || {};
-	}
-
+function createRouteFromDefinition( route: Route, parentRoute: AnyRoute ) {
 	// Create route without component initially
 	let tanstackRoute = createRoute( {
 		getParentRoute: () => parentRoute,
 		path: route.path,
-		beforeLoad: routeConfig.beforeLoad
-			? ( opts: any ) =>
-					routeConfig.beforeLoad!( {
+		beforeLoad: async ( opts: any ) => {
+			// Import route module here (lazy)
+			if ( route.route_module ) {
+				const module = await import( route.route_module );
+				const routeConfig = module.route || {};
+
+				if ( routeConfig.beforeLoad ) {
+					return routeConfig.beforeLoad( {
 						params: opts.params || {},
 						search: opts.search || {},
-					} )
-			: undefined,
+					} );
+				}
+			}
+		},
 		loader: async ( opts: any ) => {
+			// Import route module here (lazy)
+			let routeConfig: RouteConfig = {};
+			if ( route.route_module ) {
+				const module = await import( route.route_module );
+				routeConfig = module.route || {};
+			}
+
 			const context: RouteLoaderContext = {
 				params: opts.params || {},
 				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,
+				inspector,
+				title: titleData,
+				routeContentModule: route.content_module,
 			};
 		},
 		loaderDeps: ( opts: any ) => opts.search,
@@ -153,14 +122,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 }
-						canvas={ module.canvas }
-					/>
+					<>
+						{ Stage && (
+							<div className="boot-layout__stage">
+								<Stage />
+							</div>
+						) }
+						{ Inspector && showInspector && (
+							<div className="boot-layout__inspector">
+								<Inspector />
+							</div>
+						) }
+					</>
 				);
 			},
 		} );
@@ -176,7 +158,7 @@ async function createRouteFromDefinition(
  * @param rootComponent Root component to use for the router.
  * @return Router tree.
  */
-async function createRouteTree(
+function createRouteTree(
 	routes: Route[],
 	rootComponent: ComponentType = Root
 ) {
@@ -185,9 +167,9 @@ async function createRouteTree(
 		context: () => ( {} ),
 	} );
 
-	// Create routes from definitions
-	const dynamicRoutes = await Promise.all(
-		routes.map( ( route ) => createRouteFromDefinition( route, rootRoute ) )
+	// Create routes from definitions (now synchronous)
+	const dynamicRoutes = routes.map( ( route ) =>
+		createRouteFromDefinition( route, rootRoute )
 	);
 
 	return rootRoute.addChildren( dynamicRoutes );
@@ -219,36 +201,36 @@ export default function Router( {
 	routes,
 	rootComponent = Root,
 }: RouterProps ) {
-	const [ router, setRouter ] = useState< any >( null );
-
-	useEffect( () => {
-		let cancelled = false;
-
-		async function initializeRouter() {
-			const history = createPathHistory();
-			const routeTree = await createRouteTree( routes, rootComponent );
-
-			if ( ! cancelled ) {
-				const newRouter = createRouter( {
-					history,
-					routeTree,
-					defaultPreload: 'intent',
-					defaultNotFoundComponent: NotFoundComponent,
-				} );
-				setRouter( newRouter );
-			}
-		}
-
-		initializeRouter();
-
-		return () => {
-			cancelled = true;
-		};
+	const router = useMemo( () => {
+		const history = createPathHistory();
+		const routeTree = createRouteTree( routes, rootComponent );
+
+		return createRouter( {
+			history,
+			routeTree,
+			defaultPreload: 'intent',
+			defaultNotFoundComponent: NotFoundComponent,
+			defaultViewTransition: {
+				types: ( {
+					fromLocation,
+				}: {
+					fromLocation?: unknown;
+					toLocation: unknown;
+					pathChanged: boolean;
+					hrefChanged: boolean;
+					hashChanged: boolean;
+				} ) => {
+					// Disable view transition on initial navigation (no previous location)
+					if ( ! fromLocation ) {
+						return false;
+					}
+
+					// Enable with navigation type for subsequent navigations
+					return [ 'navigate' ];
+				},
+			},
+		} );
 	}, [ routes, rootComponent ] );
 
-	if ( ! router ) {
-		return <div>Loading routes...</div>;
-	}
-
 	return <RouterProvider router={ router } />;
 }

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));
 	}
 }
 
@@ -60,3 +60,8 @@
 		backdrop-filter: saturate(180%) blur(15px);
 	}
 }
+
+// Remove the header slide-in animation so the back logo does not move.
+.interface-interface-skeleton__header {
+	margin-top: 0 !important;
+}

package/src/components/canvas-renderer/index.tsx

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Canvas from '../canvas';
+import type { CanvasData } from '../../store/types';
+
+interface CanvasRendererProps {
+	canvas: CanvasData | null | undefined;
+	routeContentModule?: string;
+}
+
+/**
+ * CanvasRenderer handles rendering of both default and custom canvas components.
+ * The logic here would have been way simpler if we just render the canvas within
+ * the RouteComponent like the other surfaces.
+ * The issue is that doing so forces the canvas to remount on every route change,
+ * which is not desirable for smooth transitions.
+ *
+ * - When canvas is undefined: No canvas is rendered
+ * - When canvas is null: Loads and renders custom canvas from contentModulePath
+ * - When canvas is CanvasData: Renders default Canvas component with editor
+ *
+ * This component is designed to be rendered at the Root level to prevent
+ * remounting when navigating between routes.
+ *
+ * @param props                    Component props
+ * @param props.canvas             Canvas data from route loader
+ * @param props.routeContentModule Path to content module for custom canvas
+ * @return Canvas renderer
+ */
+export default function CanvasRenderer( {
+	canvas,
+	routeContentModule,
+}: CanvasRendererProps ) {
+	const [ CustomCanvas, setCustomCanvas ] = useState< any >( null );
+
+	useEffect( () => {
+		if ( canvas === null && routeContentModule ) {
+			import( routeContentModule )
+				.then( ( module ) => {
+					setCustomCanvas( () => module.canvas );
+				} )
+				.catch( ( error ) => {
+					// eslint-disable-next-line no-console
+					console.error( 'Failed to load custom canvas:', error );
+				} );
+		} else {
+			setCustomCanvas( null );
+		}
+	}, [ canvas, routeContentModule ] );
+
+	// No canvas
+	if ( canvas === undefined ) {
+		return null;
+	}
+
+	// Custom canvas
+	if ( canvas === null ) {
+		if ( ! CustomCanvas ) {
+			return null; // Still loading
+		}
+		return <CustomCanvas />;
+	}
+
+	// Default canvas
+	return <Canvas canvas={ canvas } />;
+}

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

@@ -9,56 +9,183 @@ import clsx from 'clsx';
 import { privateApis as routePrivateApis } from '@wordpress/route';
 // @ts-expect-error Commands is not typed properly.
 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
  */
 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';
+import { UserThemeProvider } from '../user-theme-provider';
 
-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
 		| null
 		| undefined;
+	const routeContentModule = ( currentMatch?.loaderData as any )
+		?.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 />
+		<SlotFillProvider>
+			<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>
+				<UserThemeProvider color={ { bg: '#1d2327' } }>
+					<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">
+							<UserThemeProvider color={ { bg: '#ffffff' } }>
+								<Outlet />
+								{ /* 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>
+								) }
+							</UserThemeProvider>
 						</div>
-					) }
-					<div className="boot-layout__surfaces">
-						<ThemeProvider
-							color={ { bg: '#ffffff', primary: '#3858e9' } }
-						>
-							<Outlet />
-						</ThemeProvider>
 					</div>
-				</div>
-			</ThemeProvider>
-		</ThemeProvider>
+				</UserThemeProvider>
+			</UserThemeProvider>
+		</SlotFillProvider>
 	);
 }