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

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

@@ -9,19 +9,20 @@ 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';
 
 /**
  * Internal dependencies
  */
 import SavePanel from '../save-panel';
+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';
+import { UserThemeProvider } from '../user-theme-provider';
 
 const { useMatches, Outlet } = unlock( routePrivateApis );
-const { ThemeProvider } = unlock( themePrivateApis );
 
 /**
  * Root component for single page mode (no sidebar).
@@ -34,11 +35,15 @@ export default function RootSinglePage() {
 		| CanvasData
 		| null
 		| undefined;
+	const routeContentModule = ( currentMatch?.loaderData as any )
+		?.routeContentModule as string | undefined;
 	const isFullScreen = canvas && ! canvas.isPreview;
 
+	useRouteTitle();
+
 	return (
-		<ThemeProvider isRoot color={ { bg: '#f8f8f8', primary: '#3858e9' } }>
-			<ThemeProvider color={ { bg: '#1d2327', primary: '#3858e9' } }>
+		<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>
+			<UserThemeProvider color={ { bg: '#1d2327' } }>
 				<div
 					className={ clsx( 'boot-layout boot-layout--single-page', {
 						'has-canvas': !! canvas || canvas === null,
@@ -49,14 +54,23 @@ export default function RootSinglePage() {
 					<SavePanel />
 					<EditorSnackbars />
 					<div className="boot-layout__surfaces">
-						<ThemeProvider
-							color={ { bg: '#ffffff', primary: '#3858e9' } }
-						>
+						<UserThemeProvider color={ { bg: '#ffffff' } }>
 							<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
+										}
+									/>
+								</div>
+							) }
+						</UserThemeProvider>
 					</div>
 				</div>
-			</ThemeProvider>
-		</ThemeProvider>
+			</UserThemeProvider>
+		</UserThemeProvider>
 	);
 }

package/src/components/root/style.scss

@@ -1,4 +1,5 @@
 @use "@wordpress/base-styles/variables";
+@use "@wordpress/base-styles/mixins";
 
 .boot-layout {
 	height: 100%;
@@ -10,37 +11,155 @@
 	background: var(--wpds-color-bg-surface-neutral-weak, #f0f0f0);
 }
 
+.boot-layout__sidebar-backdrop {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 100002;
+	cursor: pointer;
+}
+
 .boot-layout__sidebar {
 	height: 100%;
 	flex-shrink: 0;
 	width: 240px;
 	position: relative;
 	overflow: hidden;
+
+	&.is-mobile {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		width: 300px;
+		max-width: 85vw;
+		background: var(--wpds-color-bg-surface-neutral-weak, #f0f0f0);
+		z-index: 100003;
+		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
+	}
+}
+
+.boot-layout__mobile-sidebar-drawer {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 3;
+	background: var(--wpds-color-bg-surface-neutral, #fff);
+	padding: variables.$grid-unit-20;
+	border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #ddd);
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.boot-layout__canvas.has-mobile-drawer {
+	position: relative;
+	padding-top: 65px;
 }
 
 .boot-layout__surfaces {
 	display: flex;
 	flex-grow: 1;
-	margin: variables.$grid-unit-10;
+	margin: 0;
 	gap: variables.$grid-unit-10;
+
+	@include mixins.break-medium {
+		margin: variables.$grid-unit-10;
+
+		.boot-layout--single-page & {
+			margin-top: 0;
+			margin-left: 0;
+		}
+	}
 }
 
 .boot-layout__stage,
-.boot-layout__inspector,
+.boot-layout__inspector {
+	flex: 1;
+	overflow-y: auto;
+	background: var(--wpds-color-bg-surface-neutral, #fff);
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	border: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #ddd);
+	position: relative;
+
+	// Mobile-first: surfaces take full screen with fixed positioning
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100vw;
+	height: 100vh;
+	border-radius: 0;
+	margin: 0;
+
+	// Desktop: restore original styles
+	@include mixins.break-medium {
+		position: static;
+		width: auto;
+		height: auto;
+		border-radius: 8px;
+		margin: 0;
+	}
+}
+
+.boot-layout__stage {
+	z-index: 2; // Highest surface priority on mobile
+
+	@include mixins.break-medium {
+		z-index: auto;
+	}
+}
+
+.boot-layout__inspector {
+	z-index: 3; // Medium surface priority on mobile
+
+	@include mixins.break-medium {
+		z-index: auto;
+	}
+}
+
 .boot-layout__canvas {
 	flex: 1;
 	overflow-y: auto;
 	background: var(--wpds-color-bg-surface-neutral, #fff);
 	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
-	border-radius: 8px;
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 	border: 1px solid var(--wpds-color-stroke-surface-neutral-weak, #ddd);
 	position: relative;
+
+	// Mobile-first: full screen with lowest priority
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: 1; // Lowest surface priority
+	border-radius: 0;
+	margin: 0;
+
+	// Desktop: restore original styles
+	@include mixins.break-medium {
+		position: static;
+		width: auto;
+		height: auto;
+		border-radius: 8px;
+		z-index: auto;
+	}
 }
 
 .boot-layout.has-canvas .boot-layout__stage,
 .boot-layout__inspector {
-	max-width: 400px;
+	@include mixins.break-medium {
+		max-width: 400px;
+	}
 }
 
 .boot-layout__canvas .interface-interface-skeleton {

package/src/components/site-hub/index.tsx

@@ -48,7 +48,12 @@ function SiteHub() {
 				href={ homeUrl ?? '/' }
 				className="boot-site-hub__title"
 			>
-				{ siteTitle && decodeEntities( siteTitle ) }
+				<div className="boot-site-hub__title-text">
+					{ siteTitle && decodeEntities( siteTitle ) }
+				</div>
+				<div className="boot-site-hub__url">
+					{ filterURLForDisplay( homeUrl ?? '' ) }
+				</div>
 			</ExternalLink>
 			<HStack className="boot-site-hub__actions">
 				<Button

package/src/components/site-hub/style.scss

@@ -17,17 +17,15 @@
 }
 
 .boot-site-hub__title {
-	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
-	font-size: variables.$font-size-medium;
-	font-weight: variables.$font-weight-medium;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	display: flex;
+	align-items: center;
 	text-decoration: none;
 
 	.components-external-link__contents {
 		text-decoration: none;
 		margin-inline-start: variables.$grid-unit-05;
+		overflow: hidden;
+		max-width: 140px;
 	}
 
 	// Show icon on hover
@@ -47,8 +45,25 @@
 
 	&:focus:not(:active) {
 		outline:
-			var(--wpds-border-width-focus, 2px) solid
+			var(--wpds-border-width-interactive-focus, 2px) solid
 			var(--wpds-color-stroke-focus-brand, #0073aa);
-		outline-offset: calc(-1 * var(--wpds-border-width-focus, 2px));
+		outline-offset: calc(-1 * var(--wpds-border-width-interactive-focus, 2px));
 	}
 }
+
+.boot-site-hub__title-text {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	font-size: variables.$font-size-medium;
+	font-weight: variables.$font-weight-medium;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.boot-site-hub__url {
+	color: var(--wpds-color-fg-content-neutral-weak, #757575);
+	font-size: variables.$font-size-small;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

package/src/components/site-icon/style.scss

@@ -15,5 +15,5 @@
 	height: variables.$grid-unit-40;
 	object-fit: cover;
 	aspect-ratio: 1 / 1;
-	border-radius: var(--wpds-border-radius-medium, 4px);
+	border-radius: var(--wpds-border-radius-surface-md, 4px);
 }

package/src/components/site-icon-link/style.scss

@@ -17,8 +17,8 @@ $header-height: variables.$header-height;
 
 	&:focus:not(:active) {
 		outline:
-			var(--wpds-border-width-focus, 2px) solid
+			var(--wpds-border-width-interactive-focus, 2px) solid
 			var(--wpds-color-stroke-focus-brand, #0073aa);
-		outline-offset: calc(-1 * var(--wpds-border-width-focus, 2px));
+		outline-offset: calc(-1 * var(--wpds-border-width-interactive-focus, 2px));
 	}
 }

package/src/components/user-theme-provider/index.tsx

@@ -0,0 +1,35 @@
+import {
+	type ThemeProvider as ThemeProviderType,
+	privateApis as themePrivateApis,
+} from '@wordpress/theme';
+import { unlock } from '../../lock-unlock';
+
+const ThemeProvider: typeof ThemeProviderType =
+	unlock( themePrivateApis ).ThemeProvider;
+
+const THEME_PRIMARY_COLORS = new Map< string, string >( [
+	[ 'light', '#0085ba' ],
+	[ 'modern', '#3858e9' ],
+	[ 'blue', '#096484' ],
+	[ 'coffee', '#46403c' ],
+	[ 'ectoplasm', '#523f6d' ],
+	[ 'midnight', '#e14d43' ],
+	[ 'ocean', '#627c83' ],
+	[ 'sunrise', '#dd823b' ],
+] );
+
+export function getAdminThemePrimaryColor(): string | undefined {
+	const theme =
+		document.body.className.match( /admin-color-([a-z]+)/ )?.[ 1 ];
+
+	return theme && THEME_PRIMARY_COLORS.get( theme );
+}
+
+export function UserThemeProvider( {
+	color,
+	...restProps
+}: React.ComponentProps< typeof ThemeProvider > ) {
+	const primary = getAdminThemePrimaryColor();
+
+	return <ThemeProvider { ...restProps } color={ { primary, ...color } } />;
+}

package/src/components/user-theme-provider/test/index.test.ts

@@ -0,0 +1,11 @@
+import { getAdminThemePrimaryColor } from '../index';
+
+describe( 'getAdminThemePrimaryColor', () => {
+	it( 'should return the primary color for the admin theme from the body class', () => {
+		document.body.className = 'foo admin-color-coffee bar';
+
+		const primaryColor = getAdminThemePrimaryColor();
+
+		expect( primaryColor ).toBe( '#46403c' );
+	} );
+} );

package/src/index.tsx

@@ -2,5 +2,6 @@
  * Internal dependencies
  */
 import './style.scss';
+import './view-transitions.scss';
 export { init, initSinglePage } from './components/app';
 export { store } from './store';

package/src/store/types.ts

@@ -63,6 +63,75 @@ 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.
@@ -85,13 +154,8 @@ export interface Route {
 
 	/**
 	 * 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/src/style.scss

@@ -1,46 +1,32 @@
 @use "@wordpress/theme/src/prebuilt/css/design-tokens.css" as *;
 @use "@wordpress/admin-ui/build-style/style.css" as *;
 @use "@wordpress/base-styles/mixins" as *;
-@use "@wordpress/base-styles/variables";
+@use "@wordpress/base-styles/variables" as *;
 
-// Reset wp-admin layout styles when loaded inside wp-admin.
 .boot-layout-container .boot-layout {
-	height: calc(100vh - #{variables.$admin-bar-height});
-}
-
-body:has(.boot-layout-container) {
-	background: #1d2327; // Same as WP-Admin sidebar
-	overflow: hidden;
-}
-
-#wpcontent {
-	padding-left: 0;
-}
-
-#wpbody-content {
-	padding-bottom: 0;
-}
-
-#wpfooter {
-	display: none;
-}
+	// On mobile the main content area has to scroll, otherwise you can invoke
+	// the overscroll bounce on the non-scrolling container, for a bad experience.
+	@include break-small {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		min-height: calc(100vh - #{$admin-bar-height-big});
+	}
 
-body:has(.boot-layout.has-full-canvas) {
+	// The WP header height changes at this breakpoint.
 	@include break-medium {
-		// Reset the html.wp-topbar padding.
-		// Because this uses negative margins, we have to compensate for the height.
-		margin-top: - variables.$admin-bar-height;
-		height: calc(100% + #{ variables.$admin-bar-height });
+		min-height: calc(100vh - #{$admin-bar-height});
 
-		#adminmenumain,
-		#wpadminbar {
-			display: none;
+		body:has(.boot-layout.has-full-canvas) & {
+			min-height: 100vh;
 		}
+	}
 
-		#wpcontent,
-		#wpfooter {
-			margin-left: 0;
-		}
+	img {
+		max-width: 100%;
+		height: auto;
 	}
 }