@wordpress/boot 0.1.1-next.2f1c7c01b.0

package/src/components/site-hub/index.tsx

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	ExternalLink,
+	Button,
+	// @ts-ignore
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { search } from '@wordpress/icons';
+import { displayShortcut } from '@wordpress/keycodes';
+// @ts-expect-error Commands is not typed properly.
+import { store as commandsStore } from '@wordpress/commands';
+import { filterURLForDisplay } from '@wordpress/url';
+import type { UnstableBase } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import SiteIconLink from '../site-icon-link';
+import './style.scss';
+
+function SiteHub() {
+	const { homeUrl, siteTitle } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const _base = getEntityRecord< UnstableBase >(
+			'root',
+			'__unstableBase'
+		);
+		return {
+			homeUrl: _base?.home,
+			siteTitle:
+				! _base?.name && !! _base?.url
+					? filterURLForDisplay( _base?.url )
+					: _base?.name,
+		};
+	}, [] );
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+
+	return (
+		<div className="boot-site-hub">
+			<SiteIconLink to="/" aria-label={ __( 'Go to the Dashboard' ) } />
+			<ExternalLink
+				href={ homeUrl ?? '/' }
+				className="boot-site-hub__title"
+			>
+				{ siteTitle && decodeEntities( siteTitle ) }
+			</ExternalLink>
+			<HStack className="boot-site-hub__actions">
+				<Button
+					variant="tertiary"
+					icon={ search }
+					onClick={ () => openCommandCenter() }
+					size="compact"
+					label={ __( 'Open command palette' ) }
+					shortcut={ displayShortcut.primary( 'k' ) }
+				/>
+			</HStack>
+		</div>
+	);
+}
+
+export default SiteHub;

package/src/components/site-hub/style.scss

@@ -0,0 +1,54 @@
+@use "@wordpress/base-styles/variables";
+
+.boot-site-hub {
+	position: sticky;
+	top: 0;
+	background-color: var(--wpds-color-bg-surface-neutral-weak, #f0f0f0);
+	z-index: 1;
+	display: grid;
+	grid-template-columns: 60px 1fr auto;
+	align-items: center;
+	padding-right: variables.$grid-unit-20;
+	flex-shrink: 0; // Prevent flex parent from shrinking this element.
+}
+
+.boot-site-hub__actions {
+	flex-shrink: 0;
+}
+
+.boot-site-hub__title {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	font-size: variables.$font-size-medium;
+	font-weight: variables.$font-weight-medium;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	text-decoration: none;
+
+	.components-external-link__contents {
+		text-decoration: none;
+		margin-inline-start: variables.$grid-unit-05;
+	}
+
+	// Show icon on hover
+	.components-external-link__icon {
+		opacity: 0;
+		transition: opacity 0.1s ease-out;
+	}
+
+	&:hover .components-external-link__icon {
+		opacity: 1;
+	}
+
+	// Focus styles
+	@media not (prefers-reduced-motion) {
+		transition: outline 0.1s ease-out;
+	}
+
+	&:focus:not(:active) {
+		outline:
+			var(--wpds-border-width-focus, 2px) solid
+			var(--wpds-color-stroke-focus-brand, #0073aa);
+		outline-offset: calc(-1 * var(--wpds-border-width-focus, 2px));
+	}
+}

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

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { Icon, wordpress } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { store as coreDataStore } from '@wordpress/core-data';
+import type { UnstableBase } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function SiteIcon( { className }: { className?: string } ) {
+	const { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreDataStore );
+		const siteData = getEntityRecord< UnstableBase >(
+			'root',
+			'__unstableBase',
+			undefined
+		);
+
+		return {
+			isRequestingSite: ! siteData,
+			siteIconUrl: siteData?.site_icon_url,
+		};
+	}, [] );
+
+	let icon = null;
+
+	if ( isRequestingSite && ! siteIconUrl ) {
+		icon = <div className="boot-site-icon__image" />;
+	} else {
+		icon = siteIconUrl ? (
+			<img
+				className="boot-site-icon__image"
+				alt={ __( 'Site Icon' ) }
+				src={ siteIconUrl }
+			/>
+		) : (
+			<Icon
+				className="boot-site-icon__icon"
+				icon={ wordpress }
+				size={ 48 }
+			/>
+		);
+	}
+
+	return (
+		<div className={ clsx( className, 'boot-site-icon' ) }>{ icon }</div>
+	);
+}
+
+export default SiteIcon;

package/src/components/site-icon/style.scss

@@ -0,0 +1,19 @@
+@use "@wordpress/base-styles/variables";
+
+.boot-site-icon {
+	display: flex;
+}
+
+.boot-site-icon__icon {
+	width: variables.$grid-unit-40;
+	height: variables.$grid-unit-40;
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+}
+
+.boot-site-icon__image {
+	width: variables.$grid-unit-40;
+	height: variables.$grid-unit-40;
+	object-fit: cover;
+	aspect-ratio: 1 / 1;
+	border-radius: var(--wpds-border-radius-medium, 4px);
+}

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

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { Link, useCanGoBack, useRouter } from '@tanstack/react-router';
+
+/**
+ * Internal dependencies
+ */
+import SiteIcon from '../site-icon';
+import './style.scss';
+
+function SiteIconLink( {
+	to,
+	isBackButton,
+	...props
+}: {
+	to: string;
+	'aria-label': string;
+	isBackButton?: boolean;
+} ) {
+	const router = useRouter();
+	const canGoBack = useCanGoBack();
+
+	return (
+		<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>
+	);
+}
+
+export default SiteIconLink;

package/src/components/site-icon-link/style.scss

@@ -0,0 +1,24 @@
+@use "@wordpress/base-styles/variables";
+
+$header-height: variables.$header-height;
+
+.boot-site-icon-link {
+	width: $header-height;
+	height: $header-height;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--wpds-color-bg-surface-neutral-weak, #f0f0f0);
+	text-decoration: none;
+
+	@media not (prefers-reduced-motion) {
+		transition: outline 0.1s ease-out;
+	}
+
+	&:focus:not(:active) {
+		outline:
+			var(--wpds-border-width-focus, 2px) solid
+			var(--wpds-color-stroke-focus-brand, #0073aa);
+		outline-offset: calc(-1 * var(--wpds-border-width-focus, 2px));
+	}
+}

package/src/index.tsx

@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+export { init } from './components/app';

package/src/lock-unlock.ts

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/boot'
+	);

package/src/store/actions.ts

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import type { MenuItem, Route } from './types';
+
+export function registerMenuItem( id: string, menuItem: MenuItem ) {
+	return {
+		type: 'REGISTER_MENU_ITEM' as const,
+		id,
+		menuItem,
+	};
+}
+
+export function registerRoute( route: Route ) {
+	return {
+		type: 'REGISTER_ROUTE' as const,
+		route,
+	};
+}
+
+export type Action =
+	| ReturnType< typeof registerMenuItem >
+	| ReturnType< typeof registerRoute >;

package/src/store/index.ts

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { createReduxStore, register } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { reducer } from './reducer';
+import * as actions from './actions';
+import * as selectors from './selectors';
+
+const STORE_NAME = 'wordpress/boot';
+
+export const store = createReduxStore( STORE_NAME, {
+	reducer,
+	actions,
+	selectors,
+} );
+
+register( store );
+
+export { STORE_NAME };

package/src/store/reducer.ts

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import type { Action } from './actions';
+import type { State } from './types';
+
+const initialState: State = {
+	menuItems: {},
+	routes: [],
+};
+
+export function reducer( state: State = initialState, action: Action ): State {
+	switch ( action.type ) {
+		case 'REGISTER_MENU_ITEM':
+			return {
+				...state,
+				menuItems: {
+					...state.menuItems,
+					[ action.id ]: action.menuItem,
+				},
+			};
+
+		case 'REGISTER_ROUTE':
+			return {
+				...state,
+				routes: [ ...state.routes, action.route ],
+			};
+	}
+
+	return state;
+}

package/src/store/selectors.ts

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import type { State } from './types';
+
+export function getMenuItems( state: State ) {
+	return Object.values( state.menuItems );
+}
+
+export function getRoutes( state: State ) {
+	return state.routes;
+}

package/src/store/types.ts

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode, ComponentType } from 'react';
+
+/**
+ * Icon type supporting multiple formats:
+ * - Dashicon strings (e.g., "dashicons-admin-generic")
+ * - JSX elements
+ * - SVG icons from @wordpress/icons
+ * - Data URLs for images
+ */
+export type IconType = string | JSX.Element | ReactNode;
+
+export interface MenuItem {
+	id: string;
+	label: string;
+	to: string;
+	icon?: IconType;
+	parent?: string;
+	parent_type?: 'drilldown' | 'dropdown';
+}
+
+/**
+ * Route surfaces exported from content_module.
+ * Stage is required, inspector is optional.
+ */
+export interface RouteSurfaces {
+	stage?: ComponentType;
+	inspector?: ComponentType;
+}
+
+/**
+ * Route loader context containing params and search.
+ */
+export interface RouteLoaderContext {
+	params: Record< string, string >;
+	search: Record< string, unknown >;
+}
+
+/**
+ * Route configuration interface.
+ * Routes specify content_module for surfaces and optionally route_module for lifecycle functions.
+ */
+export interface Route {
+	/**
+	 * Route path (e.g., "/post-edit/$postId")
+	 */
+	path: string;
+
+	/**
+	 * Module path for lazy loading the route's surfaces (stage, inspector).
+	 * The module must export: RouteSurfaces (stage and/or inspector components)
+	 * This enables code splitting for better performance.
+	 */
+	content_module?: string;
+
+	/**
+	 * 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
+	 */
+	route_module?: string;
+}
+
+export interface State {
+	menuItems: Record< string, MenuItem >;
+	routes: Route[];
+}

package/src/style.scss

@@ -0,0 +1,2 @@
+@use "@wordpress/theme/src/prebuilt/css/design-tokens.css" as *;
+@use "@wordpress/admin-ui/build-style/style.css" as *;

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"checkJs": false
+	},
+	"references": [
+		{ "path": "../admin-ui" },
+		{ "path": "../components" },
+		{ "path": "../compose" },
+		{ "path": "../core-data" },
+		{ "path": "../data" },
+		{ "path": "../element" },
+		{ "path": "../html-entities" },
+		{ "path": "../i18n" },
+		{ "path": "../icons" },
+		{ "path": "../keycodes" },
+		{ "path": "../primitives" },
+		{ "path": "../private-apis" },
+		{ "path": "../theme" },
+		{ "path": "../url" }
+	]
+}