Skip to content

Commit

Permalink
Add My courses template (#2553)
Browse files Browse the repository at this point in the history 
* Add My courses template

* Update card layout

* Remove extra space between card rows

* Use title for the title

* Simplify filter options config

* Format content and add back translations
  • Loading branch information
@adamwoodnz
adamwoodnz authored Jun 20, 2024
1 parent 4076324 commit d63c632
Show file tree
Hide file tree
Showing 4 changed files with 199 additions and 4 deletions.
70 changes: 70 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/inc/block-config.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
add_filter( 'wporg_query_filter_options_topic', __NAMESPACE__ . '\get_topic_options' );
add_filter( 'wporg_query_filter_options_taxonomy-topic', __NAMESPACE__ . '\get_taxonomy_topic_options' );
add_filter( 'wporg_query_filter_options_learning-pathway-topic', __NAMESPACE__ . '\get_learning_pathway_topic_options' );
add_filter( 'query_vars', __NAMESPACE__ . '\add_student_course_filter_query_vars' );
add_filter( 'wporg_query_filter_options_student-course', __NAMESPACE__ . '\get_student_course_options' );
add_action( 'wporg_query_filter_in_form', __NAMESPACE__ . '\inject_other_filters' );

/**
Expand Down Expand Up @@ -386,6 +388,74 @@ function get_language_options( $options ) {
);
}

/**
* Get the query variable name for the student course filter, used by Sensei to filter the My Courses page.
* This is the PARAM_KEY defined in the Sensei plugin + the query id on the query loop in my-courses-content.php
* See class Sensei_Course_List_Student_Course_Filter.
*
* @return string The query variable name.
*/
function get_student_course_filter_query_var_name() {
return 'course-list-student-course-filter-0';
}

/**
* Add student course filter query var.
*
* @param array $query_vars The query vars.
* @return array The updated query vars.
*/
function add_student_course_filter_query_vars( $query_vars ) {
$query_vars[] = get_student_course_filter_query_var_name();

return $query_vars;
}

/**
* Get the options for the student course completion status filter.
*
* @param array $options The options for this filter.
* @return array New list of student course filter options.
*/
function get_student_course_options( $options ) {
global $wp_query;

$key = get_student_course_filter_query_var_name();

$options = array(
'all' => __( 'All', 'wporg-learn' ),
'active' => __( 'Active', 'wporg-learn' ),
'completed' => __( 'Completed', 'wporg-learn' ),
);

$selected_slug = $wp_query->get( $key );
if ( $selected_slug ) {
// Find the selected option from $options by slug and then get the name.
$selected_option = array_filter(
$options,
function ( $option, $slug ) use ( $selected_slug ) {
return $slug === $selected_slug;
},
ARRAY_FILTER_USE_BOTH
);
if ( ! empty( $selected_option ) ) {
$label = array_shift( $selected_option );
}
} else {
$selected_slug = 'all';
$label = __( 'All', 'wporg-learn' );
}

return array(
'label' => $label,
'title' => __( 'Completion status', 'wporg-learn' ),
'key' => $key,
'action' => get_current_url(),
'options' => $options,
'selected' => array( $selected_slug ),
);
}

/**
* Add in the other existing filters as hidden inputs in the filter form.
*
Expand Down
98 changes: 98 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/patterns/my-courses-content.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<?php
/**
* Title: Courses Archive Content
* Slug: wporg-learn-2024/my-courses-content
* Inserter: no
*/

?>

<!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|20"}}},"layout":{"type":"constrained","justifyContent":"left","contentSize":"730px"}} -->
<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--20)">

<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading"><?php esc_html_e( 'My Courses', 'wporg-learn' ); ?></h1>
<!-- /wp:heading -->

</div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"right"},"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-group alignwide" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--40)">

<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","flexWrap":"nowrap"},"className":"wporg-query-filters"} -->
<div class="wp-block-group wporg-query-filters">
<!-- wp:wporg/query-filter {"key":"student-course","multiple":false} /-->
</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- wp:query {"queryId":0,"query":{"postType":"course","perPage":12,"offset":0,"inherit":false,"sticky":"","pages":0,"order":"desc","orderBy":"date","author":"","search":"","exclude":[]},"className":"wp-block-sensei-lms-course-list wp-block-sensei-lms-course-list\u002d\u002dis-list-view wporg-learn-course-grid"} -->
<div class="wp-block-query wp-block-sensei-lms-course-list wp-block-sensei-lms-course-list--is-list-view wporg-learn-course-grid">

<!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"330px"}} -->

<!-- wp:group {"style":{"border":{"width":"1px","color":"var:preset|color|light-grey-1","radius":"2px"},"spacing":{"blockGap":"0"},"dimensions":{"minHeight":"100%"}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group has-border-color has-white-background-color has-background" style="border-color:var(--wp--preset--color--light-grey-1);border-width:1px;border-radius:2px;min-height:100%">

<!-- wp:post-featured-image {"isLink":true,"height":"","align":"center"} /-->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"20px","right":"20px"},"blockGap":"var:preset|spacing|10"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-right:20px;padding-bottom:var(--wp--preset--spacing--20);padding-left:20px">

<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->

<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"typography":{"lineHeight":1.6},"layout":{"selfStretch":"fill","flexSize":null}}} /-->

<!-- wp:sensei-lms/course-progress {"barColor":"blueberry-1","defaultBarColor":"blueberry-1","barBackgroundColor":"blueberry-3","height":8,"className":"wporg-learn-sidebar-course-progress"} /-->

<!-- wp:spacer {"height":"0px","style":{"layout":{"selfStretch":"fixed","flexSize":"0px"}}} -->
<div style="height:0px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:sensei-lms/course-actions -->

<!-- wp:sensei-lms/button-take-course {"align":"left"} -->
<div class="wp-block-sensei-lms-button-take-course is-style-default wp-block-sensei-button wp-block-button has-text-align-left"><button class="wp-block-button__link"><?php esc_html_e( 'Start Course', 'wporg-learn' ); ?></button></div>
<!-- /wp:sensei-lms/button-take-course -->

<!-- wp:sensei-lms/button-continue-course {"align":"left"} -->
<div class="wp-block-sensei-lms-button-continue-course is-style-default wp-block-sensei-button wp-block-button has-text-align-left"><a class="wp-block-button__link"><?php esc_html_e( 'Continue', 'wporg-learn' ); ?></a></div>
<!-- /wp:sensei-lms/button-continue-course -->

<!-- wp:sensei-lms/button-view-results {"align":"left","className":"is-style-default"} -->
<div class="wp-block-sensei-lms-button-view-results is-style-default wp-block-sensei-button wp-block-button has-text-align-left"><a class="wp-block-button__link"><?php esc_html_e( 'Visit Results', 'wporg-learn' ); ?></a></div>
<!-- /wp:sensei-lms/button-view-results -->

<!-- /wp:sensei-lms/course-actions -->

</div>
<!-- /wp:group -->

</div>
<!-- /wp:group -->

<!-- /wp:post-template -->

<!-- wp:query-no-results -->

<!-- wp:paragraph {"placeholder":"Add text or blocks that will display when a query returns no results."} -->
<p><?php esc_html_e( 'No courses found.', 'wporg-learn' ); ?></p>
<!-- /wp:paragraph -->

<!-- /wp:query-no-results -->

<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->

<!-- wp:query-pagination-previous {"label":"<?php esc_html_e( 'Previous', 'wporg-learn' ); ?>"} /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next {"label":"<?php esc_html_e( 'Next', 'wporg-learn' ); ?>"} /-->

<!-- /wp:query-pagination -->

</div>
<!-- /wp:query -->
18 changes: 14 additions & 4 deletions wp-content/themes/pub/wporg-learn-2024/src/style/_course-grid.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,24 @@
.wporg-learn-course-grid {
&.wp-block-query > .is-layout-grid {
row-gap: var(--wp--preset--spacing--50);

.wp-block-post-featured-image {
margin-bottom: unset;
}

.sensei-lms-course-list-featured-label__text {
display: none;
}

.sensei-cta .wp-block-button__link {
float: unset;
}
}

.course {
position: relative;
margin-bottom: unset;
padding-bottom: unset;

&::before,
&::after {
Expand Down Expand Up @@ -32,10 +46,6 @@
}
}

.sensei-lms-course-list-featured-label__text {
display: none;
}

.wp-block-post-title a {
color: var(--wp--custom--link--color--text);
}
Expand Down
17 changes: 17 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/templates/page-my-courses.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!-- wp:template-part {"slug":"header","className":"has-display-contents","tagName":"div"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"className":"entry-content","style":{"spacing":{"blockGap":"0px"}}} -->
<main class="wp-block-group entry-content">

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--edge-space)">

<!-- wp:pattern {"slug":"wporg-learn-2024/my-courses-content"} /-->

</div>
<!-- /wp:group -->

</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->

0 comments on commit d63c632

Please sign in to comment.