Add Lesson Properties block

[donnapep]

Changes proposed in this Pull Request

Adds a Lesson Properties block for lessons that displays lesson length and difficulty.

• The block saves attributes to post meta so won't have any content in the editor.
• I encountered the following error trying to save the block. It appears to be the same as this Gutenberg issue. The fix was to save 0 instead of null for _quiz_has_questions. I think this was more of a nice-to-have to keep the database cleaner, but let me know if I got that wrong:

• I encountered the following error when saving on Divi. The fix was to also register the _lesson_course post meta:

• Fixed NaN displaying when the number input control was cleared. It's now set to its minimum value, if applicable, or 0. (Also applicable to Grading and Number of Questions fields for quizzes).
• The Lesson Information metabox is not displayed when this block is present.
• The block is added to the lesson template by default.

Testing instructions

• Create a new lesson and add the Lesson Properties block.
• Try setting different values for Length and Difficulty.
• When length is 0 the length should not be displayed on the frontend (it's still displayed in the editor).
• When difficulty is None the difficulty should not be displayed on the frontend (it's still displayed in the editor).
• Ensure the Lesson Information metabox is not shown.
• Remove the block and ensure the Lesson Information metabox is shown.

Screenshots

To Do

• Block icon
• Design review

[yscik]

Should we keep the name Lesson Information for this block? I think that's more accessible & still fits well.

Some additional features for the future that could be nice:

• Allow hours for lesson length?
• Add a filter to customize Complexity options. Or maybe some UI?

[donnapep]

Should we keep the name Lesson Information for this block?

Yes, perhaps. I originally had Lesson Details but changed it. I'm not sure the average person will know what "metadata" is. I'll solicit other ideas in next week's design call and make a decision then.

Some additional features for the future that could be nice

Next virtual meetup perhaps. 😃

[alexsanford]

I'm having a problem testing this. The controls in the sidebar don't seem to work for me. When I try to change the Length or Complexity, the value doesn't change at all. I tried disabling other plugins, tried with and without the Gutenberg plugin, etc. and couldn't find the culprit. Also tried on Firefox and Brave, same thing. Any ideas?

I see these errors in the console, but they also seem to happen on the Course page, so I'm not sure they are specific to this block. Controls on other blocks are working.

Warning: Legacy context API has been detected within a strict-mode tree.

Warning: Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

Warning: Legacy context API has been detected within a strict-mode tree.

Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

---

Unrelatedly, I wonder if we should do something special when the block is added to an existing Lesson and the Length and Complexity are already set to 0 and None? The user experience is a bit weird since the block doesn't display anything, and it's not immediately obvious why that is.

I wonder, actually, if it would make sense to have the controls in the toolbar? 🤔

[donnapep]

I'm having a problem testing this.

I introduced a bug when fixing linter issues. All good now.

Unrelatedly, I wonder if we should do something special when the block is added to an existing Lesson and the Length and Complexity are already set to 0 and None?

Yeah, we covered this in the design review so I'll be applying those changes.

I wonder, actually, if it would make sense to have the controls in the toolbar?

I think Pablo said the minutes and complexity should be editable right inside the block. I won't be tackling that in this first iteration though.

[donnapep]

Some other options for the block name:

• Lesson Attributes
• Lesson Properties
• Lesson Traits
• Lesson Characteristics
• Lesson Qualities
• Lesson Aspects

Not sure which to choose! 😅

[alexsanford]

cc @sruj09 @pablohoneyhoney re: naming ^

My vote would be for "Lesson Properties". Seems pretty clear and flexible, and we can always change it in a later version if desired.

[sruj09]

I like Lesson Information but Lesson Properties works too!

[donnapep]

@Automattic/evergreen This one still needs a block icon but is ready for review now. 🥂

[yscik]

Maybe something time-ish? Or just an i?

Or a nice meta-document:

[yscik]

Looks good! A few suggestions, plus I pushed a small fix for the number control component, it should pick up the proper editor styles now and have full width.

[donnapep]

@yscik Re: icons. I think I like the info icon one the best.

[gikaragia]

Looks great! There is an issue in firefox where the number input buttons are barely clickable caused by padding but this seems like a firefox bug.

[donnapep]

@yscik Do you have an SVG for the block icon? I'm partial to the info one but the meta document one is also good.

[yscik]

Here is the icon SVG cleaned up, file/code:

icon-sensei-lesson-properties.svg.zip

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M16.181 17.381a7.61 7.61 0 01-2.13.133L15.778 20H18l-1.819-2.619zm-5.479-.953a7.712 7.712 0 01-2.12-1.928H5.5v-9h2.759A7.793 7.793 0 019.523 4H4v12h4.778L6 20h2.222l2.48-3.572z"/>
  <path d="M15.541 8.944h-1.5v3.997h1.5V8.944zM15.541 7.944h-1.5V6.55h1.5v1.395z"/>
  <path d="M20.79 9.768c0 3.425-2.714 6.269-6.145 6.269-3.43 0-6.145-2.844-6.145-6.269 0-3.424 2.714-6.268 6.145-6.268 3.43 0 6.145 2.844 6.145 6.268zm-6.145 4.769c2.565 0 4.645-2.135 4.645-4.769C19.29 7.135 17.21 5 14.645 5 12.08 5 10 7.135 10 9.768c0 2.634 2.08 4.769 4.645 4.769z"/>
</svg>

[gikaragia]

🚢