@wordpress/boot 0.2.0 → 0.2.1-next.dc3f6d3c1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/boot",
-	"version": "0.2.0",
+	"version": "0.2.1-next.dc3f6d3c1.0",
 	"description": "Minimal boot package for WordPress admin pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,26 +34,25 @@
 	"wpScriptModuleExports": "./build-module/index.js",
 	"types": "build-types",
 	"dependencies": {
-		"@tanstack/history": "^1.133.28",
-		"@tanstack/react-router": "^1.120.5",
-		"@wordpress/admin-ui": "^1.3.0",
-		"@wordpress/commands": "^1.35.0",
-		"@wordpress/components": "^30.8.0",
-		"@wordpress/compose": "^7.35.0",
-		"@wordpress/core-data": "^7.35.0",
-		"@wordpress/data": "^10.35.0",
-		"@wordpress/editor": "^14.35.0",
-		"@wordpress/element": "^6.35.0",
-		"@wordpress/html-entities": "^4.35.0",
-		"@wordpress/i18n": "^6.8.0",
-		"@wordpress/icons": "^11.2.0",
-		"@wordpress/keyboard-shortcuts": "^5.35.0",
-		"@wordpress/keycodes": "^4.35.0",
-		"@wordpress/lazy-editor": "^1.1.0",
-		"@wordpress/primitives": "^4.35.0",
-		"@wordpress/private-apis": "^1.35.0",
-		"@wordpress/theme": "^0.2.0",
-		"@wordpress/url": "^4.35.0",
+		"@wordpress/admin-ui": "^1.3.1-next.dc3f6d3c1.0",
+		"@wordpress/commands": "^1.35.1-next.dc3f6d3c1.0",
+		"@wordpress/components": "^30.8.2-next.dc3f6d3c1.0",
+		"@wordpress/compose": "^7.35.1-next.dc3f6d3c1.0",
+		"@wordpress/core-data": "^7.35.1-next.dc3f6d3c1.0",
+		"@wordpress/data": "^10.35.1-next.dc3f6d3c1.0",
+		"@wordpress/editor": "^14.35.2-next.dc3f6d3c1.0",
+		"@wordpress/element": "^6.35.1-next.dc3f6d3c1.0",
+		"@wordpress/html-entities": "^4.35.1-next.dc3f6d3c1.0",
+		"@wordpress/i18n": "^6.8.1-next.dc3f6d3c1.0",
+		"@wordpress/icons": "^11.2.1-next.dc3f6d3c1.0",
+		"@wordpress/keyboard-shortcuts": "^5.35.1-next.dc3f6d3c1.0",
+		"@wordpress/keycodes": "^4.35.1-next.dc3f6d3c1.0",
+		"@wordpress/lazy-editor": "^1.1.1-next.dc3f6d3c1.0",
+		"@wordpress/primitives": "^4.35.1-next.dc3f6d3c1.0",
+		"@wordpress/private-apis": "^1.35.1-next.dc3f6d3c1.0",
+		"@wordpress/route": "^0.1.1-next.dc3f6d3c1.0",
+		"@wordpress/theme": "^0.2.1-next.dc3f6d3c1.0",
+		"@wordpress/url": "^4.35.1-next.dc3f6d3c1.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -63,5 +62,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "77aa1f194edceafe8ac2a1b9438bf84b557e76e3"
+	"gitHead": "f73b5e69b34fbaccfb8c47783f4f993059ff1a41"
 }

package/src/components/app/index.tsx

@@ -22,10 +22,12 @@ export async function init( {
 	mountId,
 	menuItems,
 	routes,
+	initModules,
 }: {
 	mountId: string;
 	menuItems?: MenuItem[];
 	routes?: Route[];
+	initModules?: string[];
 } ) {
 	( menuItems ?? [] ).forEach( ( menuItem ) => {
 		dispatch( store ).registerMenuItem( menuItem.id, menuItem );
@@ -35,6 +37,11 @@ export async function init( {
 		dispatch( store ).registerRoute( route );
 	} );
 
+	for ( const moduleId of initModules ?? [] ) {
+		const module = await import( moduleId );
+		await module.init();
+	}
+
 	// Render the app
 	const rootElement = document.getElementById( mountId );
 	if ( rootElement ) {

package/src/components/app/router.tsx

@@ -1,30 +1,37 @@
 /**
  * External dependencies
  */
-import {
-	createRouter,
-	createRootRoute,
-	createRoute,
-	RouterProvider,
-	createBrowserHistory,
-	type AnyRoute,
-	redirect,
-} from '@tanstack/react-router';
-import { parseHref } from '@tanstack/history';
 import type { ComponentType } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { lazy, useState, useEffect } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { Page } from '@wordpress/admin-ui';
+import {
+	privateApis as routePrivateApis,
+	type AnyRoute,
+} from '@wordpress/route';
 
 /**
  * Internal dependencies
  */
 import Root from '../root';
-import type { Route, RouteLoaderContext } from '../../store/types';
+import type { CanvasData, Route, RouteLoaderContext } from '../../store/types';
+import { unlock } from '../../lock-unlock';
+import Canvas from '../canvas';
+
+const {
+	createLazyRoute,
+	createRouter,
+	createRootRoute,
+	createRoute,
+	RouterProvider,
+	createBrowserHistory,
+	parseHref,
+	useMatches,
+} = unlock( routePrivateApis );
 
 // Not found component
 function NotFoundComponent() {
@@ -40,10 +47,20 @@ function NotFoundComponent() {
 function RouteComponent( {
 	stage: Stage,
 	inspector: Inspector,
+	canvas: CustomCanvas,
 }: {
 	stage?: ComponentType;
 	inspector?: ComponentType;
+	canvas?: ComponentType;
 } ) {
+	// Get canvas data from the current route's loader
+	const matches = useMatches();
+	const currentMatch = matches[ matches.length - 1 ];
+	const canvasData = ( currentMatch?.loaderData as any )?.canvas as
+		| CanvasData
+		| null
+		| undefined;
+
 	return (
 		<>
 			{ Stage && (
@@ -56,6 +73,18 @@ function RouteComponent( {
 					<Inspector />
 				</div>
 			) }
+			{ /* Render custom canvas when canvas() returns null */ }
+			{ canvasData === null && CustomCanvas && (
+				<div className="boot-layout__canvas">
+					<CustomCanvas />
+				</div>
+			) }
+			{ /* Render default canvas when canvas() returns CanvasData */ }
+			{ canvasData && (
+				<div className="boot-layout__canvas">
+					<Canvas canvas={ canvasData } />
+				</div>
+			) }
 		</>
 	);
 }
@@ -71,27 +100,9 @@ async function createRouteFromDefinition(
 	route: Route,
 	parentRoute: AnyRoute
 ) {
-	// Create lazy components for stage and inspector surfaces
-	const SurfacesModule = route.content_module
-		? lazy( async () => {
-				const module = await import( route.content_module! );
-				// Return a component that renders the surfaces
-				return {
-					default: () => (
-						<RouteComponent
-							stage={ module.stage }
-							inspector={ module.inspector }
-						/>
-					),
-				};
-		  } )
-		: () => null;
-
 	// Load route module for lifecycle functions if specified
 	let routeConfig: {
-		beforeLoad?: (
-			context: RouteLoaderContext & { redirect: Function }
-		) => void | Promise< void >;
+		beforeLoad?: ( context: RouteLoaderContext ) => void | Promise< void >;
 		loader?: ( context: RouteLoaderContext ) => Promise< unknown >;
 		canvas?: ( context: RouteLoaderContext ) => Promise< any >;
 	} = {};
@@ -101,7 +112,8 @@ async function createRouteFromDefinition(
 		routeConfig = module.route || {};
 	}
 
-	return createRoute( {
+	// Create route without component initially
+	let tanstackRoute = createRoute( {
 		getParentRoute: () => parentRoute,
 		path: route.path,
 		beforeLoad: routeConfig.beforeLoad
@@ -109,7 +121,6 @@ async function createRouteFromDefinition(
 					routeConfig.beforeLoad!( {
 						params: opts.params || {},
 						search: opts.search || {},
-						redirect,
 					} )
 			: undefined,
 		loader: async ( opts: any ) => {
@@ -134,8 +145,28 @@ async function createRouteFromDefinition(
 			};
 		},
 		loaderDeps: ( opts: any ) => opts.search,
-		component: SurfacesModule,
 	} );
+
+	// Chain .lazy() to preload content module on intent
+	tanstackRoute = tanstackRoute.lazy( async () => {
+		const module = route.content_module
+			? await import( route.content_module )
+			: {};
+
+		return createLazyRoute( route.path )( {
+			component: function Component() {
+				return (
+					<RouteComponent
+						stage={ module.stage }
+						inspector={ module.inspector }
+						canvas={ module.canvas }
+					/>
+				);
+			},
+		} );
+	} );
+
+	return tanstackRoute;
 }
 
 /**
@@ -171,7 +202,7 @@ function createPathHistory() {
 			const pathHref = `${ path }${ url.hash }`;
 			return parseHref( pathHref, window.history.state );
 		},
-		createHref: ( href ) => {
+		createHref: ( href: string ) => {
 			const searchParams = new URLSearchParams( window.location.search );
 			searchParams.set( 'p', href );
 			return `${ window.location.pathname }?${ searchParams }`;
@@ -201,6 +232,7 @@ export default function Router( {
 				const newRouter = createRouter( {
 					history,
 					routeTree,
+					defaultPreload: 'intent',
 					defaultNotFoundComponent: NotFoundComponent,
 				} );
 				setRouter( newRouter );

package/src/components/canvas/index.tsx

@@ -3,6 +3,7 @@
  */
 import { useState, useEffect } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
+import { useNavigate } from '@wordpress/route';
 
 /**
  * Internal dependencies
@@ -23,6 +24,7 @@ interface CanvasProps {
  */
 export default function Canvas( { canvas }: CanvasProps ) {
 	const [ Editor, setEditor ] = useState< any >( null );
+	const navigate = useNavigate();
 
 	useEffect( () => {
 		// Dynamically import the lazy-editor module
@@ -63,17 +65,39 @@ export default function Canvas( { canvas }: CanvasProps ) {
 
 	// Render the editor with canvas data
 	return (
-		<div
-			style={ { height: '100%' } }
-			// @ts-expect-error inert untyped properly.
-			inert={ canvas.isPreview ? 'true' : undefined }
-		>
-			<Editor
-				postType={ canvas.postType }
-				postId={ canvas.postId }
-				settings={ { isPreviewMode: canvas.isPreview } }
-				backButton={ backButton }
-			/>
+		<div style={ { height: '100%', position: 'relative' } }>
+			<div
+				style={ { height: '100%' } }
+				// @ts-expect-error inert not typed properly
+				inert={ canvas.isPreview ? 'true' : undefined }
+			>
+				<Editor
+					postType={ canvas.postType }
+					postId={ canvas.postId }
+					settings={ { isPreviewMode: canvas.isPreview } }
+					backButton={ backButton }
+				/>
+			</div>
+			{ canvas.isPreview && canvas.editLink && (
+				<div
+					onClick={ () => navigate( { to: canvas.editLink } ) }
+					onKeyDown={ ( e ) => {
+						if ( e.key === 'Enter' || e.key === ' ' ) {
+							e.preventDefault();
+							navigate( { to: canvas.editLink } );
+						}
+					} }
+					style={ {
+						position: 'absolute',
+						inset: 0,
+						cursor: 'pointer',
+						zIndex: 1,
+					} }
+					role="button"
+					tabIndex={ 0 }
+					aria-label="Click to edit"
+				/>
+			) }
 		</div>
 	);
 }

package/src/components/navigation/router-link-item.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { createLink } from '@tanstack/react-router';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -9,6 +8,14 @@ import type { ForwardedRef } from 'react';
  */
 import { forwardRef } from '@wordpress/element';
 import { __experimentalItem as Item } from '@wordpress/components';
+import { privateApis as routePrivateApis } from '@wordpress/route';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { createLink } = unlock( routePrivateApis );
 
 function AnchorOnlyItem(
 	props: React.ComponentProps< typeof Item >,

package/src/components/navigation/use-sidebar-parent.ts

@@ -1,14 +1,17 @@
-/**
- * External dependencies
- */
-import { useRouter, useMatches } from '@tanstack/react-router';
-
 /**
  * WordPress dependencies
  */
+import { privateApis as routePrivateApis } from '@wordpress/route';
 import { useEffect, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useRouter, useMatches } = unlock( routePrivateApis );
+
 /**
  * Internal dependencies
  */

package/src/components/root/index.tsx

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { Outlet, useMatches } from '@tanstack/react-router';
 import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
+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';
@@ -15,19 +15,20 @@ import { privateApis as themePrivateApis } from '@wordpress/theme';
  * Internal dependencies
  */
 import Sidebar from '../sidebar';
-import Canvas from '../canvas';
 import SavePanel from '../save-panel';
 import { unlock } from '../../lock-unlock';
 import type { CanvasData } from '../../store/types';
 import './style.scss';
 
 const { ThemeProvider } = unlock( themePrivateApis );
+const { useMatches, Outlet } = unlock( routePrivateApis );
 
 export default function Root() {
 	const matches = useMatches();
 	const currentMatch = matches[ matches.length - 1 ];
 	const canvas = ( currentMatch?.loaderData as any )?.canvas as
 		| CanvasData
+		| null
 		| undefined;
 	const isFullScreen = canvas && ! canvas.isPreview;
 
@@ -36,7 +37,7 @@ export default function Root() {
 			<ThemeProvider color={ { bg: '#1d2327', primary: '#3858e9' } }>
 				<div
 					className={ clsx( 'boot-layout', {
-						'has-canvas': !! canvas,
+						'has-canvas': !! canvas || canvas === null,
 						'has-full-canvas': isFullScreen,
 					} ) }
 				>
@@ -52,11 +53,6 @@ export default function Root() {
 							color={ { bg: '#ffffff', primary: '#3858e9' } }
 						>
 							<Outlet />
-							{ canvas && (
-								<div className="boot-layout__canvas">
-									<Canvas canvas={ canvas } />
-								</div>
-							) }
 						</ThemeProvider>
 					</div>
 				</div>

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

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { Outlet, useMatches } from '@tanstack/react-router';
 import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
+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';
@@ -14,12 +14,12 @@ import { privateApis as themePrivateApis } from '@wordpress/theme';
 /**
  * Internal dependencies
  */
-import Canvas from '../canvas';
 import SavePanel from '../save-panel';
 import { unlock } from '../../lock-unlock';
 import type { CanvasData } from '../../store/types';
 import './style.scss';
 
+const { useMatches, Outlet } = unlock( routePrivateApis );
 const { ThemeProvider } = unlock( themePrivateApis );
 
 /**
@@ -31,6 +31,7 @@ export default function RootSinglePage() {
 	const currentMatch = matches[ matches.length - 1 ];
 	const canvas = ( currentMatch?.loaderData as any )?.canvas as
 		| CanvasData
+		| null
 		| undefined;
 	const isFullScreen = canvas && ! canvas.isPreview;
 
@@ -39,7 +40,7 @@ export default function RootSinglePage() {
 			<ThemeProvider color={ { bg: '#1d2327', primary: '#3858e9' } }>
 				<div
 					className={ clsx( 'boot-layout boot-layout--single-page', {
-						'has-canvas': !! canvas,
+						'has-canvas': !! canvas || canvas === null,
 						'has-full-canvas': isFullScreen,
 					} ) }
 				>
@@ -50,11 +51,6 @@ export default function RootSinglePage() {
 							color={ { bg: '#ffffff', primary: '#3858e9' } }
 						>
 							<Outlet />
-							{ canvas && (
-								<div className="boot-layout__canvas">
-									<Canvas canvas={ canvas } />
-								</div>
-							) }
 						</ThemeProvider>
 					</div>
 				</div>

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

@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { _n, __, sprintf } from '@wordpress/i18n';
+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 } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import useSaveShortcut from '../save-panel/use-save-shortcut';
+
+export default function SaveButton() {
+	const [ isSaveViewOpen, setIsSaveViewOpened ] = useState( false );
+	const { isSaving, dirtyEntityRecordsCount } = useSelect( ( select ) => {
+		const { isSavingEntityRecord, __experimentalGetDirtyEntityRecords } =
+			select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		return {
+			isSaving: dirtyEntityRecords.some( ( record ) =>
+				isSavingEntityRecord( record.kind, record.name, record.key )
+			),
+			dirtyEntityRecordsCount: dirtyEntityRecords.length,
+		};
+	}, [] );
+	const [ showSavedState, setShowSavedState ] = useState( false );
+
+	useEffect( () => {
+		if ( isSaving ) {
+			// Proactively expect to show saved state. This is done once save
+			// starts to avoid race condition where setting it after would cause
+			// the button to be unmounted before state is updated.
+			setShowSavedState( true );
+		}
+	}, [ isSaving ] );
+
+	const hasChanges = dirtyEntityRecordsCount > 0;
+
+	// Handle save failure case: If we were showing saved state but saving
+	// failed, reset to show changes again.
+	useEffect( () => {
+		if ( ! isSaving && hasChanges ) {
+			setShowSavedState( false );
+		}
+	}, [ isSaving, hasChanges ] );
+
+	function hideSavedState() {
+		if ( showSavedState ) {
+			setShowSavedState( false );
+		}
+	}
+
+	const shouldShowButton = hasChanges || showSavedState;
+
+	useSaveShortcut( { openSavePanel: () => setIsSaveViewOpened( true ) } );
+
+	if ( ! shouldShowButton ) {
+		return null;
+	}
+
+	const isInSavedState = showSavedState && ! hasChanges;
+	const disabled = isSaving || isInSavedState;
+
+	const getLabel = () => {
+		if ( isInSavedState ) {
+			return __( 'Saved' );
+		}
+		return sprintf(
+			// translators: %d: number of unsaved changes (number).
+			_n(
+				'Review %d change…',
+				'Review %d changes…',
+				dirtyEntityRecordsCount
+			),
+			dirtyEntityRecordsCount
+		);
+	};
+	const label = getLabel();
+
+	return (
+		<>
+			<Tooltip
+				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>
+			</Tooltip>
+			{ isSaveViewOpen && (
+				<Modal
+					title={ __( 'Review changes' ) }
+					onRequestClose={ () => setIsSaveViewOpened( false ) }
+					size="small"
+				>
+					<EntitiesSavedStates
+						close={ () => setIsSaveViewOpened( false ) }
+						variant="inline"
+					/>
+				</Modal>
+			) }
+		</>
+	);
+}

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

@@ -0,0 +1,3 @@
+.boot-save-button {
+	width: 100%;
+}

package/src/components/sidebar/index.tsx

@@ -3,6 +3,7 @@
  */
 import SiteHub from '../site-hub';
 import Navigation from '../navigation';
+import SaveButton from '../save-button';
 import './style.scss';
 
 export default function Sidebar() {
@@ -12,6 +13,9 @@ export default function Sidebar() {
 			<div className="boot-sidebar__content">
 				<Navigation />
 			</div>
+			<div className="boot-sidebar__footer">
+				<SaveButton />
+			</div>
 		</div>
 	);
 }

package/src/components/sidebar/style.scss

@@ -13,3 +13,7 @@
 	contain: content;
 	position: relative;
 }
+
+.boot-sidebar__footer {
+	padding: variables.$grid-unit-20 variables.$grid-unit-10 variables.$grid-unit-10 variables.$grid-unit-20;
+}

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

@@ -1,14 +1,17 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { Link, useCanGoBack, useRouter } from '@tanstack/react-router';
+import { Link, privateApis as routePrivateApis } from '@wordpress/route';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import SiteIcon from '../site-icon';
 import './style.scss';
 
+const { useCanGoBack, useRouter } = unlock( routePrivateApis );
+
 function SiteIconLink( {
 	to,
 	isBackButton,

package/src/index.tsx

@@ -3,3 +3,4 @@
  */
 import './style.scss';
 export { init, initSinglePage } from './components/app';
+export { store } from './store';