Add course completion meta field (#2877)

* Add course completion meta fields * Use the meta on the completed page
WordPress · Sep 10, 2024 · bcce0c1 · bcce0c1
1 parent 6616fa5
commit bcce0c1
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 2 deletions.
diff --git a/wp-content/plugins/wporg-learn/inc/post-meta.php b/wp-content/plugins/wporg-learn/inc/post-meta.php
@@ -28,12 +28,49 @@
  * Register all post meta keys.
  */
 function register() {
+	register_course_meta();
 	register_lesson_meta();
 	register_lesson_plan_meta();
 	register_workshop_meta();
 	register_misc_meta();
 }
 
+/**
+ * Register post meta keys for courses.
+ */
+function register_course_meta() {
+	register_post_meta(
+		'course',
+		'_course_completion_success_message',
+		array(
+			'description'       => __( 'The message displayed to users upon successful course completion.', 'wporg-learn' ),
+			'type'              => 'string',
+			'single'            => true,
+			'sanitize_callback' => 'sanitize_text_field',
+			'show_in_rest'      => true,
+			'auth_callback'     => function( $allowed, $meta_key, $post_id ) {
+				return current_user_can( 'edit_post', $post_id );
+			},
+		)
+	);
+
+	register_post_meta(
+		'course',
+		'_course_completion_survey_link',
+		array(
+			'description'       => __( 'The survey link to be shown alongside the completion message.', 'wporg-learn' ),
+			'type'              => 'string',
+			'single'            => true,
+			'default'           => '',
+			'sanitize_callback' => 'esc_url_raw',
+			'show_in_rest'      => true,
+			'auth_callback'     => function( $allowed, $meta_key, $post_id ) {
+				return current_user_can( 'edit_post', $post_id );
+			},
+		)
+	);
+}
+
 /**
  * Register post meta keys for lessons.
  */
@@ -655,6 +692,7 @@ function enqueue_editor_assets() {
 	enqueue_language_meta_assets();
 	enqueue_lesson_featured_meta_assets();
 	enqueue_duration_meta_assets();
+	enqueue_course_completion_meta_assets();
 }
 
 /**
@@ -760,3 +798,28 @@ function enqueue_duration_meta_assets() {
 		wp_set_script_translations( 'wporg-learn-duration-meta', 'wporg-learn' );
 	}
 }
+
+/**
+ * Enqueue scripts for the course completion meta block.
+ */
+function enqueue_course_completion_meta_assets() {
+	global $typenow;
+
+	if ( 'course' === $typenow ) {
+		$script_asset_path = get_build_path() . 'course-completion-meta.asset.php';
+		if ( ! file_exists( $script_asset_path ) ) {
+			wp_die( 'You need to run `yarn start` or `yarn build` to build the required assets.' );
+		}
+
+		$script_asset = require( $script_asset_path );
+		wp_enqueue_script(
+			'wporg-learn-course-completion-meta',
+			get_build_url() . 'course-completion-meta.js',
+			$script_asset['dependencies'],
+			$script_asset['version'],
+			true
+		);
+
+		wp_set_script_translations( 'wporg-learn-course-completion-meta', 'wporg-learn' );
+	}
+}
diff --git a/wp-content/plugins/wporg-learn/js/course-completion-meta/index.js b/wp-content/plugins/wporg-learn/js/course-completion-meta/index.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelRow, TextControl } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
+import { __ } from '@wordpress/i18n';
+import { registerPlugin } from '@wordpress/plugins';
+
+const CourseCompletionMeta = () => {
+	const postMetaData = useSelect( ( select ) => select( 'core/editor' ).getEditedPostAttribute( 'meta' ) || {} );
+	const { editPost } = useDispatch( 'core/editor' );
+
+	const message = postMetaData?._course_completion_success_message || '';
+	const link = postMetaData?._course_completion_survey_link || '';
+
+	return (
+		<PluginDocumentSettingPanel title={ __( 'Completed screen', 'wporg-learn' ) }>
+			<PanelRow>
+				<p>
+					{ __(
+						'These fields customize what is displayed on the Course Completed screen. If left blank, the default values will be applied.',
+						'wporg-learn'
+					) }
+				</p>
+			</PanelRow>
+			<PanelRow>
+				<TextControl
+					label={ __( 'Success Message', 'wporg-learn' ) }
+					value={ message }
+					placeholder={ __( 'Congratulations on completing this course!', 'wporg-learn' ) }
+					onChange={ ( newMessage ) => {
+						editPost( {
+							meta: {
+								...postMetaData,
+								_course_completion_success_message: newMessage,
+							},
+						} );
+					} }
+				/>
+			</PanelRow>
+			<PanelRow>
+				<TextControl
+					label={ __( 'Survey Link', 'wporg-learn' ) }
+					value={ link }
+					onChange={ ( newLink ) => {
+						editPost( {
+							meta: {
+								...postMetaData,
+								_course_completion_survey_link: newLink,
+							},
+						} );
+					} }
+				/>
+			</PanelRow>
+		</PluginDocumentSettingPanel>
+	);
+};
+
+registerPlugin( 'wporg-learn-course-completion-meta', {
+	render: CourseCompletionMeta,
+} );
diff --git a/wp-content/plugins/wporg-learn/webpack.config.js b/wp-content/plugins/wporg-learn/webpack.config.js
@@ -4,6 +4,7 @@ const config = require( '@wordpress/scripts/config/webpack.config' );
  * Set up the custom entry points.
  */
 config.entry = {
+	'course-completion-meta': './js/course-completion-meta/index.js',
 	'course-status': './js/course-status/src/index.js',
 	'duration-meta': './js/duration-meta/index.js',
 	'expiration-date': './js/expiration-date/index.js',

diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/page-course-complete-content.php b/wp-content/themes/pub/wporg-learn-2024/patterns/page-course-complete-content.php
@@ -5,6 +5,10 @@
  * Inserter: no
  */
 
+$course_id = isset( $_GET['course_id'] ) ? intval( $_GET['course_id'] ) : get_the_ID();
+$success_message = get_post_meta( $course_id, '_course_completion_success_message', true ) ?: __( 'Congratulations on completing this course!', 'wporg-learn' );
+$survey_link = get_post_meta( $course_id, '_course_completion_survey_link', true ) ?: 'https://docs.google.com/forms/d/e/1FAIpQLSf0QMflUedxjta0u5qS4_pl-9aY06BDBXgRn2PoZA1gRvD9jw/viewform';
+
 ?>
 
 <!-- wp:heading {"level":1} -->
@@ -15,7 +19,7 @@
 
 <!-- wp:heading {"style":{"spacing":{"margin":{"top":"40px","bottom":"10px"}}},"fontSize":"large","fontFamily":"inter"} -->
 <h2 class="wp-block-heading has-inter-font-family has-large-font-size" style="margin-top:40px;margin-bottom:10px">
-	<?php esc_html_e( 'Congratulations on completing this course!', 'wporg-learn' ); ?>
+	<?php echo esc_html( $success_message ); ?>
 </h2>
 <!-- /wp:heading -->
 
@@ -29,7 +33,7 @@
 <div class="wp-block-buttons">
 	<!-- wp:button {"style":{"spacing":{"padding":{"left":"32px","right":"32px","top":"17px","bottom":"17px"}}}} -->
 	<div class="wp-block-button">
-		<a class="wp-block-button__link wp-element-button" href="https://docs.google.com/forms/d/e/1FAIpQLSf0QMflUedxjta0u5qS4_pl-9aY06BDBXgRn2PoZA1gRvD9jw/viewform" style="padding-top:17px;padding-right:32px;padding-bottom:17px;padding-left:32px">
+		<a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( $survey_link ); ?>" style="padding-top:17px;padding-right:32px;padding-bottom:17px;padding-left:32px">
 			<?php esc_html_e( 'Complete the survey', 'wporg-learn' ); ?>
 		</a>
 	</div>