Skip to content

Commit ff12296

Browse files
Imran92Imran92
authored
Merge pull request #7163 from Automattic/feature/frontend-improvements
Feature frontend improvements
2 parents f20692d + 546bca0 commit ff12296

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+678
-214
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { __ } from '@wordpress/i18n';
88
*/
99
const FileUploadAnswer = () => {
1010
return (
11-
<div className="sensei-lms-question-block__answer sensei-lms-question-block__answer--file-upload">
12-
<div className="sensei-lms-question-block__file-input-placeholder">
13-
{ __( 'Browse…', 'sensei-lms' ) }
11+
<div className="wp-block-button is-style-outline sensei-lms-question-block__answer sensei-lms-question-block__answer--file-upload">
12+
<div className="wp-block-button__link wp-element-button">
13+
{ __( 'Choose File', 'sensei-lms' ) }
1414
</div>
1515
</div>
1616
);

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
1-
/**
2-
* WordPress dependencies
3-
*/
4-
import { __ } from '@wordpress/i18n';
5-
61
/**
72
* Question block multi-line answer component.
83
*/
94
const MultiLineAnswer = () => {
105
return (
116
<div className="sensei-lms-question-block__answer sensei-lms-question-block__answer--multi-line">
12-
<small className="sensei-lms-question-block__input-label">
13-
{ __( 'Answer:', 'sensei-lms' ) }
14-
</small>
157
<div className="sensei-lms-question-block__text-input-placeholder multi-line" />
168
</div>
179
);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"name": "sensei-lms/question-answers",
3+
"apiVersion": 2,
34
"title": "Answers",
45
"description": "Question Answers.",
56
"parent": [ "sensei-lms/quiz-question" ],

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,12 @@
33
*/
44
import { useContext } from '@wordpress/element';
55

6-
/**
7-
* External dependencies
8-
*/
9-
import classnames from 'classnames';
10-
116
/**
127
* Internal dependencies
138
*/
149
import { AnswerFeedbackToggle } from '../answer-feedback-block/answer-feedback-toggle';
1510
import { QuestionContext } from '../question-block/question-context';
11+
import { useBlockProps } from '@wordpress/block-editor';
1612

1713
/**
1814
* Question Description control.
@@ -26,8 +22,13 @@ const QuestionAnswers = () => {
2622
hasSelected,
2723
canHaveFeedback,
2824
} = useContext( QuestionContext );
25+
26+
const blockProps = useBlockProps( {
27+
className: 'sensei-lms-question-answers-block',
28+
} );
29+
2930
return (
30-
<div className={ classnames( 'sensei-lms-question-answers-block' ) }>
31+
<div { ...blockProps }>
3132
{ AnswerBlock?.edit && (
3233
<>
3334
<AnswerBlock.edit

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"name": "sensei-lms/quiz-question",
33
"title": "Question",
4+
"apiVersion": 2,
45
"description": "The building block of all quizzes.",
56
"parent": [
67
"sensei-lms/quiz"

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

Lines changed: 7 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@ $block: '.sensei-lms-question-block';
77
.sensei-lms-question-block {
88

99
.editor-styles-wrapper .wp-block &__title, .editor-styles-wrapper .wp-block &__index {
10-
font-size: 24px;
1110
margin-top: 0;
1211
margin-bottom: 0;
13-
line-height: 1.25;
1412
}
1513

1614
.editor-styles-wrapper .wp-block &__title {
@@ -22,11 +20,6 @@ $block: '.sensei-lms-question-block';
2220
}
2321

2422
&__index {
25-
position: absolute;
26-
right: 100%;
27-
text-align: right;
28-
top: 0;
29-
font-weight: bold;
3023
white-space: nowrap;
3124

3225
#{$block}.is-draft & {
@@ -39,11 +32,7 @@ $block: '.sensei-lms-question-block';
3932
}
4033

4134
&__grade {
42-
position: absolute;
43-
right: 0;
44-
top: 0;
45-
line-height: 32px;
46-
font-size: 14px;
35+
line-height: 100%;
4736
}
4837

4938
&__type-selector {
@@ -74,26 +63,21 @@ $block: '.sensei-lms-question-block';
7463
}
7564
}
7665

77-
&__text-input-placeholder, &__file-input-placeholder {
78-
border: 2px solid currentColor;
66+
&__text-input-placeholder {
67+
border: 1px solid currentColor;
7968
border-radius: 2px;
8069
padding: 5px;
81-
min-height: 52px;
8270
display: flex;
8371

8472
&.multi-line {
8573
min-height: 200px;
8674
}
8775
}
8876

89-
&__file-input-placeholder {
90-
text-transform: uppercase;
91-
display: inline-flex;
92-
padding: 5px 15px;
93-
align-items: center;
94-
justify-content: center;
95-
font-size: 16px;
96-
user-select: none;
77+
&__text-input-placeholder:not(.multi-line) {
78+
border-top: 0;
79+
border-left: 0;
80+
border-right: 0;
9781
}
9882

9983
&__input-label {
@@ -116,7 +100,6 @@ $block: '.sensei-lms-question-block';
116100
}
117101

118102
&__toggle {
119-
120103
&__wrapper {
121104
flex-basis: 65px;
122105
margin-left: 12px;
@@ -157,7 +140,6 @@ $block: '.sensei-lms-question-block';
157140
}
158141

159142
.editor-styles-wrapper & li {
160-
min-height: 45px;
161143
display: flex;
162144
align-items: baseline;
163145
}

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

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
/**
2-
* External dependencies
3-
*/
4-
import classnames from 'classnames';
5-
61
/**
72
* WordPress dependencies
83
*/
9-
import { BlockControls, InnerBlocks } from '@wordpress/block-editor';
4+
import {
5+
BlockControls,
6+
InnerBlocks,
7+
useBlockProps,
8+
} from '@wordpress/block-editor';
109
import { select, useDispatch } from '@wordpress/data';
1110
import { useCallback, useMemo, useState } from '@wordpress/element';
1211
import { compose } from '@wordpress/compose';
@@ -43,6 +42,11 @@ import QuestionSettings from './question-settings';
4342
import { QuestionTypeToolbar } from './question-type-toolbar';
4443
import SingleQuestion from './single-question';
4544

45+
/**
46+
* External dependencies
47+
*/
48+
import classNames from 'classnames';
49+
4650
let questionOptions = Object.entries( types ).map(
4751
( [ value, settings ] ) => ( {
4852
...settings,
@@ -125,7 +129,7 @@ const QuestionEdit = ( props ) => {
125129
props.meta.showValidationErrors && props.meta.validationErrors?.length;
126130

127131
const questionGrade = (
128-
<div className="sensei-lms-question-block__grade">
132+
<div className="sensei-lms-question-block__grade grade">
129133
{ formatGradeLabel( options.grade ) }
130134
</div>
131135
);
@@ -170,6 +174,14 @@ const QuestionEdit = ( props ) => {
170174
[ canHaveFeedback ]
171175
);
172176

177+
const blockProps = useBlockProps( {
178+
className: classNames( 'sensei-lms-question-block', {
179+
'is-draft': ! title,
180+
'is-invalid': isInvalid,
181+
'show-answer-feedback': showAnswerFeedback,
182+
} ),
183+
} );
184+
173185
if ( ! editable ) {
174186
return (
175187
<QuestionView
@@ -180,30 +192,26 @@ const QuestionEdit = ( props ) => {
180192
}
181193

182194
return (
183-
<div
184-
className={ classnames( 'sensei-lms-question-block', {
185-
'is-draft': ! title,
186-
'is-invalid': isInvalid,
187-
'show-answer-feedback': showAnswerFeedback,
188-
} ) }
189-
>
190-
{ questionIndex }
191-
{ isSingle && <SingleQuestion { ...props } /> }
192-
<h2 className="sensei-lms-question-block__title">
193-
<SingleLineInput
194-
placeholder={ __( 'Question Title', 'sensei-lms' ) }
195-
value={ title }
196-
onChange={ ( nextValue ) =>
197-
setAttributes( { title: nextValue } )
198-
}
199-
onEnter={ selectDescription }
200-
onRemove={ () => removeBlock( clientId ) }
201-
/>
202-
</h2>
203-
{ AnswerBlock.subtitle && (
204-
<AnswerBlock.subtitle isQuestionSelected={ hasSelected } />
205-
) }
206-
{ showContent && questionGrade }
195+
<div { ...blockProps }>
196+
<div className="sensei-lms-question-block__header">
197+
{ questionIndex }
198+
{ isSingle && <SingleQuestion { ...props } /> }
199+
<h2 className="sensei-lms-question-block__title">
200+
<SingleLineInput
201+
placeholder={ __( 'Question Title', 'sensei-lms' ) }
202+
value={ title }
203+
onChange={ ( nextValue ) =>
204+
setAttributes( { title: nextValue } )
205+
}
206+
onEnter={ selectDescription }
207+
onRemove={ () => removeBlock( clientId ) }
208+
/>
209+
</h2>
210+
{ AnswerBlock.subtitle && (
211+
<AnswerBlock.subtitle isQuestionSelected={ hasSelected } />
212+
) }
213+
{ showContent && questionGrade }
214+
</div>
207215
{ hasSelected && shared && <SharedQuestionNotice /> }
208216
{ showContent && (
209217
<QuestionContext.Provider value={ questionContext }>

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

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,122 @@
11
@import '../answer-blocks/option-toggle';
2+
@import '~@wordpress/base-styles/breakpoints';
23

34
/**
45
* Sensei question and question block styles shared between frontend and editor.
56
*/
67

8+
$question-input-border-color: var(--wp--preset--color--foreground, #155E65 );
9+
10+
.wp-block-sensei-lms-question-description {
11+
margin-bottom: 20px;
12+
13+
*:last-child {
14+
margin-bottom: 0;
15+
}
16+
}
17+
18+
.wp-block-sensei-lms-quiz {
19+
.wp-block-sensei-lms-quiz-question {
20+
margin-top: clamp(3.75rem, 2.596rem + 3.846vw, 5rem);
21+
}
22+
23+
.sensei-lms-question-block__title {
24+
flex-grow: 1;
25+
line-height: 1;
26+
27+
textarea {
28+
display: block;
29+
padding: 0;
30+
margin: 0;
31+
}
32+
}
33+
34+
.sensei-lms-question-block__header {
35+
margin-bottom: clamp(1.25rem, 0.096rem + 3.846vw, 2.5rem);
36+
padding: 0;
37+
display: flex;
38+
align-items: baseline;
39+
justify-content: space-between;
40+
line-height: 1;
41+
42+
.sensei-lms-question-block__title {
43+
textarea {
44+
font-size: inherit;
45+
}
46+
}
47+
48+
.question-title {
49+
margin: 0;
50+
padding: 0;
51+
}
52+
53+
.grade {
54+
line-height: 1;
55+
}
56+
}
57+
58+
.wp-block-sensei-lms-question-answers__filename {
59+
margin-bottom: 20px;
60+
}
61+
62+
.wp-block-sensei-lms-question-answers__preview {
63+
max-height: 480px;
64+
}
65+
}
66+
67+
.wp-block-sensei-lms-question-answers {
68+
color: inherit;
69+
70+
li:not(:last-child) {
71+
margin-bottom: 1.25rem;
72+
}
73+
74+
.wp-editor-wrap {
75+
& * {
76+
background: transparent;
77+
}
78+
}
79+
80+
input {
81+
color: inherit;
82+
}
83+
84+
input[type="text"]:not(.components-form-token-field__input) {
85+
border: 0px;
86+
border-bottom: 1px solid $question-input-border-color;
87+
background-color: transparent;
88+
font-family: inherit;
89+
font-size: inherit;
90+
padding: 0;
91+
&:focus-visible {
92+
outline: none;
93+
}
94+
}
95+
96+
input[type="text"]:not(.gapfill-answer-gap) {
97+
width: 100%;
98+
@media (min-width: $break-small) {
99+
width: 490px;
100+
}
101+
}
102+
103+
.wp-editor-container {
104+
border: 1px solid $question-input-border-color;
105+
}
106+
107+
.sensei-lms-question-block__file-upload {
108+
display: inline-block;
109+
}
110+
111+
.sensei-lms-question-block__file-input {
112+
display: none;
113+
}
114+
115+
.max_upload_size {
116+
margin-top: 20px;
117+
}
118+
}
119+
7120
.sensei-lms-question__answer-feedback {
8121
--color: #DCDCDE;
9122
$horizontal-padding: 24px;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"name": "sensei-lms/question-description",
3+
"apiVersion": 2,
34
"title": "Description",
45
"description": "Question Description.",
56
"parent": [ "sensei-lms/quiz-question" ],

0 commit comments

Comments
 (0)