From b9309f7786bc43b009816f4d73db553e8dfa1e5f Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Fri, 12 Jan 2024 14:43:52 +1300
Subject: [PATCH] Decouple ToC expanding logic from sidebar container

---
 .../blocks/sidebar-container/src/view.js      | 14 -----------
 .../blocks/table-of-contents/src/block.json   |  3 ++-
 .../blocks/table-of-contents/src/view.js      | 24 +++++++++++++++++++
 3 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 mu-plugins/blocks/table-of-contents/src/view.js

diff --git a/mu-plugins/blocks/sidebar-container/src/view.js b/mu-plugins/blocks/sidebar-container/src/view.js
index fb3d2cde3..7ac7d4243 100644
--- a/mu-plugins/blocks/sidebar-container/src/view.js
+++ b/mu-plugins/blocks/sidebar-container/src/view.js
@@ -60,20 +60,6 @@ function onScroll() {
 function init() {
 	container = document.querySelector( '.wp-block-wporg-sidebar-container' );
 	mainEl = document.getElementById( 'wp--skip-link--target' );
-	const toggleButton = container?.querySelector( '.wporg-table-of-contents__toggle' );
-	const list = container?.querySelector( '.wporg-table-of-contents__list' );
-
-	if ( toggleButton && list ) {
-		toggleButton.addEventListener( 'click', function () {
-			if ( toggleButton.getAttribute( 'aria-expanded' ) === 'true' ) {
-				toggleButton.setAttribute( 'aria-expanded', false );
-				list.removeAttribute( 'style' );
-			} else {
-				toggleButton.setAttribute( 'aria-expanded', true );
-				list.setAttribute( 'style', 'display:block;' );
-			}
-		} );
-	}
 
 	if ( mainEl && container ) {
 		onScroll(); // Run once to avoid footer collisions on load (ex, when linked to #reply-title).
diff --git a/mu-plugins/blocks/table-of-contents/src/block.json b/mu-plugins/blocks/table-of-contents/src/block.json
index 5cfe99478..77e164600 100644
--- a/mu-plugins/blocks/table-of-contents/src/block.json
+++ b/mu-plugins/blocks/table-of-contents/src/block.json
@@ -26,5 +26,6 @@
 		}
 	},
 	"editorScript": "file:./index.js",
-	"style": "file:./style.css"
+	"style": "file:./style.css",
+	"viewScript": "file:./view.js"
 }
diff --git a/mu-plugins/blocks/table-of-contents/src/view.js b/mu-plugins/blocks/table-of-contents/src/view.js
new file mode 100644
index 000000000..67ac55992
--- /dev/null
+++ b/mu-plugins/blocks/table-of-contents/src/view.js
@@ -0,0 +1,24 @@
+function init() {
+	const container = document.querySelector( '.wp-block-wporg-table-of-contents' );
+
+	if ( ! container ) {
+		return;
+	}
+
+	const toggleButton = container.querySelector( '.wporg-table-of-contents__toggle' );
+	const list = container.querySelector( '.wporg-table-of-contents__list' );
+
+	if ( toggleButton && list ) {
+		toggleButton.addEventListener( 'click', function () {
+			if ( toggleButton.getAttribute( 'aria-expanded' ) === 'true' ) {
+				toggleButton.setAttribute( 'aria-expanded', false );
+				list.removeAttribute( 'style' );
+			} else {
+				toggleButton.setAttribute( 'aria-expanded', true );
+				list.setAttribute( 'style', 'display:block;' );
+			}
+		} );
+	}
+}
+
+window.addEventListener( 'load', init );