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

.github/PULL_REQUEST_TEMPLATE.md

@@ -37,6 +37,7 @@ Both the PR author and reviewer are responsible for ensuring the checklist is co
 - [ ] New UIs are responsive and use a [mobile-first approach](https://zellwk.com/blog/how-to-write-mobile-first-css/)
 - [ ] New UIs match the designs
 - [ ] Different user privileges (admin, teacher, subscriber) are tested as appropriate
+- [ ] Legacy courses (course without blocks) are tested
 - [ ] Code is tested on the minimum supported PHP and WordPress versions
 - [ ] User interface changes have been tested on the latest versions of Chrome, Firefox and Safari
 - [ ] "Needs Documentation" label is added if this change requires updates to documentation

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

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { Modal } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 
 /**
@@ -47,6 +47,27 @@ const EditorWizardModal = () => {
 		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 ] );
+
 	return (
 		open && (
 			<Modal

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

@@ -104,7 +104,7 @@ const PatternsList = ( { onChoose } ) => {
 						>
 							<div className="sensei-patterns-list__item-preview">
 								<BlockPreview
-									__experimentalPadding={ 10 }
+									__experimentalPadding={ 30 }
 									blocks={ blocks
 										.filter( withoutLessonActions )
 										.map( withBlockExample ) }

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

@@ -1,6 +1,4 @@
 $thumbnail-height: 235px;
-$preview-padding: 5px;
-$preview-max-height: $thumbnail-height + 5px;
 
 .sensei-patterns-list {
 	@media ( min-width: 600px ) {
@@ -22,11 +20,7 @@ $preview-max-height: $thumbnail-height + 5px;
 			height: $thumbnail-height;
 			overflow: hidden;
 
-			padding-top: $preview-padding;
-			padding-bottom: $preview-padding;
-
 			.block-editor-block-preview__container {
-				max-height: $preview-max-height;
 				margin-top: -17px;
 			}
 		}

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

@@ -54,14 +54,15 @@ const CourseDetailsStep = ( { wizardData, setWizardData } ) => {
 						value={ wizardData.title ?? '' }
 						onChange={ updateCourseTitle }
 						maxLength={ 40 }
+						autoFocus // eslint-disable-line jsx-a11y/no-autofocus
 					/>
 					<LimitedTextControl
 						className="sensei-editor-wizard-step__form-control"
 						label={ __( 'Course Description', 'sensei-lms' ) }
 						value={ wizardData.description ?? '' }
 						onChange={ updateCourseDescription }
 						maxLength={ 350 }
-						multiline={ true }
+						multiline
 					/>
 				</div>
 			</div>

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

@@ -82,6 +82,14 @@ describe( '<CourseDetailsStep />', () => {
 			description: NEW_DESCRIPTION,
 		} );
 	} );
+
+	it( 'Focuses the Course Title input.', () => {
+		const { queryByLabelText } = render(
+			<CourseDetailsStep wizardData={ {} } setWizardData={ () => {} } />
+		);
+
+		expect( queryByLabelText( 'Course Title' ) ).toHaveFocus();
+	} );
 } );
 
 describe( '<CourseDetailsStep.Actions />', () => {

assets/blocks/button/color-hooks.js

@@ -80,7 +80,7 @@ const removeColorProps = ( props ) => ( {
 		''
 	),
 	style: omitBy( props?.style, ( value, key ) =>
-		key.match( /(color|background|background-color)/ )
+		key.match( /(color|background|background-color|border)/ )
 	),
 } );
 

assets/blocks/button/color-props.js

@@ -36,6 +36,7 @@ export const getGradientClass = ( gradientSlug ) => {
 export const getColorAndStyleProps = ( { attributes, colors } ) => {
 	const {
 		backgroundColor,
+		borderColor,
 		customBackgroundColor,
 		textColor,
 		customTextColor,
@@ -47,13 +48,15 @@ export const getColorAndStyleProps = ( { attributes, colors } ) => {
 		'background-color',
 		backgroundColor
 	);
+
 	if ( ! style.color ) style.color = {};
 	if ( customBackgroundColor ) style.color.background = customBackgroundColor;
 	if ( customTextColor ) style.color.text = customTextColor;
 
+	const borderColorClass = getColorClassName( 'border-color', borderColor );
 	const gradientClass = getGradientClass( gradient );
 	const textClass = getColorClassName( 'color', textColor );
-	const className = classnames( textClass, gradientClass, {
+	const className = classnames( textClass, gradientClass, borderColorClass, {
 		// Don't apply the background class if there's a custom gradient
 		[ backgroundClass ]: ! style?.color?.gradient && !! backgroundClass,
 		'has-text-color': textColor || style?.color?.text,
@@ -62,6 +65,7 @@ export const getColorAndStyleProps = ( { attributes, colors } ) => {
 			style?.color?.background ||
 			gradient ||
 			style?.color?.gradient,
+		'has-border-color': borderColor,
 	} );
 	const styleProp =
 		style?.color?.background || style?.color?.text || style?.color?.gradient
@@ -76,6 +80,14 @@ export const getColorAndStyleProps = ( { attributes, colors } ) => {
 			  }
 			: {};
 
+	if ( style?.border?.color ) {
+		styleProp.borderColor = style.border.color;
+	}
+
+	if ( style?.border?.width ) {
+		styleProp.borderWidth = style.border.width;
+	}
+
 	// This is needed only for themes that don't load their color stylesheets in the editor
 	// We force an inline style to apply the color.
 	if ( colors ) {

assets/blocks/button/index.js

@@ -113,6 +113,12 @@ export const createButtonBlockType = ( {
 			},
 			usesContext: [ 'postType' ],
 			supports: {
+				__experimentalBorder: {
+					color: true,
+					width: true,
+					style: true,
+				},
+				border: true,
 				color: {
 					gradients: true,
 					link: true,

assets/blocks/course-list-block/course-list.scss

@@ -82,11 +82,6 @@ $block: '.wp-block-sensei-lms-course-list';
 						margin-block-end: 0;
 					}
 
-					.wp-block-post-title {
-						line-height: 41px;
-						text-align: left;
-					}
-
 					.wp-block-sensei-lms-course-overview {
 						flex: 1;
 					}
@@ -158,35 +153,18 @@ $block: '.wp-block-sensei-lms-course-list';
 }
 
 .sensei-course-theme-course-list-pattern {
-	.wp-block-post-title {
-		font-size: var( --wp--preset--font-size--x-large, 3rem );
-	}
-
 	.sensei-course-list-all-courses-link {
-		font-size: var( --wp--preset--font-size--x-small, 1.125rem );
 		font-family: var(--wp--preset--font-family--system);
-	}
-
-	.sensei-course-list-title-no-underline a {
-		text-decoration: none;
-	}
-
-	.sensei-post-excerpt-no-margin > p {
-		margin: 0px;
+		font-size: var(--wp--preset--font-size--small);
 	}
 
 	.wp-block-post-excerpt {
 		flex: 1;
-		font-size: var( --wp--custom--typography--font-sizes--normal );
-	}
-
-	.sensei-cta a {
-		text-decoration: none;
 	}
 
 	.wp-block-post-author__name {
-		font-family: var( --wp--preset--font-family--system );
-		font-size: var( --wp--preset--font-size--small, 1.125rem );
+		font-family: var(--wp--preset--font-family--system);
+		font-size: var(--wp--preset--font-size--x-small);
 	}
 
 	& #{$block} .sensei-lms-course-list-featured-label__text {

assets/blocks/course-outline/course-outline-editor.scss

@@ -5,6 +5,7 @@
 $dark-gray: #1a1d20;
 $item-padding: 20px;
 
+body.editor-styles-wrapper,
 body .editor-styles-wrapper,
 .editor-styles-wrapper .block-editor {
 	.wp-block-sensei-lms-course-outline {
@@ -65,13 +66,14 @@ body .editor-styles-wrapper,
 		margin-top: 0;
 		margin-bottom: 0;
 	}
+}
 
-	.components-toolbar-group, .components-toolbar {
-		.wp-block-sensei-lms-course-outline-lesson__edit {
-			align-self: center;
-			font-size: 15px;
-			padding: 0.9em 0;
-		}
+.components-toolbar-group, .components-toolbar {
+	.wp-block-sensei-lms-course-outline-lesson__edit {
+		align-items: center;
+		display: flex;
+		font-size: 15px;
+		padding: 0.9em 0;
 	}
 }
 

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

@@ -1,13 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	Button,
-	ExternalLink,
-	Spinner,
-	Toolbar,
-	ToolbarItem,
-} from '@wordpress/components';
+import { Button, Spinner, Toolbar, ToolbarItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editPostStore } from '@wordpress/edit-post';
 import { store as editorStore } from '@wordpress/editor';
@@ -27,13 +21,12 @@ const getLessonURL = ( lessonId ) => `post.php?post=${ lessonId }&action=edit`;
  * @param {number} props.lessonId The lesson ID.
  */
 export const EditLessonLink = ( { lessonId } ) => (
-	<ExternalLink
+	<a
 		href={ getLessonURL( lessonId ) }
-		target="lesson"
 		className="wp-block-sensei-lms-course-outline-lesson__edit"
 	>
 		{ __( 'Edit lesson', 'sensei-lms' ) }
-	</ExternalLink>
+	</a>
 );
 
 /**

assets/blocks/course-outline/outline-block/index.js

@@ -31,27 +31,18 @@ export default {
 		},
 		innerBlocks: [
 			{
-				name: 'sensei-lms/course-outline-module',
+				name: 'sensei-lms/course-outline-lesson',
 				attributes: {
-					title: __( 'Module', 'sensei-lms' ),
-					description: __( 'About Module', 'sensei-lms' ),
+					title: __( 'Lesson 1', 'sensei-lms' ),
+					id: 1,
+					draft: false,
+					isExample: true,
 				},
-				innerBlocks: [
-					{
-						name: 'sensei-lms/course-outline-lesson',
-						attributes: {
-							title: __( 'Lesson', 'sensei-lms' ),
-							id: 1,
-							draft: false,
-							isExample: true,
-						},
-					},
-				],
 			},
 			{
 				name: 'sensei-lms/course-outline-lesson',
 				attributes: {
-					title: __( 'First Lesson', 'sensei-lms' ),
+					title: __( 'Lesson 2', 'sensei-lms' ),
 					id: 2,
 					draft: false,
 					isExample: true,
@@ -60,7 +51,7 @@ export default {
 			{
 				name: 'sensei-lms/course-outline-lesson',
 				attributes: {
-					title: __( 'Second Lesson', 'sensei-lms' ),
+					title: __( 'Lesson 3', 'sensei-lms' ),
 					id: 3,
 					draft: false,
 					isExample: true,

assets/blocks/course-progress-block/block.json

@@ -42,8 +42,7 @@
       "type": "integer"
     },
     "isPreview": {
-      "type": "boolean",
-      "default": false
+      "type": "boolean"
     }
   },
   "usesContext": [ "postType" ],

assets/blocks/course-progress-block/course-progress-edit.js

@@ -35,6 +35,7 @@ import InvalidUsageError from '../../shared/components/invalid-usage';
  * @param {Object}   props.attributes              Component attributes.
  * @param {number}   props.attributes.height       The height of the progress bar.
  * @param {number}   props.attributes.borderRadius The border radius of the progress bar.
+ * @param {boolean}  props.attributes.isPreview    Whether block is rendered in a preview.
  * @param {Function} props.setAttributes           Callback to set the component attributes.
  */
 export const CourseProgressEdit = ( props ) => {
@@ -45,7 +46,7 @@ export const CourseProgressEdit = ( props ) => {
 		barBackgroundColor,
 		textColor,
 		context: { postType },
-		attributes: { height, borderRadius },
+		attributes: { height, borderRadius, isPreview },
 		setAttributes,
 	} = props;
 
@@ -93,7 +94,7 @@ export const CourseProgressEdit = ( props ) => {
 	return (
 		<>
 			<ProgressBar
-				totalCount={ totalLessonsCount }
+				totalCount={ isPreview ? 3 : totalLessonsCount }
 				completedCount={ completedLessonsCount }
 				wrapperAttributes={ wrapperAttributes }
 				barWrapperAttributes={ barWrapperAttributes }

assets/blocks/lesson-action-blocks.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import {
+	CompleteLessonBlock,
+	LessonActionsBlock,
+	LessonCompletedBlock,
+	NextLessonBlock,
+	TakeQuizBlock,
+	ResetLessonBlock,
+} from './lesson-actions';
+import registerSenseiBlocks from './register-sensei-blocks';
+
+registerSenseiBlocks( [
+	LessonActionsBlock,
+	LessonCompletedBlock,
+	CompleteLessonBlock,
+	NextLessonBlock,
+	TakeQuizBlock,
+	ResetLessonBlock,
+] );

assets/blocks/lesson-actions/index.js

@@ -5,4 +5,5 @@ export { default as LessonActionsBlock } from './lesson-actions-block';
 export { default as CompleteLessonBlock } from './complete-lesson-block';
 export { default as NextLessonBlock } from './next-lesson-block';
 export { default as ResetLessonBlock } from './reset-lesson-block';
-export { default as ViewQuizBlock } from './view-quiz-block';
+export { default as TakeQuizBlock } from './take-quiz-block';
+export { default as LessonCompletedBlock } from './lesson-completed-block';