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

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

@@ -17,15 +17,17 @@
 }
 
 .boot-site-hub__title {
-	display: flex;
-	align-items: center;
+	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;
-		overflow: hidden;
-		max-width: 140px;
 	}
 
 	// Show icon on hover
@@ -50,20 +52,3 @@
 		outline-offset: calc(-1 * var(--wpds-border-width-interactive-focus, 2px));
 	}
 }
-
-.boot-site-hub__title-text {
-	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;
-}
-
-.boot-site-hub__url {
-	color: var(--wpds-color-fg-content-neutral-weak, #757575);
-	font-size: variables.$font-size-small;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}

package/src/style.scss

@@ -1,32 +1,47 @@
 @use "@wordpress/theme/src/prebuilt/css/design-tokens.css" as *;
 @use "@wordpress/admin-ui/build-style/style.css" as *;
 @use "@wordpress/base-styles/mixins" as *;
-@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/variables";
 
+// Reset wp-admin layout styles when loaded inside wp-admin.
 .boot-layout-container .boot-layout {
-	// On mobile the main content area has to scroll, otherwise you can invoke
-	// the overscroll bounce on the non-scrolling container, for a bad experience.
-	@include break-small {
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		min-height: calc(100vh - #{$admin-bar-height-big});
-	}
+	height: calc(100vh - #{variables.$admin-bar-height});
+}
+
+body:has(.boot-layout-container) {
+	background: #1d2327; // Same as WP-Admin sidebar
+	overflow: hidden;
+	@include wp-admin-reset( ".boot-layout-container" );
+}
+
+#wpcontent {
+	padding-left: 0;
+}
 
-	// The WP header height changes at this breakpoint.
+#wpbody-content {
+	padding-bottom: 0;
+}
+
+#wpfooter {
+	display: none;
+}
+
+body:has(.boot-layout.has-full-canvas) {
 	@include break-medium {
-		min-height: calc(100vh - #{$admin-bar-height});
+		// Reset the html.wp-topbar padding.
+		// Because this uses negative margins, we have to compensate for the height.
+		margin-top: - variables.$admin-bar-height;
+		height: calc(100% + #{ variables.$admin-bar-height });
 
-		body:has(.boot-layout.has-full-canvas) & {
-			min-height: 100vh;
+		#adminmenumain,
+		#wpadminbar {
+			display: none;
 		}
-	}
 
-	img {
-		max-width: 100%;
-		height: auto;
+		#wpcontent,
+		#wpfooter {
+			margin-left: 0;
+		}
 	}
 }
 

package/tsconfig.json

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