Merge branch 'trunk' into add/ability-to-set-font-size-for-subheader

.github/workflows/build.yml

@@ -35,6 +35,19 @@ jobs:
                   path: ${{ github.workspace }}/sensei-lms/
                   retention-days: 7
 
+    playground-preview:
+        if: github.event_name == 'pull_request'
+        name: Playground Preview
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
+            - name: Create comment with Playground preview
+              uses: peter-evans/create-or-update-comment@v4
+              with:
+                issue-number: ${{ github.event.pull_request.number }}
+                body: |
+                    Test the previous changes of this PR with [WordPress Playground](https://playground.wordpress.net/#{"landingPage":"/wp-admin/admin.php?page=sensei","phpExtensionBundles":["kitchen-sink"],"steps":[{"step":"setSiteOptions","options":{"site_intent":"sensei"}},{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://playground.wordpress.net/plugin-proxy.php?org=Automattic&repo=sensei&workflow=Plugin%20Build&artifact=sensei-lms-${{ github.event.pull_request.head.sha }}&pr=${{ github.event.pull_request.number }}"}},{"step":"installTheme","themeZipFile":{"resource":"wordpress.org\/themes","slug":"course"}}]}).
+
     syntax-check:
         name: PHP Syntax Check
         needs: build

assets/admin/course-pre-publish-panel/course-pre-publish-panel.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEntityProp } from '@wordpress/core-data';
+import { PluginPrePublishPanel } from '@wordpress/edit-post';
+import { ToggleControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SenseiIcon from '../../icons/logo-tree.svg';
+
+/**
+ * Course pre-publish panel.
+ */
+export const CoursePrePublishPanel = () => {
+	const [ meta, setMeta ] = useEntityProp( 'postType', 'course', 'meta' );
+	const { sensei_course_publish_lessons: publishLessons } = meta;
+
+	return (
+		<PluginPrePublishPanel
+			title={ __( 'Sensei LMS', 'sensei-lms' ) }
+			icon={ <SenseiIcon height="20" width="20" /> }
+			initialOpen={ true }
+		>
+			<ToggleControl
+				label={ __( 'Publish lessons', 'sensei-lms' ) }
+				help={ __(
+					'Publish lessons when the course is published.',
+					'sensei-lms'
+				) }
+				checked={ publishLessons }
+				onChange={ ( value ) =>
+					setMeta( { ...meta, sensei_course_publish_lessons: value } )
+				}
+			/>
+		</PluginPrePublishPanel>
+	);
+};
+
+export default CoursePrePublishPanel;

assets/admin/course-pre-publish-panel/index.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { registerPlugin } from '@wordpress/plugins';
+
+/**
+ * Internal dependencies
+ */
+import CoursePrePublishPanel from './course-pre-publish-panel';
+
+registerPlugin( 'sensei-course-pre-publish-panel-plugin', {
+	render: CoursePrePublishPanel,
+	icon: null,
+} );

assets/admin/editor-wizard/editor-wizard-modal.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { Modal } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
@@ -17,6 +17,7 @@ import {
 	useLogEvent,
 } from './helpers';
 import '../../shared/data/api-fetch-preloaded-once';
+import { SENSEI_TOUR_STORE } from '../tour/data/store';
 
 /**
  * Editor wizard modal component.
@@ -25,6 +26,7 @@ const EditorWizardModal = () => {
 	const wizardDataState = useState( {} );
 	const wizardData = wizardDataState[ 0 ];
 	const { editPost, savePost } = useDispatch( editorStore );
+	const { setTourShowStatus } = useDispatch( SENSEI_TOUR_STORE );
 	const logEvent = useLogEvent();
 
 	const [ open, setDone ] = useWizardOpenState();
@@ -40,33 +42,17 @@ const EditorWizardModal = () => {
 			meta: { _new_post: false },
 		} );
 		savePost();
+		setTourShowStatus( true );
 	};
 
 	const skipWizard = () => {
 		setDefaultPattern();
 		onWizardCompletion();
 	};
 
-	const { setShowWelcomeGuide } =
-		useDispatch( 'automattic/wpcom-welcome-guide' ) ?? {};
-
-	const { isShowWelcomeGuide } = useSelect( ( select ) => {
-		const { isWelcomeGuideShown } =
-			select( 'automattic/wpcom-welcome-guide' ) ?? {};
-		return {
-			isShowWelcomeGuide: isWelcomeGuideShown
-				? isWelcomeGuideShown()
-				: false,
-		};
-	}, [] );
-
 	useEffect( () => {
-		if ( setShowWelcomeGuide && isShowWelcomeGuide ) {
-			setShowWelcomeGuide( undefined, {
-				onlyLocal: true,
-			} );
-		}
-	}, [ setShowWelcomeGuide, isShowWelcomeGuide ] );
+		setTourShowStatus( false );
+	}, [ setTourShowStatus ] );
 
 	return (
 		open && (

assets/admin/editor-wizard/helpers.js

@@ -110,9 +110,13 @@ export const useWizardOpenState = () => {
  */
 export const useSetDefaultPattern = ( replaces ) => {
 	const { patterns } = useSelect( ( select ) => ( {
-		patterns: select(
-			blockEditorStore
-		).__experimentalGetPatternsByBlockTypes( 'sensei-lms/post-content' ),
+		patterns:
+			select( blockEditorStore )?.getPatternsByBlockTypes(
+				'sensei-lms/post-content'
+			) ||
+			select( blockEditorStore ).__experimentalGetPatternsByBlockTypes(
+				'sensei-lms/post-content'
+			),
 	} ) );
 	const { template } = useSelect( ( select ) => ( {
 		template: select( blockEditorStore ).getTemplate(),

assets/admin/editor-wizard/index.js

@@ -2,12 +2,20 @@
  * WordPress dependencies
  */
 import { registerPlugin } from '@wordpress/plugins';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
 import EditorWizardModal from './editor-wizard-modal';
 
+// Hide welcome tour from WPCOM.
+addFilter(
+	'a8c.WpcomBlockEditorWelcomeTour.show',
+	'sensei-lms/editor-wizard',
+	() => false
+);
+
 registerPlugin( 'sensei-editor-wizard-plugin', {
 	render: EditorWizardModal,
 	icon: null,

assets/admin/editor-wizard/patterns-list.js

@@ -6,6 +6,7 @@ import {
 	BlockPreview,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { applyFilters } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
@@ -58,6 +59,30 @@ const withBlockExample = ( block ) => {
 const withoutLessonActions = ( block ) =>
 	'sensei-lms/lesson-actions' !== block.name;
 
+/**
+ * No patterns warning component.
+ */
+const NoPatternsWarning = () => {
+	/**
+	 * Filters the warning message when no layouts are available.
+	 *
+	 * @param {string} message Default warning message.
+	 * @return {string} Filtered warning message.
+	 */
+	const warningMessage = applyFilters(
+		'sensei.editorWizard.noLayoutsWarning',
+		__( 'No layouts available for this theme.', 'sensei-lms' )
+	);
+
+	return (
+		<div className="sensei-patterns-list__warning">
+			<div className="sensei-patterns-list__warning-title">
+				{ warningMessage }
+			</div>
+		</div>
+	);
+};
+
 /**
  * Patterns list component.
  *
@@ -66,11 +91,19 @@ const withoutLessonActions = ( block ) =>
  */
 const PatternsList = ( { onChoose } ) => {
 	const { patterns } = useSelect( ( select ) => ( {
-		patterns: select(
-			blockEditorStore
-		).__experimentalGetPatternsByBlockTypes( 'sensei-lms/post-content' ),
+		patterns:
+			select( blockEditorStore )?.getPatternsByBlockTypes(
+				'sensei-lms/post-content'
+			) ||
+			select( blockEditorStore ).__experimentalGetPatternsByBlockTypes(
+				'sensei-lms/post-content'
+			),
 	} ) );
 
+	if ( ! patterns || patterns.length === 0 ) {
+		return <NoPatternsWarning />;
+	}
+
 	return (
 		<div
 			className="sensei-patterns-list"

assets/admin/editor-wizard/patterns-list.scss

@@ -41,4 +41,19 @@ $thumbnail-height: 235px;
 			color: var(--wp-admin-theme-color);
 		}
 	}
+
+	&__warning {
+		width: 100%;
+		height: calc(100% - 18px);
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+
+		&-title {
+			flex: 1;
+			padding: 10px;
+			font-size: 14px;
+			text-align: center;
+		}
+	}
 }

assets/admin/editor-wizard/patterns-list.test.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PatternsList from './patterns-list';
+
+jest.mock( '@wordpress/data' );
+
+describe( '<PatternsList />', () => {
+	it( 'Should show warning when no layouts available.', () => {
+		useSelect.mockReturnValue( {
+			patterns: [],
+		} );
+
+		const { queryByText } = render(
+			<PatternsList onChoose={ () => {} } />
+		);
+
+		expect(
+			queryByText( 'No layouts available for this theme.' )
+		).toBeVisible();
+	} );
+} );

assets/admin/editor-wizard/steps/lesson-details-step.js

@@ -1,10 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { Button } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,6 +26,19 @@ const LessonDetailsStep = ( { wizardData, setWizardData } ) => {
 		setWizardData
 	);
 
+	const lessonMeta = useSelect( ( select ) =>
+		select( 'core/editor' ).getCurrentPostAttribute( 'meta' )
+	);
+
+	useEffect( () => {
+		if ( lessonMeta && lessonMeta._initial_content ) {
+			setWizardData( {
+				...wizardData,
+				description: lessonMeta._initial_content,
+			} );
+		}
+	}, [ lessonMeta ] );
+
 	return (
 		<div className="sensei-editor-wizard-modal__columns">
 			<div className="sensei-editor-wizard-modal__content">

assets/admin/editor-wizard/steps/lesson-details-step.test.js

@@ -80,6 +80,27 @@ describe( '<LessonDetailsStep />', () => {
 			ANY_LESSON_TITLE
 		);
 	} );
+
+	it( 'Should call initial lesson content setter when available', () => {
+		const wizardDataSetter = jest.fn();
+		const initialContent = 'test content';
+		useDispatch.mockReturnValue( { editPost: jest.fn() } );
+		useSelect.mockReturnValue( {
+			postTitle: ANY_LESSON_TITLE,
+			_initial_content: initialContent,
+		} );
+
+		render(
+			<LessonDetailsStep
+				wizardData={ {} }
+				setWizardData={ wizardDataSetter }
+			/>
+		);
+
+		expect( wizardDataSetter ).toBeCalledWith( {
+			description: initialContent,
+		} );
+	} );
 } );
 
 describe( '<LessonDetailsStep.Actions />', () => {

assets/admin/editor-wizard/steps/lesson-patterns-step.js

@@ -24,6 +24,10 @@ const LessonPatternsStep = ( { wizardData, ...props } ) => {
 		replaces[ 'sensei-content-title' ] = wizardData.title;
 	}
 
+	if ( wizardData.description ) {
+		replaces[ 'sensei-content-description' ] = wizardData.description;
+	}
+
 	const shouldHideEditorWizardUpsell = useHideEditorWizardUpsell();
 
 	return (