From eed930c51eaf7e6adb201ae37c8ca141f409647d Mon Sep 17 00:00:00 2001 From: Ren <18050944+renintw@users.noreply.github.com> Date: Mon, 23 Sep 2024 19:54:03 +0800 Subject: [PATCH] Fix quiz styles (#2881) * 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. --- .../wporg-learn-2024/assets/icon-check.svg | 3 +- .../pub/wporg-learn-2024/inc/block-hooks.php | 88 ++++++++++++++++++- .../patterns/sensei-lesson-columns.php | 3 +- .../patterns/sensei-quiz-notices.php | 39 ++++++++ .../wporg-learn-2024/src/style/_sensei.scss | 77 ++++++++++++++-- .../templates/single-quiz.html | 4 +- 6 files changed, 202 insertions(+), 12 deletions(-) create mode 100644 wp-content/themes/pub/wporg-learn-2024/patterns/sensei-quiz-notices.php diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/icon-check.svg b/wp-content/themes/pub/wporg-learn-2024/assets/icon-check.svg index c70f8a3e3..713b712e6 100644 --- a/wp-content/themes/pub/wporg-learn-2024/assets/icon-check.svg +++ b/wp-content/themes/pub/wporg-learn-2024/assets/icon-check.svg @@ -1,3 +1,4 @@ - + + diff --git a/wp-content/themes/pub/wporg-learn-2024/inc/block-hooks.php b/wp-content/themes/pub/wporg-learn-2024/inc/block-hooks.php index cad3a7afb..6826af6bb 100644 --- a/wp-content/themes/pub/wporg-learn-2024/inc/block-hooks.php +++ b/wp-content/themes/pub/wporg-learn-2024/inc/block-hooks.php @@ -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. @@ -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 = ''; @@ -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( + '
Awaiting grade
', + '', + $block_content + ); + + // Add a new paragraph between the notice content and actions. + $new_p_tag = sprintf( + '

%s

', + 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( + '
', + $new_p_tag . '
', + $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( ' + +
+ ' . esc_html__( 'Back to lesson', 'wporg-learn' ) . ' +
+ + '); + + $block_content = str_replace( + '
', + $new_button_block . '
', + $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; +} diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-columns.php b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-columns.php index e76576462..65621e078 100644 --- a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-columns.php +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-columns.php @@ -29,7 +29,8 @@ -
+

diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-quiz-notices.php b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-quiz-notices.php new file mode 100644 index 000000000..87cd8ef60 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-quiz-notices.php @@ -0,0 +1,39 @@ +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; + +?> + + + +
+
+
+

+
+
+ + + +
+
+
+

+
+
+ + + + diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss index e015e837a..b7c39f69d 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss @@ -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; } @@ -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; + } + } + } + } + } + } } } @@ -256,6 +315,10 @@ body.sensei { } &.quiz { + .wp-block-wporg-notice { + display: grid; + } + .wp-block-sensei-lms-course-theme-notices { margin-block-start: 0; @@ -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) { diff --git a/wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html b/wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html index d1a54bedf..5903ec78d 100644 --- a/wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html +++ b/wp-content/themes/pub/wporg-learn-2024/templates/single-quiz.html @@ -10,7 +10,7 @@
- +
@@ -19,7 +19,7 @@
- +