@wordpress/boot 0.17.0 → 0.18.0

package/build-types/components/navigation/navigation-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navigation-item/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,cAAc,CAAC;AAEtB,UAAU,mBAAmB;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACX;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAE,EACvC,SAAS,EACT,IAAI,EACJ,qBAA4B,EAC5B,QAAQ,EACR,EAAE,EACF,EAAE,mBAAmB,+BAkCrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navigation-item/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAiBvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,cAAc,CAAC;AAEtB,UAAU,mBAAmB;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACX;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAE,EACvC,SAAS,EACT,IAAI,EACJ,qBAA4B,EAC5B,QAAQ,EACR,EAAE,GACF,EAAE,mBAAmB,+BAkCrB"}

package/build-types/components/navigation/navigation-screen/index.d.ts

@@ -6,7 +6,7 @@ import type { ReactNode, RefObject } from 'react';
  * Internal dependencies
  */
 import './style.scss';
-export default function NavigationScreen({ isRoot, title, actions, content, description, animationDirection, backMenuItem, backButtonRef, navigationKey, onNavigate }: {
+export default function NavigationScreen({ isRoot, title, actions, content, description, animationDirection, backMenuItem, backButtonRef, navigationKey, onNavigate, }: {
     isRoot?: boolean;
     title: string;
     actions?: ReactNode;
@@ -16,7 +16,7 @@ export default function NavigationScreen({ isRoot, title, actions, content, desc
     backButtonRef?: RefObject<HTMLButtonElement | null>;
     animationDirection?: 'forward' | 'backward';
     navigationKey?: string;
-    onNavigate: ({ id, direction }: {
+    onNavigate: ({ id, direction, }: {
         id?: string;
         direction: 'forward' | 'backward';
     }) => void;

package/build-types/components/navigation/navigation-screen/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navigation-screen/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBlD;;GAEG;AACH,OAAO,cAAc,CAAC;AAkBtB,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAE,EACzC,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,YAAY,EACZ,aAAa,EACb,aAAa,EACb,UAAU,EACV,EAAE;IACF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,SAAS,CAAE,iBAAiB,GAAG,IAAI,CAAE,CAAC;IACtD,kBAAkB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,CAAE,EACb,EAAE,EACF,SAAS,EACT,EAAE;QACF,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;KAClC,KAAM,IAAI,CAAC;CACZ,+BA8EA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navigation-screen/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBlD;;GAEG;AACH,OAAO,cAAc,CAAC;AAkBtB,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAE,EACzC,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,YAAY,EACZ,aAAa,EACb,aAAa,EACb,UAAU,GACV,EAAE;IACF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,SAAS,CAAE,iBAAiB,GAAG,IAAI,CAAE,CAAC;IACtD,kBAAkB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,CAAE,EACb,EAAE,EACF,SAAS,GACT,EAAE;QACF,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;KAClC,KAAM,IAAI,CAAC;CACZ,+BA8EA"}

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":"AAiCA,OAAO,cAAc,CAAC;AAItB,MAAM,CAAC,OAAO,UAAU,IAAI,gCAyK3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/root/index.tsx"],"names":[],"mappings":"AAkCA,OAAO,cAAc,CAAC;AAItB,MAAM,CAAC,OAAO,UAAU,IAAI,gCA4K3B"}

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":"AAsBA,OAAO,cAAc,CAAC;AAKtB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,gCA2DrC"}
+{"version":3,"file":"single-page.d.ts","sourceRoot":"","sources":["../../../src/components/root/single-page.tsx"],"names":[],"mappings":"AAuBA,OAAO,cAAc,CAAC;AAKtB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,gCA8DrC"}

package/build-types/components/root/use-sync-body-background.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Reads the boot layout's computed background-color and mirrors it onto
+ * `document.body` to avoid a jarring flash on macOS elastic-scroll bounce.
+ * Snapshots and restores the previous inline value on unmount.
+ *
+ * TODO: Once the two top-level `ThemeProvider` instances can be merged, this
+ * hook can be replaced with a CSS rule on `<body>`.
+ * See https://github.com/WordPress/gutenberg/pull/78587#discussion_r3481698286
+ *
+ * @return Ref to attach to the `.boot-layout` div.
+ */
+export default function useSyncBodyBackground(): import("react").MutableRefObject<HTMLDivElement | null>;
+//# sourceMappingURL=use-sync-body-background.d.ts.map

package/build-types/components/root/use-sync-body-background.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sync-body-background.d.ts","sourceRoot":"","sources":["../../../src/components/root/use-sync-body-background.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,qBAAqB,4DAuB5C"}

package/build-types/components/save-panel/use-save-shortcut.d.ts

@@ -4,7 +4,7 @@
  * @param param0               Object containing the function to open the save panel.
  * @param param0.openSavePanel Function to open the save panel.
  */
-export default function useSaveShortcut({ openSavePanel }: {
+export default function useSaveShortcut({ openSavePanel, }: {
     openSavePanel: () => void;
 }): void;
 //# sourceMappingURL=use-save-shortcut.d.ts.map

package/build-types/components/save-panel/use-save-shortcut.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-save-shortcut.d.ts","sourceRoot":"","sources":["../../../src/components/save-panel/use-save-shortcut.ts"],"names":[],"mappings":"AAeA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,aAAa,EACb,EAAE;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC1B,QAwCA"}
+{"version":3,"file":"use-save-shortcut.d.ts","sourceRoot":"","sources":["../../../src/components/save-panel/use-save-shortcut.ts"],"names":[],"mappings":"AAeA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,aAAa,GACb,EAAE;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC1B,QAwCA"}

package/build-types/components/sidebar/index.d.ts

@@ -1,8 +1,3 @@
 import './style.scss';
-declare global {
-    interface Window {
-        __experimentalAdminBarInEditor?: boolean;
-    }
-}
 export default function Sidebar(): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/index.tsx"],"names":[],"mappings":"AAeA,OAAO,cAAc,CAAC;AAEtB,OAAO,CAAC,MAAM,CAAC,CAAC;IACf,UAAU,MAAM;QACf,8BAA8B,CAAC,EAAE,OAAO,CAAC;KACzC;CACD;AAoBD,MAAM,CAAC,OAAO,UAAU,OAAO,gCAa9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/index.tsx"],"names":[],"mappings":"AAcA,OAAO,cAAc,CAAC;AAoBtB,MAAM,CAAC,OAAO,UAAU,OAAO,gCAY9B"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/boot",
-	"version": "0.17.0",
+	"version": "0.18.0",
 	"description": "Minimal boot package for WordPress admin pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,35 +40,35 @@
 	"wpScriptModuleExports": "./build-module/index.mjs",
 	"types": "build-types",
 	"dependencies": {
-		"@wordpress/a11y": "^4.50.0",
-		"@wordpress/admin-ui": "^2.5.0",
-		"@wordpress/base-styles": "^10.2.0",
-		"@wordpress/commands": "^1.50.0",
-		"@wordpress/components": "^36.1.0",
-		"@wordpress/compose": "^8.3.0",
-		"@wordpress/core-data": "^7.50.0",
-		"@wordpress/data": "^10.50.0",
-		"@wordpress/editor": "^14.50.0",
-		"@wordpress/element": "^8.2.0",
-		"@wordpress/html-entities": "^4.50.0",
-		"@wordpress/i18n": "^6.23.0",
-		"@wordpress/icons": "^15.1.0",
-		"@wordpress/keyboard-shortcuts": "^5.50.0",
-		"@wordpress/keycodes": "^4.50.0",
-		"@wordpress/lazy-editor": "^1.16.0",
-		"@wordpress/notices": "^5.50.0",
-		"@wordpress/primitives": "^4.50.0",
-		"@wordpress/private-apis": "^1.50.0",
-		"@wordpress/route": "^0.16.0",
-		"@wordpress/theme": "^0.17.0",
-		"@wordpress/ui": "^0.17.0",
-		"@wordpress/url": "^4.50.0",
+		"@wordpress/a11y": "^4.51.0",
+		"@wordpress/admin-ui": "^2.6.0",
+		"@wordpress/base-styles": "^11.0.0",
+		"@wordpress/commands": "^1.51.0",
+		"@wordpress/components": "^37.0.0",
+		"@wordpress/compose": "^8.4.0",
+		"@wordpress/core-data": "^7.51.0",
+		"@wordpress/data": "^10.51.0",
+		"@wordpress/editor": "^14.51.0",
+		"@wordpress/element": "^8.3.0",
+		"@wordpress/html-entities": "^4.51.0",
+		"@wordpress/i18n": "^6.24.0",
+		"@wordpress/icons": "^15.2.0",
+		"@wordpress/keyboard-shortcuts": "^5.51.0",
+		"@wordpress/keycodes": "^4.51.0",
+		"@wordpress/lazy-editor": "^1.17.0",
+		"@wordpress/notices": "^5.51.0",
+		"@wordpress/primitives": "^4.51.0",
+		"@wordpress/private-apis": "^1.51.0",
+		"@wordpress/route": "^0.17.0",
+		"@wordpress/theme": "^1.0.0",
+		"@wordpress/ui": "^0.18.0",
+		"@wordpress/url": "^4.51.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
-		"@types/react": "^18.3.27",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"@types/react": "^18 || ^19",
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
 	},
 	"peerDependenciesMeta": {
 		"@types/react": {
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
+	"gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
 }

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

@@ -1,55 +1,18 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	Icon as WCIcon,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-import { arrowUpLeft, arrowUpRight } from '@wordpress/icons';
-import { useReducedMotion } from '@wordpress/compose';
+import { Button } from '@wordpress/components';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { __, isRTL } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import SiteIcon from '../site-icon';
-import './back-button.scss';
-
-declare global {
-	interface Window {
-		__experimentalAdminBarInEditor?: boolean;
-	}
-}
-
-/**
- * Overlay arrow animation that appears on hover.
- * Matches next-admin implementation with clip-path.
- */
-const toggleHomeIconVariants = {
-	edit: {
-		opacity: 0,
-		scale: 0.2,
-	},
-	hover: {
-		opacity: 1,
-		scale: 1,
-		clipPath: 'inset( 22% round 2px )',
-	},
-};
-
 /**
  * Back button component that appears in full-screen canvas mode.
- * Matches next-admin's SiteIconBackButton design.
  *
  * @param {Object} props        Component props
  * @param {number} props.length Number of BackButton fills (from Slot)
- * @return Back button with slide and hover animations
+ * @return Back button
  */
 export default function BootBackButton( { length }: { length: number } ) {
-	const disableMotion = useReducedMotion();
-	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
-
 	const handleBack = () => {
 		window.history.back();
 	};
@@ -59,43 +22,12 @@ export default function BootBackButton( { length }: { length: number } ) {
 		return null;
 	}
 
-	const transition = {
-		duration: disableMotion ? 0 : 0.3,
-	};
-
-	const arrowIcon = isRTL() ? arrowUpRight : arrowUpLeft;
-
 	return (
-		<motion.div
-			className="boot-canvas-back-button"
-			animate="edit"
-			initial="edit"
-			whileHover="hover"
-			whileTap="tap"
-			transition={ transition }
-		>
-			<Button
-				className="boot-canvas-back-button__link"
-				onClick={ handleBack }
-				aria-label={ __( 'Go back' ) }
-				__next40pxDefaultSize
-			>
-				{ ! hasAdminBarInEditor && <SiteIcon /> }
-			</Button>
-
-			{ hasAdminBarInEditor ? (
-				<div className="boot-canvas-back-button__icon">
-					<WCIcon icon={ arrowIcon } />
-				</div>
-			) : (
-				/* Overlay arrow that appears on hover */
-				<motion.div
-					className="boot-canvas-back-button__icon"
-					variants={ toggleHomeIconVariants }
-				>
-					<WCIcon icon={ arrowIcon } />
-				</motion.div>
-			) }
-		</motion.div>
+		<Button
+			size="compact"
+			onClick={ handleBack }
+			label={ __( 'Go back' ) }
+			icon={ isRTL() ? chevronRight : chevronLeft }
+		/>
 	);
 }

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

@@ -29,7 +29,7 @@
 	}
 
 	&.active {
-		font-weight: variables.$font-weight-medium;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 
 	svg:last-child {
@@ -38,7 +38,7 @@
 
 	&[aria-current="true"] {
 		color: var(--wpds-color-foreground-interactive-brand-active);
-		font-weight: variables.$font-weight-medium;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 
 	// Make sure the focus style is drawn on top of the current item background.

package/src/components/root/index.tsx

@@ -31,6 +31,7 @@ import CanvasRenderer from '../canvas-renderer';
 import useRouteTitle from '../app/use-route-title';
 import { unlock } from '../../lock-unlock';
 import type { CanvasData } from '../../store/types';
+import useSyncBodyBackground from './use-sync-body-background';
 import './style.scss';
 
 const { useLocation, useMatches, Outlet } = unlock( routePrivateApis );
@@ -60,6 +61,8 @@ export default function Root() {
 
 	const themeColors = useMemo( getAdminThemeColors, [] );
 
+	const layoutRef = useSyncBodyBackground();
+
 	return (
 		<SlotFillProvider>
 			<Tooltip.Provider>
@@ -69,6 +72,7 @@ export default function Root() {
 				>
 					<ThemeProvider color={ themeColors }>
 						<div
+							ref={ layoutRef }
 							className={ clsx( 'boot-layout', {
 								'has-canvas': !! canvas || canvas === null,
 								'has-full-canvas': isFullScreen,

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

@@ -20,6 +20,7 @@ import SavePanel from '../save-panel';
 import CanvasRenderer from '../canvas-renderer';
 import { unlock } from '../../lock-unlock';
 import type { CanvasData } from '../../store/types';
+import useSyncBodyBackground from './use-sync-body-background';
 import './style.scss';
 import useRouteTitle from '../app/use-route-title';
 
@@ -44,6 +45,8 @@ export default function RootSinglePage() {
 
 	const themeColors = useMemo( getAdminThemeColors, [] );
 
+	const layoutRef = useSyncBodyBackground();
+
 	return (
 		<SlotFillProvider>
 			<ThemeProvider
@@ -52,6 +55,7 @@ export default function RootSinglePage() {
 			>
 				<ThemeProvider color={ themeColors }>
 					<div
+						ref={ layoutRef }
 						className={ clsx(
 							'boot-layout boot-layout--single-page',
 							{

package/src/components/root/style.scss

@@ -1,3 +1,4 @@
+@use "@wordpress/base-styles/breakpoints";
 @use "@wordpress/base-styles/variables";
 @use "@wordpress/base-styles/mixins";
 
@@ -203,7 +204,7 @@
 
 .boot-layout.has-full-canvas .boot-layout__canvas {
 	position: fixed;
-	top: 0;
+	top: var(--wp-admin--admin-bar--height, 0);
 	left: 0;
 	right: 0;
 	bottom: 0;
@@ -223,3 +224,16 @@
 		}
 	}
 }
+
+@media (max-width: #{breakpoints.$break-medium}) {
+	.boot-layout__stage,
+	.boot-layout__inspector,
+	.boot-layout__canvas:not(.has-mobile-drawer) {
+		top: var(--wp-admin--admin-bar--height, 0);
+		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
+	}
+
+	.boot-layout__mobile-sidebar-drawer {
+		top: var(--wp-admin--admin-bar--height, 0);
+	}
+}

package/src/components/root/use-sync-body-background.ts

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useIsomorphicLayoutEffect } from '@wordpress/compose';
+
+/**
+ * Reads the boot layout's computed background-color and mirrors it onto
+ * `document.body` to avoid a jarring flash on macOS elastic-scroll bounce.
+ * Snapshots and restores the previous inline value on unmount.
+ *
+ * TODO: Once the two top-level `ThemeProvider` instances can be merged, this
+ * hook can be replaced with a CSS rule on `<body>`.
+ * See https://github.com/WordPress/gutenberg/pull/78587#discussion_r3481698286
+ *
+ * @return Ref to attach to the `.boot-layout` div.
+ */
+export default function useSyncBodyBackground() {
+	const layoutRef = useRef< HTMLDivElement | null >( null );
+
+	useIsomorphicLayoutEffect( () => {
+		if ( ! layoutRef.current ) {
+			return;
+		}
+
+		const body = layoutRef.current.ownerDocument.body;
+		const bg = getComputedStyle( layoutRef.current ).backgroundColor;
+		if ( ! bg ) {
+			return;
+		}
+
+		const previousBackground = body.style.background;
+		body.style.background = bg;
+
+		return () => {
+			body.style.background = previousBackground;
+		};
+	}, [] );
+
+	return layoutRef;
+}

package/src/components/sidebar/index.tsx

@@ -9,18 +9,11 @@ import { chevronLeft, chevronRight } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import SiteHub from '../site-hub';
 import Navigation from '../navigation';
 import SaveButton from '../save-button';
 import { store as bootStore } from '../../store';
 import './style.scss';
 
-declare global {
-	interface Window {
-		__experimentalAdminBarInEditor?: boolean;
-	}
-}
-
 function DashboardBackButton() {
 	const dashboardLink = useSelect(
 		( select ) => select( bootStore ).getDashboardLink(),
@@ -40,10 +33,9 @@ function DashboardBackButton() {
 }
 
 export default function Sidebar() {
-	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
 	return (
 		<div className="boot-sidebar__scrollable">
-			{ hasAdminBarInEditor ? <DashboardBackButton /> : <SiteHub /> }
+			<DashboardBackButton />
 			<div className="boot-sidebar__content">
 				<Navigation />
 			</div>

package/src/components/sidebar/style.scss

@@ -19,5 +19,5 @@
 }
 
 .boot-sidebar__back-button {
-	margin: variables.$grid-unit-10 variables.$grid-unit-15;
+	margin: variables.$grid-unit-20 variables.$grid-unit-15 variables.$grid-unit-10 variables.$grid-unit-15;
 }

package/src/style.scss

@@ -1,7 +1,5 @@
-@use "@wordpress/theme/src/prebuilt/css/design-tokens.css" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "./experimental-omnibar.scss" as *;
 
 .boot-layout-container .boot-layout {
 	// On mobile the main content area has to scroll, otherwise you can invoke

package/src/view-transitions.scss

@@ -22,15 +22,6 @@
 		view-transition-name: boot--canvas-sidebar;
 	}
 
-	.boot-layout.has-full-canvas
-	.boot-layout__canvas
-	.boot-site-icon-link,
-	.boot-layout:not(.has-full-canvas)
-	.boot-site-hub
-	.boot-site-icon-link {
-		view-transition-name: boot--site-icon-link;
-	}
-
 	// Default (non-Safari) view transition names
 	.boot-layout__stage {
 		view-transition-name: boot--stage;
@@ -78,15 +69,6 @@
 	z-index: 1;
 }
 
-::view-transition-group(boot--site-icon-link) {
-	z-index: 2;
-}
-
-::view-transition-new(boot--site-icon-link),
-::view-transition-old(boot--site-icon-link) {
-	animation: none;
-}
-
 // Safari-specific pseudo-element styles with width: auto fix
 ::view-transition-new(boot-safari--canvas),
 ::view-transition-old(boot-safari--canvas),

package/build-module/components/site-hub/index.mjs

@@ -1,78 +0,0 @@
-// packages/boot/src/components/site-hub/index.tsx
-import { useSelect, useDispatch } from "@wordpress/data";
-import {
-  ExternalLink,
-  Button,
-  __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";
-import { store as commandsStore } from "@wordpress/commands";
-import { filterURLForDisplay } from "@wordpress/url";
-import SiteIconLink from "../site-icon-link/index.mjs";
-import { store as bootStore } from "../../store/index.mjs";
-
-// packages/boot/src/components/site-hub/style.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='74d234ae17']")) {
-  const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "74d234ae17");
-  style.appendChild(document.createTextNode(".boot-site-hub{align-items:center;background-color:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);display:grid;flex-shrink:0;grid-template-columns:60px 1fr auto;padding-right:16px;position:sticky;top:0;z-index:1}.boot-site-hub__actions{flex-shrink:0}.boot-site-hub__title{align-items:center;display:flex;text-decoration:none}.boot-site-hub__title .components-external-link__contents{margin-inline-start:4px;max-width:140px;overflow:hidden;text-decoration:none}.boot-site-hub__title .components-external-link__icon{opacity:0;transition:opacity .1s ease-out}.boot-site-hub__title:hover .components-external-link__icon{opacity:1}@media not (prefers-reduced-motion){.boot-site-hub__title{transition:outline .1s ease-out}}.boot-site-hub__title:focus:not(:active){outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}.boot-site-hub__title-text{color:var(--wpds-color-foreground-content-neutral,#1e1e1e);font-size:13px;font-weight:499}.boot-site-hub__title-text,.boot-site-hub__url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.boot-site-hub__url{color:var(--wpds-color-foreground-content-neutral-weak,#707070);font-size:12px}"));
-  document.head.appendChild(style);
-}
-
-// packages/boot/src/components/site-hub/index.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function SiteHub() {
-  const { dashboardLink, homeUrl, siteTitle } = useSelect((select) => {
-    const { getEntityRecord } = select(coreStore);
-    const _base = getEntityRecord(
-      "root",
-      "__unstableBase"
-    );
-    return {
-      dashboardLink: select(bootStore).getDashboardLink(),
-      homeUrl: _base?.home,
-      siteTitle: !_base?.name && !!_base?.url ? filterURLForDisplay(_base?.url) : _base?.name
-    };
-  }, []);
-  const { open: openCommandCenter } = useDispatch(commandsStore);
-  return /* @__PURE__ */ jsxs("div", { className: "boot-site-hub", children: [
-    /* @__PURE__ */ jsx(
-      SiteIconLink,
-      {
-        to: dashboardLink || "/",
-        "aria-label": __("Go to the Dashboard")
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      ExternalLink,
-      {
-        href: homeUrl ?? "/",
-        className: "boot-site-hub__title",
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "boot-site-hub__title-text", children: siteTitle && decodeEntities(siteTitle) }),
-          /* @__PURE__ */ jsx("div", { className: "boot-site-hub__url", children: filterURLForDisplay(homeUrl ?? "") })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(HStack, { className: "boot-site-hub__actions", children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "tertiary",
-        icon: search,
-        onClick: () => openCommandCenter(),
-        size: "compact",
-        label: __("Open command palette"),
-        shortcut: displayShortcut.primary("k")
-      }
-    ) })
-  ] });
-}
-var site_hub_default = SiteHub;
-export {
-  site_hub_default as default
-};
-//# sourceMappingURL=index.mjs.map

package/build-module/components/site-hub/index.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/site-hub/index.tsx", "../../../src/components/site-hub/style.scss"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tExternalLink,\n\tButton,\n\t// @ts-ignore\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { search } from '@wordpress/icons';\nimport { displayShortcut } from '@wordpress/keycodes';\n// @ts-expect-error Commands is not typed properly.\nimport { store as commandsStore } from '@wordpress/commands';\nimport { filterURLForDisplay } from '@wordpress/url';\nimport type { UnstableBase } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport SiteIconLink from '../site-icon-link';\nimport { store as bootStore } from '../../store';\nimport './style.scss';\n\nfunction SiteHub() {\n\tconst { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord } = select( coreStore );\n\t\tconst _base = getEntityRecord< UnstableBase >(\n\t\t\t'root',\n\t\t\t'__unstableBase'\n\t\t);\n\t\treturn {\n\t\t\tdashboardLink: select( bootStore ).getDashboardLink(),\n\t\t\thomeUrl: _base?.home,\n\t\t\tsiteTitle:\n\t\t\t\t! _base?.name && !! _base?.url\n\t\t\t\t\t? filterURLForDisplay( _base?.url )\n\t\t\t\t\t: _base?.name,\n\t\t};\n\t}, [] );\n\tconst { open: openCommandCenter } = useDispatch( commandsStore );\n\n\treturn (\n\t\t<div className=\"boot-site-hub\">\n\t\t\t<SiteIconLink\n\t\t\t\tto={ dashboardLink || '/' }\n\t\t\t\taria-label={ __( 'Go to the Dashboard' ) }\n\t\t\t/>\n\t\t\t<ExternalLink\n\t\t\t\thref={ homeUrl ?? '/' }\n\t\t\t\tclassName=\"boot-site-hub__title\"\n\t\t\t>\n\t\t\t\t<div className=\"boot-site-hub__title-text\">\n\t\t\t\t\t{ siteTitle && decodeEntities( siteTitle ) }\n\t\t\t\t</div>\n\t\t\t\t<div className=\"boot-site-hub__url\">\n\t\t\t\t\t{ filterURLForDisplay( homeUrl ?? '' ) }\n\t\t\t\t</div>\n\t\t\t</ExternalLink>\n\t\t\t<HStack className=\"boot-site-hub__actions\">\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\ticon={ search }\n\t\t\t\t\tonClick={ () => openCommandCenter() }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\tlabel={ __( 'Open command palette' ) }\n\t\t\t\t\tshortcut={ displayShortcut.primary( 'k' ) }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</div>\n\t);\n}\n\nexport default SiteHub;\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='74d234ae17']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"74d234ae17\");\n\tstyle.appendChild(document.createTextNode(\".boot-site-hub{align-items:center;background-color:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);display:grid;flex-shrink:0;grid-template-columns:60px 1fr auto;padding-right:16px;position:sticky;top:0;z-index:1}.boot-site-hub__actions{flex-shrink:0}.boot-site-hub__title{align-items:center;display:flex;text-decoration:none}.boot-site-hub__title .components-external-link__contents{margin-inline-start:4px;max-width:140px;overflow:hidden;text-decoration:none}.boot-site-hub__title .components-external-link__icon{opacity:0;transition:opacity .1s ease-out}.boot-site-hub__title:hover .components-external-link__icon{opacity:1}@media not (prefers-reduced-motion){.boot-site-hub__title{transition:outline .1s ease-out}}.boot-site-hub__title:focus:not(:active){outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}.boot-site-hub__title-text{color:var(--wpds-color-foreground-content-neutral,#1e1e1e);font-size:13px;font-weight:499}.boot-site-hub__title-text,.boot-site-hub__url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.boot-site-hub__url{color:var(--wpds-color-foreground-content-neutral-weak,#707070);font-size:12px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";AAGA,SAAS,WAAW,mBAAmB;AACvC;AAAA,EACC;AAAA,EACA;AAAA,EAEA,wBAAwB;AAAA,OAClB;AACP,SAAS,UAAU;AACnB,SAAS,SAAS,iBAAiB;AACnC,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,uBAAuB;AAEhC,SAAS,SAAS,qBAAqB;AACvC,SAAS,2BAA2B;AAMpC,OAAO,kBAAkB;AACzB,SAAS,SAAS,iBAAiB;;;ACxBnC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,2zCAA2zC,CAAC;AACt2C,WAAS,KAAK,YAAY,KAAK;AAChC;;;AD0CG,cAIA,YAJA;AApBH,SAAS,UAAU;AAClB,QAAM,EAAE,eAAe,SAAS,UAAU,IAAI,UAAW,CAAE,WAAY;AACtE,UAAM,EAAE,gBAAgB,IAAI,OAAQ,SAAU;AAC9C,UAAM,QAAQ;AAAA,MACb;AAAA,MACA;AAAA,IACD;AACA,WAAO;AAAA,MACN,eAAe,OAAQ,SAAU,EAAE,iBAAiB;AAAA,MACpD,SAAS,OAAO;AAAA,MAChB,WACC,CAAE,OAAO,QAAQ,CAAC,CAAE,OAAO,MACxB,oBAAqB,OAAO,GAAI,IAChC,OAAO;AAAA,IACZ;AAAA,EACD,GAAG,CAAC,CAAE;AACN,QAAM,EAAE,MAAM,kBAAkB,IAAI,YAAa,aAAc;AAE/D,SACC,qBAAC,SAAI,WAAU,iBACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,IAAK,iBAAiB;AAAA,QACtB,cAAa,GAAI,qBAAsB;AAAA;AAAA,IACxC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAO,WAAW;AAAA,QAClB,WAAU;AAAA,QAEV;AAAA,8BAAC,SAAI,WAAU,6BACZ,uBAAa,eAAgB,SAAU,GAC1C;AAAA,UACA,oBAAC,SAAI,WAAU,sBACZ,8BAAqB,WAAW,EAAG,GACtC;AAAA;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,UAAO,WAAU,0BACjB;AAAA,MAAC;AAAA;AAAA,QACA,SAAQ;AAAA,QACR,MAAO;AAAA,QACP,SAAU,MAAM,kBAAkB;AAAA,QAClC,MAAK;AAAA,QACL,OAAQ,GAAI,sBAAuB;AAAA,QACnC,UAAW,gBAAgB,QAAS,GAAI;AAAA;AAAA,IACzC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,mBAAQ;",
-  "names": []
-}