Add script to fix the issue (WordPress#2817)

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';

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"
 	}
 }

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"
+}

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
+	);
+}

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 );