Skip to content

Commit

Permalink
Fix quiz styles (#2881)
Browse files Browse the repository at this point in the history 
* Update notice tips icon image

* Add sensei-quiz-notices pattern

* Fix success message on lesson without module

* Using server-side rendering with the `render_block_` hook to replace the text on the lesson quiz notice.

* Remove Awaiting grade text element 

* Update grade style on the lesson page

* Using server-side rendering to customize the quiz actions.
  • Loading branch information
@renintw
renintw authored Sep 23, 2024
1 parent 9c50106 commit eed930c
Show file tree
Hide file tree
Showing 6 changed files with 202 additions and 12 deletions.
3 changes: 2 additions & 1 deletion wp-content/themes/pub/wporg-learn-2024/assets/icon-check.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
88 changes: 85 additions & 3 deletions wp-content/themes/pub/wporg-learn-2024/inc/block-hooks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@

add_filter( 'render_block_data', __NAMESPACE__ . '\modify_header_template_part' );
add_filter( 'render_block_data', __NAMESPACE__ . '\modify_course_outline_lesson_block_attrs' );
add_filter( 'render_block_sensei-lms/course-outline', __NAMESPACE__ . '\update_course_outline_block_add_aria', 10, 2 );
add_filter( 'render_block_sensei-lms/course-outline', __NAMESPACE__ . '\update_course_outline_block_add_aria' );
add_filter( 'render_block_sensei-lms/course-theme-notices', __NAMESPACE__ . '\update_lesson_quiz_notice_text' );
add_filter( 'render_block_sensei-lms/quiz-actions', __NAMESPACE__ . '\update_quiz_actions' );

/**
* Update header template based on current query.
Expand Down Expand Up @@ -83,11 +85,10 @@ function modify_course_outline_lesson_block_attrs( $parsed_block ) {
* individually, so they cannot be independently filtered.
*
* @param string $block_content The block content.
* @param array $block The full block, including name and attributes.
*
* @return string The updated icon HTML with aria data.
*/
function update_course_outline_block_add_aria( $block_content, $block ) {
function update_course_outline_block_add_aria( $block_content ) {
$html = new WP_HTML_Tag_Processor( $block_content );

$label = '';
Expand All @@ -106,3 +107,84 @@ function update_course_outline_block_add_aria( $block_content, $block ) {
}
return $html->get_updated_html();
}

/**
* Replace the text for the lesson quiz notice.
*
* @param string $block_content The block content.
*
* @return string
*/
function update_lesson_quiz_notice_text( $block_content ) {
if ( is_singular( 'lesson' ) && is_quiz_ungraded() ) {
// Remove the text "Awaiting grade" in the quiz notice.
$block_content = str_replace(
'<div class="sensei-course-theme-lesson-quiz-notice__text">Awaiting grade</div>',
'',
$block_content
);

// Add a new paragraph between the notice content and actions.
$new_p_tag = sprintf(
'<p class="sensei-course-theme-lesson-quiz-notice__description">%s</p>',
esc_html__( 'This is an ungraded quiz. Use it to check your comfort level with what you’ve learned.', 'wporg-learn' )
);

$block_content = str_replace(
'<div class="sensei-course-theme-lesson-quiz-notice__actions">',
$new_p_tag . '<div class="sensei-course-theme-lesson-quiz-notice__actions">',
$block_content
);
}

return $block_content;
}

/**
* Customize the quiz actions.
*
* @param string $block_content The block content.
*
* @return string
*/
function update_quiz_actions( $block_content ) {
if ( is_singular( 'quiz' ) && is_quiz_ungraded() ) {
$lesson_id = Sensei()->quiz->get_lesson_id();
$lesson_link = get_permalink( $lesson_id );

// Add a new button to go back to the lesson.
$new_button_block = do_blocks( '
<!-- wp:button {"className":"has-text-align-center is-style-fill","fontSize":"normal","fontFamily":"inter"} -->
<div class="wp-block-button has-custom-font-size has-text-align-center is-style-fill has-inter-font-family has-normal-font-size">
<a class="wp-block-button__link wp-element-button" style="font-weight:600;line-height:1;outline:unset" href="' . esc_attr( $lesson_link ) . '">' . esc_html__( 'Back to lesson', 'wporg-learn' ) . '</a>
</div>
<!-- /wp:button -->
');

$block_content = str_replace(
'<div class="sensei-quiz-actions-secondary">',
$new_button_block . '<div class="sensei-quiz-actions-secondary">',
$block_content
);
}

return $block_content;
}

/**
* Check if the quiz is ungraded.
*
* @return bool
*/
function is_quiz_ungraded() {
$lesson_id = Sensei_Utils::get_current_lesson();
$quiz_id = Sensei()->lesson->lesson_quizzes( $lesson_id );
$user_id = get_current_user_id();
$quiz_progress = Sensei()->quiz_progress_repository->get( $quiz_id, $user_id );

if ( 'ungraded' === $quiz_progress->get_status() ) {
return true;
}

return false;
}
3 changes: 2 additions & 1 deletion wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-columns.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@

<?php if ( $is_completed ) : ?>
<!-- wp:wporg/notice {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}}} -->
<div class="wp-block-wporg-notice is-tip-notice" style="margin-top:var(--wp--preset--spacing--20)">
<div class="wp-block-wporg-notice is-tip-notice"
style="<?php echo $module ? 'margin-top:var(--wp--preset--spacing--20)' : 'margin-bottom:var(--wp--preset--spacing--50)'; ?>">
<div class="wp-block-wporg-notice__icon"></div>
<div class="wp-block-wporg-notice__content">
<p><?php esc_html_e( 'You already completed this lesson', 'wporg-learn' ); ?></p>
Expand Down
39 changes: 39 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/patterns/sensei-quiz-notices.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<?php
/**
* Title: Sensei Quiz Notices
* Slug: wporg-learn-2024/sensei-quiz-notices
* Inserter: no
*
* @package wporg-learn-2024
*/

$lesson_id = Sensei()->quiz->get_lesson_id();
$course_id = Sensei()->lesson->get_course_id( $lesson_id );
$is_learning_mode = Sensei_Course_Theme_Option::has_learning_mode_enabled( $course_id );
$is_awaiting_grade = Sensei_Quiz::is_quiz_awaiting_grade_for_user( $lesson_id, get_current_user_id() );
$is_pending_grade = $is_learning_mode && $is_awaiting_grade;
$is_from_lesson = strpos( $_SERVER['HTTP_REFERER'], '/lesson/' ) !== false;

?>

<?php if ( $is_pending_grade && $is_from_lesson ) : ?>
<!-- wp:wporg/notice {"type":"info","style":{"spacing":{"margin":{"top":0,"bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-wporg-notice is-info-notice" style="margin-top:-10px;margin-bottom:var(--wp--preset--spacing--40)">
<div class="wp-block-wporg-notice__icon"></div>
<div class="wp-block-wporg-notice__content">
<p><?php esc_html_e( 'This quiz won’t be graded. If you found the questions easy, you likely understand the lesson well.', 'wporg-learn' ); ?></p>
</div>
</div>
<!-- /wp:wporg/notice -->
<?php elseif ( $is_pending_grade ) : ?>
<!-- wp:wporg/notice {"style":{"spacing":{"margin":{"top":0,"bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-wporg-notice is-tip-notice" style="margin-top:-10px;margin-bottom:var(--wp--preset--spacing--40)">
<div class="wp-block-wporg-notice__icon"></div>
<div class="wp-block-wporg-notice__content">
<p><?php esc_html_e( 'Well done! You completed the quiz.', 'wporg-learn' ); ?></p>
</div>
</div>
<!-- /wp:wporg/notice -->
<?php else : ?>
<!-- wp:sensei-lms/course-theme-notices /-->
<?php endif; ?>
77 changes: 72 additions & 5 deletions wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,14 @@ body.sensei {
--sensei-module-lesson-color: var(--wp--preset--color--charcoal-1);
--sensei-lm-mobile-header-height: 60px;

.is-tip-notice .wp-block-wporg-notice__icon {
background: url(../../assets/icon-check.svg);
}

.wp-block-wporg-notice__icon {
height: 24px;
}

.wp-block-sensei-lms-course-theme-notices:empty {
display: none;
}
Expand Down Expand Up @@ -83,14 +91,65 @@ body.sensei {
margin-block-start: 0;
}

.wp-block-wporg-notice__icon {
background: url(../../assets/icon-check.svg);
height: 24px;
}

.wp-block-sensei-lms-course-theme-notices {
margin-block-end: 39px;
margin-block-start: var(--wp--preset--spacing--40);

.sensei-course-theme-lesson-quiz-notice {
display: flex;
flex-direction: column;
align-items: start;
gap: 0;

.sensei-course-theme-lesson-quiz-notice__content {
.sensei-course-theme-lesson-quiz-notice__title {
font-size: var(--wp--preset--font-size--normal);
font-weight: 600;
font-family: var(--wp--preset--font-family--inter);
}

.sensei-course-theme-lesson-quiz-notice__text {
font-size: var(--wp--preset--font-size--normal);
font-family: var(--wp--preset--font-family--inter);
}
}

.sensei-course-theme-lesson-quiz-notice__description {
margin-block-start: 0;
margin-block-end: 0;
font-size: var(--wp--preset--font-size--normal);
font-family: var(--wp--preset--font-family--inter);
}

.sensei-course-theme-lesson-quiz-notice__actions {
margin-top: var(--wp--preset--spacing--20);

> div {
background-color: var(--wp--preset--color--blueberry-1);

&:hover {
background-color: var(--wp--preset--color--deep-blueberry) !important;
}

> a {
color: var(--wp--preset--color--white) !important;
font-size: var(--wp--preset--font-size--normal);
font-weight: 600;
font-family: var(--wp--preset--font-family--inter);
padding: 15px var(--wp--preset--spacing--30);

&:hover {
background-color: var(--wp--preset--color--deep-blueberry) !important;
}

> svg {
display: none;
}
}
}
}
}

}
}
}
Expand Down Expand Up @@ -256,6 +315,10 @@ body.sensei {
}

&.quiz {
.wp-block-wporg-notice {
display: grid;
}

.wp-block-sensei-lms-course-theme-notices {
margin-block-start: 0;

Expand Down Expand Up @@ -430,6 +493,10 @@ body.sensei {
gap: var(--wp--preset--spacing--20);
}

> .sensei-course-theme__button {
display: none;
}

.wp-block-button {

@media screen and (max-width: 782px) {
Expand Down
4 changes: 2 additions & 2 deletions wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0">

<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}},"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"heading-3","fontFamily":"inter"} /-->
<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}},"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"heading-3","fontFamily":"inter"} /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"right":"0","left":"0","top":"0","bottom":"0"}}},"className":"sensei-course-theme__quiz__header__right","layout":{"type":"constrained"}} -->
<div class="wp-block-group sensei-course-theme__quiz__header__right" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"></div>
Expand All @@ -19,7 +19,7 @@
</div>
<!-- /wp:group -->

<!-- wp:sensei-lms/course-theme-notices /-->
<!-- wp:pattern {"slug":"wporg-learn-2024/sensei-quiz-notices"} /-->

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

Expand Down

0 comments on commit eed930c

Please sign in to comment.