From f7d8461e129ee800a47baead8cda75ae851c8792 Mon Sep 17 00:00:00 2001
From: Ren <18050944+renintw@users.noreply.github.com>
Date: Fri, 2 Aug 2024 08:24:09 +0800
Subject: [PATCH] Add script to fix the issue (#2817)

---
 .../themes/pub/wporg-learn-2024/functions.php |  1 +
 .../themes/pub/wporg-learn-2024/package.json  | 15 ++++---
 .../src/lesson-standalone/block.json          |  4 ++
 .../src/lesson-standalone/index.php           | 40 ++++++++++++++++++
 .../src/lesson-standalone/view.js             | 41 +++++++++++++++++++
 5 files changed, 95 insertions(+), 6 deletions(-)
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/lesson-standalone/block.json
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/lesson-standalone/index.php
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/lesson-standalone/view.js

diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php
index f8225b68e..4a516e8f6 100644
--- a/wp-content/themes/pub/wporg-learn-2024/functions.php
+++ b/wp-content/themes/pub/wporg-learn-2024/functions.php
@@ -13,6 +13,7 @@
 require_once __DIR__ . '/src/learning-pathway-cards/index.php';
 require_once __DIR__ . '/src/learning-pathway-header/index.php';
 require_once __DIR__ . '/src/lesson-grid/index.php';
+require_once __DIR__ . '/src/lesson-standalone/index.php';
 require_once __DIR__ . '/src/search-results-context/index.php';
 require_once __DIR__ . '/src/sensei-progress-bar/index.php';
 require_once __DIR__ . '/src/sidebar-meta-list/index.php';
diff --git a/wp-content/themes/pub/wporg-learn-2024/package.json b/wp-content/themes/pub/wporg-learn-2024/package.json
index edc6065d1..5c8f24af0 100644
--- a/wp-content/themes/pub/wporg-learn-2024/package.json
+++ b/wp-content/themes/pub/wporg-learn-2024/package.json
@@ -1,15 +1,15 @@
 {
-    "name": "wporg-learn-2024",
-    "version": "1.0.0",
-    "description": "Theme for learn.wordpress.org",
+	"name": "wporg-learn-2024",
+	"version": "1.0.0",
+	"description": "Theme for learn.wordpress.org",
 	"author": "WordPress.org",
 	"license": "GPL-2.0-or-later",
 	"private": true,
 	"devDependencies": {
-		"@wordpress/scripts": "27.2.0",
-		"rtlcss-webpack-plugin": "4.0.7",
 		"@wordpress/icons": "^10.2.0",
-		"react-dom": "^18.3.1"
+		"@wordpress/scripts": "27.2.0",
+		"react-dom": "^18.3.1",
+		"rtlcss-webpack-plugin": "4.0.7"
 	},
 	"eslintConfig": {
 		"extends": "../../../../.eslintrc.js"
@@ -27,5 +27,8 @@
 		"lint:js": "wp-scripts lint-js src",
 		"lint:css": "wp-scripts lint-style src/**/*.scss",
 		"format": "wp-scripts format src -- --config=../../../../.prettierrc.js"
+	},
+	"dependencies": {
+		"lodash": "^4.17.21"
 	}
 }
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-standalone/block.json b/wp-content/themes/pub/wporg-learn-2024/src/lesson-standalone/block.json
new file mode 100644
index 000000000..049ee00a8
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-standalone/block.json
@@ -0,0 +1,4 @@
+{
+	"name": "wporg-learn/lesson-standalone",
+	"viewScript": "file:./view.js"
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-standalone/index.php b/wp-content/themes/pub/wporg-learn-2024/src/lesson-standalone/index.php
new file mode 100644
index 000000000..5884b8ef2
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-standalone/index.php
@@ -0,0 +1,40 @@
+<?php
+/**
+ * Adds scripts for lesson-standalone pattern.
+ */
+
+namespace WordPressdotorg\Theme\Learn_2024\Lesson_Standalone;
+
+defined( 'WPINC' ) || die();
+
+/**
+ * Actions and filters.
+ */
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Add a script to update the --sensei-wpadminbar-offset dynamically to make the standalone lesson layout correct.
+ *
+ * The dependencies are autogenerated in block.json, and can be read with
+ * `wp_json_file_decode` & `register_block_script_handle.
+ */
+function init() {
+	$metadata_file = dirname( dirname( __DIR__ ) ) . '/build/lesson-standalone/block.json';
+	$metadata = wp_json_file_decode( $metadata_file, array( 'associative' => true ) );
+	$metadata['file'] = $metadata_file;
+
+	$script_handle = register_block_script_handle( $metadata, 'viewScript', 0 );
+
+	// Enqueue the assets when the sensei lesson standalone pattern is on the page.
+	add_action(
+		'render_block_core/pattern',
+		function( $block_content, $block ) use ( $script_handle ) {
+			if ( isset( $block['attrs']['slug'] ) && 'wporg-learn-2024/sensei-lesson-standalone' === $block['attrs']['slug'] ) {
+				wp_enqueue_script( $script_handle );
+			}
+			return $block_content;
+		},
+		10,
+		2
+	);
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-standalone/view.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-standalone/view.js
new file mode 100644
index 000000000..f6d6e5d70
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-standalone/view.js
@@ -0,0 +1,41 @@
+// Original source: https://github.com/Automattic/sensei/blob/trunk/assets/course-theme/adminbar-layout.ts
+/**
+ * External dependencies
+ */
+import debounce from 'lodash/debounce';
+
+/**
+ * Track how much space the WordPress admin bar takes up at the top of the screen.
+ * Updates a CSS variable with the value.
+ */
+const trackAdminbarOffset = () => {
+	const adminbar = document.querySelector( '#wpadminbar' );
+	if ( ! adminbar ) {
+		return;
+	}
+
+	updateAdminbarOffset();
+	window.addEventListener( 'scroll', updateAdminbarOffset, {
+		capture: false,
+		passive: true,
+	} );
+
+	/**
+	 * The debounce has 2 reasons here:
+	 * 1. Reduce the number of times we call the function in a resize.
+	 * 2. The admin bar contains an animated transition, so this transition
+	 *    needs to be completed in order to make the correct calc.
+	 */
+	window.addEventListener( 'resize', debounce( updateAdminbarOffset, 500 ) );
+
+	function updateAdminbarOffset() {
+		if ( ! adminbar ) {
+			return;
+		}
+		const { top, height } = adminbar.getBoundingClientRect();
+		const offset = Math.max( 0, height + top );
+		document.documentElement.style.setProperty( '--sensei-wpadminbar-offset', offset + 'px' );
+	}
+};
+
+window.addEventListener( 'DOMContentLoaded', trackAdminbarOffset );