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

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,154 @@
 	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;
+		}
+	}
 }
 
 .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/style.scss

@@ -47,8 +47,8 @@
 
 	&: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/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/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

@@ -11,6 +11,7 @@
 body:has(.boot-layout-container) {
 	background: #1d2327; // Same as WP-Admin sidebar
 	overflow: hidden;
+	@include wp-admin-reset( ".boot-layout-container" );
 }
 
 #wpcontent {

package/tsconfig.json

@@ -5,6 +5,7 @@
 		"checkJs": false
 	},
 	"references": [
+		{ "path": "../a11y" },
 		{ "path": "../admin-ui" },
 		{ "path": "../components" },
 		{ "path": "../compose" },