@wordpress/boot 0.14.1 → 0.15.1

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/save-button/index.tsx

@@ -8,7 +8,9 @@ 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';
+// 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';
 
 /**
  * Internal dependencies
@@ -82,28 +84,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;
+}

package/src/components/site-icon-link/index.tsx

@@ -2,12 +2,14 @@
  * WordPress dependencies
  */
 import { Link, privateApis as routePrivateApis } from '@wordpress/route';
-import { Tooltip as WCTooltip } from '@wordpress/components';
+// 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';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+
 import SiteIcon from '../site-icon';
 import './style.scss';
 
@@ -26,23 +28,30 @@ function SiteIconLink( {
 	const canGoBack = useCanGoBack();
 
 	return (
-		<WCTooltip text={ props[ 'aria-label' ] } placement="right">
-			<Link
-				to={ to }
-				aria-label={ props[ 'aria-label' ] }
-				className="boot-site-icon-link"
-				onClick={ ( event ) => {
-					// If possible, restore the previous page with
-					// filters etc.
-					if ( canGoBack && isBackButton ) {
-						event.preventDefault();
-						router.history.back();
-					}
-				} }
-			>
-				<SiteIcon />
-			</Link>
-		</WCTooltip>
+		<Tooltip.Root>
+			<Tooltip.Trigger
+				render={
+					<Link
+						to={ to }
+						aria-label={ props[ 'aria-label' ] }
+						className="boot-site-icon-link"
+						onClick={ ( event ) => {
+							// If possible, restore the previous page with
+							// filters etc.
+							if ( canGoBack && isBackButton ) {
+								event.preventDefault();
+								router.history.back();
+							}
+						} }
+					>
+						<SiteIcon />
+					</Link>
+				}
+			/>
+			<Tooltip.Popup positioner={ <Tooltip.Positioner side="right" /> }>
+				{ props[ 'aria-label' ] }
+			</Tooltip.Popup>
+		</Tooltip.Root>
 	);
 }
 

package/build-module/components/user-theme-provider/index.mjs

@@ -1,33 +0,0 @@
-// packages/boot/src/components/user-theme-provider/index.tsx
-import {
-  privateApis as themePrivateApis
-} from "@wordpress/theme";
-import { unlock } from "../../lock-unlock.mjs";
-import { jsx } from "react/jsx-runtime";
-var ThemeProvider = unlock(themePrivateApis).ThemeProvider;
-var THEME_PRIMARY_COLORS = /* @__PURE__ */ new Map([
-  ["light", "#0085ba"],
-  ["modern", "#3858e9"],
-  ["blue", "#096484"],
-  ["coffee", "#46403c"],
-  ["ectoplasm", "#523f6d"],
-  ["midnight", "#e14d43"],
-  ["ocean", "#627c83"],
-  ["sunrise", "#dd823b"]
-]);
-function getAdminThemePrimaryColor() {
-  const theme = document.body.className.match(/admin-color-([a-z]+)/)?.[1];
-  return theme && THEME_PRIMARY_COLORS.get(theme);
-}
-function UserThemeProvider({
-  color,
-  ...restProps
-}) {
-  const primary = getAdminThemePrimaryColor();
-  return /* @__PURE__ */ jsx(ThemeProvider, { ...restProps, color: { primary, ...color } });
-}
-export {
-  UserThemeProvider,
-  getAdminThemePrimaryColor
-};
-//# sourceMappingURL=index.mjs.map

package/build-module/components/user-theme-provider/index.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/user-theme-provider/index.tsx"],
-  "sourcesContent": ["import {\n\ttype ThemeProvider as ThemeProviderType,\n\tprivateApis as themePrivateApis,\n} from '@wordpress/theme';\nimport { unlock } from '../../lock-unlock';\n\nconst ThemeProvider: typeof ThemeProviderType =\n\tunlock( themePrivateApis ).ThemeProvider;\n\nconst THEME_PRIMARY_COLORS = new Map< string, string >( [\n\t[ 'light', '#0085ba' ],\n\t[ 'modern', '#3858e9' ],\n\t[ 'blue', '#096484' ],\n\t[ 'coffee', '#46403c' ],\n\t[ 'ectoplasm', '#523f6d' ],\n\t[ 'midnight', '#e14d43' ],\n\t[ 'ocean', '#627c83' ],\n\t[ 'sunrise', '#dd823b' ],\n] );\n\nexport function getAdminThemePrimaryColor(): string | undefined {\n\tconst theme =\n\t\tdocument.body.className.match( /admin-color-([a-z]+)/ )?.[ 1 ];\n\n\treturn theme && THEME_PRIMARY_COLORS.get( theme );\n}\n\nexport function UserThemeProvider( {\n\tcolor,\n\t...restProps\n}: React.ComponentProps< typeof ThemeProvider > ) {\n\tconst primary = getAdminThemePrimaryColor();\n\n\treturn <ThemeProvider { ...restProps } color={ { primary, ...color } } />;\n}\n"],
-  "mappings": ";AAAA;AAAA,EAEC,eAAe;AAAA,OACT;AACP,SAAS,cAAc;AA6Bf;AA3BR,IAAM,gBACL,OAAQ,gBAAiB,EAAE;AAE5B,IAAM,uBAAuB,oBAAI,IAAuB;AAAA,EACvD,CAAE,SAAS,SAAU;AAAA,EACrB,CAAE,UAAU,SAAU;AAAA,EACtB,CAAE,QAAQ,SAAU;AAAA,EACpB,CAAE,UAAU,SAAU;AAAA,EACtB,CAAE,aAAa,SAAU;AAAA,EACzB,CAAE,YAAY,SAAU;AAAA,EACxB,CAAE,SAAS,SAAU;AAAA,EACrB,CAAE,WAAW,SAAU;AACxB,CAAE;AAEK,SAAS,4BAAgD;AAC/D,QAAM,QACL,SAAS,KAAK,UAAU,MAAO,sBAAuB,IAAK,CAAE;AAE9D,SAAO,SAAS,qBAAqB,IAAK,KAAM;AACjD;AAEO,SAAS,kBAAmB;AAAA,EAClC;AAAA,EACA,GAAG;AACJ,GAAkD;AACjD,QAAM,UAAU,0BAA0B;AAE1C,SAAO,oBAAC,iBAAgB,GAAG,WAAY,OAAQ,EAAE,SAAS,GAAG,MAAM,GAAI;AACxE;",
-  "names": []
-}

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

@@ -1,35 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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' );
-	} );
-} );