Facilitator notes

I like this implementation. The only comment I have here is that if you look at an example lesson plan, the facilitator notes could get quite long. It's potentially everything except the Example Lesson section.

That having been said, as a presenter, I wouldn't be opposed to the facilitator notes link being a toggle that shows/hides or slides in/slides out the facilitator notes over the lesson content (up to the sidebar). I don't need to be able to see both the facilitator notes and the example lesson at the same time.

As it is, the current lesson plan presents everything on one page anyway, so a facilitator wouldn't see the prep notes and the example lesson at the same time either.

I had the same concern as @jonathanbossenger about the facilitator notes area being so narrow. Some of the lesson plans that will be moved over are quite long, as you can see here:

https://learn.wordpress.org/lesson-plan/create-a-basic-child-theme-for-block-themes/

(This is likely why a tab approach may have been suggested earlier, since it takes advantage of a wider area in which to display content.)

Thanks for the feedback. I will work on a different version that addresses the content extension.

Coming back after a few days working on 5FTF to share a new idea for the facilitator notes.

Facilitator notes in popover and modal

I tapped into @jonathanbossenger's comment and explored a popover version on desktop that then changes to modal on mobile. Here is how the flow would work on both key displays.

Mobile views

Regarding the experience on mobile, I explored different ideas that make better use of the spacings and provides an action affordance similar to its desktop version.

Below you can see the mockups of the pages documented in the Design page.

Main action

Lesson progress

How do you see the above in terms of flow @kathrynwp and @jonathanbossenger, and how feasible is the implementation @renintw?

The facilitator notes in both the popover and modal look good to me and are technically feasible. It may take some time to ensure their accessibility is handled properly, though.

In mobile view, I noticed that Home was changed to the lesson name.
Just to confirm, it's not the course name, right? @fcoveram
And having a look at the code, I think this change should be feasible, except for the part where the sidebar is expanded and the button section also needs to turn gray, which might be a bit tricky.

This is just a preliminary assessment, might be achievable with ease, I'll give it a try first once the design is confirmed, and if any issues arise during implementation, I'll discuss them with you then.

Before		After

I noticed that Home was changed to the lesson name. Just to confirm, it's not the course name, right?

No. It's the lesson name. "Home" says nothing about what users are seeing. In that vein, I think we should change the breadcrumb label to say "Learn WordPress." This conveys better where users will land once clicking on it and which site section this content belongs to.

And having a look at the code, I think this change should be feasible, except for the part where the sidebar is expanded and the button section also needs to turn gray, which might be a bit tricky.

We can dismiss that change and keep the white background. The color change was to reinforce the submenu section, but we can try keeping the white.

This is just a preliminary assessment, might be achievable with ease, I'll give it a try first once the design is confirmed, and if any issues arise during implementation, I'll discuss them with you then.

Awesome. The before/after assessment is correct 👌

@fcoveram, I think this is a great implementation. I would just mention this conversation about the amount of possible content in the facilitator notes. The current width in the screenshots on desktop view doesn't seem wide enough to display that amount of content well.

I would just mention this conversation about the amount of possible content in the facilitator notes

Oh, I think I misunderstood the link. Is the whole page content a facilitator note?

The current width in the screenshots on desktop view doesn't seem wide enough to display that amount of content well.

Is your point only about the popover width? If so, we can increase it to look wider and test the final value in development.

@fcoveram

Oh, I think I misunderstood the link. Is the whole page content a facilitator note?

Exactly, the whole page is a lesson plan, which will be turned into "facilitator notes."

Is your point only about the popover width? If so, we can increase it to look wider and test the final value in development.

Jonathan is away this week but I believe the issue is that it would indeed need to be wider to potentially accommodate more content. Thank you!

Hey @fcoveram @jonathanbossenger 👋

Any further thoughts or adjustments on the design, or is it mostly finalized with just the width needing a few tweaks?

Echoing @kathrynwp's comment, I just think the popover needs to be wider on a desktop view. I'd advocate for it being at least 60 to 75% of the lesson content area.

I appreciate that the term facilitator notes makes it sound like it needs to display a list of short notes, but in fact the content of those notes are in some cases even more detailed than the actual lesson itself, depending on the lesson content and preparation requirements.

Thanks for keeping the idea folks. To add to @jonathanbossenger's idea, I envision a fixed value that meets the percentage suggestion shared above to avoid a narrow view of the content on middle-size displays, like in tablet devices.