Add Lesson Properties block

assets/blocks/editor-components/number-control/index.js

@@ -34,41 +34,45 @@ const NumberControl = ( {
 	onChange,
 	suffix,
 	...props
-} ) => (
-	<BaseControl id={ id } label={ label } help={ help }>
-		<div className="sensei-number-control">
-			<div className="sensei-number-control__input-container">
-				<input
-					className={ classnames(
-						'sensei-number-control__input',
-						className
+} ) => {
+	const setValue = ( e ) => {
+		onChange( parseInt( e.target.value, 10 ) || props.min || 0 );
+	};
+
+	return (
+		<BaseControl id={ id } label={ label } help={ help }>
+			<div className="sensei-number-control">
+				<div className="sensei-number-control__input-container">
+					<input
+						className={ classnames(
+							'sensei-number-control__input components-text-control__input',
+							className
+						) }
+						type="number"
+						id={ id }
+						onChange={ setValue }
+						value={ null === value ? '' : value }
+						{ ...props }
+					/>
+					{ suffix && (
+						<span className="sensei-number-control__input-suffix">
+							{ suffix }
+						</span>
 					) }
-					type="number"
-					id={ id }
-					onChange={ ( e ) =>
-						onChange( parseInt( e.target.value, 10 ) )
-					}
-					value={ null === value ? '' : value }
-					{ ...props }
-				/>
-				{ suffix && (
-					<span className="sensei-number-control__input-suffix">
-						{ suffix }
-					</span>
+				</div>
+				{ allowReset && (
+					<Button
+						className="sensei-number-control__button"
+						isSmall
+						isSecondary
+						onClick={ () => onChange( null ) }
+					>
+						{ resetLabel || __( 'Reset', 'sensei-lms' ) }
+					</Button>
 				) }
 			</div>
-			{ allowReset && (
-				<Button
-					className="sensei-number-control__button"
-					isSmall
-					isSecondary
-					onClick={ () => onChange( null ) }
-				>
-					{ resetLabel || __( 'Reset', 'sensei-lms' ) }
-				</Button>
-			) }
-		</div>
-	</BaseControl>
-);
+		</BaseControl>
+	);
+};
 
 export default NumberControl;

assets/blocks/editor-components/number-control/number-control.scss

@@ -5,11 +5,11 @@
 	justify-content: space-between;
 
 	&__input {
-		flex: 1;
 		min-width: 0;
 	}
 
 	&__input-container {
+		flex: 1;
 		position: relative;
 	}
 

assets/blocks/lesson-properties/block.json

@@ -0,0 +1,17 @@
+{
+	"name": "sensei-lms/lesson-properties",
+	"category": "sensei-lms",
+	"textdomain": "sensei-lms",
+	"attributes": {
+		"difficulty": {
+			"type": "string",
+			"source": "meta",
+			"meta": "_lesson_complexity"
+		},
+		"length": {
+			"type": "number",
+			"source": "meta",
+			"meta": "_lesson_length"
+		}
+	}
+}

assets/blocks/lesson-properties/constants.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+export const DIFFICULTIES = applyFilters( 'sensei-lms.Lesson.difficulties', [
+	{
+		label: __( 'None', 'sensei-lms' ),
+		value: '',
+	},
+	{
+		label: __( 'Easy', 'sensei-lms' ),
+		value: 'easy',
+	},
+	{
+		label: __( 'Standard', 'sensei-lms' ),
+		value: 'std',
+	},
+	{
+		label: __( 'Hard', 'sensei-lms' ),
+		value: 'hard',
+	},
+] );

assets/blocks/lesson-properties/index.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './lesson-properties-edit';
+
+export default {
+	title: __( 'Lesson Properties', 'sensei-lms' ),
+	description: __(
+		'Add lesson properties such as length and difficulty.',
+		'sensei-lms'
+	),
+	keywords: [
+		__( 'Metadata', 'sensei-lms' ),
+		__( 'Length', 'sensei-lms' ),
+		__( 'Complexity', 'sensei-lms' ),
+		__( 'Difficulty', 'sensei-lms' ),
+		__( 'Lesson Information', 'sensei-lms' ),
+		__( 'Lesson Properties', 'sensei-lms' ),
+	],
+	...metadata,
+	edit,
+	save: () => {
+		return null;
+	},
+};

assets/blocks/lesson-properties/lesson-properties-edit.js

@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, SelectControl } from '@wordpress/components';
+import { __, _n } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import NumberControl from '../editor-components/number-control';
+import ToggleLegacyLessonMetaboxesWrapper from '../toggle-legacy-lesson-metaboxes-wrapper';
+import { DIFFICULTIES } from './constants';
+
+const LessonPropertiesEdit = ( props ) => {
+	const {
+		className,
+		attributes: { difficulty, length },
+		setAttributes,
+	} = props;
+
+	return (
+		<ToggleLegacyLessonMetaboxesWrapper { ...props }>
+			<InspectorControls>
+				<PanelBody title={ __( 'Properties', 'sensei-lms' ) }>
+					<NumberControl
+						id="sensei-lesson-length"
+						label={ __( 'Length', 'sensei-lms' ) }
+						min={ 0 }
+						step={ 1 }
+						value={ length }
+						onChange={ ( newLength ) =>
+							setAttributes( { length: newLength } )
+						}
+						suffix={ _n(
+							'minute',
+							'minutes',
+							length,
+							'sensei-lms'
+						) }
+					/>
+
+					<SelectControl
+						label={ __( 'Difficulty', 'sensei-lms' ) }
+						options={ DIFFICULTIES.map( ( { label, value } ) => ( {
+							label,
+							value,
+						} ) ) }
+						value={ difficulty }
+						onChange={ ( newDifficulty ) =>
+							setAttributes( { difficulty: newDifficulty } )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+
+			<div className={ className }>
+				<span
+					className={ classnames(
+						'wp-block-sensei-lms-lesson-properties__length',
+						{ disabled: ! length }
+					) }
+				>
+					{ __( 'Length', 'sensei-lms' ) +
+						': ' +
+						length +
+						' ' +
+						_n( 'minute', 'minutes', length, 'sensei-lms' ) }
+				</span>
+
+				<span
+					className={ classnames(
+						'wp-block-sensei-lms-lesson-properties__separator',
+						{ disabled: ! length || ! difficulty }
+					) }
+				>
+					|
+				</span>
+
+				<span
+					className={ classnames(
+						'wp-block-sensei-lms-lesson-properties__difficulty',
+						{ disabled: ! difficulty }
+					) }
+				>
+					{ __( 'Difficulty', 'sensei-lms' ) +
+						': ' +
+						DIFFICULTIES.find(
+							( lessonDifficulty ) =>
+								difficulty === lessonDifficulty.value
+						)?.label }
+				</span>
+			</div>
+		</ToggleLegacyLessonMetaboxesWrapper>
+	);
+};
+
+export default LessonPropertiesEdit;

assets/blocks/lesson-properties/lesson-properties-editor.scss

@@ -0,0 +1,12 @@
+.wp-block-sensei-lms-lesson-properties {
+	font-size: .9em;
+	font-style: italic;
+
+	&__separator {
+		margin: 0 0.5em 0;
+	}
+
+	.disabled {
+		opacity: 0.62;
+	}
+}

assets/blocks/quiz/quiz-block/use-update-quiz-has-questions-meta.js

@@ -22,31 +22,21 @@ export const useUpdateQuizHasQuestionsMeta = ( clientId ) => {
 			.filter( ( block ) => ! isQuestionEmpty( block.attributes ) )
 	);
 
-	const { editedValue: quizHasQuestionsMeta, currentValue } = useSelect(
-		( select ) => {
-			const editor = select( 'core/editor' );
-			return {
-				editedValue: editor.getEditedPostAttribute( 'meta' )[
-					META_KEY
-				],
-				currentValue: editor.getCurrentPostAttribute( 'meta' )[
-					META_KEY
-				],
-			};
-		}
-	);
+	const { editedValue: quizHasQuestionsMeta } = useSelect( ( select ) => {
+		const editor = select( 'core/editor' );
+		return {
+			editedValue: editor.getEditedPostAttribute( 'meta' )[ META_KEY ],
+		};
+	} );
 
 	const { editPost } = useDispatch( 'core/editor' );
 	const setQuizHasQuestionsMeta = useCallback(
 		( enable ) => {
-			// Don't send an update to null if the meta is already unset.
-			const disabledValue = currentValue ? null : undefined;
-
 			return editPost( {
-				meta: { [ META_KEY ]: enable ? 1 : disabledValue },
+				meta: { [ META_KEY ]: enable ? 1 : 0 },
 			} );
 		},
-		[ editPost, currentValue ]
+		[ editPost ]
 	);
 
 	// Monitor for valid questions.

assets/blocks/single-lesson-style-editor.scss

@@ -1 +1,2 @@
-@import './lesson-actions/lesson-actions-block/lesson-actions-editor';
+@import './lesson-actions/lesson-actions-block/lesson-actions-editor';
+@import './lesson-properties/lesson-properties-editor';

assets/blocks/single-lesson.js

@@ -14,9 +14,11 @@ import {
 	ResetLessonBlock,
 	ViewQuizBlock,
 } from './lesson-actions';
+import LessonPropertiesBlock from './lesson-properties';
 
 registerSenseiBlocks( [
 	LessonActionsBlock,
+	LessonPropertiesBlock,
 	CompleteLessonBlock,
 	NextLessonBlock,
 	ResetLessonBlock,

assets/blocks/toggle-legacy-lesson-metaboxes-wrapper.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Wrapper to toggle the lesson metaboxes.
+ *
+ * @param {Object}  props
+ * @param {Object}  props.attributes
+ * @param {boolean} props.attributes.isPreview Whether it's a block preview.
+ * @param {Object}  props.children             Wrapped children.
+ */
+const ToggleLegacyLessonMetaboxesWrapper = ( {
+	attributes: { isPreview = false },
+	children,
+} ) => {
+	useEffect( () => {
+		if ( isPreview || ! window.sensei_toggle_legacy_lesson_metaboxes ) {
+			return;
+		}
+
+		window.sensei_toggle_legacy_lesson_metaboxes();
+
+		return window.sensei_toggle_legacy_lesson_metaboxes;
+	}, [ isPreview ] );
+
+	return children;
+};
+
+export default ToggleLegacyLessonMetaboxesWrapper;

assets/css/frontend.scss

@@ -233,7 +233,15 @@ a.sensei-certificate-link {
   }
 }
 
-.lesson  {
+.lesson {
+  .wp-block-sensei-lms-lesson-properties {
+    font-size: .9em;
+    font-style: italic;
+
+    &__separator {
+      margin: 0 0.5em 0;
+    }
+  }
   .lesson-meta  {
     margin: 0 0 1.618em;
   }