Learning mode - Change all question styles for quiz page

assets/blocks/quiz/answer-blocks/file-upload.js

@@ -8,9 +8,9 @@ import { __ } from '@wordpress/i18n';
  */
 const FileUploadAnswer = () => {
 	return (
-		<div className="sensei-lms-question-block__answer sensei-lms-question-block__answer--file-upload">
-			<div className="sensei-lms-question-block__file-input-placeholder">
-				{ __( 'Browse…', 'sensei-lms' ) }
+		<div className="wp-block-button is-style-outline sensei-lms-question-block__answer sensei-lms-question-block__answer--file-upload">
+			<div className="wp-block-button__link wp-element-button">
+				{ __( 'Choose File', 'sensei-lms' ) }
 			</div>
 		</div>
 	);

assets/blocks/quiz/answer-blocks/multi-line.js

@@ -1,17 +1,9 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Question block multi-line answer component.
  */
 const MultiLineAnswer = () => {
 	return (
 		<div className="sensei-lms-question-block__answer sensei-lms-question-block__answer--multi-line">
-			<small className="sensei-lms-question-block__input-label">
-				{ __( 'Answer:', 'sensei-lms' ) }
-			</small>
 			<div className="sensei-lms-question-block__text-input-placeholder multi-line" />
 		</div>
 	);

assets/blocks/quiz/question-answers-block/block.json

@@ -1,5 +1,6 @@
 {
 	"name": "sensei-lms/question-answers",
+	"apiVersion": 2,
 	"title": "Answers",
 	"description": "Question Answers.",
 	"parent": [ "sensei-lms/quiz-question" ],

assets/blocks/quiz/question-answers-block/question-answers.js

@@ -3,16 +3,12 @@
  */
 import { useContext } from '@wordpress/element';
 
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * Internal dependencies
  */
 import { AnswerFeedbackToggle } from '../answer-feedback-block/answer-feedback-toggle';
 import { QuestionContext } from '../question-block/question-context';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Question Description control.
@@ -26,8 +22,13 @@
 		hasSelected,
 		canHaveFeedback,
 	} = useContext( QuestionContext );
+
+	const blockProps = useBlockProps( {
+		className: 'sensei-lms-question-answers-block',
+	} );
+
 	return (
-		<div className={ classnames( 'sensei-lms-question-answers-block' ) }>
+		<div { ...blockProps }>
 			{ AnswerBlock?.edit && (
 				<>
 					<AnswerBlock.edit

assets/blocks/quiz/question-block/block.json

@@ -1,6 +1,7 @@
 {
 	"name": "sensei-lms/quiz-question",
 	"title": "Question",
+	"apiVersion": 2,
 	"description": "The building block of all quizzes.",
 	"parent": [
 		"sensei-lms/quiz"

assets/blocks/quiz/question-block/question-block.editor.scss

@@ -7,10 +7,8 @@ $block: '.sensei-lms-question-block';
 .sensei-lms-question-block {
 
 	.editor-styles-wrapper .wp-block &__title, .editor-styles-wrapper .wp-block &__index {
-		font-size: 24px;
 		margin-top: 0;
 		margin-bottom: 0;
-		line-height: 1.25;
 	}
 
 	.editor-styles-wrapper .wp-block &__title {
@@ -22,11 +20,6 @@ $block: '.sensei-lms-question-block';
 	}
 
 	&__index {
-		position: absolute;
-		right: 100%;
-		text-align: right;
-		top: 0;
-		font-weight: bold;
 		white-space: nowrap;
 
 		#{$block}.is-draft & {
@@ -39,11 +32,7 @@ $block: '.sensei-lms-question-block';
 	}
 
 	&__grade {
-		position: absolute;
-		right: 0;
-		top: 0;
-		line-height: 32px;
-		font-size: 14px;
+		line-height: 100%;
 	}
 
 	&__type-selector {
@@ -74,26 +63,21 @@ $block: '.sensei-lms-question-block';
 		}
 	}
 
-	&__text-input-placeholder, &__file-input-placeholder {
-		border: 2px solid currentColor;
+	&__text-input-placeholder {
+		border: 1px solid currentColor;
 		border-radius: 2px;
 		padding: 5px;
-		min-height: 52px;
 		display: flex;
 
 		&.multi-line {
 			min-height: 200px;
 		}
 	}
 
-	&__file-input-placeholder {
-		text-transform: uppercase;
-		display: inline-flex;
-		padding: 5px 15px;
-		align-items: center;
-		justify-content: center;
-		font-size: 16px;
-		user-select: none;
+	&__text-input-placeholder:not(.multi-line) {
+		border-top: 0;
+		border-left: 0;
+		border-right: 0;
 	}
 
 	&__input-label {
@@ -116,7 +100,6 @@ $block: '.sensei-lms-question-block';
 		}
 
 		&__toggle {
-
 			&__wrapper {
 				flex-basis: 65px;
 				margin-left: 12px;
@@ -157,7 +140,6 @@ $block: '.sensei-lms-question-block';
 		}
 
 		.editor-styles-wrapper & li {
-			min-height: 45px;
 			display: flex;
 			align-items: baseline;
 		}

assets/blocks/quiz/question-block/question-edit.js

@@ -1,12 +1,11 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { BlockControls, InnerBlocks } from '@wordpress/block-editor';
+import {
+	BlockControls,
+	InnerBlocks,
+	useBlockProps,
+} from '@wordpress/block-editor';
 import { select, useDispatch } from '@wordpress/data';
 import { useCallback, useMemo, useState } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
@@ -43,6 +42,11 @@
 import { QuestionTypeToolbar } from './question-type-toolbar';
 import SingleQuestion from './single-question';
 
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 let questionOptions = Object.entries( types ).map(
 	( [ value, settings ] ) => ( {
 		...settings,
@@ -125,7 +129,7 @@
 		props.meta.showValidationErrors && props.meta.validationErrors?.length;
 
 	const questionGrade = (
-		<div className="sensei-lms-question-block__grade">
+		<div className="sensei-lms-question-block__grade grade">
 			{ formatGradeLabel( options.grade ) }
 		</div>
 	);
@@ -170,6 +174,14 @@
 		[ canHaveFeedback ]
 	);
 
+	const blockProps = useBlockProps( {
+		className: classNames( 'sensei-lms-question-block', {
+			'is-draft': ! title,
+			'is-invalid': isInvalid,
+			'show-answer-feedback': showAnswerFeedback,
+		} ),
+	} );
+
 	if ( ! editable ) {
 		return (
 			<QuestionView
@@ -180,30 +192,26 @@
 	}
 
 	return (
-		<div
-			className={ classnames( 'sensei-lms-question-block', {
-				'is-draft': ! title,
-				'is-invalid': isInvalid,
-				'show-answer-feedback': showAnswerFeedback,
-			} ) }
-		>
-			{ questionIndex }
-			{ isSingle && <SingleQuestion { ...props } /> }
-			<h2 className="sensei-lms-question-block__title">
-				<SingleLineInput
-					placeholder={ __( 'Question Title', 'sensei-lms' ) }
-					value={ title }
-					onChange={ ( nextValue ) =>
-						setAttributes( { title: nextValue } )
-					}
-					onEnter={ selectDescription }
-					onRemove={ () => removeBlock( clientId ) }
-				/>
-			</h2>
-			{ AnswerBlock.subtitle && (
-				<AnswerBlock.subtitle isQuestionSelected={ hasSelected } />
-			) }
-			{ showContent && questionGrade }
+		<div { ...blockProps }>
+			<div className="sensei-lms-question-block__header">
+				{ questionIndex }
+				{ isSingle && <SingleQuestion { ...props } /> }
+				<h2 className="sensei-lms-question-block__title">
+					<SingleLineInput
+						placeholder={ __( 'Question Title', 'sensei-lms' ) }
+						value={ title }
+						onChange={ ( nextValue ) =>
+							setAttributes( { title: nextValue } )
+						}
+						onEnter={ selectDescription }
+						onRemove={ () => removeBlock( clientId ) }
+					/>
+				</h2>
+				{ AnswerBlock.subtitle && (
+					<AnswerBlock.subtitle isQuestionSelected={ hasSelected } />
+				) }
+				{ showContent && questionGrade }
+			</div>
 			{ hasSelected && shared && <SharedQuestionNotice /> }
 			{ showContent && (
 				<QuestionContext.Provider value={ questionContext }>

assets/blocks/quiz/question-block/question.scss

@@ -1,9 +1,114 @@
 @import '../answer-blocks/option-toggle';
+@import '~@wordpress/base-styles/breakpoints';
 
 /**
  * Sensei question and question block styles shared between frontend and editor.
  */
 
+$question-input-border-color: var(--wp--preset--color--foreground, #155E65 );
+
+.wp-block-sensei-lms-question-description {
+	margin-bottom: 20px;
+
+	*:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.wp-block-sensei-lms-quiz {
+	.wp-block-sensei-lms-quiz-question {
+		margin-top: clamp(3.75rem, 2.596rem + 3.846vw, 5rem);
+	}
+
+	.sensei-lms-question-block__title {
+		flex-grow: 1;
+		line-height: 1;
+
+		textarea {
+			display: block;
+			padding: 0;
+			margin: 0;
+		}
+	}
+
+	.sensei-lms-question-block__header {
+		margin-bottom: clamp(1.25rem, 0.096rem + 3.846vw, 2.5rem);
+		padding: 0;
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		line-height: 1;
+
+		.sensei-lms-question-block__title {
+			textarea {
+				font-size: inherit;
+			}
+		}
+
+		.question-title {
+			margin: 0;
+			padding: 0;
+		}
+
+		.grade {
+			line-height: 1;
+		}
+	}
+}
+
+.wp-block-sensei-lms-question-answers {
+	color: inherit;
+
+	li:not(:last-child) {
+		margin-bottom: 1.25rem;
+	}
+
+	.wp-editor-wrap {
+		& * {
+			background: transparent;
+		}
+	}
+
+	input {
+		color: inherit;
+	}
+
+	input[type="text"]:not(.components-form-token-field__input) {
+		border: 0px;
+		border-bottom: 1px solid $question-input-border-color;
+		background-color: transparent;
+		font-family: inherit;
+		font-size: inherit;
+		padding: 0;
+		&:focus-visible {
+			outline: none;
+		}
+	}
+
+	input[type="text"]:not(.gapfill-answer-gap) {
+		width: 100%;
+		@media (min-width: $break-small) {
+			width: 490px;
+		}
+	}
+
+	.wp-editor-container {
+		border: 1px solid $question-input-border-color;
+	}
+
+	.sensei-lms-question-block__file-upload {
+		display: inline-block;
+	}
+
+	.sensei-lms-question-block__file-input {
+		display: none;
+	}
+
+	.max_upload_size {
+		margin-top: 20px;
+	}
+}
+
 .sensei-lms-question__answer-feedback {
 	--color: #DCDCDE;
 	$horizontal-padding: 24px;

assets/blocks/quiz/question-description-block/block.json

@@ -1,5 +1,6 @@
 {
 	"name": "sensei-lms/question-description",
+	"apiVersion": 2,
 	"title": "Description",
 	"description": "Question Description.",
 	"parent": [ "sensei-lms/quiz-question" ],