Skip to content

Add course completion meta field #2877

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
outdoor2kode merged 6 commits into from
Sep 10, 2024
Merged

Add course completion meta field #2877

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
078d13d
Add course completion meta field
outdoor2kode Sep 8, 2024
0ba7170
get and use the meta on the complete page
outdoor2kode Sep 8, 2024
776c692
Add description
outdoor2kode Sep 8, 2024
30ac3f5
Update copy
outdoor2kode Sep 9, 2024
16df720
Add placeholder
outdoor2kode Sep 10, 2024
9235cc4
Update comment
outdoor2kode Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions wp-content/plugins/wporg-learn/inc/post-meta.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 lessons.
Copy link
Copy Markdown
Contributor

@adamwoodnz adamwoodnz Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Register post meta keys for lessons.
* Register post meta keys for courses.

Copy link
Copy Markdown
Contributor Author

@outdoor2kode outdoor2kode Sep 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

9235cc4

*/
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.
*/
Expand Down Expand Up @@ -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();
}

/**
Expand Down Expand Up @@ -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' );
}
}
56 changes: 56 additions & 0 deletions wp-content/plugins/wporg-learn/js/course-completion-meta/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/**
* 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={ __( 'Course Completion Settings', 'wporg-learn' ) }>
Copy link
Copy Markdown
Contributor

@adamwoodnz adamwoodnz Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given this is displayed on the course edit screen in the settings panel I think we can simplify the text a bit, how about

Suggested change
<PluginDocumentSettingPanel title={ __( 'Course Completion Settings', 'wporg-learn' ) }>
<PluginDocumentSettingPanel title={ __( 'Completed screen', 'wporg-learn' ) }>

Copy link
Copy Markdown
Contributor Author

@outdoor2kode outdoor2kode Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

30ac3f5

image

<PanelRow>
<p>{ __( 'If the fields are left blank, the default values will be applied.', 'wporg-learn' ) }</p>
Copy link
Copy Markdown
Contributor

@adamwoodnz adamwoodnz Sep 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<p>{ __( 'If the fields are left blank, the default values will be applied.', 'wporg-learn' ) }</p>
<p>{ __( 'These fields customize what is displayed on the Course Completed screen. If left blank, the default values will be applied.', 'wporg-learn' ) }</p>

Copy link
Copy Markdown
Contributor Author

@outdoor2kode outdoor2kode Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

30ac3f5

</PanelRow>
<PanelRow>
<TextControl
Copy link
Copy Markdown
Contributor

@adamwoodnz adamwoodnz Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we show a placeholder value here 'Congratulations on completing this course!'?

Copy link
Copy Markdown
Contributor Author

@outdoor2kode outdoor2kode Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
The placeholder is getting cut off though. What do you think about shortening it to something like: 'Course completed!' or just leaving it blank like the other fields?

Copy link
Copy Markdown
Contributor

@adamwoodnz adamwoodnz Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally I don't have a problem with it being cut off; I think it still provides an example of what is expected. If we did want to shorten it I'd just use Congratulations!, as it's still close to the default.

Copy link
Copy Markdown
Contributor Author

@outdoor2kode outdoor2kode Sep 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it still provides an example of what is expected.

This makes sense to me. 16df720

label={ __( 'Success Message', 'wporg-learn' ) }
value={ message }
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,
} );
1 change: 1 addition & 0 deletions wp-content/plugins/wporg-learn/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
8 changes: 6 additions & 2 deletions wp-content/themes/pub/wporg-learn-2024/patterns/page-course-complete-content.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
* Inserter: no
*/

$course_id = isset( $_GET['course_id'] ) ? intval( $_GET['course_id'] ) : get_the_ID();
Copy link
Copy Markdown
Contributor

@adamwoodnz adamwoodnz Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious about this, did you find a case where get_the_ID() didn't work? I would have thought that would be the ideal means for getting it.

Copy link
Copy Markdown
Contributor Author

@outdoor2kode outdoor2kode Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven’t encountered this, but I remember being reminded before that in certain places like before/after the loop or in header, footer, or admin pages, get_the_ID() might not work, as it’s likely to return no value in those contexts. It works here because I saw this snippet from the post_template block.

$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} -->
Expand All @@ -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 -->

Expand All @@ -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>
Expand Down