Add Restricted Course Content block #3849

gikaragia · 2020-12-14T11:32:30Z

Changes proposed in this Pull Request

This PR introduces a new blocks to the single course page, 'Restrict Content' (naming suggestions welcome 😄 ).
The block is similar to how the 'Group' block works but they show the content to enrolled, unenrolled or users which completed a course only.
I investigated to possibly add the blocks to the single lesson page too. Currently in the single lesson template we don't show the content at all when the user is not enrolled. For this reason we should probably wait until we drop the single lesson template to see if it fits to add these blocks.

Update:

It is possible to transform any selection of blocks to move it inside a wrapper 'Enrolled Content' or 'Unenrolled Content' block. This allows users easily to restrict the content after it is created. When transforming one of these blocks to the inverse one, a wrapper is not created and the block is switched instead.

Second Update:

There is now a single block for all cases. The user can select between different options by using a dropdown. It also has a new option which restricts the content to users which completed a course.
Since there wasn't an intuitive option to remove the restriction once the block is created, I also added an option to the drop down menu which removes the 'Restrict content' block. Basically it replaces the block whith its inner blocks
I have considered the suggestions in this comment but I decided against them for the following reasons:
- The toolbar should follow gutenberg's minimalistic approach so any not absolutely necessary text should be avoided. The ideal way to do this would be to have the selected icon on the toolbar and the options on the dropdown should be a button with the icon and a few words, similar with the rest of the dropdown menus. Additionally this would require more time to implement.
- I used text only for now to avoid the extra work of creating new icons.
- Since the button can be considered as a title too, I think that we don't need any extra indicator to explain that the content will be hidden. We can revise this if users find the block confusing.

Testing instructions

In a course include the new block and add some content in them.
Try the 'Enrolled Users', 'Unenrolled Users' and 'Course Completed' options and observe that the content is displayed (or not) accordingly in the frontend.
Try selecting multiple blocks and transform them to a 'Restrict content' block.
Try removing the restriction from a block.

gikaragia · 2020-12-14T11:33:46Z

includes/blocks/class-sensei-lesson-blocks.php

@@ -0,0 +1,67 @@
+<?php


Written this class as part of my investigation of adding the blocks to the lesson page. Happy to remove it since it is unused.

I think we could remove this since it's being worked in the other PRs of the lesson blocks :)

donnapep · 2020-12-14T12:36:58Z

Dropping a quick note that this one should go through a design review before being merged. Making a note to do that this week.

yscik · 2020-12-14T13:07:16Z

Nice!

A few things that would be good to have in this:

Add block transform to wrap any block in Enrolled/Unenrolled. This way the user can group existing blocks into a restricted block. This probably also covers switching Enrolled to Unenrolled and vice-versa.
Full/wide alignment options do not work inside these blocks. Maybe they could be always full-width? Or have alignment options, but could be cleaner if they are just layout-agnostic, if it's possible.

yscik · 2020-12-14T13:24:59Z

Design-wise, I think the main thing here is a way to indicate in the editor when content is restricted. This is kind of a wider issue of making a parent block more visible, that also came up with the course outline block, and will hopefully be handled by Gutenberg at some point. Until then, we should roll our own solution, but it's worth a dedicated PR.

The core Gallery block already selects both the container an the inner block:

Jetpack's Repeat Visitor block has a note, but it's unclear where the block ends:

I also explored some options in Conditional Sections for Course Enrollment Blocks (p6rkRX-1Dd-p2):

Outline and labels:

Sections:

alexsanford · 2020-12-14T15:17:59Z

Dropping a quick note that this one should go through a design review before being merged.

cc @pablohoneyhoney

gikaragia · 2020-12-14T18:14:24Z

Nice!

A few things that would be good to have in this:

* Add block transform to wrap any block in Enrolled/Unenrolled. This way the user can group existing blocks into a restricted block. This probably also covers switching Enrolled to Unenrolled and vice-versa.

* Full/wide alignment options do not work inside these blocks. Maybe they could be always full-width? Or have alignment options, but could be cleaner if they are just layout-agnostic, if it's possible.

Great ideas! Added transforms and alignment options (following the group block).

yscik

Code is looking good, just a few notes:

yscik · 2020-12-15T12:39:34Z

assets/blocks/restricted-content/index.js

+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ '*' ],
+			__experimentalConvert: ( blocks ) => {


There is a transform(attributes, innerBlocks) function as a stable API, any reason this one is used?

Yes transform includes the attributes and inner blocks only but we need the plugin name which is provided by convert. It also supports better multiple selections. It seems to be the plan to deprecate transform in favor of convert so I thought that it is safe enough to use.

assets/blocks/restricted-content/enrolled/block.json

includes/blocks/class-sensei-course-blocks.php

yscik · 2020-12-15T12:51:00Z

assets/blocks/restricted-content/index.js

+	title: __( 'Unenrolled Content', 'sensei-lms' ),
+	description: __(
+		'Content inside this container block will be displayed to unenrolled users only.',


I don't think we use unenrolled anywhere, something like ..users not enrolled might sound better.

Fixed in 94e3470. I don't like unenrolled too but couldn't find a better alternative. Hoping for a better recommendation by the design review cc @donnapep

renatho

Cool! I think this feature will be very useful! Did you also think about the option to create a single block with multiple states as a setting (enrolled, unenrolled, course completed...)?

For the design meeting, maybe would be nice to think about the unenrolled icon too. The open padlock gives a sensation that it is unlocked for any user (although the title says clearly the block purpose).

cc @donnapep

assets/blocks/sensei-single-course-blocks.js.js

gikaragia · 2020-12-16T17:28:18Z

Cool! I think this feature will be very useful! Did you also think about the option to create a single block with multiple states as a setting (enrolled, unenrolled, course completed...)?

Yep I considered it but thought that separate blocks are probably more easy to understand.

pablohoneyhoney · 2020-12-18T15:19:38Z

While the use case makes sense, it'd be better to think of this as an implementation that shares paradigms to similar cases like Pay Wall in Dotcom.

@alexsanford worth connecting with @fditrapani and @artpi, and more recently @apeatling
Some context https://heytimmyneutron.wordpress.com/2020/03/04/premium-content-block-i3/
I haven't found related issues.

Additionally, it's more natural to think of the premium/extra content as the block to be added, rather than creating a paradox of rolled/unrolled. So the creator has the clarity that in order to add special content, they need to add the Premium (or whatever the right term is) block.

alexsanford · 2020-12-18T15:49:50Z

shares paradigms to similar cases like Pay Wall in Dotcom.

Good point, the "Premium Content" block on dotcom seems like a good place from which to draw inspiration.

Additionally, it's more natural to think of the premium/extra content as the block to be added, rather than creating a paradox of rolled/unrolled.

I think both paradigms are needed. A concrete example that came up when building WP Courses was the need to have sales copy on the Course page that only displays for non-enrolled users.

Note that the Premium Content block has this capability; the "Visitor View" is a fully editable container. Perhaps it would make sense to do something similar, having a "Visitor View" and "Learner View"?

yscik · 2020-12-18T16:31:53Z

The content for Enrolled/unenrolled users is not necessarily connected — someone could just want to hide the outline to guest users, or add some extra content, like a sales copy, or a welcome message. I wouldn't push this in the direction where the content is toggled based on a state.

We can merge these into a single Restricted block, with a setting on who can see it:

I think the main challenge here is to indicate the visibility of these blocks when they are not selected, so the user can have a better overview of what's in the post. Even just a subtle icon would help:

renatho

It works well, and from the code perspective, it looks good to me!
I added a few comments, but nothing critical.

Before merging, it worths it to wait for UX/product feedback.

I investigated to possibly add the blocks to the single lesson page too. Currently in the single lesson template we don't show the content at all when the user is not enrolled. For this reason we should probably wait until we drop the single lesson template to see if it fits to add these blocks.

Nice! When we can, I think it would be nice to use this block in the lessons too, and maybe in the quizzes.

assets/blocks/restricted-content/block.json

renatho · 2021-01-15T19:57:04Z

includes/blocks/class-sensei-lesson-blocks.php

@@ -0,0 +1,67 @@
+<?php


I think we could remove this since it's being worked in the other PRs of the lesson blocks :)

includes/blocks/class-sensei-course-outline-block.php

assets/blocks/restricted-content/settings.js

yscik · 2021-01-18T15:32:10Z

One minor thing, the toolbar button and dropdown should be left aligned, and have no extra spacing/fixed width. It's fine if the width changes when the user selects something else.

gikaragia · 2021-01-20T11:54:10Z

Otherwise, I think this is good to go for a first iteration. I didn't do any code review, do we still have any outstanding questions there? Are there any design or UX questions that we need more input on?

There were Peter's comments about the popover but these should be solved as with the latest rebase I switched to using the common one introduced in #3904.

alexsanford

Tested and works well, code LGTM! Note that I used the Github feature to merge the latest from feature/lessons-block into this branch.

gikaragia requested a review from a team December 14, 2020 11:32

gikaragia commented Dec 14, 2020

View reviewed changes

gikaragia force-pushed the add/enrolled-content-block branch from 15291b3 to 98c0273 Compare December 14, 2020 11:34

gikaragia force-pushed the add/enrolled-content-block branch from e575da4 to 9afe9e7 Compare December 14, 2020 13:47

yscik reviewed Dec 15, 2020

View reviewed changes

gikaragia force-pushed the add/enrolled-content-block branch from 6dbfd63 to 23072f1 Compare December 15, 2020 15:41

renatho reviewed Dec 16, 2020

View reviewed changes

assets/blocks/sensei-single-course-blocks.js.js Outdated Show resolved Hide resolved

donnapep added the [Status] Needs Design Requires design feedback label Dec 17, 2020

alexsanford added [Status] Needs Design Review and removed [Status] Needs Design Requires design feedback labels Dec 18, 2020

gikaragia force-pushed the add/enrolled-content-block branch from d3605de to 18eb971 Compare January 7, 2021 11:35

gikaragia requested review from a team, renatho and yscik January 11, 2021 16:09

gikaragia mentioned this pull request Jan 12, 2021

Isolate course blocks #3885

Merged

renatho previously approved these changes Jan 15, 2021

View reviewed changes

gikaragia dismissed renatho’s stale review via e259799 January 18, 2021 13:24

gikaragia requested a review from renatho January 18, 2021 13:30

gikaragia force-pushed the add/enrolled-content-block branch from 254ed67 to 216adca Compare January 18, 2021 15:08

gikaragia force-pushed the add/enrolled-content-block branch from 216adca to 6f04c7a Compare January 18, 2021 17:22

gikaragia added 10 commits January 20, 2021 10:38

Add an option which unwraps the inner blocks

ca76cbd

Handle hiding content in the frontend

2e56da2

Remove extra argument and dont add menu controls when they don't exist

0db1833

Rename method

40a6ba1

Use arrow function

e086e00

Rename attribute to restrictionType

abeee6c

Add group block classes to restrict content block

68da872

Update restricted content block descriptions

79bf06c

Rename restrict content block

c4b9691

Correct block description

8a91225

gikaragia force-pushed the add/enrolled-content-block branch from 34a0307 to 8a91225 Compare January 20, 2021 08:39

gikaragia changed the base branch from master to add/toolbar-dropdown January 20, 2021 08:40

gikaragia added 2 commits January 20, 2021 10:44

Remove empty line

acf6370

Switch to using ToolbarDropdown component

5e7af97

Add restricted content block to tracks

45e13c3

gikaragia requested a review from alexsanford January 21, 2021 09:37

Base automatically changed from add/toolbar-dropdown to feature/lessons-block January 21, 2021 13:37

Merge branch 'feature/lessons-block' into add/enrolled-content-block

23e1f9a

alexsanford approved these changes Jan 21, 2021

View reviewed changes

gikaragia added 2 commits January 21, 2021 20:28

Merge branch 'feature/lessons-block' into add/enrolled-content-block

b91a209

Merge branch 'feature/lessons-block' into add/enrolled-content-block

7af05bc

gikaragia added this to the 3.8.0 milestone Jan 21, 2021

gikaragia added [Type] Enhancement and removed [Status] Needs Design Review labels Jan 21, 2021

gikaragia merged commit 17a321d into feature/lessons-block Jan 21, 2021

donnapep deleted the add/enrolled-content-block branch January 25, 2021 18:50

donnapep changed the title ~~Add restricted content blocks~~ Add Restricted Course Content block Jan 25, 2021

renatho mentioned this pull request Jan 28, 2021

Update blocks architecture #3928

Merged

donnapep mentioned this pull request Feb 5, 2021

Add a way to add specific content for enrolled or not enrolled users to the course page #3262

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Restricted Course Content block #3849

Add Restricted Course Content block #3849

gikaragia commented Dec 14, 2020 •

edited

Loading

gikaragia Dec 14, 2020

renatho Jan 15, 2021

donnapep commented Dec 14, 2020

yscik commented Dec 14, 2020

yscik commented Dec 14, 2020

alexsanford commented Dec 14, 2020

gikaragia commented Dec 14, 2020

yscik left a comment •

edited

Loading

yscik Dec 15, 2020

gikaragia Dec 15, 2020 •

edited

Loading

yscik Dec 15, 2020

gikaragia Dec 15, 2020

renatho left a comment

gikaragia commented Dec 16, 2020 •

edited

Loading

pablohoneyhoney commented Dec 18, 2020 •

edited

Loading

alexsanford commented Dec 18, 2020

yscik commented Dec 18, 2020

renatho left a comment

renatho Jan 15, 2021

yscik commented Jan 18, 2021

gikaragia commented Jan 20, 2021

alexsanford left a comment

Add Restricted Course Content block #3849

Add Restricted Course Content block #3849

Conversation

gikaragia commented Dec 14, 2020 • edited Loading

Changes proposed in this Pull Request

Testing instructions

gikaragia Dec 14, 2020

Choose a reason for hiding this comment

renatho Jan 15, 2021

Choose a reason for hiding this comment

donnapep commented Dec 14, 2020

yscik commented Dec 14, 2020

yscik commented Dec 14, 2020

alexsanford commented Dec 14, 2020

gikaragia commented Dec 14, 2020

yscik left a comment • edited Loading

Choose a reason for hiding this comment

yscik Dec 15, 2020

Choose a reason for hiding this comment

gikaragia Dec 15, 2020 • edited Loading

Choose a reason for hiding this comment

yscik Dec 15, 2020

Choose a reason for hiding this comment

gikaragia Dec 15, 2020

Choose a reason for hiding this comment

renatho left a comment

Choose a reason for hiding this comment

gikaragia commented Dec 16, 2020 • edited Loading

pablohoneyhoney commented Dec 18, 2020 • edited Loading

alexsanford commented Dec 18, 2020

yscik commented Dec 18, 2020

renatho left a comment

Choose a reason for hiding this comment

renatho Jan 15, 2021

Choose a reason for hiding this comment

yscik commented Jan 18, 2021

gikaragia commented Jan 20, 2021

alexsanford left a comment

Choose a reason for hiding this comment

gikaragia commented Dec 14, 2020 •

edited

Loading

yscik left a comment •

edited

Loading

gikaragia Dec 15, 2020 •

edited

Loading

gikaragia commented Dec 16, 2020 •

edited

Loading

pablohoneyhoney commented Dec 18, 2020 •

edited

Loading