Sensei: Handle editor preview state for Lesson Actions block

[donnapep]

Describe the solution you'd like

Create a block that handles the _Complete Lesson_, _Reset Lesson_ and _Next Lesson_ functionality. Each button block should support configuration of the following settings:

• Styles
  
  
  
  • Fill (default for _Complete Lesson_, _Reset Lesson_)
  
  
  • Outline (default for _Next Lesson_)
  
  
• Color settings
  
  
  
  • Text Color
  
  
  • Background Color
  
  
• Border settings
  
  
  
  • Border radius
  
  

The parent block should support the following ~_Visibility_~ _Available Actions_ settings:

• Reset Lesson button (toggle, default true)
  ~- Next Lesson button (toggle, default true)~

~The _Complete Lesson_ button is always displayed.~
The _Complete Lesson_ button is always displayed for an enrolled user who has met the necessary conditions.

The _Next Lesson_ button is always displayed, regardless of whether or not the user is enrolled.

Functionality

• Clicking the _Complete Lesson_ button should set the status of the lesson to _Completed_. The _Reset Lesson_ ~and _Next Lesson_~ button should be displayed, and the _Complete Lesson_ button should be hidden.
• Clicking the _Reset Lesson_ button should set the status of the lesson to _In Progress_. The _Complete Lesson_ button should be displayed, and the _Reset Lesson_ ~and _Next Lesson_~ button should be hidden.
• Clicking the _Next Lesson_ button should navigate to the next module or lesson in the course. If the current lesson is the last lesson in the course, the button is not displayed.

Visibility

The logic for determining the visibility of the buttons on the frontend should be the same as it is for the legacy buttons. If more than one button is displayed (e.g. _Reset Lesson_, _Next Lesson_), they should be beside each other.

_Although the visibility of the existing _Reset Lesson_ button is tied to the _Allow user to retake the quiz_ setting, this seems like a nonsensical association that we should not carry over to this block._

Notices

Notices displayed as part of the button functionality (for example, _Congratulations! You have passed this lesson._ displaying after clicking on _Complete Lesson_) should not be part of the block and will be handled separately. This is so that notices aren't displayed at potentially odd locations on the page.

Context

The block replaces these buttons:

Editor Considerations

As per a design discussion, the block toolbar should enable switching between the different views. If either the _Reset Lesson button_ or _Next Lesson button_ settings are disabled, the toolbar updates appropriately. If both are disabled, then the toolbar switcher should be hidden.

Text

Lesson Actions Block Description

_Enable an enrolled user to perform specific actions for a lesson._

Complete Lesson Block Description

_Enable an enrolled user to mark the lesson as complete._

Next Lesson Block Description

_Enable a user to move to the next lesson._

Reset Lesson Block Description

_Enable an enrolled user to reset their progress in the lesson._

[yscik]

Editor Design

• Lesson Actions container block with fixed inner blocks and a lesson preview status (In Progress, Completed)
• Each button is a block, selectable separately to style
• Non-active buttons are grayed out with 10% opacity. Clicking them changes the lesson preview state.
  
  
  
  • This makes it easy for the user to select and customize the button(s) for this lesson state.
  
  
  • Clicking them again selects the inner button block.
  
  
• Clicking outside an active button block, including clicking on the non-active buttons, first selects the container block.
  
  
  
  • This makes it more clear that the preview state has changed.
  
  
• Preview state can also be changed in a block toolbar dropdown. This also serves as a clarification on what state is active.

Lesson Actions parent block:

Inner button block selected:

Clickable prototype in Figma

Some changes:

• In a completed state, the Next lesson should be the primary action (filled style, first button) and the Reset lesson secondary (Outline style).
  
  
  
  • Resetting the lesson progress feels like a marginal action, wanting to navigate to the next lesson is likely the more common thing here.
  
  
• Visibility settings panel could be called something like Completed Lesson Actions

[donnapep]

As per a design review, the following changes should be made to the current design:

• Don't include an icon in the toolbar dropdown.
• _Preview Lesson State_ is renamed to _Lesson Status_.
• Padding for _Next Lesson_ and _Reset Lesson_ blocks should be the same.
• Ensure all buttons have _Filled_, _Outline_ and _Link_ styles.
• _Visibility_ is renamed to _Additional Actions_.
• The _Next Lesson_ button should always be visible and not be a setting. Note that this is a departure from current functionality, but it would be simple to add behind a toggle setting if needed in future.
• The _Additional Actions_ panel does not need helper text as its purpose is self-explanatory.
• The block descriptions are as per the original issue description.

[matticbot]

➤ donnapep commented:

This card is responsible for handling the view state and highlighting the buttons in the selected state.

[renatho]

@donnapep, could you explain the following item?

Padding for Next Lesson and Reset Lesson blocks should be the same.

[yscik]

@donnapep, could you explain the following item?

Padding for Next Lesson and Reset Lesson blocks should be the same.

This was just an issue with the design images, should be all good with using the button blocks.