-
Notifications
You must be signed in to change notification settings - Fork 108
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Facilitator Notes #2927
Add Facilitator Notes #2927
Changes from all commits
ad62364
4297d19
0d60a69
c09ad9c
87648b5
0c35863
b290869
f11d801
43ff013
d21dec1
6d61914
20db87c
64b604f
ffbefab
0316bc8
cdb64af
4452c1c
c9e5cfa
3515f12
6aa553e
dd5303d
a68f5fd
4b5b686
16d2c39
c125bcb
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<?php | ||
/** | ||
* Title: Sensei Lesson Facilitator Notes | ||
* Slug: wporg-learn-2024/sensei-lesson-facilitator-notes | ||
* Inserter: no | ||
*/ | ||
|
||
?> | ||
|
||
<input type="checkbox" id="wporg-learn-facilitator-notes-toggle"> | ||
<label for="wporg-learn-facilitator-notes-toggle" class="wporg-learn-facilitator-notes-label"><?php esc_html_e( 'Facilitator Notes', 'wporg-learn' ); ?></label> | ||
|
||
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|20"}},"backgroundColor":"white","layout":{"type":"constrained"}} --> | ||
<div class="wporg-learn-facilitator-notes-content wp-block-group has-white-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40)"> | ||
<!-- wp:heading {"className":"wporg-learn-facilitator-notes-content","style":{"typography":{"lineHeight":"1.3"}},"fontSize":"large"} --> | ||
<div class="wporg-learn-facilitator-notes-close"></div> | ||
|
||
<h2 class="wp-block-heading has-large-font-size" style="line-height:1.3"><?php esc_html_e( 'Facilitator notes', 'wporg-learn' ); ?></h2> | ||
<!-- /wp:heading --> | ||
|
||
<!-- wp:paragraph {"fontSize":"normal"} --> | ||
<p class="has-normal-font-size"> | ||
Fake content. Sint aliquip commodo excepteur Lorem. Nostrud proident sint excepteur labore ea eu reprehenderit voluptate amet. Lorem fugiat quis ex culpa incididunt officia duis reprehenderit consectetur. In eiusmod sunt pariatur veniam dolor ut adipisicing sunt. Enim esse reprehenderit pariatur consequat duis excepteur exercitation.<br>Nulla consectetur esse reprehenderit tempor.<br>Nisi mollit ipsum nisi non deserunt proident eu sit amet exercitation laboris.<br>Commodo laborum fugiat in. Sit cupidatat esse do aliquip est ullamco qui ullamco adipisicing ad sunt anim tempor.<br>Tempor sint in mollit non in qui tempor esse culpa ipsum consectetur excepteur minim. Ipsum et ut exercitation enim et commodo id exercitation. Ad magna ad eiusmod ipsum culpa est dolor exercitation nostrud consequat elit aliquip. | ||
Fake content. Sint aliquip commodo excepteur Lorem. Nostrud proident sint excepteur labore ea eu reprehenderit voluptate amet. Lorem fugiat quis ex culpa incididunt officia duis reprehenderit consectetur. In eiusmod sunt pariatur veniam dolor ut adipisicing sunt. Enim esse reprehenderit pariatur consequat duis excepteur exercitation.<br>Nulla consectetur esse reprehenderit tempor.<br>Nisi mollit ipsum nisi non deserunt proident eu sit amet exercitation laboris.<br>Commodo laborum fugiat in. Sit cupidatat esse do aliquip est ullamco qui ullamco adipisicing ad sunt anim tempor.<br>Tempor sint in mollit non in qui tempor esse culpa ipsum consectetur excepteur minim. Ipsum et ut exercitation enim et commodo id exercitation. Ad magna ad eiusmod ipsum culpa est dolor exercitation nostrud consequat elit aliquip. | ||
Fake content. Sint aliquip commodo excepteur Lorem. Nostrud proident sint excepteur labore ea eu reprehenderit voluptate amet. Lorem fugiat quis ex culpa incididunt officia duis reprehenderit consectetur. In eiusmod sunt pariatur veniam dolor ut adipisicing sunt. Enim esse reprehenderit pariatur consequat duis excepteur exercitation.<br>Nulla consectetur esse reprehenderit tempor.<br>Nisi mollit ipsum nisi non deserunt proident eu sit amet exercitation laboris.<br>Commodo laborum fugiat in. Sit cupidatat esse do aliquip est ullamco qui ullamco adipisicing ad sunt anim tempor.<br>Tempor sint in mollit non in qui tempor esse culpa ipsum consectetur excepteur minim. Ipsum et ut exercitation enim et commodo id exercitation. Ad magna ad eiusmod ipsum culpa est dolor exercitation nostrud consequat elit aliquip. | ||
Fake content. Sint aliquip commodo excepteur Lorem. Nostrud proident sint excepteur labore ea eu reprehenderit voluptate amet. Lorem fugiat quis ex culpa incididunt officia duis reprehenderit consectetur. In eiusmod sunt pariatur veniam dolor ut adipisicing sunt. Enim esse reprehenderit pariatur consequat duis excepteur exercitation.<br>Nulla consectetur esse reprehenderit tempor.<br>Nisi mollit ipsum nisi non deserunt proident eu sit amet exercitation laboris.<br>Commodo laborum fugiat in. Sit cupidatat esse do aliquip est ullamco qui ullamco adipisicing ad sunt anim tempor.<br>Tempor sint in mollit non in qui tempor esse culpa ipsum consectetur excepteur minim. Ipsum et ut exercitation enim et commodo id exercitation. Ad magna ad eiusmod ipsum culpa est dolor exercitation nostrud consequat elit aliquip. | ||
</p> | ||
<!-- /wp:paragraph --> | ||
</div> | ||
<!-- /wp:group --> | ||
|
||
<div class="wporg-learn-facilitator-notes-backdrop"></div> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
{ | ||
"name": "wporg-learn/lesson-facilitator-notes", | ||
"viewScript": "file:./view.js" | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<?php | ||
/** | ||
* Adds scripts for sensei-lesson-facilitator-notes pattern. | ||
*/ | ||
|
||
namespace WordPressdotorg\Theme\Learn_2024\Lesson_Facilitator_Notes; | ||
|
||
defined( 'WPINC' ) || die(); | ||
|
||
/** | ||
* Actions and filters. | ||
*/ | ||
add_action( 'init', __NAMESPACE__ . '\init' ); | ||
|
||
/** | ||
* Add a script to control elements in the sensei lesson facilitator notes pattern. | ||
* | ||
* The dependencies are autogenerated in block.json, and can be read with | ||
* `wp_json_file_decode` & `register_block_script_handle. | ||
*/ | ||
function init() { | ||
$metadata_file = dirname( dirname( __DIR__ ) ) . '/build/lesson-facilitator-notes/block.json'; | ||
$metadata = wp_json_file_decode( $metadata_file, array( 'associative' => true ) ); | ||
$metadata['file'] = $metadata_file; | ||
|
||
$script_handle = register_block_script_handle( $metadata, 'viewScript', 0 ); | ||
|
||
// Enqueue the assets when the sensei lesson facilitator notes pattern is on the page. | ||
add_action( | ||
'render_block_core/pattern', | ||
function( $block_content, $block ) use ( $script_handle ) { | ||
if ( isset( $block['attrs']['slug'] ) && 'wporg-learn-2024/sensei-lesson-facilitator-notes' === $block['attrs']['slug'] ) { | ||
wp_enqueue_script( $script_handle ); | ||
} | ||
return $block_content; | ||
}, | ||
10, | ||
2 | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
function init() { | ||
const backdrop = document.querySelector( '.wporg-learn-facilitator-notes-backdrop' ); | ||
const closeButton = document.querySelector( '.wporg-learn-facilitator-notes-close' ); | ||
const toggle = document.getElementById( 'wporg-learn-facilitator-notes-toggle' ); | ||
|
||
backdrop.addEventListener( 'click', function () { | ||
toggle.checked = false; | ||
} ); | ||
|
||
closeButton.addEventListener( 'click', function () { | ||
toggle.checked = false; | ||
} ); | ||
} | ||
|
||
document.addEventListener( 'DOMContentLoaded', init ); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,6 +14,33 @@ body.sensei { | |
--sensei-module-lesson-color: var(--wp--preset--color--charcoal-1); | ||
--sensei-lm-mobile-header-height: 60px; | ||
|
||
@media (max-width: 782px) { | ||
&.sensei-course-theme--sidebar-open { | ||
.wporg-learn-facilitator-notes-label { | ||
opacity: 1 !important; | ||
} | ||
|
||
// The inner progress bar causes a 1px jitter when the sidebar is opened. | ||
.wporg-learn-lesson-header-mobile-view { | ||
position: relative; | ||
top: 1px; | ||
|
||
.wporg-learn-lesson-sidebar-toggle-wrapper { | ||
background-color: var(--wp--preset--color--light-grey-2) !important; | ||
|
||
> button { | ||
transform: rotate(180deg) scale(1.5) !important; | ||
} | ||
} | ||
} | ||
|
||
.sensei-course-theme__sidebar { | ||
top: calc(var(--sensei-lm-header-height) * 2 + var(--sensei-wpadminbar-offset, 0px)) !important; | ||
background-color: var(--wp--preset--color--light-grey-2); | ||
} | ||
} | ||
} | ||
|
||
.is-tip-notice .wp-block-wporg-notice__icon { | ||
background: url(../../assets/icon-check.svg); | ||
} | ||
|
@@ -26,26 +53,153 @@ body.sensei { | |
display: none; | ||
} | ||
|
||
// Facilitator notes | ||
#wporg-learn-facilitator-notes-toggle { | ||
display: none; | ||
|
||
&:checked + .wporg-learn-facilitator-notes-label + .wporg-learn-facilitator-notes-content { | ||
display: block; | ||
position: absolute; | ||
top: calc(var(--sensei-lm-header-height)); | ||
right: 0; | ||
width: 50%; | ||
height: calc(100vh - var(--sensei-lm-header-height)); | ||
margin-top: 1px; | ||
border-left: 1px solid var(--sensei-course-progress-bar-color); | ||
overflow: scroll; | ||
|
||
.wporg-learn-facilitator-notes-close { | ||
background: url(../../assets/icon-close.svg); | ||
background-repeat: no-repeat; | ||
background-position: center; | ||
width: 24px; | ||
height: 24px; | ||
position: absolute; | ||
right: var(--wp--preset--spacing--40); | ||
top: calc(var(--wp--preset--spacing--30) + var(--wp--preset--spacing--20)); | ||
cursor: pointer; | ||
} | ||
|
||
@media (max-width: 782px) { | ||
position: absolute; | ||
top: var(--wp--preset--spacing--10); | ||
left: 4%; | ||
width: 92%; | ||
height: calc(100vh - var(--wp--preset--spacing--10) * 2); | ||
border: 1px solid var(--sensei-course-progress-bar-color); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
z-index: 5; | ||
|
||
+ .wporg-learn-facilitator-notes-backdrop { | ||
content: ""; | ||
position: fixed; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
background-color: var(--wp--preset--color--charcoal-5); | ||
z-index: 1; | ||
} | ||
} | ||
} | ||
} | ||
|
||
.wporg-learn-facilitator-notes-label { | ||
cursor: pointer; | ||
font-family: var(--wp--preset--font-family--inter); | ||
font-size: var(--wp--preset--font-size--small); | ||
color: var(--wp--custom--link--color--text); | ||
text-decoration: underline; | ||
text-underline-offset: 0.13em; | ||
user-select: none; | ||
line-height: 1.1875; | ||
|
||
&:hover { | ||
text-decoration: none; | ||
} | ||
|
||
@media (max-width: 782px) { | ||
display: none; | ||
} | ||
} | ||
|
||
.wporg-learn-facilitator-notes-content { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I notice that the modal content overflow is hidden. Some of the Lesson Plan content is very long so this will need to be scrollable on desktop as well as mobile. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks. c125bcb |
||
display: none; | ||
} | ||
|
||
.sensei-course-theme-header-content { | ||
> .wp-block-group { | ||
row-gap: 0; | ||
} | ||
|
||
.sensei-course-theme__header__info { | ||
gap: var(--wp--preset--spacing--30); | ||
gap: 30px; | ||
|
||
.wp-block-sensei-lms-exit-course { | ||
text-decoration: none; | ||
order: 1; | ||
opacity: 1; | ||
|
||
@media (min-width: 783px) { | ||
&::before { | ||
content: ""; | ||
display: inline-block; | ||
height: var(--sensei-lm-header-height); | ||
border-right: 1px solid var(--sensei-course-progress-bar-color); | ||
position: absolute; | ||
margin-left: -30px; | ||
top: 0; | ||
} | ||
} | ||
} | ||
} | ||
|
||
.wp-block-sensei-lms-exit-course { | ||
margin-left: var(--wp--preset--spacing--30); | ||
@media (max-width: 782px) { | ||
.sensei-course-theme__sidebar-toggle { | ||
display: none !important; | ||
} | ||
} | ||
|
||
&::before { | ||
content: ""; | ||
display: inline-block; | ||
height: 100%; | ||
border-right: 1px solid var(--sensei-course-progress-bar-color); | ||
position: absolute; | ||
margin-left: -30px; | ||
top: 0; | ||
~ .wporg-learn-lesson-header-mobile-view { | ||
display: none; | ||
|
||
@media (max-width: 782px) { | ||
display: flex; | ||
height: var(--sensei-lm-header-height); | ||
padding: 0 0 0 var(--wp--preset--spacing--30); | ||
|
||
.sensei-course-theme-course-progress { | ||
display: block; | ||
opacity: 1; | ||
position: unset; | ||
|
||
@media (max-width: 460px) { | ||
width: 47%; | ||
} | ||
} | ||
|
||
.wporg-learn-facilitator-notes-label { | ||
display: block; | ||
position: absolute; | ||
right: calc(60px + var(--wp--preset--spacing--20)); | ||
} | ||
|
||
.wporg-learn-lesson-sidebar-toggle-wrapper { | ||
position: absolute; | ||
right: 0; | ||
|
||
> button { | ||
background: url(../../assets/icon-chevron-down.svg) !important; | ||
background-repeat: no-repeat !important; | ||
background-position: center !important; | ||
transform: scale(1.5); | ||
width: 60px; | ||
height: 60px; | ||
} | ||
|
||
svg { | ||
display: none; | ||
} | ||
} | ||
} | ||
} | ||
} | ||
|
@@ -66,9 +220,15 @@ body.sensei { | |
.sensei-course-theme__columns { | ||
margin-top: calc(var(--sensei-lm-header-height) + var(--sensei-wpadminbar-offset, 0px)) !important; | ||
|
||
@media (max-width: 782px) { | ||
margin-top: calc(var(--sensei-lm-header-height) * 2 + var(--sensei-wpadminbar-offset, 0px)) !important; | ||
} | ||
|
||
.sensei-course-theme__sidebar ~ .sensei-course-theme__main-content { | ||
--sensei-lm-sidebar-width: calc(280px + (var(--wp--preset--spacing--edge-space) * 2) - 24px); | ||
margin-top: 0; | ||
padding-left: var(--wp--preset--spacing--30); | ||
padding-right: var(--wp--preset--spacing--30); | ||
|
||
> * { | ||
margin-left: unset; | ||
|
@@ -189,6 +349,8 @@ body.sensei { | |
|
||
.sensei-course-theme__sidebar { | ||
row-gap: 40px; | ||
padding-left: var(--wp--preset--spacing--30) !important; | ||
padding-right: var(--wp--preset--spacing--30) !important; | ||
|
||
.sensei-lms-course-navigation__modules { | ||
gap: var(--wp--preset--spacing--20); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Need to consider the accessibility of this control and the modal content. At present this input isn't focusable with keyboard. We may want to move focus to the close button after activation. I'd consult some modal best practice docs.
On mobile it is definitely following a modal pattern, where focus should be trapped within the modal, and background page elements should not be interactive. On desktop it's arguable that the rest of the UI should remain interactive, as it's more of a panel.
@ryelle any thoughts on this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also I expected this pattern would use a button element, hooked up to the interactivity API to control the modal visibility, however I'm not sure whether this input based approach is any less accessible. Might need more aria attributes though as I think it's a less typical pattern.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think a button (with
aria-expanded
andaria-controls
attributes) would be better. Right now this would read as checking a checkbox, with no way to know that it would reveal more content.If it's easier, you can make it a modal (with focus trapping) in both cases - and if someone clicks outside the panel to use the rest of the site, close the panel. Otherwise, on desktop, I would expect it to close when I tab through everything, and focus moves on to the next tab stop (from the screenshots, I assume that's "exit course"). The desktop global nav submenus work like this— if you open "Community" & start tabbing, the submenu closes when "About" is focused.