Skip to content

Commit

Permalink
Add single course page (#2524)
Browse files Browse the repository at this point in the history 
* Make the single course layout two columns.

* Add sidebar-meta-info pattern.

* Add sensei-meta-list block.

* Add take course button to the sidebar.

* Add playground button to the sidebar.

* Add support info to the sidebar.

* Add course-progress block to the sidebar.

* Add All my courses.

* Translation.
  • Loading branch information
@renintw
renintw authored Jun 12, 2024
1 parent a49af1b commit c8dc4f3
Show file tree
Hide file tree
Showing 9 changed files with 373 additions and 4 deletions.
1 change: 1 addition & 0 deletions wp-content/themes/pub/wporg-learn-2024/functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
require_once __DIR__ . '/src/learning-pathway-cards/index.php';
require_once __DIR__ . '/src/search-results-context/index.php';
require_once __DIR__ . '/src/upcoming-online-workshops/index.php';
require_once __DIR__ . '/src/sensei-meta-list/index.php';
require_once __DIR__ . '/inc/block-config.php';

/**
Expand Down
74 changes: 74 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/patterns/sidebar-meta-info.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<?php
/**
* Title: Sidebar Meta Info
* Slug: wporg-learn-2024/sidebar-meta-info
* Inserter: no
*/

use function WPOrg_Learn\Sensei\{get_my_courses_page_url}

?>

<!-- wp:group {"align":"full","className":"wporg-learn-sidebar-meta-info","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull wporg-learn-sidebar-meta-info">

<?php if ( Sensei_Course::is_user_enrolled( get_the_ID() ) ) : ?>
<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}},"typography":{"fontStyle":"normal","fontWeight":"400","lineHeight":26px}},"textColor":"blueberry-1","fontSize":"normal","fontFamily":"inter","className":""wporg-learn-sidebar-all-courses"} -->
<p class="has-blueberry-1-color has-text-color has-link-color has-inter-font-family has-normal-font-size wporg-learn-sidebar-all-courses" style="font-style:normal;font-weight:400;line-height:26px">
<a href="<?php echo esc_url( get_my_courses_page_url() ); ?>">
<?php esc_html_e( 'All My Courses', 'wporg-learn' ); ?>
</a>
</p>
<!-- /wp:paragraph -->
<?php endif; ?>

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

<!-- wp:sensei-lms/button-take-course {"align":"full","borderRadius":2,"className":"is-style-default"} -->
<div class="wp-block-sensei-lms-button-take-course is-style-default wp-block-sensei-button wp-block-button has-text-align-full">
<button class="wp-block-button__link" style="border-radius:2px">
<?php esc_html_e( 'Take this Course', 'wporg-learn' ); ?>
</button>
</div>
<!-- /wp:sensei-lms/button-take-course -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"className":""wporg-learn-sidebar-playground"} -->
<div class="wp-block-buttons">
<!-- wp:button {"textAlign":"center","width":100,"style":{"border":{"radius":"2px"},"spacing":{"padding":{"left":"13px","right":"13px","top":"16px","bottom":"16px"}},"typography":{"lineHeight":0,"fontStyle":"normal","fontWeight":"400"}},"className":"aligncenter is-style-outline","fontSize":"normal","fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size aligncenter is-style-outline has-inter-font-family has-normal-font-size wporg-learn-sidebar-playground" style="font-style:normal;font-weight:400;line-height:0">
<a class="wp-block-button__link has-text-align-center wp-element-button" href="https://wordpress.org/playground/demo/?step=playground&amp;theme=twentytwentythree" style="border-radius:2px;padding-top:16px;padding-right:13px;padding-bottom:16px;padding-left:13px" target="_blank" rel="noreferrer noopener">
<?php esc_html_e( 'Practice on a private demo site', 'wporg-learn' ); ?>
</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

<!-- wp:wporg-learn/sensei-meta-list {"type":"course","fontSize":"normal"} /-->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"400","lineHeight":"34px"}},"fontSize":"large","fontFamily":"inter"} -->
<p class="has-inter-font-family has-large-font-size" id="suggestions" style="font-style:normal;font-weight:400;line-height:34px">
<?php esc_html_e( 'Suggestions', 'wporg-learn' ); ?>
</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"400,"lineHeight":"26px"},"spacing":{"margin":{"bottom":"40px"}}},"fontSize":"normal","fontFamily":"inter"} -->
<p class="has-inter-font-family has-normal-font-size" style="margin-bottom:40px;font-style:normal;font-weight:400;line-height:26px">
<?php esc_html_e( 'Found a typo, grammar error or outdated screenshot? ', 'wporg-learn' ); ?><a href="https://learn.wordpress.org/report-content-feedback/"><?php esc_html_e( 'Contact us', 'wporg-learn' ); ?></a>
</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"400","lineHeight":"34px"}},"fontSize":"large","fontFamily":"inter"} -->
<p class="has-inter-font-family has-large-font-size" id="suggestions" style="font-style:normal;font-weight:400;line-height:34px">
<?php esc_html_e( 'License', 'wporg-learn' ); ?>
</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"400,"lineHeight":"26px"}},"fontSize":"normal","fontFamily":"inter"} -->
<p class="has-inter-font-family has-normal-font-size" style="font-style:normal;font-weight:400;line-height:26px">
<?php esc_html_e( 'This work is licensed under a ', 'wporg-learn' ); ?><a href="http://creativecommons.org/licenses/by-sa/4.0/"><?php esc_html_e( 'Creative Commons Attribution-ShareAlike 4.0 International License', 'wporg-learn' ); ?></a>.
</p>
<!-- /wp:paragraph -->

</div>
<!-- /wp:group -->
31 changes: 31 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/src/sensei-meta-list/block.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "wporg-learn/sensei-meta-list",
"version": "0.1.0",
"title": "Sensei Meta List",
"category": "design",
"icon": "",
"description": "Display the site meta data of a learn or course as a list.",
"textdomain": "wporg-learn",
"supports": {
"align": true,
"html": false,
"color": {
"text": true,
"background": true,
"link": true
},
"spacing": {
"margin": true,
"padding": true
},
"typography": {
"fontSize": true,
"lineHeight": true
}
},
"usesContext": [ "postId", "postType" ],
"editorScript": "file:./index.js",
"style": "file:./style-index.css"
}
19 changes: 19 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/src/sensei-meta-list/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/**
* WordPress dependencies
*/
import { registerBlockType } from '@wordpress/blocks';

/**
* Internal dependencies
*/
import Edit from '../shared/dynamic-edit';
import metadata from './block.json';
import './style.scss';

registerBlockType( metadata.name, {
/**
* @see ./edit.js
*/
edit: Edit,
save: () => null,
} );
136 changes: 136 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/src/sensei-meta-list/index.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<?php
/**
* Block Name: Sensei Meta List
* Description: Display the site meta data of a learn or course as a list.
*
* @package wporg
*/

namespace WordPressdotorg\Theme\Learn_2024\Sensei_Meta_List;

use Sensei_Utils;
use Sensei_Reports_Overview_Service_Courses;

add_action( 'init', __NAMESPACE__ . '\init' );

/**
* Registers the block using the metadata loaded from the `block.json` file.
* Behind the scenes, it registers also all assets so they can be enqueued
* through the block editor in the corresponding context.
*
* @see https://developer.wordpress.org/reference/functions/register_block_type/
*/
function init() {
register_block_type(
dirname( dirname( __DIR__ ) ) . '/build/sensei-meta-list',
array(
'render_callback' => __NAMESPACE__ . '\render',
)
);
}

/**
* Render the block content.
*
* @param array $attributes Block attributes.
* @param string $content Block default content.
* @param WP_Block $block Block instance.
*
* @return string Returns the block markup.
*/
function render( $attributes, $content, $block ) {
if ( ! isset( $block->context['postId'] ) ) {
return '';
}

$list_items = array();

if ( 'course' === $block->context['postType'] ) {
$course_service = new Sensei_Reports_Overview_Service_Courses();
$course_id = $block->context['postId'];

// Get the total number of learners enrolled in the course
$learners = Sensei_Utils::sensei_check_for_activity(
array(
'type' => 'sensei_course_status',
'status' => 'in-progress',
'post__in' => $course_id,
)
);

// Get the average grade across all learners
$average_grade = round( $course_service->get_courses_average_grade( array( $course_id ) ), 0 );

// Get the average number of days it takes to complete a course
$average_days = $course_service->get_average_days_to_completion( array( $course_id ) );

// Get the last updated time
$last_updated = get_last_updated_time( $course_id );

// Set up array of data to be used
$meta_fields = array(
array(
'label' => __( 'Enrolled learners', 'wporg-learn' ),
'value' => $learners,
'key' => 'learners',
),
array(
'label' => __( 'Average final grade', 'wporg-learn' ),
'value' => $average_grade . '%',
'key' => 'average-grade',
),
array(
'label' => __( 'Average days to completion', 'wporg-learn' ),
'value' => $average_days,
'key' => 'average-days',
),
array(
'label' => __( 'Last updated', 'wporg-learn' ),
'value' => $last_updated,
'key' => 'last-updated',
),
);
}

foreach ( $meta_fields as $field ) {
$list_items[] = sprintf(
'<tr class="is-meta-%1$s">
<th scope="row">%2$s</th>
<td>%3$s</td>
</tr>',
$field['key'],
$field['label'],
wp_kses_post( $field['value'] )
);
}

$wrapper_attributes = get_block_wrapper_attributes();
return sprintf(
'<div %s><table>%s</table></div>',
$wrapper_attributes,
join( '', $list_items )
);
}

/**
* Get the last updated time for a course.
*
* @param int $course_id The ID of the course.
*
* @return string The last updated time.
*/
function get_last_updated_time( $course_id ) {
$last_updated_time = get_post_modified_time( 'U', false, $course_id );
$current_time = current_time( 'timestamp' );

$time_diff = human_time_diff( $last_updated_time, $current_time );

// If the time difference is greater than 30 days, display the specific date
if ( $current_time - $last_updated_time > 30 * DAY_IN_SECONDS ) {
$last_updated = get_post_modified_time( 'M jS, Y', false, $course_id );
} else {
$last_updated = sprintf( '%s ago', $time_diff );
}

return $last_updated;
}
55 changes: 55 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/src/sensei-meta-list/style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
.wp-block-wporg-learn-sensei-meta-list {
margin-block-start: 40px;
margin-block-end: 40px;

table {
margin: 0;
padding: 0;
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}

tr {
vertical-align: baseline;

&:not(:last-of-type) {
border-bottom: 1px solid var(--wp--preset--color--light-grey-1);
}

th,
td {
padding-top: var(--wp--preset--spacing--10);
padding-bottom: var(--wp--preset--spacing--10);
}

th {
font-weight: 400;
text-align: start;
min-width: 100px;
}

td {
text-align: end;
white-space: nowrap;
}

@media (max-width: 380px) {
display: block;

th,
td {
display: block;
}

th {
padding-bottom: 0;
}

td {
text-align: start;
padding-top: 0;
}
}
}
}
32 changes: 32 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/src/style/_sidebar.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
.wporg-learn-sidebar-meta-info {
> .wp-block-sensei-lms-button-take-course {
margin-bottom: var(--wp--preset--spacing--20);

button {
line-height: 1;
}
}

.wporg-learn-sidebar-playground a {
line-height: 1;
}

.wporg-learn-sidebar-all-courses {
a {
text-decoration: none;
}
}

.wporg-learn-sidebar-course-progress {
margin-top: 16px;
margin-bottom: 40px;
display: flex;
flex-direction: column;

.sensei-progress-bar__label {
order: 1;
margin-bottom: 0;
margin-top: 16px;
}
}
}
1 change: 1 addition & 0 deletions wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
@import "jetpack";
@import "local-nav";
@import "sensei";
@import "sidebar";
@import "tag";
@import "taxonomy-learning-pathway";
@import "wp-components";
Expand Down
Loading

0 comments on commit c8dc4f3

Please sign in to comment.