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.