Sidebar container: Fix sticky scrolling behaviour

Recent changes to the global header and footer caused the floating sidebar containers on Dev Hub and Docs to not become sticky when scrolling.
This commit adjusts the sticky position, and makes the footer element selector more robust, using a classname rather than a tagname.

Author: adamwoodnz

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

@@ -7,7 +7,6 @@
 
 	/* Account for local nav height on larger screens where it becomes fixed. */
 	@media (min-width: 890px) {
-		--local--nav--offset: 0;
 		--local--offset-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--local-navigation-bar--spacing--height, 60px));
 	}
 

mu-plugins/blocks/sidebar-container/src/block.json

@@ -5,7 +5,7 @@
 	"title": "Sidebar Container",
 	"icon": "align-pull-right",
 	"category": "layout",
-	"description": "A sticky container to be used in 2-column layouts.",
+	"description": "A sticky container to be used in column layouts.",
 	"textdomain": "wporg",
 	"attributes": {
 		"hasBackToTop": {

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

@@ -2,7 +2,6 @@ let containers;
 let main;
 let footer;
 let adminBarHeight;
-let globalNavHeight;
 const scrollHandlers = [];
 
 /**
@@ -46,7 +45,7 @@ function createScrollHandler( container ) {
 
 		// Toggle the fixed position based on whether main has reached the local nav.
 		// This assumes that main and the sidebar are top aligned.
-		const shouldFix = mainTop <= globalNavHeight + localNavHeight;
+		const shouldFix = mainTop <= localNavHeight + adminBarHeight;
 		container.classList.toggle( 'is-fixed-sidebar', shouldFix );
 
 		// If the sidebar is fixed and the footer is visible in the viewport, reduce the height to stop overlap.
@@ -72,7 +71,6 @@ function onResize() {
 		window.getComputedStyle( document.documentElement ).getPropertyValue( 'margin-top' ),
 		10
 	);
-	globalNavHeight = getCustomPropValue( '--wp-global-header-height' ) || 90;
 
 	containers.forEach( ( container ) => {
 		// Toggle the floating class based on the configured breakpoint.
@@ -88,10 +86,14 @@ function onResize() {
 	scrollHandlers.forEach( ( handler ) => handler() );
 }
 
+/**
+ * Initialize the sidebar container.
+ * Three elements are required: main, a sidebar container (or multiple), and a footer.
+ */
 function init() {
 	main = document.querySelector( 'main' );
 	containers = document.querySelectorAll( '.wp-block-wporg-sidebar-container' );
-	footer = document.querySelector( 'footer.wp-block-template-part' );
+	footer = document.querySelector( '.wporg-footer' );
 
 	if ( main && containers.length && footer ) {
 		containers.forEach( ( container ) => {