Add Facilitator Notes

[renintw]

Resolves #2869

This PR introduces the UI for Facilitator Notes, including updates for mobile view. Additionally, the Breadcrumbs section has been changed from "Home" to "Learn WordPress."

Screencast

https://github.com/user-attachments/assets/06290332-96ea-4d72-8bfe-a1519778a57b

Lesson Plan Migration From the discussion at https://github.com/WordPress/Learn/issues/2392, it appears that before migrating Lesson Plans to Facilitator Notes, it needs to map each Lesson Plan to the most appropriate lesson. Has there been any related discussion?

[fcoveram]

The flow looks good to me. I'd love to hear @jonathanbossenger and @kathrynwp's thoughts.

I would also like to see if we can test this view with actual use cases. This post was shared before as an example of how long content could be, but it's vital to identify whether that page is an exception or not.

It would be frustrating to have a long modal, but also a poor user experience needing to open an external link to see short content that could perfectly fit into a modal.

[adamwoodnz]

Lesson Plan Migration From the discussion at #2392, it appears that before migrating Lesson Plans to Facilitator Notes, it needs to map each Lesson Plan to the most appropriate lesson. Has there been any related discussion?

No further discussion that I'm aware of. I'm imagining a new post meta field on a Lesson for selecting a Lesson Plan. The content from that Lesson Plan is rendered in the modal.

[jonathanbossenger]

I would also like to see if we can test this view with actual use cases. This post was shared before as an example of how long content could be, but it's vital to identify whether that page is an exception or not.

It would be frustrating to have a long modal, but also a poor user experience needing to open an external link to see short content that could perfectly fit into a modal.

I understand your concerns. I've selected a sampling of current lesson plans from the lesson plan landing page

• Create a basic child theme
• Upload a theme to the theme directory
• Intro to the Site Editor

Everything up to the "Example Lesson" section would need to be displayed in the lesson notes module, and as you can see in all three examples, even the shortest one (Upload a theme) is pretty detailed.

[fcoveram]

Thanks @jonathanbossenger for adding more examples.

I think we should revisit this decision and, instead of showing the content in a modal, make the "Facilitator notes" link to open a new page.

Although the practice is not recommended (G200), I would suggest opening a new tab. Filling out forms or (quote) "prevent the loss of any form data that has already been entered" are use cases excluded from this requirement.

What do you think of this? Perhaps @ryelle knows more about it.

[ryelle]

I think we should revisit this decision and, instead of showing the content in a modal, make the "Facilitator notes" link to open a new page.

Although the practice is not recommended (G200), I would suggest opening a new tab. Filling out forms or (quote) "prevent the loss of any form data that has already been entered" are use cases excluded from this requirement.

Is there progress that a user can loose? Lessons are mostly articles, as I recall from past testing. Clicking a link and then using the back button wouldn't cause "lose of data" when reading an article. Would this show up on a quiz, or are there many interactive lessons?

If there are, and this would be a "lose of data" case, the G200 technique also recommends giving advance warning that this will be a new tab (typically this is done with the ↗️ icon, but we're already using that for external links). The indicator would need to be visible and screen-reader-accessible.

Otherwise, I think it would be fine to keep it as a new page and let users open it as they choose.

[renintw]

If we want to load the content from a linked Lesson Plan I guess we'll need a block with conditional rendering to handle the Lesson Plan being defined or erroring, etc.

I originally thought of keeping it simple and achieving it with CSS. If the content can't be retrieved, it could be handled within the pattern and display the corresponding notice/warning. That said, the requirements have changed now, I'll think about how to make adjustments for a better approach.

[adamwoodnz]

Is there progress that a user can loose? Lessons are mostly articles, as I recall from past testing. Clicking a link and then using the back button wouldn't cause "lose of data" when reading an article. Would this show up on a quiz, or are there many interactive lessons?

I don't believe there is any state to lose, and Lessons Plans don't relate to any quizzes afaik. I feel like a new tab/window seems like a good approach, with sufficient warning, so that the plan can be referenced alongside the lesson. That seems to be the intention.

[kaitohm]

I feel like a new tab/window seems like a good approach, with sufficient warning, so that the plan can be referenced alongside the lesson. That seems to be the intention.

This front-end implementation of a new tab would work. The team's request is more around the back-end implementation. quoting https://github.com/WordPress/Learn/issues/2392#issuecomment-2181675301

The desired end state [is]... The information of the lesson plan would be stored in a custom field / block within the lesson editor.

This is in order to reduce the need for us to have to edit duplicative information across different post types, and instead manage all information in one lesson. This also will help us with streamlining translation work.

Would this still be possible?

[adamwoodnz]

The desired end state [is]... The information of the lesson plan would be stored in a custom field / block within the lesson editor. This is in order to reduce the need for us to have to edit duplicative information across different post types, and instead manage all information in one lesson. This also will help us with streamlining translation work.

Would this still be possible?

Thanks for reminding us of that requirement. While I'm not sure it will help streamline translation work (that might depend on which translation plugin we choose and how well it plays with custom fields), the ease of editing in one place is not to be overlooked.

I'm not sure how well a custom fields approach will handle content of this scale either. This seems to be the main challenge for both frontend and backend. Might need some testing.

A custom Facilitators Notes block within the post editor might be worth trying too.

Both these approaches will very likely require manual migration I expect.

[kaitohm]

Both these approaches will very likely require manual migration I expect.

The team will be fine with that 👍 I believe we expected that would be the case.