From bab8c5aa4d6e04681dddfea339fc938d6759df0f Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Tue, 19 Nov 2024 14:43:03 +1300
Subject: [PATCH] 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.
---
 mu-plugins/blocks/sidebar-container/postcss/style.pcss |  1 -
 mu-plugins/blocks/sidebar-container/src/block.json     |  2 +-
 mu-plugins/blocks/sidebar-container/src/view.js        | 10 ++++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/mu-plugins/blocks/sidebar-container/postcss/style.pcss b/mu-plugins/blocks/sidebar-container/postcss/style.pcss
index c9b67e588..03ba95f8e 100644
--- a/mu-plugins/blocks/sidebar-container/postcss/style.pcss
+++ b/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));
 	}
 
diff --git a/mu-plugins/blocks/sidebar-container/src/block.json b/mu-plugins/blocks/sidebar-container/src/block.json
index 2465174b0..42e0d6963 100644
--- a/mu-plugins/blocks/sidebar-container/src/block.json
+++ b/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": {
diff --git a/mu-plugins/blocks/sidebar-container/src/view.js b/mu-plugins/blocks/sidebar-container/src/view.js
index fb118bfbc..aa7567f5b 100644
--- a/mu-plugins/blocks/sidebar-container/src/view.js
+++ b/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 ) => {