Skip to content
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

Closed
wants to merge 25 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
ad62364
Restore the first breadcrumb to 'Learn WordPress'
renintw Oct 14, 2024
4297d19
Don't render separator bar when on mobile view
renintw Oct 14, 2024
0d60a69
Add preliminary structure for Facilitator notes
renintw Oct 14, 2024
c09ad9c
Make content a block.
renintw Oct 14, 2024
87648b5
Adjust p font size
renintw Oct 14, 2024
0c35863
Adjust paragraph padding.
renintw Oct 14, 2024
b290869
Adjust hover styles for facilitator label
renintw Oct 14, 2024
f11d801
Capitalize "notes"
renintw Oct 14, 2024
43ff013
Make the toggle non selectable
renintw Oct 14, 2024
d21dec1
Add animation to Facilitator notes when on mobile view
renintw Oct 14, 2024
6d61914
Add pattern sensei-lesson-facilitator-note
renintw Oct 14, 2024
20db87c
Add header mobile view
renintw Oct 14, 2024
64b604f
Fix jitter
renintw Oct 14, 2024
ffbefab
Add icon chevron down
renintw Oct 14, 2024
0316bc8
Align mobile view sidebar padding
renintw Oct 14, 2024
cdb64af
Add class to toggle wrapper
renintw Oct 14, 2024
4452c1c
Adjust facilitator notes label styles on mobile view
renintw Oct 14, 2024
c9e5cfa
Add backdrop & close button
renintw Oct 14, 2024
3515f12
Rename to sensei-lesson-facilitator-notes
renintw Oct 14, 2024
6aa553e
Add event listener for close button and backdrop
renintw Oct 14, 2024
dd5303d
Add z-index to backdrop
renintw Oct 14, 2024
a68f5fd
Adjust styles when logged in.
renintw Oct 14, 2024
4b5b686
fix text wrap
renintw Oct 14, 2024
16d2c39
Fix click through problem
renintw Oct 14, 2024
c125bcb
Make content scrollable
renintw Oct 21, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions wp-content/themes/pub/wporg-learn-2024/assets/icon-close.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 1 addition & 5 deletions wp-content/themes/pub/wporg-learn-2024/functions.php
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
require_once __DIR__ . '/src/learning-pathway-cards/index.php';
require_once __DIR__ . '/src/learning-pathway-header/index.php';
require_once __DIR__ . '/src/lesson-course-info/index.php';
require_once __DIR__ . '/src/lesson-facilitator-notes/index.php';
require_once __DIR__ . '/src/lesson-grid/index.php';
require_once __DIR__ . '/src/lesson-standalone/index.php';
require_once __DIR__ . '/src/search-results-context/index.php';
Expand Down Expand Up @@ -428,11 +429,6 @@ function get_learning_pathway_level_content( $learning_pathway ) {
* @return array The modified breadcrumbs.
*/
function set_site_breadcrumbs( $breadcrumbs ) {
if ( isset( $breadcrumbs[0] ) ) {
// Change the title of the first breadcrumb to 'Home'.
$breadcrumbs[0]['title'] = 'Home';
}

$post_id = get_the_ID();
$post_type = get_post_type();

Expand Down
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">
Copy link
Contributor

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?

Copy link
Contributor

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I expected this pattern would use a button element,

I think a button (with aria-expanded and aria-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.

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.

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.

<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
Expand Up @@ -29,6 +29,8 @@
<!-- wp:sensei-lms/course-theme-course-progress-counter {"fontSize":"small"} /-->
<?php endif; ?>

<!-- wp:pattern {"slug":"wporg-learn-2024/sensei-lesson-facilitator-notes"} /-->

<!-- wp:sensei-lms/exit-course {"fontSize":"small"} /-->
</div>
<!-- /wp:group -->
Expand All @@ -42,5 +44,21 @@
<!-- /wp:group -->

<!-- wp:sensei-lms/course-theme-course-progress-bar /-->

<!-- wp:group {"className":"wporg-learn-lesson-header-mobile-view","style":{"spacing":{"blockGap":"16px"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group wporg-learn-lesson-header-mobile-view">
<?php if ( $is_user_enrolled ) : ?>
<!-- wp:sensei-lms/course-theme-course-progress-counter {"fontSize":"small"} /-->
<?php endif; ?>

<!-- wp:pattern {"slug":"wporg-learn-2024/sensei-lesson-facilitator-notes"} /-->

<!-- wp:group {"className":"wporg-learn-lesson-sidebar-toggle-wrapper","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group wporg-learn-lesson-sidebar-toggle-wrapper">
<!-- wp:sensei-lms/sidebar-toggle-button /-->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:sensei-lms/ui -->
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 );
184 changes: 173 additions & 11 deletions wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seeing a grey border around the modal on mobile, I don't think this matches modals on other sites, eg. Meeting Calendar

Facilitator notes Facilitator notes inspected Meeting Calendar
Screenshot 2024-10-17 at 11 36 15 AM Screenshot 2024-10-17 at 11 36 24 AM Screenshot 2024-10-17 at 11 34 56 AM

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 {
Copy link
Contributor

@adamwoodnz adamwoodnz Oct 16, 2024

Choose a reason for hiding this comment

The 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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The 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;
}
}
}
}
}
Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand Down