Add quiz style in separate file to hide button

assets/blocks/quiz/style.scss

@@ -0,0 +1,3 @@
+.sensei-quiz-action--hidden {
+	display: none;
+}

assets/css/frontend.scss

@@ -403,10 +403,6 @@ a.sensei-certificate-link {
 	}
 }
 
-.sensei-item-no-display {
-	display: none;
-}
-
 /**
  * Quiz Pagination
  */

includes/class-sensei-quiz.php

@@ -103,6 +103,28 @@ public function __construct( $file = __FILE__ ) {
 			// Create the quiz progress when the student visits the quiz page for the first time.
 			add_action( 'wp', array( $this, 'maybe_create_quiz_progress' ) );
 		}
+
+		// Enqueue frontend styles.
+		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_styles' ) );
+	}
+
+	/**
+	 * Enqueue frontend CSS files for quizzes.
+	 *
+	 * @internal
+	 *
+	 * @since  $$next-version$$
+	 * @return void
+	 */
+	public function enqueue_styles() {
+		if (
+			is_admin() ||
+			! is_singular( 'quiz' )
+		) {
+			return;
+		}
+
+		Sensei()->assets->enqueue( 'sensei-single-quiz-style', 'blocks/quiz/style.css' );
 	}
 
 	/**

templates/single-quiz/pagination.php

@@ -92,7 +92,7 @@ class="wp-block-button__link button sensei-stop-double-submission sensei-quiz-pa
 				</div>
 			<?php endif ?>
 			<?php if ( $sensei_is_quiz_available && ! $sensei_is_quiz_completed ) : ?>
-				<div class="sensei-quiz-action wp-block-button <?php echo esc_attr( $sensei_question_loop['current_page'] < $sensei_question_loop['total_pages'] ? 'sensei-item-no-display' : '' ); ?>">
+				<div class="sensei-quiz-action wp-block-button <?php echo esc_attr( $sensei_question_loop['current_page'] < $sensei_question_loop['total_pages'] ? 'sensei-quiz-action--hidden' : '' ); ?>">
 					<button
 						type="submit"
 						name="quiz_complete"

tests/unit-tests/blocks/course-theme/test-class-quiz-actions.php

@@ -100,7 +100,7 @@ public function testRender_WhenPaginationIsShown_AlwaysRendersQuizCompleteButton
 		$result_for_last_page                 = ( new Quiz_Actions() )->render();
 
 		/* Assert */
-		$this->assertStringContainsString( 'sensei-item-no-display', $result_for_other_pages );
-		$this->assertStringNotContainsString( 'sensei-item-no-display', $result_for_last_page );
+		$this->assertStringContainsString( 'sensei-quiz-action--hidden', $result_for_other_pages );
+		$this->assertStringNotContainsString( 'sensei-quiz-action--hidden', $result_for_last_page );
 	}
 }

tests/unit-tests/test-class-quiz.php

@@ -7,6 +7,7 @@
 use Sensei\Internal\Student_Progress\Quiz_Progress\Repositories\Tables_Based_Quiz_Progress_Repository;
 
 class Sensei_Class_Quiz_Test extends WP_UnitTestCase {
+	use Sensei_Test_Login_Helpers;
 
 	use Sensei_Test_Redirect_Helpers;
 
@@ -2539,4 +2540,48 @@ public function testIsQuizAwaitingGradeForUser_IsNotUngraded_ReturnsFalse() {
 		/* Reset */
 		Sensei()->quiz_progress_repository = $quiz_progress_repository;
 	}
+
+	public function testEnqueueStyles_WhenNoPageSet_DoesNotEnqueueStyles() {
+		/* Act */
+		Sensei()->quiz->enqueue_styles();
+
+		/* Assert */
+		$this->assertFalse( wp_style_is( 'sensei-single-quiz-style' ) );
+	}
+
+	public function testEnqueueStyles_WhenOnPagesOtherThanQuiz_DoesNotEnqueueStyles() {
+		/* Arrange */
+		$lesson_id = $this->factory->lesson->create();
+
+		/* Act */
+		$this->go_to( get_permalink( $lesson_id ) );
+		Sensei()->quiz->enqueue_styles();
+
+		/* Assert */
+		$this->assertFalse( wp_style_is( 'sensei-single-quiz-style' ) );
+	}
+
+	public function testConstructor_WhenInAdminScreens_DoesNotHookEnqueueStyles() {
+		/* Arrange */
+		$this->login_as_admin();
+
+		/* Act */
+		set_current_screen( 'edit.php' );
+		Sensei()->quiz->enqueue_styles();
+
+		/* Assert */
+		$this->assertFalse( wp_style_is( 'sensei-single-quiz-style' ) );
+	}
+
+	public function testEnqueueStyles_WhenOnQuizPage_EnqueueStyles() {
+		/* Arrange */
+		$quiz_id = $this->factory->quiz->create();
+
+		/* Act */
+		$this->go_to( get_permalink( $quiz_id ) );
+		Sensei()->quiz->enqueue_styles();
+
+		/* Assert */
+		$this->assertTrue( wp_style_is( 'sensei-single-quiz-style' ) );
+	}
 }

webpack.config.js

@@ -82,6 +82,7 @@ const files = [
 	'blocks/quiz/index.js',
 	'blocks/quiz/ordering-promo/index.js',
 	'blocks/quiz/quiz.editor.scss',
+	'blocks/quiz/style.scss',
 	'blocks/shared.js',
 	'blocks/shared-style.scss',
 	'blocks/shared-style-editor.scss',