Updates to 4.24.2.1.24.1

changelog.txt

@@ -1,5 +1,12 @@
 *** Sensei Pro (WC Paid Courses) ***
 
+2024-08-08 - version 4.24.2.1.24.1
+* Sensei LMS: Version bump to 4.24.2 https://github.com/Automattic/sensei/version/4.24.2/changelog.txt
+* Sensei Pro: Version bump to 1.24.1
+	* Ensure lesson preview setting takes precedence over course expiration
+	* Deprecation notices on PHP 8.2
+	* Missing translations for interactive blocks
+
 2024-06-13 - version 4.24.1.1.24.0
 * Sensei LMS: Version bump to 4.24.1 https://github.com/Automattic/sensei/version/4.24.1/changelog.txt
 

plugins/sensei-lms/assets/admin/course-pre-publish-panel/course-pre-publish-panel.js

@@ -3,14 +3,18 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
-import { PluginPrePublishPanel } from '@wordpress/edit-post';
+import { PluginPrePublishPanel as DeprecatedPluginPrePublishPanel } from '@wordpress/edit-post';
+import { PluginPrePublishPanel as NewPluginPrePublishPanel } from '@wordpress/editor';
 import { ToggleControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import SenseiIcon from '../../icons/logo-tree.svg';
 
+const PluginPrePublishPanel =
+	NewPluginPrePublishPanel || DeprecatedPluginPrePublishPanel;
+
 /**
  * Course pre-publish panel.
  */

plugins/sensei-lms/assets/admin/editor-wizard/patterns-list.js

@@ -137,7 +137,9 @@ const PatternsList = ( { onChoose } ) => {
 						>
 							<div className="sensei-patterns-list__item-preview">
 								<BlockPreview
-									__experimentalPadding={ 30 }
+									additionalStyles={ [
+										{ css: 'body { padding: 30px; }' },
+									] }
 									blocks={ blocks
 										.filter( withoutLessonActions )
 										.map( withBlockExample ) }

plugins/sensei-lms/assets/admin/tour/course-tour/steps.js

@@ -13,6 +13,7 @@ import { store as editorStore } from '@wordpress/editor';
  * Internal dependencies
  */
 import { TourStep } from '../types';
+import { setBlockMeta } from '../../../shared/blocks/block-metadata';
 import { getFirstBlockByName } from '../../../blocks/course-outline/data';
 import {
 	highlightElementsWithBorders,
@@ -48,7 +49,7 @@ function focusOnCourseOutlineBlock() {
 	if ( ! courseOutlineBlock ) {
 		return;
 	}
-	dispatch( editorStore ).selectBlock( courseOutlineBlock.clientId );
+	dispatch( blockEditorStore ).selectBlock( courseOutlineBlock.clientId );
 }
 
 async function ensureLessonBlocksIsInEditor() {
@@ -86,6 +87,40 @@ async function ensureLessonBlocksIsInEditor() {
 	insertLessonBlock( 'Lesson 1' );
 }
 
+/**
+ * Check all modules have titles, if not, assign a default title.
+ */
+function ensureModulesHaveTitles() {
+	const blocks = getCourseOutlineBlock().innerBlocks;
+	const modules = blocks.filter(
+		( block ) => block.name === 'sensei-lms/course-outline-module'
+	);
+	const moduleTitles = modules
+		.map( ( block ) => {
+			if ( block.name !== 'sensei-lms/course-outline-module' ) {
+				return null;
+			}
+			const title = block.attributes?.title?.trim();
+			return title || null;
+		} )
+		.filter( ( value ) => !! value );
+
+	if ( modules.length > 0 ) {
+		let i = 0;
+		modules.forEach( ( module ) => {
+			let title = module.attributes?.title?.trim();
+			if ( title !== '' ) {
+				return;
+			}
+			do {
+				title = __( 'Module', 'sensei-lms' ) + ' ' + ++i;
+			} while ( moduleTitles.includes( title ) );
+			module.attributes.title = title;
+			setBlockMeta( module.clientId, module.attributes );
+		} );
+	}
+}
+
 /**
  * Returns the tour steps for the Course Outline block.
  *
@@ -209,7 +244,7 @@ function getTourSteps() {
 				heading: __( 'Adding a module', 'sensei-lms' ),
 				descriptions: {
 					desktop: __(
-						'A module is a container for a group of related lessons in a course. Click + to open the inserter. Then click the Module option.',
+						'A module is a container for a group of related lessons in a course. Click + to open the inserter. Then click the Module option and give it a name.',
 						'sensei-lms'
 					),
 					mobile: null,
@@ -512,6 +547,7 @@ function getTourSteps() {
 				);
 
 				if ( ! savedLesson ) {
+					ensureModulesHaveTitles();
 					const { savePost } = dispatch( editorStore );
 					savePost();
 					await waitForElement( savedlessonSelector, 15 );

plugins/sensei-lms/assets/admin/tour/data/store.js

@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { createReduxStore, register } from '@wordpress/data';
-/**
- * Internal dependencies
- */
-import { createReducerFromActionMap } from '../../../shared/data/store-helpers';
 import { controls } from '@wordpress/data-controls';
 import apiFetch from '@wordpress/api-fetch';
 
-export const SENSEI_TOUR_STORE = 'sensei/tour';
+/**
+ * Internal dependencies
+ */
+import {
+	createReducerFromActionMap,
+	createStore,
+} from '../../../shared/data/store-helpers';
 
 export const DEFAULT_STATE = {
 	showTour: true,
@@ -80,11 +81,9 @@ export const reducers = {
 	DEFAULT: ( action, state ) => state,
 };
 
-export const store = createReduxStore( SENSEI_TOUR_STORE, {
+export const SENSEI_TOUR_STORE = createStore( 'sensei/tour', {
 	reducer: createReducerFromActionMap( reducers, DEFAULT_STATE ),
 	actions,
 	selectors,
 	controls,
 } );
-
-register( store );

plugins/sensei-lms/assets/admin/tour/lesson-tour/steps.js

@@ -8,7 +8,6 @@ import { ExternalLink } from '@wordpress/components';
 import { select, dispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editPostStore } from '@wordpress/edit-post';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -59,23 +58,23 @@ export const focusOnQuizBlock = () => {
 	if ( ! quizBlock ) {
 		return;
 	}
-	dispatch( editorStore ).selectBlock( quizBlock.clientId );
+	dispatch( blockEditorStore ).selectBlock( quizBlock.clientId );
 };
 
 export const focusOnQuestionBlock = () => {
 	const questionBlock = getFirstQuestionBlock();
 	if ( ! questionBlock ) {
 		return;
 	}
-	dispatch( editorStore ).selectBlock( questionBlock.clientId );
+	dispatch( blockEditorStore ).selectBlock( questionBlock.clientId );
 };
 
 export const focusOnBooleanQuestionBlock = () => {
 	const questionBlock = getFirstBooleanQuestionBlock();
 	if ( ! questionBlock ) {
 		return;
 	}
-	dispatch( editorStore ).selectBlock( questionBlock.clientId );
+	dispatch( blockEditorStore ).selectBlock( questionBlock.clientId );
 };
 
 export const ensureBooleanQuestionIsInEditor = () => {

plugins/sensei-lms/assets/blocks/course-actions-block/course-status-toolbar.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Toolbar } from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -41,14 +41,14 @@ const CourseStatusToolbar = ( {
 		: setCourseStatus;
 
 	return (
-		<Toolbar>
+		<ToolbarGroup>
 			<ToolbarDropdown
 				options={ CourseStatusOptions }
 				optionsLabel="Course Status"
 				value={ courseStatusValue }
 				onChange={ setCourseStatusCallback }
 			/>
-		</Toolbar>
+		</ToolbarGroup>
 	);
 };
 

plugins/sensei-lms/assets/blocks/course-outline/lesson-block/lesson-edit-toolbar.js

@@ -1,7 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Toolbar, ToolbarItem } from '@wordpress/components';
+import {
+	Button,
+	Spinner,
+	ToolbarGroup,
+	ToolbarItem,
+} from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editPostStore } from '@wordpress/edit-post';
 import { store as editorStore } from '@wordpress/editor';
@@ -19,14 +25,19 @@ const getLessonURL = ( lessonId ) => `post.php?post=${ lessonId }&action=edit`;
  *
  * @param {Object} props          Component props.
  * @param {number} props.lessonId The lesson ID.
+ * @param {Object} forwardedRef   The forwarded ref.
  */
-export const EditLessonLink = ( { lessonId } ) => (
-	<a
-		href={ getLessonURL( lessonId ) }
-		className="wp-block-sensei-lms-course-outline-lesson__edit"
-	>
-		{ __( 'Edit lesson', 'sensei-lms' ) }
-	</a>
+export const EditLessonLink = forwardRef(
+	( { lessonId, ...props }, forwardedRef ) => (
+		<a
+			ref={ forwardedRef }
+			href={ getLessonURL( lessonId ) }
+			className="wp-block-sensei-lms-course-outline-lesson__edit"
+			{ ...props }
+		>
+			{ __( 'Edit lesson', 'sensei-lms' ) }
+		</a>
+	)
 );
 
 /**
@@ -70,12 +81,18 @@ const LessonEditToolbar = ( { lessonId, lessonTitle } ) => {
 
 	let toolbarItem = savePostLink;
 	if ( lessonId ) {
-		toolbarItem = <EditLessonLink lessonId={ lessonId } />;
+		toolbarItem = (
+			<ToolbarItem as={ EditLessonLink } lessonId={ lessonId } />
+		);
 	} else if ( isSavingPost || isSavingStructure || isSavingMetaBoxes ) {
 		toolbarItem = savingPostIndicator;
 	}
 
-	return <Toolbar className="components-button">{ toolbarItem }</Toolbar>;
+	return (
+		<ToolbarGroup className="components-button">
+			{ toolbarItem }
+		</ToolbarGroup>
+	);
 };
 
 export default LessonEditToolbar;

plugins/sensei-lms/assets/blocks/course-outline/lesson-block/lesson-settings.js

@@ -51,6 +51,7 @@ const LessonSettings = ( {
 				) }
 				<PanelBody title={ __( 'Typography', 'sensei-lms' ) }>
 					<FontSizePicker
+						__nextHasNoMarginBottom // Can be removed when we support WP 6.5+
 						fontSizes={ fontSizes }
 						value={ fontSize }
 						onChange={ ( value ) => {

plugins/sensei-lms/assets/blocks/course-outline/status-preview/status-store.js

@@ -1,14 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { select as selectData, registerStore } from '@wordpress/data';
+import { select as selectData } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { Status } from './index';
 import { select, controls } from '@wordpress/data-controls';
-import { createReducerFromActionMap } from '../../../shared/data/store-helpers';
+import {
+	createStore,
+	createReducerFromActionMap,
+} from '../../../shared/data/store-helpers';
 
 const DEFAULT_STATE = {
 	completedLessons: [],
@@ -311,9 +314,7 @@ const reducers = {
 	DEFAULT: ( action, state ) => state,
 };
 
-export const COURSE_STATUS_STORE = 'sensei/course-status';
-
-registerStore( COURSE_STATUS_STORE, {
+export const COURSE_STATUS_STORE = createStore( 'sensei/course-status', {
 	reducer: createReducerFromActionMap( reducers, DEFAULT_STATE ),
 	actions,
 	selectors,

plugins/sensei-lms/assets/blocks/course-progress-block/block.json

@@ -1,4 +1,5 @@
 {
+  "apiVersion": 2,
   "name": "sensei-lms/course-progress",
   "title": "Course Progress",
   "description": "Display the user's progress in the course. This block is only displayed if the user is enrolled.",