Adjust settings to work with Documentation site

mu-plugins/blocks/sidebar-container/postcss/style.pcss

@@ -16,17 +16,19 @@
 		--local--block-end-sidebar--width: 340px;
 
 		position: absolute;
-		top: calc(var(--wp-global-header-offset, 0px) + var(--wp-local-header-offset, 0px));
 		top: calc(var(--wp-global-header-offset, 90px) + var(--wp--custom--local-navigation-bar--spacing--height, 60px));
 
 		/* Right offset should be "edge spacing" at minimum, otherwise calculate it to be centered. */
 		right: max(var(--wp--preset--spacing--edge-space), calc((100% - var(--wp--style--global--wide-size)) / 2));
 		width: var(--local--block-end-sidebar--width);
-		margin-top: var(--wp--custom--wporg-sidebar-container--spacing--margin--top) !important;
+		margin-top: var(--wp--custom--wporg-sidebar-container--spacing--margin--top);
 
 		&.is-fixed-sidebar {
 			position: fixed;
 			top: 0;
+
+			/* Make the space above the sidebar the same as the height of the local nav. */
+			margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--local-navigation-bar--spacing--height, 60px) * 2);
 		}
 
 		&.is-bottom-sidebar {
@@ -53,7 +55,7 @@
 @media (min-width: 890px) {
 	/* stylelint-disable selector-id-pattern */
 	#wp--skip-link--target {
-		scroll-margin-top: var(--wp-local-header-offset, 0);
+		scroll-margin-top: var(--wp--custom--local-navigation-bar--spacing--height, 0);
 	}
 }
 

mu-plugins/blocks/sidebar-container/src/view.js

@@ -1,11 +1,18 @@
 /**
- * FIXED_HEADER_HEIGHT is the calculated value of the admin bar + header height + local nav bar.
  * Fallback values for custom properties match CSS defaults.
  */
-const LOCAL_NAV_HEIGHT = getCustomPropValue( '--wp--custom--local-navigation-bar--spacing--height' ) || 60;
-const FIXED_HEADER_HEIGHT = 32 + 90 + LOCAL_NAV_HEIGHT;
-const GAP = getCustomPropValue( '--wp--custom--wporg-sidebar-container--spacing--margin--top' ) || 80;
-const BOTTOM_GAP = getCustomPropValue( '--wp--preset--spacing--edge-space' ) || 80;
+const globalNavHeight = 90;
+const localNavHeight = getCustomPropValue( '--wp--custom--local-navigation-bar--spacing--height' ) || 60;
+
+const ADMIN_BAR_HEIGHT = parseInt(
+	window.getComputedStyle( document.documentElement ).getPropertyValue( 'margin-top' ),
+	10
+);
+const SPACE_FROM_BOTTOM = getCustomPropValue( '--wp--preset--spacing--edge-space' ) || 80;
+const SPACE_TO_TOP = getCustomPropValue( '--wp--custom--wporg-sidebar-container--spacing--margin--top' ) || 80;
+const VERTICAL_SPACE = SPACE_TO_TOP + SPACE_FROM_BOTTOM;
+const FIXED_HEADER_HEIGHT = globalNavHeight + localNavHeight + ADMIN_BAR_HEIGHT;
+const SCROLL_POSITION_TO_FIX = globalNavHeight + SPACE_TO_TOP - localNavHeight - ADMIN_BAR_HEIGHT;
 
 let container;
 let mainEl;
@@ -40,38 +47,33 @@ function onScroll() {
 	}
 
 	const footerStart = mainEl.offsetTop + mainEl.offsetHeight;
-	const viewportYOffset = window
-		.getComputedStyle( document.documentElement )
-		.getPropertyValue( 'margin-top' )
-		.replace( 'px', '' );
-
 	// This value needs to take account the margin on `html`.
-	const scrollPosition = window.scrollY - viewportYOffset;
+	const scrollPosition = window.scrollY - ADMIN_BAR_HEIGHT;
 
 	if ( ! container.classList.contains( 'is-bottom-sidebar' ) ) {
 		// The pixel location of the bottom of the sidebar, relative to the top of the page.
 		const sidebarBottom = scrollPosition + container.offsetHeight + container.offsetTop;
 
 		// Is the sidebar bottom crashing into the footer?
-		if ( footerStart - BOTTOM_GAP < sidebarBottom ) {
+		if ( footerStart - SPACE_FROM_BOTTOM < sidebarBottom ) {
 			container.classList.add( 'is-bottom-sidebar' );
 			// Bottom sidebar is absolutely positioned, so we need to set the top relative to the page origin.
 			container.style.setProperty(
 				'top',
 				// Starting from the footer Y position, subtract the sidebar height and gap/margins, and add
 				// the viewport offset. This ensures the sidebar doesn't jump when the class is switched.
-				`${ footerStart - container.clientHeight - GAP - BOTTOM_GAP + viewportYOffset * 1 }px`
+				`${ footerStart - container.clientHeight - VERTICAL_SPACE + ADMIN_BAR_HEIGHT * 1 }px`
 			);
 			return true;
 		}
-	} else if ( footerStart - container.offsetHeight - GAP - BOTTOM_GAP > scrollPosition ) {
+	} else if ( footerStart - container.offsetHeight - VERTICAL_SPACE > scrollPosition ) {
 		// If the scroll position is higher than the top of the sidebar, switch back to just a fixed sidebar.
 		container.classList.remove( 'is-bottom-sidebar' );
 		container.style.removeProperty( 'top' );
 	}
 
 	// Toggle the fixed position based on whether the scrollPosition is greater than the initial gap from the top.
-	container.classList.toggle( 'is-fixed-sidebar', scrollPosition > GAP );
+	container.classList.toggle( 'is-fixed-sidebar', scrollPosition > SCROLL_POSITION_TO_FIX );
 
 	return false;
 }
@@ -80,14 +82,12 @@ function isSidebarWithinViewport() {
 	if ( ! container ) {
 		return false;
 	}
-	// Margin offset from the top of the sidebar.
-	const gap = getCustomPropValue( '--wp--custom--wporg-sidebar-container--spacing--margin--top' );
 	// Usable viewport height.
 	const viewHeight = window.innerHeight - FIXED_HEADER_HEIGHT;
 	// Get the height of the sidebar, plus the top margin and 50px for the
 	// "Back to top" link, which isn't visible until `is-fixed-sidebar` is
 	// added, therefore not included in the offsetHeight value.
-	const sidebarHeight = container.offsetHeight + gap + 50;
+	const sidebarHeight = container.offsetHeight + SPACE_TO_TOP + 50;
 	// If the sidebar is shorter than the view area, apply the class so
 	// that it's fixed and scrolls with the page content.
 	return sidebarHeight < viewHeight;