@wordpress/boot 0.3.1-next.738bb1424.0 → 0.4.0

package/build-module/store/index.js

@@ -1,8 +1,8 @@
 // packages/boot/src/store/index.ts
 import { createReduxStore, register } from "@wordpress/data";
-import { reducer } from "./reducer.js";
-import * as actions from "./actions.js";
-import * as selectors from "./selectors.js";
+import { reducer } from "./reducer";
+import * as actions from "./actions";
+import * as selectors from "./selectors";
 var STORE_NAME = "wordpress/boot";
 var store = createReduxStore(STORE_NAME, {
   reducer,

package/build-style/style-rtl.css

@@ -450,27 +450,69 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-@media (min-width: 600px) {
-  .boot-layout-container .boot-layout {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    min-height: calc(100vh - 46px);
-  }
+.boot-layout-container .boot-layout {
+  height: calc(100vh - 32px);
+}
+
+body:has(.boot-layout-container) {
+  background: #1d2327;
+  overflow: hidden;
+  background: #fff;
+}
+body:has(.boot-layout-container) #wpcontent {
+  padding-right: 0;
+}
+body:has(.boot-layout-container) #wpbody-content {
+  padding-bottom: 0;
+}
+body:has(.boot-layout-container) {
+  /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
+     Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
 }
+body:has(.boot-layout-container) #wpbody-content > div:not(.boot-layout-container):not(#screen-meta) {
+  display: none;
+}
+body:has(.boot-layout-container) #wpfooter {
+  display: none;
+}
+body:has(.boot-layout-container) .a11y-speak-region {
+  right: -1px;
+  top: -1px;
+}
+body:has(.boot-layout-container) ul#adminmenu a.wp-has-current-submenu::after,
+body:has(.boot-layout-container) ul#adminmenu > li.current > a.current::after {
+  border-left-color: #fff;
+}
+body:has(.boot-layout-container) .media-frame select.attachment-filters:last-of-type {
+  width: auto;
+  max-width: 100%;
+}
+
+#wpcontent {
+  padding-right: 0;
+}
+
+#wpbody-content {
+  padding-bottom: 0;
+}
+
+#wpfooter {
+  display: none;
+}
+
 @media (min-width: 782px) {
-  .boot-layout-container .boot-layout {
-    min-height: calc(100vh - 32px);
+  body:has(.boot-layout.has-full-canvas) {
+    margin-top: -32px;
+    height: calc(100% + 32px);
   }
-  body:has(.boot-layout.has-full-canvas) .boot-layout-container .boot-layout {
-    min-height: 100vh;
+  body:has(.boot-layout.has-full-canvas) #adminmenumain,
+  body:has(.boot-layout.has-full-canvas) #wpadminbar {
+    display: none;
+  }
+  body:has(.boot-layout.has-full-canvas) #wpcontent,
+  body:has(.boot-layout.has-full-canvas) #wpfooter {
+    margin-right: 0;
   }
-}
-.boot-layout-container .boot-layout img {
-  max-width: 100%;
-  height: auto;
 }
 
 .boot-layout .components-editor-notices__snackbar {

package/build-style/style.css

@@ -450,27 +450,69 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-@media (min-width: 600px) {
-  .boot-layout-container .boot-layout {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    min-height: calc(100vh - 46px);
-  }
+.boot-layout-container .boot-layout {
+  height: calc(100vh - 32px);
+}
+
+body:has(.boot-layout-container) {
+  background: #1d2327;
+  overflow: hidden;
+  background: #fff;
+}
+body:has(.boot-layout-container) #wpcontent {
+  padding-left: 0;
+}
+body:has(.boot-layout-container) #wpbody-content {
+  padding-bottom: 0;
+}
+body:has(.boot-layout-container) {
+  /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
+     Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
 }
+body:has(.boot-layout-container) #wpbody-content > div:not(.boot-layout-container):not(#screen-meta) {
+  display: none;
+}
+body:has(.boot-layout-container) #wpfooter {
+  display: none;
+}
+body:has(.boot-layout-container) .a11y-speak-region {
+  left: -1px;
+  top: -1px;
+}
+body:has(.boot-layout-container) ul#adminmenu a.wp-has-current-submenu::after,
+body:has(.boot-layout-container) ul#adminmenu > li.current > a.current::after {
+  border-right-color: #fff;
+}
+body:has(.boot-layout-container) .media-frame select.attachment-filters:last-of-type {
+  width: auto;
+  max-width: 100%;
+}
+
+#wpcontent {
+  padding-left: 0;
+}
+
+#wpbody-content {
+  padding-bottom: 0;
+}
+
+#wpfooter {
+  display: none;
+}
+
 @media (min-width: 782px) {
-  .boot-layout-container .boot-layout {
-    min-height: calc(100vh - 32px);
+  body:has(.boot-layout.has-full-canvas) {
+    margin-top: -32px;
+    height: calc(100% + 32px);
   }
-  body:has(.boot-layout.has-full-canvas) .boot-layout-container .boot-layout {
-    min-height: 100vh;
+  body:has(.boot-layout.has-full-canvas) #adminmenumain,
+  body:has(.boot-layout.has-full-canvas) #wpadminbar {
+    display: none;
+  }
+  body:has(.boot-layout.has-full-canvas) #wpcontent,
+  body:has(.boot-layout.has-full-canvas) #wpfooter {
+    margin-left: 0;
   }
-}
-.boot-layout-container .boot-layout img {
-  max-width: 100%;
-  height: auto;
 }
 
 .boot-layout .components-editor-notices__snackbar {

package/build-types/components/app/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../src/components/app/router.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAmB3C,OAAO,KAAK,EAAE,KAAK,EAAmC,MAAM,mBAAmB,CAAC;AA4KhF,UAAU,WAAW;IACpB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAE,EAC/B,MAAM,EACN,aAAoB,GACpB,EAAE,WAAW,+BAiCb"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../src/components/app/router.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAmB3C,OAAO,KAAK,EAAE,KAAK,EAAmC,MAAM,mBAAmB,CAAC;AAwKhF,UAAU,WAAW;IACpB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAE,EAC/B,MAAM,EACN,aAAoB,GACpB,EAAE,WAAW,+BAkCb"}

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

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

package/build-types/components/site-hub/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/site-hub/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,cAAc,CAAC;AAEtB,iBAAS,OAAO,gCA2Cf;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/site-hub/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,cAAc,CAAC;AAEtB,iBAAS,OAAO,gCAsCf;AAED,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/boot",
-	"version": "0.3.1-next.738bb1424.0",
+	"version": "0.4.0",
 	"description": "Minimal boot package for WordPress admin pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,14 +22,6 @@
 		"node": ">=18.12.0",
 		"npm": ">=8.19.2"
 	},
-	"files": [
-		"src",
-		"build-module",
-		"build-style",
-		"build-types",
-		"*.md"
-	],
-	"type": "module",
 	"module": "build-module/index.js",
 	"exports": {
 		".": {
@@ -42,26 +34,26 @@
 	"wpScriptModuleExports": "./build-module/index.js",
 	"types": "build-types",
 	"dependencies": {
-		"@wordpress/a11y": "^4.36.1-next.738bb1424.0",
-		"@wordpress/admin-ui": "^1.4.1-next.738bb1424.0",
-		"@wordpress/commands": "^1.36.1-next.738bb1424.0",
-		"@wordpress/components": "^31.0.1-next.738bb1424.0",
-		"@wordpress/compose": "^7.36.1-next.738bb1424.0",
-		"@wordpress/core-data": "^7.36.1-next.738bb1424.0",
-		"@wordpress/data": "^10.36.1-next.738bb1424.0",
-		"@wordpress/editor": "^14.36.1-next.738bb1424.0",
-		"@wordpress/element": "^6.36.1-next.738bb1424.0",
-		"@wordpress/html-entities": "^4.36.1-next.738bb1424.0",
-		"@wordpress/i18n": "^6.9.1-next.738bb1424.0",
-		"@wordpress/icons": "^11.3.1-next.738bb1424.0",
-		"@wordpress/keyboard-shortcuts": "^5.36.1-next.738bb1424.0",
-		"@wordpress/keycodes": "^4.36.1-next.738bb1424.0",
-		"@wordpress/lazy-editor": "^1.2.1-next.738bb1424.0",
-		"@wordpress/primitives": "^4.36.1-next.738bb1424.0",
-		"@wordpress/private-apis": "^1.36.1-next.738bb1424.0",
-		"@wordpress/route": "^0.2.1-next.738bb1424.0",
-		"@wordpress/theme": "^0.4.1-next.738bb1424.0",
-		"@wordpress/url": "^4.36.1-next.738bb1424.0",
+		"@wordpress/a11y": "^4.37.0",
+		"@wordpress/admin-ui": "^1.5.0",
+		"@wordpress/commands": "^1.37.0",
+		"@wordpress/components": "^31.0.0",
+		"@wordpress/compose": "^7.37.0",
+		"@wordpress/core-data": "^7.37.0",
+		"@wordpress/data": "^10.37.0",
+		"@wordpress/editor": "^14.37.0",
+		"@wordpress/element": "^6.37.0",
+		"@wordpress/html-entities": "^4.37.0",
+		"@wordpress/i18n": "^6.10.0",
+		"@wordpress/icons": "^11.4.0",
+		"@wordpress/keyboard-shortcuts": "^5.37.0",
+		"@wordpress/keycodes": "^4.37.0",
+		"@wordpress/lazy-editor": "^1.3.0",
+		"@wordpress/primitives": "^4.37.0",
+		"@wordpress/private-apis": "^1.37.0",
+		"@wordpress/route": "^0.3.0",
+		"@wordpress/theme": "^0.4.0",
+		"@wordpress/url": "^4.37.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -71,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab1b004c0d61c295aa34bc86ea07f979343983ce"
+	"gitHead": "2cf13ec6cf86153c9b3cf369bf5c59046f5cd950"
 }

package/src/components/app/router.tsx

@@ -7,7 +7,7 @@ import type { ComponentType } from 'react';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { Page } from '@wordpress/admin-ui';
 import {
 	privateApis as routePrivateApis,
@@ -52,33 +52,29 @@ function NotFoundComponent() {
  * @param parentRoute Parent route.
  * @return Tanstack Route.
  */
-function createRouteFromDefinition( route: Route, parentRoute: AnyRoute ) {
+async function createRouteFromDefinition(
+	route: Route,
+	parentRoute: AnyRoute
+) {
+	let routeConfig: RouteConfig = {};
+
+	if ( route.route_module ) {
+		const module = await import( route.route_module );
+		routeConfig = module.route || {};
+	}
+
 	// Create route without component initially
 	let tanstackRoute = createRoute( {
 		getParentRoute: () => parentRoute,
 		path: route.path,
-		beforeLoad: async ( opts: any ) => {
-			// Import route module here (lazy)
-			if ( route.route_module ) {
-				const module = await import( route.route_module );
-				const routeConfig = module.route || {};
-
-				if ( routeConfig.beforeLoad ) {
-					return routeConfig.beforeLoad( {
+		beforeLoad: routeConfig.beforeLoad
+			? ( opts: any ) =>
+					routeConfig.beforeLoad!( {
 						params: opts.params || {},
 						search: opts.search || {},
-					} );
-				}
-			}
-		},
+					} )
+			: undefined,
 		loader: async ( opts: any ) => {
-			// Import route module here (lazy)
-			let routeConfig: RouteConfig = {};
-			if ( route.route_module ) {
-				const module = await import( route.route_module );
-				routeConfig = module.route || {};
-			}
-
 			const context: RouteLoaderContext = {
 				params: opts.params || {},
 				search: opts.deps || {},
@@ -158,7 +154,7 @@ function createRouteFromDefinition( route: Route, parentRoute: AnyRoute ) {
  * @param rootComponent Root component to use for the router.
  * @return Router tree.
  */
-function createRouteTree(
+async function createRouteTree(
 	routes: Route[],
 	rootComponent: ComponentType = Root
 ) {
@@ -167,9 +163,9 @@ function createRouteTree(
 		context: () => ( {} ),
 	} );
 
-	// Create routes from definitions (now synchronous)
-	const dynamicRoutes = routes.map( ( route ) =>
-		createRouteFromDefinition( route, rootRoute )
+	// Create routes from definitions
+	const dynamicRoutes = await Promise.all(
+		routes.map( ( route ) => createRouteFromDefinition( route, rootRoute ) )
 	);
 
 	return rootRoute.addChildren( dynamicRoutes );
@@ -201,36 +197,37 @@ export default function Router( {
 	routes,
 	rootComponent = Root,
 }: RouterProps ) {
-	const router = useMemo( () => {
-		const history = createPathHistory();
-		const routeTree = createRouteTree( routes, rootComponent );
-
-		return createRouter( {
-			history,
-			routeTree,
-			defaultPreload: 'intent',
-			defaultNotFoundComponent: NotFoundComponent,
-			defaultViewTransition: {
-				types: ( {
-					fromLocation,
-				}: {
-					fromLocation?: unknown;
-					toLocation: unknown;
-					pathChanged: boolean;
-					hrefChanged: boolean;
-					hashChanged: boolean;
-				} ) => {
-					// Disable view transition on initial navigation (no previous location)
-					if ( ! fromLocation ) {
-						return false;
-					}
-
-					// Enable with navigation type for subsequent navigations
-					return [ 'navigate' ];
-				},
-			},
-		} );
+	const [ router, setRouter ] = useState< any >( null );
+
+	useEffect( () => {
+		let cancelled = false;
+
+		async function initializeRouter() {
+			const history = createPathHistory();
+			const routeTree = await createRouteTree( routes, rootComponent );
+
+			if ( ! cancelled ) {
+				const newRouter = createRouter( {
+					history,
+					routeTree,
+					defaultPreload: 'intent',
+					defaultNotFoundComponent: NotFoundComponent,
+					defaultViewTransition: true,
+				} );
+				setRouter( newRouter );
+			}
+		}
+
+		initializeRouter();
+
+		return () => {
+			cancelled = true;
+		};
 	}, [ routes, rootComponent ] );
 
+	if ( ! router ) {
+		return <div>Loading routes...</div>;
+	}
+
 	return <RouterProvider router={ router } />;
 }

package/src/components/root/index.tsx

@@ -9,6 +9,7 @@ import clsx from 'clsx';
 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';
 import { EditorSnackbars } from '@wordpress/editor';
 import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
 import {
@@ -32,8 +33,8 @@ 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 { ThemeProvider } = unlock( themePrivateApis );
 const { useLocation, useMatches, Outlet } = unlock( routePrivateApis );
 
 export default function Root() {
@@ -61,8 +62,11 @@ export default function Root() {
 
 	return (
 		<SlotFillProvider>
-			<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>
-				<UserThemeProvider color={ { bg: '#1d2327' } }>
+			<ThemeProvider
+				isRoot
+				color={ { bg: '#f8f8f8', primary: '#3858e9' } }
+			>
+				<ThemeProvider color={ { bg: '#1d2327', primary: '#3858e9' } }>
 					<div
 						className={ clsx( 'boot-layout', {
 							'has-canvas': !! canvas || canvas === null,
@@ -142,50 +146,48 @@ export default function Root() {
 							</div>
 						) }
 						<div className="boot-layout__surfaces">
-							<UserThemeProvider color={ { bg: '#ffffff' } }>
+							<ThemeProvider
+								color={ { bg: '#ffffff', primary: '#3858e9' } }
+							>
 								<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>
-								) }
-							</UserThemeProvider>
+							</ThemeProvider>
+							{ /* 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>
+							) }
 						</div>
 					</div>
-				</UserThemeProvider>
-			</UserThemeProvider>
+				</ThemeProvider>
+			</ThemeProvider>
 		</SlotFillProvider>
 	);
 }

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

@@ -9,6 +9,7 @@ import clsx from 'clsx';
 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';
 import { EditorSnackbars } from '@wordpress/editor';
 
 /**
@@ -20,9 +21,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).
@@ -42,8 +43,8 @@ export default function RootSinglePage() {
 	useRouteTitle();
 
 	return (
-		<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>
-			<UserThemeProvider color={ { bg: '#1d2327' } }>
+		<ThemeProvider isRoot color={ { bg: '#f8f8f8', primary: '#3858e9' } }>
+			<ThemeProvider color={ { bg: '#1d2327', primary: '#3858e9' } }>
 				<div
 					className={ clsx( 'boot-layout boot-layout--single-page', {
 						'has-canvas': !! canvas || canvas === null,
@@ -54,23 +55,23 @@ export default function RootSinglePage() {
 					<SavePanel />
 					<EditorSnackbars />
 					<div className="boot-layout__surfaces">
-						<UserThemeProvider color={ { bg: '#ffffff' } }>
+						<ThemeProvider
+							color={ { bg: '#ffffff', primary: '#3858e9' } }
+						>
 							<Outlet />
-							{ /* Render Canvas in Root to prevent remounting on route changes */ }
-							{ ( canvas || canvas === null ) && (
-								<div className="boot-layout__canvas">
-									<CanvasRenderer
-										canvas={ canvas }
-										routeContentModule={
-											routeContentModule
-										}
-									/>
-								</div>
-							) }
-						</UserThemeProvider>
+						</ThemeProvider>
+						{ /* Render Canvas in Root to prevent remounting on route changes */ }
+						{ ( canvas || canvas === null ) && (
+							<div className="boot-layout__canvas">
+								<CanvasRenderer
+									canvas={ canvas }
+									routeContentModule={ routeContentModule }
+								/>
+							</div>
+						) }
 					</div>
 				</div>
-			</UserThemeProvider>
-		</UserThemeProvider>
+			</ThemeProvider>
+		</ThemeProvider>
 	);
 }

package/src/components/root/style.scss

@@ -72,7 +72,6 @@
 
 		.boot-layout--single-page & {
 			margin-top: 0;
-			margin-left: 0;
 		}
 	}
 }

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

@@ -48,12 +48,7 @@ function SiteHub() {
 				href={ homeUrl ?? '/' }
 				className="boot-site-hub__title"
 			>
-				<div className="boot-site-hub__title-text">
-					{ siteTitle && decodeEntities( siteTitle ) }
-				</div>
-				<div className="boot-site-hub__url">
-					{ filterURLForDisplay( homeUrl ?? '' ) }
-				</div>
+				{ siteTitle && decodeEntities( siteTitle ) }
 			</ExternalLink>
 			<HStack className="boot-site-hub__actions">
 				<Button