@wordpress/boot 0.15.0 → 0.15.2-next.v.202606191442.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/boot",
-	"version": "0.15.0",
+	"version": "0.15.2-next.v.202606191442.0+17fe7db8a",
 	"description": "Minimal boot package for WordPress admin pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,40 +37,46 @@
 		},
 		"./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",
+		"@wordpress/a11y": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/admin-ui": "^2.3.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/base-styles": "^10.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/commands": "^1.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/components": "^35.1.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/compose": "^8.1.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/core-data": "^7.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/data": "^10.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/editor": "^14.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/element": "^8.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/html-entities": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/i18n": "^6.21.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/icons": "^14.0.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/keyboard-shortcuts": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/keycodes": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/lazy-editor": "^1.14.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/notices": "^5.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/primitives": "^4.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/private-apis": "^1.48.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/route": "^0.14.2-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/theme": "^0.16.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/ui": "^0.16.1-next.v.202606191442.0+17fe7db8a",
+		"@wordpress/url": "^4.48.2-next.v.202606191442.0+17fe7db8a",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
+		"@types/react": "^18.3.27",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
 	},
+	"peerDependenciesMeta": {
+		"@types/react": {
+			"optional": true
+		}
+	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
+	"gitHead": "1b6a19222df5a88f161880b5789efb3171d8f425"
 }

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

@@ -21,7 +21,7 @@
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	background: var(--wpds-color-bg-surface-neutral-weak);
+	background: var(--wpds-color-background-surface-neutral-weak);
 	text-decoration: none;
 	padding: 0;
 	border-radius: 0;
@@ -33,7 +33,7 @@
 	&:focus:not(:active) {
 		outline:
 			var(--wpds-border-width-focus) solid
-			var(--wpds-color-stroke-focus-brand);
+			var(--wpds-color-stroke-focus);
 		outline-offset: calc(-1 * var(--wpds-border-width-focus));
 	}
 }

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/navigation/navigation-item/style.scss

@@ -2,7 +2,7 @@
 @use "@wordpress/base-styles/mixins";
 
 .boot-navigation-item.components-item {
-	color: var(--wpds-color-fg-interactive-neutral);
+	color: var(--wpds-color-foreground-interactive-neutral);
 	padding-inline: variables.$grid-unit-05;
 	padding-block: 0;
 	margin-inline: variables.$grid-unit-15;
@@ -25,7 +25,7 @@
 	&:hover,
 	&:focus,
 	&[aria-current="true"] {
-		color: var(--wpds-color-fg-interactive-brand-active);
+		color: var(--wpds-color-foreground-interactive-brand-active);
 	}
 
 	&.active {
@@ -37,7 +37,7 @@
 	}
 
 	&[aria-current="true"] {
-		color: var(--wpds-color-fg-interactive-brand-active);
+		color: var(--wpds-color-foreground-interactive-brand-active);
 		font-weight: variables.$font-weight-medium;
 	}
 

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

@@ -6,7 +6,7 @@
 }
 
 .boot-navigation-screen .components-text {
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 }
 
 .boot-navigation-screen__title-icon {
@@ -24,7 +24,7 @@
 	&#{&},
 	&#{&} .boot-navigation-screen__title {
 		line-height: variables.$font-line-height-x-large;
-		color: var(--wpds-color-fg-content-neutral);
+		color: var(--wpds-color-foreground-content-neutral);
 	}
 }
 

package/src/components/root/index.tsx

@@ -16,9 +16,11 @@ 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';
+import { Tooltip } from '@wordpress/ui';
+import { privateApis as themePrivateApis } from '@wordpress/theme';
 
 /**
  * Internal dependencies
@@ -30,9 +32,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 +59,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>
 	);
 }

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

@@ -9,6 +9,9 @@ import clsx from 'clsx';
 import { privateApis as routePrivateApis } from '@wordpress/route';
 import { SnackbarNotices } from '@wordpress/notices';
 import { SlotFillProvider } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import { getAdminThemeColors } from '@wordpress/admin-ui';
+import { privateApis as themePrivateApis } from '@wordpress/theme';
 
 /**
  * Internal dependencies
@@ -19,9 +22,9 @@ 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).
@@ -40,10 +43,15 @@ export default function RootSinglePage() {
 
 	useRouteTitle();
 
+	const themeColors = useMemo( getAdminThemeColors, [] );
+
 	return (
 		<SlotFillProvider>
-			<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>
-				<UserThemeProvider color={ { bg: '#1d2327' } }>
+			<ThemeProvider
+				isRoot
+				color={ { ...themeColors, background: '#f8f8f8' } }
+			>
+				<ThemeProvider color={ themeColors }>
 					<div
 						className={ clsx(
 							'boot-layout boot-layout--single-page',
@@ -56,7 +64,12 @@ export default function RootSinglePage() {
 						<SavePanel />
 						<SnackbarNotices className="boot-notices__snackbar" />
 						<div className="boot-layout__surfaces">
-							<UserThemeProvider color={ { bg: '#ffffff' } }>
+							<ThemeProvider
+								color={ {
+									...themeColors,
+									background: '#ffffff',
+								} }
+							>
 								<Outlet />
 								{ /* Render Canvas in Root to prevent remounting on route changes */ }
 								{ ( canvas || canvas === null ) && (
@@ -69,11 +82,11 @@ export default function RootSinglePage() {
 										/>
 									</div>
 								) }
-							</UserThemeProvider>
+							</ThemeProvider>
 						</div>
 					</div>
-				</UserThemeProvider>
-			</UserThemeProvider>
+				</ThemeProvider>
+			</ThemeProvider>
 		</SlotFillProvider>
 	);
 }

package/src/components/root/style.scss

@@ -6,9 +6,9 @@
 	width: 100%;
 	display: flex;
 	flex-direction: row;
-	color: var(--wpds-color-fg-content-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	isolation: isolate;
-	background: var(--wpds-color-bg-surface-neutral-weak);
+	background: var(--wpds-color-background-surface-neutral-weak);
 }
 
 .boot-layout__sidebar-backdrop {
@@ -36,7 +36,7 @@
 		inset-inline-start: 0;
 		width: 300px;
 		max-width: 85vw;
-		background: var(--wpds-color-bg-surface-neutral-weak);
+		background: var(--wpds-color-background-surface-neutral-weak);
 		z-index: 100003;
 		box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
 	}
@@ -53,7 +53,7 @@
 	}
 
 	z-index: 3;
-	background: var(--wpds-color-bg-surface-neutral);
+	background: var(--wpds-color-background-surface-neutral);
 	padding: variables.$grid-unit-20;
 	border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
 	display: flex;
@@ -86,8 +86,8 @@
 .boot-layout__inspector {
 	flex: 1;
 	overflow-y: auto;
-	background: var(--wpds-color-bg-surface-neutral);
-	color: var(--wpds-color-fg-content-neutral);
+	background: var(--wpds-color-background-surface-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	position: relative;
 
 	// Mobile-first: surfaces take full screen with fixed positioning
@@ -111,7 +111,7 @@
 		position: static;
 		width: auto;
 		height: auto;
-		border-radius: 8px;
+		border-radius: var(--wpds-border-radius-xl);
 		margin: 0;
 
 		.boot-layout--single-page & {
@@ -139,8 +139,8 @@
 .boot-layout__canvas {
 	flex: 1;
 	overflow-y: auto;
-	background: var(--wpds-color-bg-surface-neutral);
-	color: var(--wpds-color-fg-content-neutral);
+	background: var(--wpds-color-background-surface-neutral);
+	color: var(--wpds-color-foreground-content-neutral);
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 	border: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
 	position: relative;
@@ -167,7 +167,7 @@
 		position: static;
 		width: auto;
 		height: auto;
-		border-radius: 8px;
+		border-radius: var(--wpds-border-radius-xl);
 		z-index: auto;
 
 		.boot-layout--single-page & {

package/src/components/save-button/index.tsx

@@ -8,7 +8,8 @@ import { store as coreStore } from '@wordpress/core-data';
 import { displayShortcut, rawShortcut } from '@wordpress/keycodes';
 import { check } from '@wordpress/icons';
 import { EntitiesSavedStates } from '@wordpress/editor';
-import { Button, Modal, Tooltip as WCTooltip } from '@wordpress/components';
+import { Button, Modal } from '@wordpress/components';
+import { Tooltip } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -82,28 +83,37 @@ export default function SaveButton() {
 		);
 	};
 	const label = getLabel();
+	const shortcut = displayShortcut.primary( 's' );
 
 	return (
 		<>
-			<WCTooltip
-				text={ hasChanges ? label : undefined }
-				shortcut={ displayShortcut.primary( 's' ) }
-			>
-				<Button
-					variant="primary"
-					size="compact"
-					onClick={ () => setIsSaveViewOpened( true ) }
-					onBlur={ hideSavedState }
-					disabled={ disabled }
-					accessibleWhenDisabled
-					isBusy={ isSaving }
-					aria-keyshortcuts={ rawShortcut.primary( 's' ) }
-					className="boot-save-button"
-					icon={ isInSavedState ? check : undefined }
-				>
-					{ label }
-				</Button>
-			</WCTooltip>
+			<Tooltip.Root>
+				<Tooltip.Trigger
+					render={
+						<Button
+							variant="primary"
+							size="compact"
+							onClick={ () => setIsSaveViewOpened( true ) }
+							onBlur={ hideSavedState }
+							disabled={ disabled }
+							accessibleWhenDisabled
+							isBusy={ isSaving }
+							aria-keyshortcuts={ rawShortcut.primary( 's' ) }
+							className="boot-save-button"
+							icon={ isInSavedState ? check : undefined }
+						>
+							{ label }
+						</Button>
+					}
+				/>
+				<Tooltip.Popup>
+					{ hasChanges && <span>{ label }</span> }
+					{ /* TODO: replace with a future `@wordpress/ui` `Shortcut` primitive once available */ }
+					<span className="boot-save-button__shortcut">
+						{ shortcut }
+					</span>
+				</Tooltip.Popup>
+			</Tooltip.Root>
 			{ isSaveViewOpen && (
 				<Modal
 					title={ __( 'Review changes' ) }

package/src/components/save-button/style.scss

@@ -1,3 +1,9 @@
+@use "@wordpress/base-styles/variables" as *;
+
 .boot-save-button {
 	width: 100%;
 }
+
+.boot-save-button__shortcut:not(:first-child) {
+	margin-left: $grid-unit-10;
+}