[BD-14] Content Libraries and Editing Project Overview

Initiative Summary

Content libraries have the potential to offer course teams the ability to create course content in an instructed manner within the CMS. Today, educators reference content from libraries using the randomized content block. This component randomly displays content from a library in the course. At this time, educators cannot reference specific content from a library in a lesson or chapter. As a result, the most common use of content libraries are in assessments. Educators use libraries as a problem bank – they author collections of problems outside of the course authoring process to be used in their course.

The aim of the Content libraries and Editing initiative is to expand upon this existing functionality and allow course teams the ability to select content from an unstructured content library and embed that content into a course. Thus bring a flexible new way to author content without committing to course structure in Studio. Additionally,  this ability to reference specific library content in courses enables new sub-team authoring workflows, unlocks content reuse for course variants, etc.

With the updates to Content Libraries, Course teams will now interact with a new problem and video editor. The UI updated to the problem and video editor will not only facilitate a better authoring experience for Course teams but will also elevate technical limitations associated with the new unstructured content authoring experience. 

Customer Impact(edX Partners/ Course Authors) 

Reach (Customer) 

All course authors across the platform will have the ability to create content libraries and editing.. 

Impact + Measure (Outcome) 

Improvement to educator NPS rating & platform map competitiveness assessment (currently authoring is listed as a top 10 gap area) 

T&L Gap Impact

Course authoring is a top 10 T&L platform gap area, and these changes will introduce a set of key requested features not available on any other top 10 competitive alternatives to Open edX’s authoring experience. 

Initiative Objectives   

  • Rewrite the video and problem components to use a new UI framework that makes it easier for partners to author these elements.

  • An updated Library Authoring experience, with improved tools for both Randomized Content Blocks and the ability to directly reference library content blocks in courses specifically.  

Phase 3 - Problem and Video Component Rewrite in the Course Authoring Experience

Milestone 3.0 - Blockstore Operational Simplification (IN PROGRESS)

Objective - Update blockstore infrastructure - services, installation, and test infrastructure to support content libraries v2 authoring

key status summary story points
Loading...
Refresh


Milestone 3.1 - Discovery and definition of Content Library Frameworks (COMPLETE)

Objective - Conduct discovery and definition of key content library frameworks to ensure that the development teams working on this initiative are able to make informed implementation decisions about the interaction between libraries, courses, and other relevant factors

key status summary story points
Loading...
Refresh


Milestone 3.2 - Interactive Problem Editor in the Course Authoring Experience (IN DESIGN)

Objective - Update the CAPA problem editor in the course authoring experience to use a more interactive WYSIWYG editor. In doing so, we aim to improve the problem authoring experience for partners by improving the UI of this component.

key status summary story points
Loading...
Refresh


Milestone 3.3 - Video Editor Rewrite in the Course Authoring experience (IN DESIGN)

Objective - This milestone aims to update the video editing experience in the course authoring workflow. By doing so, we plan to streamline video editing settings and operations for this xBlock.

Issue Label 

User Story

UX Ticket

Detail & Notes

Issue Label 

User Story

UX Ticket

Detail & Notes

1

Modernize Video XBlock Editor

Educators can author a video in a library context.

UXTL-83

Build a new React-based editor for videos that can run in an iframe. Use a new xblock view name like "edit_view" so that the new editor is only used in the new content library editor (later we can backport it to Studio course authoring). It must support YouTube, edX video hosting (enter a VAL video ID), and/or supplying the URL of a .m3u8 HLS manifest file.

2

[Discovery] Should xblocks be rendered in secure sandbox?

  • The question we face is: is it worth adopting OpenCraft's secure xblock sandbox approach for the library authoring MFE and, eventually, the learning MFE?

    • or, more at the root of it: do we want to stop trusting that course authors would never write malicious/problematic JS?

    • It only makes sense to do this for frontend-app-library-authoring if we also do everywhere else, too.

 

https://openedx.atlassian.net/browse/TNL-7458

Milestone 3.4 - HTML Editor Improvements (IN STAKEHOLDER REVIEW)

Objective - Create a new React-based HTML block editor for the course authoring experience. This will enable the use of the HTML block in the upcoming v2 content libraries’ authoring experience.

key summary type created updated due assignee reporter priority status resolution
Loading...
Refresh

 


Phase 4 - Content Libraries v2 Implementation and Problem and Video Component UI updates in the Library Authoring Experience

Milestone 4.0a - Library Reference Content Block (IN PROGRESS)

Objective - Allows educators to specifically reference library v2 content blocks within their course, including similar version upgrade and override capabilities currently in the randomized content block and v1 content libraries. Through this, educators may begin to use content libraries to author content in advance of specific plans or a known location within a course. Additionally, problem or video libraries can be authored by other teams for future use in one or several courses.

Issue Label 

User Story

Status

Detail & Notes

Image

Issue Label 

User Story

Status

Detail & Notes

Image

1

Improve "Source from Library" Workflow

(Styling / Other Improvements to M2) Educators can source specific components from libraries into their unit pages using a new Source Content Library block. (v1.1)

To DO

Add a UI to allow browsing, searching, and filtering library content to choose what components will be included as children (instead of the MVP version which required entering library block IDs ). This would be a great place to prototype a React-based XBlock editing experience!

PR Details

Figma Link - Step 1 in Course Unit Page, Steps 2,3,4 Library Reference Block Modal Step, Step 5 Render Library Reference Block in Unit Page

2

[Documentation] Review Content Libraries best practice documentation drafted by suppport

As a member of the Partner support team, I want to ensure that the guidance and support documentation for Libraries is accurate so that Partners will continue to use this feature successfully.

 

AC: 

  1. Review Libraries support documentation authored by Partner SUpport. 

  2. Ensure that the guidance in the document is accurate based on the current behavior/offering of content libraries v2

  3. Provide feedback or revisions in the document. 

 

3

[Documentation] Draft Partner facing documentation regarding the updates to Content Libraries, Problem, and Video authoring

As an edX Partner, I want to learn about the improvements to Content Libraries, Problems, and Video editing so that I can take advantage of these changes.

 

AC: Document the updates to the Content Libraries, Problem, and Video authoring experience.

 

 

Milestone 4.0b - Content Libraries and Course Authoring Headers (REMOVED FROM SCOPE)

This milestone has been removed from the scope of the BD-14 project. This is due to parallel work being scoped by the UX team related to Studio and Publisher Header improvements/consolidation. Any requests here will be incorporated into the delivery of that effort.

 

Objective - The objective of this milestone is to implement the new custom content library header. In doing so, we aim to introduce parity between the upper navigation that partners experience in the course authoring workflow in content libraries. This added continuity for partners will streamline the library authoring experience.

Issue Label 

User Story

Status

Details & Notes

Image

Issue Label 

User Story

Status

Details & Notes

Image

1

Replace studio header with custom header implementation

This PR replaces the custom header implementation with the common `@edx/frontend-component-header-edx` one.

To DO

Also, the PR contains lot of "unrelated changes", which are not really unrelated. The base font-size of the frontend-app is wrong, hence the common header would have smaller fonts, incorrect header height, etc. Because of the fix of the font baseline, I had to change *all* the related scss styles where the unit was not in `px` but `rem`. Furthermore, I had to adjust padding, margin and similar classes to adapt to the baseline changes. This means that *all open PR will contain oversized newly added components after merging this PR*. In case other PRs are merged before this PR get merged, this PR *must be updated*

*JIRA tickets*: https://openedx.atlassian.net/browse/TNL-7403

 

2

Add StudioHeader header variant

This PR adds a new shared header component, which is based on the already existing `Header` and can be used across Studio related pages and frontend apps like the library authoring app.

To DO

 

 

3

Implement New Studio Homepage Header

Educator navigation for top level Studio objects is in the header (mostly a UX shift, though it allows library authoring home page to not have to emulate Studio home page with course / other tabs)

This would also move "Studio Home" from the Library MFE account dropdown, and force the Library Authoring MFE to also configure a header similar to studio with links back to Courses / Studio Home.

To DO

Create a new header for the Studio home page that puts the "Courses | Archived Courses | Libraries [ | Taxonomies]" navigation in the global header, rather than just being tabs on the homepage.

This is not critical path. This change only affects the home page; after you click "Libraries", the Libraries MFE renders its own library-specific Studio header. Likewise, the header seen when you click "Courses" should be unchanged from how it is today.

https://github.com/edx/frontend-app-library-authoring/pull/18 https://github.com/edx/frontend-platform/pull/116

Figma Link - Libraries Listing Home

Milestone 4.0c - Library Listing and Authoring Search Experiences

Objective - Support search and filtering options for the library listing page and within the library content authoring experience; by doing so, we plan to facilitate partners' use of larger and more complex libraries.

Issue Label 

User Story

Status

Detail & Notes

 

Issue Label 

User Story

Status

Detail & Notes

 

1

Add pagination

This adds pagination to the library list page and the library detail page, making it possible to work with the MFE where there are a large number of libraries and/or libraries with a large number of blocks.

To DO

This PR is open currently in the “Waiting FOr Author Status”.

Pretty much still a WIP, as it's still missing tests.

 

2

Add pagination to library list page and implement course import

This Pull Request adds pagination to the library list page and the library detail page, making it possible to work with the MFE where there are a large number of libraries and/or libraries with a large number of blocks. Also, besides the pagination, a new page is created to be able to import all possible blocks from a course.

To DO

 

 

3

Add pagination for legacy libraries API

Add pagination support to legacy library API to fulfill requirements of

To DO

 

 

4

New Authoring Page: Searching: Polish & bug fixes

Educators can search within a content library to filter their view and see specific blocks.

To DO

This is about polishing the already implemented experience, including fixing any bugs and a redesign so that the search box to the right can be opened and closed with the corresponding search button on the top right.

Figma Link - Library Listing (Search Enabled),

Figma Link - Library Listing (Search Enabled),

5

New Authoring Page: Help box

Educators can access help content when clicking on the help button.

To DO

 

Figma Link - (Help and Documentation Enabled)

 

6

Specific Library Types: Clean-up

(Styling / Other Improvements to L3 and L4) Educators can find a specific library, or view / filter down to specific library types, from the Library Listing page.

To DO

This is about styling updates, including the ability to open and close the search box.

Figma Link - (styling cleanup to search Sidebar)

7

New Authoring Page: Search XBlock Content?

(Improvement to A4) Educator block search is improved using metadata from library content blocks

To DO

Support full text search of blocks by leveraging the index_dictionary XBlock API (like LabXchange does). Indexing will be a heavy operation, but the source data is there and a mechanism for retrieving it exists.

 

 

 

Milestone 4.1a - Content Library Creation & Authoring Basics (IN PROGRESS)

Objective - In milestone 3.6, we aim to introduce basic library creation and authoring functionality so that partners have a more robust content authoring experience within the content libraries' workflow. Upon completing this milestone, partners will have the ability to create specific types of libraries such as--video, problem, and complex. Doing so will add to future authoring experience improvements for each Library type.

Issue Label 

User Story

Status

Deatils & Notes

Image

Issue Label 

User Story

Status

Deatils & Notes

Image

1

Library Publishing Workflow & Clarity

Educators have confidence on what the scope of their publish action will do for a given component / library.

To DO

This is about the "x library items, unsaved changes, last updated on" captions to the left of the publish button on the library authoring page.

Figma Link - See Publish Sidebar on the right side of the Library Authoring Page (additional states + cases necessary for UX discovery)

2

Authoring Page: Add new components

(Styling / Other Improvements to M1) Educators can add new components to author in their content libraries.

 

To DO

This is pertaining to the redesign of the Add new library item box and buttons on the library authoring page, including new messaging when the library is empty.

Figma Links - Library Authoring Page (Empty View), Library Authoring View (Single Block)

3

Authoring Page: Show previews

Educators can view previously added components and optionally show (or hide) Studio previews for all of them.

To DO

The functionality already exists, but requires restyling according to the new designs.

Figma Links - Library Authoring Page (Collapsed Blocks)

4

Authoring Page: Button bar

Educators see buttons to delete, duplicate, edit, and move blocks in a Library.

To DO

This is about restyling the buttons as shown in the new designs.

 

Figma Links - Library Authoring Page (Collapsed Blocks)

5

Authoring Page: Reorder blocks

Educators can reorder blocks in a Library page arbitrarily by clicking and dragging the drag button on a block’s button bar.

To DO

Blocks in a Library (a.k.a. a Blockstore Bundle) are already stored in arbitrary order, but new APIs might be necessary for this to be performant. Also, pagination needs to be taken into account: users will only be able to reorder within a particular page.

Figma Links - Library Authoring Page (Collapsed Blocks)

6

Limit Library Block Count (Messaging Improvements)

Educators are limited from authoring content libraries that are too large to be performant.

To DO

This is about implementing user interaction when the limit is reached.  There are no mockups, yet.

Figma Link - No page level message shown in Figma. To review with UX, but a page level alert may be used here.

 

7

Library Component Duplication Workflow

Educators can duplicate a library component to edit / modify, as is the case in our course editing experience today.

To DO

This is about implementation of the "copy" button visible beside each block's trash icon on the library authoring page.

Figma Link - See duplicate action on component header in Library Authoring view

8

Library List Page: Show Basic Library List (v1.1) (Improvements)

(Styling / Other Improvements to L1) Educators can view a listing of all the libraries they are content authors / viewers for within a given instance.

To DO

This is about styling and layout modifications to the list of libraries, including spacing, button positioning and icons.  This is not about the search of help dialogs to the right.

Figma Link - Library Listing (Search Enabled), (Help and Documentation Enabled)

9

Library List Page: Create a new Library (Improvements)

(Styling / Other Improvements to L2) Educators can create new v2 Libraries, including the ability to specify license and library type up front. (v1)



(This is about conformance of the Create New Library box to the Figma mockup.)

To DO

(Adolfo) I'm assuming this pertains to the new closable help and search boxes, along with styling improvements and a block count on each library.

Figma Link - Create New Library (Note, UX review necessary for CC license configuration, may not use the dropdown as shown in Figma)

Figma Link - Create New Library

10

New Authoring Page: Video/Problem-Type Libraries

(Improvements)

(Styling / Other Improvements to L3)

  • Educators can author problem libraries, which only allows problems, drag drop, and ORA to be added? (TBD on specificity here) (v1)

To DO

Since the 2. Authoring Page - Cleaned-up above will handled redesign of the buttons and the underlying library type functionality is already implemented, this is solely about adding Drag and Drop and ORA to the problem type.

Figma Link - Library Authoring Page (Empty View), Library Authoring View (Single Block), with video + Problem library types showing fewer blocks than full list

11

New Authoring Page: Sorting by Date Added

(Improvement to A3) Educators can sort library components by date added.

To DO

Sorting library components by date added will be tricky.  Libraries are, in blockstore terminology, "Content Bundles", and Blockstore design does not foresee storing such a date field for each block.  Bundle versions have associated dates, but this applies to the whole bundle, not individual blocks.  LabXchange solves this by introducing a metadata layer on a standard relational database table, where each block gets a row.  It is suggested that the same approach be taken for Content Libraries.  Because this will be the first such metadata "overlay" for libraries, care will need to be taken to design the architecture sanely.  Hence, the larger estimate.

Figma Link - Not Applicable, will appear in current order, may be able to remove this row?

 

12

Library Listing Page: Sorting

Educators can sort content libraries by date modified on the listing page

To DO

Unlike 12. New Authoring Page: Sorting by Date Added on 1.3 above, modification date for a given library is stored by Blockstore via "snapshot" creation dates. Use that information to create an index and to make the Library Listing Page sortable by date modified, in addition to name.

Figma Link - No Figma Link currently, This Help Sidebar for Library authoring view is similar to main Library Listing page, with options dependent on which sort options are possible. (similar to row 12 in v1.3 milestone)

 

Milestone 4.1b - Update Library Randomize Content Block (IN PROGRESS)

Objective - This milestone aims to make the randomized library block compatible with the updates for content libraries v2.  In doing so, we are supporting existing functionality for partners; while making improvements to this authoring experience and settings.

Issue Label 

User Story

Detail & Notes

Issue Label 

User Story

Detail & Notes

1

Randomized Blockstore Library Content in Courses

Educators can use the Randomized Content Block using v2 Content Libraries

Update the "Randomized Content XModule" so that it can support Blockstore-based content libraries in addition to modulestore-based ones.

Figma Link - None exist, would echo stepper pattern shown in Steps 2-4 from milestone v1.6

 

Milestone 4.2a - (DEPENDENCY) Interactive Problem Editor in the Library Authoring Experience

Objective - This milestone ensures that the library authoring experience employs the new problem editing experience available in the course authoring experience.

Issue Label 

User Story

Status

Detail & Notes

Images

Issue Label 

User Story

Status

Detail & Notes

Images

1

Modernize CAPA Problem Editor

Educators can author problems in a library context.

To DO

Clicking on the edit button opens a “full-screen modal”, rendered by the Library Authoring MFE itself but, for future reusability, imported as a component from a common repository.

This is because the current editor for CAPA problems has a lot of implicit undeclared dependencies on the existing Studio JavaScript/UI, and it doesn’t function at all in a React-based MFE. (Note that third party XBlocks and drag-and-drop-v2 work well.)

Figma Link - (This area of figma will show many states / cases of this editor, you can also view in prototype mode using the play button in the top right of the screen. Note that this modal will move to a full screen stepper pattern to allow the editors to live in the course + library authoring MFEs.

TNL-7592

 

2

OLX Authoring Mode: "Switch to Advanced"

Educators can choose to fallback to OLX editing / authoring across any problem / component (or only some? details TBD)

To DO

Add support for directly editing the OLX of any component in the library (convenient for CAPA problems but useful for any type which has limited editing support or for authors who prefer using OLX; also currently the only way to use content "linked" from another blockstore library). Use a modern editor with syntax highlighting that can show XML errors in real time.

 

Figma Link - See “Switch to Markdown Editor” in top right of editor experience.

3

Authoring Page: Editing Blocks

Educators can click on the edit button to edit blocks in-page.

 

Some blocks, like HTML, CAPA and Video, will get dedicated React-native editors. For all others that won’t, render the author view inline, just like Studio currently does. This will finally replace the ramshackle-ported edit page.

 

4

[Discovery] Revamping of block editors for use in Library Authoring MFE

The next epic will focus on writing the video xblock editor for the content libraries MFEs. This ticket aims to address some questions around the implementation for these changes

To DO

 

 

Milestone 4.2b - (DEPENDENCY) Video Editor Rewrite in the Library Authoring experience

Objective - This milestone ensures that the new video editing experience that exists in the course authoring experience is available in the library author experience as well.

Milestone 4.2c - (DEPENDENCY) Text Editor Rewrite in the Library Authoring experience

Objective - This milestone ensures that the new text editing experience that exists in the course authoring experience is available in the library author experience as well.