Course outline block header enhance

wp-content/themes/pub/wporg-learn-2024/src/course-outline/index.js

@@ -4,10 +4,30 @@ import { Icon, drafts, lockOutline } from '@wordpress/icons';
 import { renderToString } from '@wordpress/element';
 
 document.addEventListener( 'DOMContentLoaded', () => {
+	/**
+	 * Allow the entire header to toggle, giving users a larger area to interact with.
+	 */
+	document
+		.querySelectorAll( 'section.wp-block-sensei-lms-course-outline-module-bordered > header' )
+		.forEach( ( header ) => {
+			const button = header.querySelector( 'button' );
+			header.addEventListener( 'click', () => {
+				button.click();
+			} );
+
+			button.addEventListener( 'click', ( event ) => {
+				event.stopPropagation();
+			} );
+		} );
+
 	if ( ! wporgCourseOutlineData ) {
 		return;
 	}
 
+	/**
+	 * Iterates over all course titles that are of status in-progress and adds icons
+	 * to those courses in the course outline block.
+	 */
 	wporgCourseOutlineData[ 'in-progress' ]?.forEach( ( title ) => {
 		const lessonLinks = document.querySelectorAll( '.wp-block-sensei-lms-course-outline-lesson' );
 		lessonLinks.forEach( ( link ) => {
@@ -20,6 +40,10 @@ document.addEventListener( 'DOMContentLoaded', () => {
 			}
 		} );
 	} );
+	/**
+	 * Iterates over all course titles that are of status locked and adds icons
+	 * to those courses in the course outline block.
+	 */
 	wporgCourseOutlineData.locked?.forEach( ( title ) => {
 		const lessonLinks = document.querySelectorAll( '.wp-block-sensei-lms-course-outline-lesson' );
 		lessonLinks.forEach( ( link ) => {

wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss

@@ -124,6 +124,7 @@ body.sensei {
 				background-color: var(--wp--preset--color--light-grey-2) !important;
 				color: var(--wp--preset--color--charcoal-1) !important;
 				padding: var(--wp--preset--spacing--20);
+				cursor: pointer;
 
 				h2 {
 					font-size: var(--wp--preset--font-size--heading-6);