Merge pull request #5507 from Automattic/feature/courses-list

Merge Course List block feature branch into trunk

assets/blocks/button/index.js

@@ -17,6 +17,7 @@ import { button as icon } from '@wordpress/icons';
 import './color-hooks';
 import ButtonEdit from './button-edit';
 import ButtonSave from './button-save';
+import InvalidUsageError from '../../shared/components/invalid-usage';
 import { withDefaultBlockStyle } from '../../shared/blocks/settings';
 
 /**
@@ -43,11 +44,13 @@ export const BlockStyles = {
  * Settings are merged into block settings, the rest of the options are passed on to the save and edit components.
  *
  * @param {Object}   opts
- * @param {Object}   opts.settings    Block settings.
- * @param {Function} opts.EditWrapper Custom edit wrapper component.
+ * @param {Object}   opts.settings     Block settings.
+ * @param {Object}   opts.invalidUsage Info about whether this block is being used in the proper context.
+ * @param {Function} opts.EditWrapper  Custom edit wrapper component.
  */
 export const createButtonBlockType = ( {
 	settings,
+	invalidUsage,
 	EditWrapper,
 	...options
 } ) => {
@@ -108,6 +111,7 @@ export const createButtonBlockType = ( {
 					default: [],
 				},
 			},
+			usesContext: [ 'postType' ],
 			supports: {
 				color: {
 					gradients: true,
@@ -121,10 +125,25 @@ export const createButtonBlockType = ( {
 			icon,
 			styles,
 			edit( props ) {
+				const { postType } = props.context;
 				const content = (
 					<ButtonEditWithBlockStyle { ...props } { ...options } />
 				);
 
+				if (
+					invalidUsage?.validPostTypes &&
+					! invalidUsage.validPostTypes.includes( postType )
+				) {
+					const message =
+						invalidUsage?.message ||
+						__(
+							'This block can only be used inside the Course List block.',
+							'sensei-lms'
+						);
+
+					return <InvalidUsageError message={ message } />;
+				}
+
 				if ( EditWrapper ) {
 					return <EditWrapper { ...props }>{ content }</EditWrapper>;
 				}

assets/blocks/course-actions-block/continue-course/index.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { BlockStyles, createButtonBlockType } from '../../button';
+
+/**
+ * Continue Course block.
+ */
+export default createButtonBlockType( {
+	tagName: 'a',
+	settings: {
+		name: 'sensei-lms/button-continue-course',
+		parent: [ 'sensei-lms/course-actions' ],
+		title: __( 'Continue Course', 'sensei-lms' ),
+		description: __(
+			'Enable a student to pick up where they left off in a course.',
+			'sensei-lms'
+		),
+		keywords: [
+			__( 'Button', 'sensei-lms' ),
+			__( 'Continue', 'sensei-lms' ),
+			__( 'Course', 'sensei-lms' ),
+		],
+		attributes: {
+			text: {
+				default: __( 'Continue', 'sensei-lms' ),
+			},
+		},
+		styles: [
+			{ ...BlockStyles.Fill, isDefault: true },
+			BlockStyles.Outline,
+			BlockStyles.Link,
+		],
+	},
+} );

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

@@ -0,0 +1,8 @@
+{
+	"name": "sensei-lms/course-actions",
+	"category": "sensei-lms",
+	"supports": {
+		"html": false
+	},
+	"usesContext": [ "postType" ]
+}

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

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InnerBlocks } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import InvalidUsageError from '../../../shared/components/invalid-usage';
+
+const innerBlocksTemplate = [
+	[
+		'sensei-lms/button-take-course',
+		{ text: __( 'Start Course', 'sensei-lms' ) },
+	],
+	[ 'sensei-lms/button-continue-course' ],
+	[
+		'sensei-lms/button-view-results',
+		{
+			className: 'is-style-default',
+			text: __( 'Visit Results', 'sensei-lms' ),
+		},
+	],
+];
+
+/**
+ * Edit course actions block component.
+ *
+ * @param {Object} props
+ * @param {Object} props.className        Block className.
+ * @param {Object} props.context          Block context.
+ * @param {Object} props.context.postType Post type.
+ */
+const CourseActionsEdit = ( { className, context: { postType } } ) => {
+	if ( 'course' !== postType ) {
+		return (
+			<InvalidUsageError
+				message={ __(
+					'The Course Actions block can only be used inside the Course List block.',
+					'sensei-lms'
+				) }
+			/>
+		);
+	}
+
+	return (
+		<div className={ className }>
+			<InnerBlocks
+				allowedBlocks={ [
+					'sensei-lms/button-take-course',
+					'sensei-lms/button-continue-course',
+					'sensei-lms/button-view-results',
+				] }
+				template={ innerBlocksTemplate }
+				templateLock="all"
+			/>
+		</div>
+	);
+};
+
+export default CourseActionsEdit;

assets/blocks/course-actions-block/course-actions/course-actions-editor.scss

@@ -0,0 +1,6 @@
+.wp-block-sensei-lms-course-actions {
+	.wp-block-sensei-lms-button-continue-course,
+	.wp-block-sensei-lms-button-view-results {
+		display: none;
+	}
+}

assets/blocks/course-actions-block/course-actions/course-actions-save.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function saveCourseActionsBlock() {
+	return <InnerBlocks.Content />;
+}

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

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './course-actions-edit';
+import save from './course-actions-save';
+import icon from '../../../icons/buttons.svg';
+
+export default {
+	title: __( 'Course Actions', 'sensei-lms' ),
+	description: __(
+		'Enable a student to perform specific actions for a course.',
+		'sensei-lms'
+	),
+	keywords: [
+		__( 'Course', 'sensei-lms' ),
+		__( 'Actions', 'sensei-lms' ),
+		__( 'Buttons', 'sensei-lms' ),
+		__( 'Start Course', 'sensei-lms' ),
+		__( 'Continue', 'sensei-lms' ),
+		__( 'Visit Results', 'sensei-lms' ),
+	],
+	example: {
+		innerBlocks: [
+			{
+				name: 'sensei-lms/button-take-course',
+				attributes: {
+					text: __( 'Start Course', 'sensei-lms' ),
+				},
+			},
+		],
+	},
+	...metadata,
+	icon,
+	edit,
+	save,
+};

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

@@ -0,0 +1,5 @@
+/**
+ * Internal dependencies
+ */
+export { default as ContinueCourse } from './continue-course';
+export { default as CourseActions } from './course-actions';

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

@@ -0,0 +1,58 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "sensei-lms/course-categories",
+	"category": "sensei-lms",
+	"textdomain": "sensei-lms",
+	"attributes": {
+		"align": {
+			"type": "string",
+			"default": "left"
+		},
+		"textColor": {
+			"type": "string"
+		},
+		"backgroundColor": {
+			"type": "string"
+		},
+		"customBackgroundColor": {
+			"type": "string"
+		},
+		"customTextColor": {
+			"type": "string"
+		},
+        "defaultBackgroundColor": {
+			"type": "string"
+		},
+		"defaultTextColor": {
+			"type": "string"
+		},
+		"fontSize": {
+			"type": "string",
+			"default": "small"
+		}
+	},
+	"usesContext": [ "postId", "postType" ],
+	"supports": {
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"blockGap": true
+		},
+		"textAlign": true,
+		"align": true,
+		"alignWide": true,
+		"typography": {
+			"lineHeight": true,
+			"fontSize": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	}
+}