@wordpress/boot 0.15.0 → 0.15.1

package/build-style/style.css

@@ -82,7 +82,7 @@
   /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
   --wpds-color-bg-interactive-error-weak-active: #f6e6e3;
   /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
-  --wpds-color-bg-track-neutral-weak: #e4e4e4;
+  --wpds-color-bg-track-neutral-weak: #f0f0f0;
   /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
   --wpds-color-bg-track-neutral: #dbdbdb;
   /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */
@@ -154,27 +154,27 @@
   /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
   --wpds-color-stroke-surface-neutral: #dbdbdb;
   /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
-  --wpds-color-stroke-surface-neutral-weak: #e4e4e4;
+  --wpds-color-stroke-surface-neutral-weak: #f0f0f0;
   /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
   --wpds-color-stroke-surface-neutral-strong: #8d8d8d;
   /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
-  --wpds-color-stroke-surface-brand: #a3b1d4;
+  --wpds-color-stroke-surface-brand: #b0bbd6;
   /* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */
   --wpds-color-stroke-surface-brand-strong: #3858e9;
   /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
-  --wpds-color-stroke-surface-success: #8ac894;
+  --wpds-color-stroke-surface-success: #94d29e;
   /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
   --wpds-color-stroke-surface-success-strong: #008030;
   /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
-  --wpds-color-stroke-surface-info: #9fbcdc;
+  --wpds-color-stroke-surface-info: #a9c6e7;
   /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
   --wpds-color-stroke-surface-info-strong: #006bd7;
   /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
-  --wpds-color-stroke-surface-warning: #d0b481;
+  --wpds-color-stroke-surface-warning: #e1bc7c;
   /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
   --wpds-color-stroke-surface-warning-strong: #926300;
   /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
-  --wpds-color-stroke-surface-error: #daa39b;
+  --wpds-color-stroke-surface-error: #dab1aa;
   /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
   --wpds-color-stroke-surface-error-strong: #cc1818;
   /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
@@ -229,6 +229,22 @@
   --wpds-dimension-gap-2xl: 32px;
   /* 3x extra large gap */
   --wpds-dimension-gap-3xl: 40px;
+  /* Notification indicators */
+  --wpds-dimension-size-5xs: 4px;
+  /* Visual size for small interactive elements like resize handles */
+  --wpds-dimension-size-4xs: 8px;
+  /* Small markers */
+  --wpds-dimension-size-3xs: 12px;
+  /* For small controls like checkboxes and radios, or small decorative icons */
+  --wpds-dimension-size-2xs: 16px;
+  /* For medium sized icons */
+  --wpds-dimension-size-xs: 20px;
+  /* For icons and small buttons */
+  --wpds-dimension-size-sm: 24px;
+  /* For medium-sized buttons and inputs */
+  --wpds-dimension-size-md: 32px;
+  /* Default size for buttons and inputs */
+  --wpds-dimension-size-lg: 40px;
   /* Extra small surface width */
   --wpds-dimension-surface-width-xs: 240px;
   /* Small surface width */
@@ -309,113 +325,6 @@
   --wpds-typography-font-weight-medium: 499;
 }
 
-[data-wpds-theme-provider-id][data-wpds-density=compact] {
-  /* Extra small padding */
-  --wpds-dimension-padding-xs: 4px;
-  /* Small padding */
-  --wpds-dimension-padding-sm: 4px;
-  /* Medium padding */
-  --wpds-dimension-padding-md: 8px;
-  /* Large padding */
-  --wpds-dimension-padding-lg: 12px;
-  /* Extra large padding */
-  --wpds-dimension-padding-xl: 16px;
-  /* 2x extra large padding */
-  --wpds-dimension-padding-2xl: 20px;
-  /* 3x extra large padding */
-  --wpds-dimension-padding-3xl: 24px;
-  /* Extra small gap */
-  --wpds-dimension-gap-xs: 4px;
-  /* Small gap */
-  --wpds-dimension-gap-sm: 4px;
-  /* Medium gap */
-  --wpds-dimension-gap-md: 8px;
-  /* Large gap */
-  --wpds-dimension-gap-lg: 12px;
-  /* Extra large gap */
-  --wpds-dimension-gap-xl: 20px;
-  /* 2x extra large gap */
-  --wpds-dimension-gap-2xl: 24px;
-  /* 3x extra large gap */
-  --wpds-dimension-gap-3xl: 32px;
-}
-
-[data-wpds-theme-provider-id][data-wpds-density=comfortable] {
-  /* Extra small padding */
-  --wpds-dimension-padding-xs: 8px;
-  /* Small padding */
-  --wpds-dimension-padding-sm: 12px;
-  /* Medium padding */
-  --wpds-dimension-padding-md: 16px;
-  /* Large padding */
-  --wpds-dimension-padding-lg: 20px;
-  /* Extra large padding */
-  --wpds-dimension-padding-xl: 24px;
-  /* 2x extra large padding */
-  --wpds-dimension-padding-2xl: 32px;
-  /* 3x extra large padding */
-  --wpds-dimension-padding-3xl: 40px;
-  /* Extra small gap */
-  --wpds-dimension-gap-xs: 8px;
-  /* Small gap */
-  --wpds-dimension-gap-sm: 12px;
-  /* Medium gap */
-  --wpds-dimension-gap-md: 16px;
-  /* Large gap */
-  --wpds-dimension-gap-lg: 20px;
-  /* Extra large gap */
-  --wpds-dimension-gap-xl: 32px;
-  /* 2x extra large gap */
-  --wpds-dimension-gap-2xl: 40px;
-  /* 3x extra large gap */
-  --wpds-dimension-gap-3xl: 48px;
-}
-
-[data-wpds-theme-provider-id][data-wpds-density=default] {
-  /* Base dimension unit */
-  --wpds-dimension-base: 4px;
-  /* Extra small padding */
-  --wpds-dimension-padding-xs: 4px;
-  /* Small padding */
-  --wpds-dimension-padding-sm: 8px;
-  /* Medium padding */
-  --wpds-dimension-padding-md: 12px;
-  /* Large padding */
-  --wpds-dimension-padding-lg: 16px;
-  /* Extra large padding */
-  --wpds-dimension-padding-xl: 20px;
-  /* 2x extra large padding */
-  --wpds-dimension-padding-2xl: 24px;
-  /* 3x extra large padding */
-  --wpds-dimension-padding-3xl: 32px;
-  /* Extra small gap */
-  --wpds-dimension-gap-xs: 4px;
-  /* Small gap */
-  --wpds-dimension-gap-sm: 8px;
-  /* Medium gap */
-  --wpds-dimension-gap-md: 12px;
-  /* Large gap */
-  --wpds-dimension-gap-lg: 16px;
-  /* Extra large gap */
-  --wpds-dimension-gap-xl: 24px;
-  /* 2x extra large gap */
-  --wpds-dimension-gap-2xl: 32px;
-  /* 3x extra large gap */
-  --wpds-dimension-gap-3xl: 40px;
-  /* Extra small surface width */
-  --wpds-dimension-surface-width-xs: 240px;
-  /* Small surface width */
-  --wpds-dimension-surface-width-sm: 320px;
-  /* Medium surface width */
-  --wpds-dimension-surface-width-md: 400px;
-  /* Large surface width */
-  --wpds-dimension-surface-width-lg: 560px;
-  /* Extra large surface width */
-  --wpds-dimension-surface-width-xl: 720px;
-  /* 2x extra large surface width */
-  --wpds-dimension-surface-width-2xl: 960px;
-}
-
 @media (min-resolution: 192dpi) {
   :root {
     /* Border width for focus ring */

package/build-style/view-transitions-rtl.css

@@ -83,14 +83,17 @@
   border-radius: 8px;
   width: 100%;
   height: 100%;
-  object-fit: none;
-  object-position: right top;
+  -o-object-fit: none;
+     object-fit: none;
+  -o-object-position: right top;
+     object-position: right top;
   overflow: hidden;
 }
 
 ::view-transition-new(boot--canvas),
 ::view-transition-old(boot--canvas) {
-  object-position: center top;
+  -o-object-position: center top;
+     object-position: center top;
 }
 
 ::view-transition-old(boot-safari--inspector):only-child,

package/build-style/view-transitions.css

@@ -83,14 +83,17 @@
   border-radius: 8px;
   width: 100%;
   height: 100%;
-  object-fit: none;
-  object-position: left top;
+  -o-object-fit: none;
+     object-fit: none;
+  -o-object-position: left top;
+     object-position: left top;
   overflow: hidden;
 }
 
 ::view-transition-new(boot--canvas),
 ::view-transition-old(boot--canvas) {
-  object-position: center top;
+  -o-object-position: center top;
+     object-position: center top;
 }
 
 ::view-transition-old(boot-safari--inspector):only-child,

package/build-types/components/root/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/root/index.tsx"],"names":[],"mappings":"AA+BA,OAAO,cAAc,CAAC;AAKtB,MAAM,CAAC,OAAO,UAAU,IAAI,gCAuJ3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/root/index.tsx"],"names":[],"mappings":"AAkCA,OAAO,cAAc,CAAC;AAKtB,MAAM,CAAC,OAAO,UAAU,IAAI,gCAyK3B"}

package/build-types/components/root/single-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"single-page.d.ts","sourceRoot":"","sources":["../../../src/components/root/single-page.tsx"],"names":[],"mappings":"AAmBA,OAAO,cAAc,CAAC;AAMtB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,gCAiDrC"}
+{"version":3,"file":"single-page.d.ts","sourceRoot":"","sources":["../../../src/components/root/single-page.tsx"],"names":[],"mappings":"AAsBA,OAAO,cAAc,CAAC;AAMtB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,gCA2DrC"}

package/build-types/components/save-button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/save-button/index.tsx"],"names":[],"mappings":"AAYA;;GAEG;AACH,OAAO,cAAc,CAAC;AAGtB,MAAM,CAAC,OAAO,UAAU,UAAU,uCAsGjC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/save-button/index.tsx"],"names":[],"mappings":"AAcA;;GAEG;AACH,OAAO,cAAc,CAAC;AAGtB,MAAM,CAAC,OAAO,UAAU,UAAU,uCA+GjC"}

package/build-types/components/site-icon-link/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/site-icon-link/index.tsx"],"names":[],"mappings":"AAWA,OAAO,cAAc,CAAC;AAItB,iBAAS,YAAY,CAAE,EACtB,EAAE,EACF,YAAY,EACZ,GAAG,KAAK,EACR,EAAE;IACF,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,+BAuBA;eAEc,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/site-icon-link/index.tsx"],"names":[],"mappings":"AAaA,OAAO,cAAc,CAAC;AAItB,iBAAS,YAAY,CAAE,EACtB,EAAE,EACF,YAAY,EACZ,GAAG,KAAK,EACR,EAAE;IACF,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,+BA8BA;eAEc,YAAY"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/boot",
-	"version": "0.15.0",
+	"version": "0.15.1",
 	"description": "Minimal boot package for WordPress admin pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,32 +37,33 @@
 		},
 		"./package.json": "./package.json"
 	},
-	"react-native": "src/index",
 	"wpScriptModuleExports": "./build-module/index.mjs",
 	"types": "build-types",
 	"dependencies": {
-		"@wordpress/a11y": "^4.48.0",
-		"@wordpress/admin-ui": "^2.3.0",
-		"@wordpress/base-styles": "^9.1.0",
-		"@wordpress/commands": "^1.48.0",
-		"@wordpress/components": "^35.0.0",
-		"@wordpress/compose": "^8.1.0",
-		"@wordpress/core-data": "^7.48.0",
-		"@wordpress/data": "^10.48.0",
-		"@wordpress/editor": "^14.48.0",
-		"@wordpress/element": "^8.0.0",
-		"@wordpress/html-entities": "^4.48.0",
-		"@wordpress/i18n": "^6.21.0",
-		"@wordpress/icons": "^13.3.0",
-		"@wordpress/keyboard-shortcuts": "^5.48.0",
-		"@wordpress/keycodes": "^4.48.0",
-		"@wordpress/lazy-editor": "^1.14.0",
-		"@wordpress/notices": "^5.48.0",
-		"@wordpress/primitives": "^4.48.0",
-		"@wordpress/private-apis": "^1.48.0",
-		"@wordpress/route": "^0.14.0",
-		"@wordpress/theme": "^0.15.0",
-		"@wordpress/url": "^4.48.0",
+		"@types/react": "^18.3.27",
+		"@wordpress/a11y": "^4.48.1",
+		"@wordpress/admin-ui": "^2.3.1",
+		"@wordpress/base-styles": "^10.0.1",
+		"@wordpress/commands": "^1.48.1",
+		"@wordpress/components": "^35.0.1",
+		"@wordpress/compose": "^8.1.1",
+		"@wordpress/core-data": "^7.48.1",
+		"@wordpress/data": "^10.48.1",
+		"@wordpress/editor": "^14.48.1",
+		"@wordpress/element": "^8.0.1",
+		"@wordpress/html-entities": "^4.48.1",
+		"@wordpress/i18n": "^6.21.1",
+		"@wordpress/icons": "^14.0.1",
+		"@wordpress/keyboard-shortcuts": "^5.48.1",
+		"@wordpress/keycodes": "^4.48.1",
+		"@wordpress/lazy-editor": "^1.14.1",
+		"@wordpress/notices": "^5.48.1",
+		"@wordpress/primitives": "^4.48.1",
+		"@wordpress/private-apis": "^1.48.1",
+		"@wordpress/route": "^0.14.1",
+		"@wordpress/theme": "^0.15.1",
+		"@wordpress/ui": "^0.15.1",
+		"@wordpress/url": "^4.48.1",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -72,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
 }

package/src/components/navigation/index.tsx

@@ -72,7 +72,7 @@ function Navigation() {
 			navigationKey={ navigationKey }
 			onNavigate={ handleNavigate }
 			content={
-				<>
+				<div role="list">
 					{ items.map( ( item: MenuItem ) => {
 						if ( item.parent_type === 'dropdown' ) {
 							return (
@@ -117,7 +117,7 @@ function Navigation() {
 							</NavigationItem>
 						);
 					} ) }
-				</>
+				</div>
 			}
 		/>
 	);

package/src/components/root/index.tsx

@@ -16,9 +16,12 @@ import {
 	SlotFillProvider,
 } from '@wordpress/components';
 import { menu } from '@wordpress/icons';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Page } from '@wordpress/admin-ui';
+import { Page, getAdminThemeColors } from '@wordpress/admin-ui';
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip } from '@wordpress/ui';
+import { privateApis as themePrivateApis } from '@wordpress/theme';
 
 /**
  * Internal dependencies
@@ -30,9 +33,9 @@ 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 { useLocation, useMatches, Outlet } = unlock( routePrivateApis );
+const { ThemeProvider } = unlock( themePrivateApis );
 
 export default function Root() {
 	const matches = useMatches();
@@ -57,132 +60,150 @@ export default function Root() {
 		setIsMobileSidebarOpen( false );
 	}, [ location.pathname, isMobileViewport ] );
 
+	const themeColors = useMemo( getAdminThemeColors, [] );
+
 	return (
 		<SlotFillProvider>
-			<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>
-				<UserThemeProvider color={ { bg: '#1d2327' } }>
-					<div
-						className={ clsx( 'boot-layout', {
-							'has-canvas': !! canvas || canvas === null,
-							'has-full-canvas': isFullScreen,
-						} ) }
-					>
-						<SavePanel />
-						<SnackbarNotices className="boot-notices__snackbar" />
-						{ 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"
+			<Tooltip.Provider>
+				<ThemeProvider
+					isRoot
+					color={ { ...themeColors, background: '#f8f8f8' } }
+				>
+					<ThemeProvider color={ themeColors }>
+						<div
+							className={ clsx( 'boot-layout', {
+								'has-canvas': !! canvas || canvas === null,
+								'has-full-canvas': isFullScreen,
+							} ) }
+						>
+							<SavePanel />
+							<SnackbarNotices className="boot-notices__snackbar" />
+							{ isMobileViewport && (
+								<Page.SidebarToggleFill>
+									<Button
+										icon={ menu }
 										onClick={ () =>
-											setIsMobileSidebarOpen( false )
+											setIsMobileSidebarOpen( true )
 										}
-										onKeyDown={ ( event ) => {
-											if ( event.key === 'Escape' ) {
-												setIsMobileSidebarOpen( false );
-											}
-										} }
-										role="button"
-										tabIndex={ -1 }
-										aria-label={ __(
-											'Close navigation panel'
-										) }
+										label={ __( 'Open navigation panel' ) }
+										size="compact"
 									/>
-								) }
-						</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,
+								</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 )
 											}
-										) }
-									>
-										{ canvas?.isPreview &&
-											isMobileViewport && (
-												<div className="boot-layout__mobile-sidebar-drawer">
-													<Button
-														icon={ menu }
-														onClick={ () =>
-															setIsMobileSidebarOpen(
-																true
-															)
-														}
-														label={ __(
-															'Open navigation panel'
-														) }
-														size="compact"
-													/>
-												</div>
+											onKeyDown={ ( event ) => {
+												if ( event.key === 'Escape' ) {
+													setIsMobileSidebarOpen(
+														false
+													);
+												}
+											} }
+											role="button"
+											tabIndex={ -1 }
+											aria-label={ __(
+												'Close navigation panel'
 											) }
-										<CanvasRenderer
-											canvas={ canvas }
-											routeContentModule={
-												routeContentModule
-											}
 										/>
-									</div>
-								) }
-							</UserThemeProvider>
+									) }
+							</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={ {
+										...themeColors,
+										background: '#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>
+									) }
+								</ThemeProvider>
+							</div>
 						</div>
-					</div>
-				</UserThemeProvider>
-			</UserThemeProvider>
+					</ThemeProvider>
+				</ThemeProvider>
+			</Tooltip.Provider>
 		</SlotFillProvider>
 	);
 }