Update quiz navigation and title area in learning mode

[Imran92]

Resolves #7072

Proposed Changes

• Updated the quiz template to modify the title area
• Removed quiz progress as per design
• Introduced compat file for quiz to add quiz specific designs in this file separated from lesson, to prevent everything being on main compat file
• Updated spacings and stylings to match the design
• Changed the arrow before the 'Back to lesson' button from '<' character to arrow icon

Testing Instructions

1. Checkout this branch of Course theme Course theme: Update the styles of back to lesson button of quiz in learning mode themes#7312
2. Checkout this branch
3. Activate course theme
4. Create a Course with a lesson, add a quiz to that lesson
5. Enable learning mode
6. Take the quiz as a student from frontend
7. Make sure the Back to Lesson button and Quiz title matches the design
8. Check for all variations
9. Now switch to other top themes to sensei and make sure the design matches
10. Check each of the above for mobile as well

Screenshots

Pre-Merge Checklist

• PR title and description contain sufficient detail and accurately describe the changes
• Acceptance criteria is met
• Decisions are publicly documented
• Adheres to coding standards (PHP, JavaScript, CSS, HTML)
• All strings are translatable (without concatenation, handles plurals)
• Follows our naming conventions (P6rkRX-4oA-p2)
• Hooks (p6rkRX-1uS-p2) and functions are documented
• New UIs are responsive and use a mobile-first approach
• New UIs match the designs
• Different user privileges (admin, teacher, subscriber) are tested as appropriate
• Code is tested on the minimum supported PHP and WordPress versions
• User interface changes have been tested on the latest versions of Chrome, Firefox and Safari
• "Needs Documentation" label is added if this change requires updates to documentation
• Known issues are created as new GitHub issues

[github-actions]

WordPress Dependencies Report

The github-action-wordpress-dependencies-report action has detected some script changes between the commit cda4657 and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added Dependencies	Removed Dependencies	Total Size	Size Diff
course-theme/blocks/index.js			13.8 kB	+12 B ( +0.09% 🔼 )

This comment was automatically generated by the github-action-wordpress-dependencies-report action.

[codecov]

Codecov Report

Merging #7093 (cda4657) into trunk (df272d4) will decrease coverage by 0.01%.
Report is 1 commits behind head on trunk.
The diff coverage is 22.22%.

@@             Coverage Diff              @@
##              trunk    #7093      +/-   ##
============================================
- Coverage     49.37%   49.36%   -0.01%     
- Complexity    10544    10546       +2     
============================================
  Files           575      575              
  Lines         44529    44537       +8     
  Branches        402      402              
============================================
+ Hits          21986    21987       +1     
- Misses        22216    22223       +7     
  Partials        327      327              

Files Changed	Coverage Δ
...ncludes/course-theme/class-sensei-course-theme.php	18.78% <0.00%> (-0.70%)	⬇️
.../blocks/course-theme/class-quiz-back-to-lesson.php	96.66% <100.00%> (+0.11%)	⬆️

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 33afd2c...cda4657. Read the comment docs.

[donnapep]

This is looking good! I've left some feedback.

I realized that I forgot about the editor 😱 and there are some styles there that don't match the frontend. How would you prefer to handle the editor for this card and also moving forward for other cards?

[Imran92]

I realized that I forgot about the editor 😱 and there are some styles there that don't match the frontend. How would you prefer to handle the editor for this card and also moving forward for other cards?

I think it'll be better if we create separate cards for editor. I've realized we're having some issues like theme.json styles not getting applied in the editor for some blocks. Having separate cards will probably be helpful

[donnapep]

I think it'll be better if we create separate cards for editor. I've realized we're having some issues like theme.json styles not getting applied in the editor for some blocks. Having separate cards will probably be helpful

Oof. OK, I created #7112 for the editor.

[donnapep]

👍🏻

The base branch was changed.

[Imran92]

Thanks for the updates Donna <3 All looks good to me. The body class was breaking the button styles like below for me in Course theme, so I've added a fix here 4b9baeb

[donnapep]

The body class was breaking the button styles like below for me in Course theme

Oof. Good catch. I think it's a bit dangerous to add course to the body class for the Course theme since that class is also added to course pages. So I prepended sensei- to the body class instead. I don't think that will result in any conflicts, and should be safer in general.