Add facilitator note #3052
+501
−27
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| { | ||
| "$schema": "https://schemas.wp.org/trunk/block.json", | ||
| "apiVersion": 2, | ||
| "name": "wporg-learn/lesson-facilitator-notes", | ||
| "version": "0.1.0", | ||
| "title": "Lesson Facilitator Notes", | ||
| "category": "widgets", | ||
| "icon": "text", | ||
| "description": "Shows the facilitator notes for a lesson", | ||
| "usesContext": [], | ||
| "attributes": { | ||
| "lessonPlanId": { | ||
| "type": "number", | ||
| "default": null | ||
| }, | ||
| "lessonPlanContent": { | ||
| "type": "string", | ||
| "default": "" | ||
| }, | ||
| "lessonPlanTitle": { | ||
| "type": "string", | ||
| "default": "" | ||
| } | ||
| }, | ||
| "textdomain": "wporg-learn", | ||
| "editorScript": "file:./index.js", | ||
| "viewScript": "file:./view.js", | ||
| "style": "file:./style-index.css" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { registerBlockType } from '@wordpress/blocks'; | ||
| import { RichText, useBlockProps } from '@wordpress/block-editor'; | ||
| import { Button, ComboboxControl, Icon, Spinner } from '@wordpress/components'; | ||
| import { check } from '@wordpress/icons'; | ||
| import { useEffect, useState } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import apiFetch from '@wordpress/api-fetch'; | ||
| import { debounce } from 'lodash'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import metadata from './block.json'; | ||
| import './style.scss'; | ||
|
|
||
| registerBlockType( metadata.name, { | ||
| edit: function Edit( { attributes, setAttributes } ) { | ||
| const { lessonPlanId, lessonPlanContent, lessonPlanTitle } = attributes; | ||
| const [ searchResults, setSearchResults ] = useState( [] ); | ||
| const [ isExpanded, setIsExpanded ] = useState( false ); | ||
| const [ isSaving, setIsSaving ] = useState( false ); | ||
| const [ saveSuccess, setSaveSuccess ] = useState( null ); | ||
| const [ errorMessage, setErrorMessage ] = useState( null ); | ||
|
|
||
| useEffect( () => { | ||
| // Fetch the initial lesson plan options if lessonPlanId is set | ||
| if ( lessonPlanId ) { | ||
| apiFetch( { | ||
| path: `/wp/v2/lesson-plan/${ lessonPlanId }`, | ||
| } ).then( ( plan ) => { | ||
| setSearchResults( [ | ||
| { | ||
| value: plan.id, | ||
| label: plan.title.rendered, | ||
| }, | ||
| ] ); | ||
| } ); | ||
| } | ||
| }, [] ); | ||
|
|
||
| const fetchLessonPlanContent = ( id ) => { | ||
| apiFetch( { path: `/wp/v2/lesson-plan/${ id }` } ).then( ( plan ) => { | ||
| const cleanedContent = plan.content.rendered.replace( /\s+/g, ' ' ).trim(); | ||
| setAttributes( { | ||
| lessonPlanContent: cleanedContent, | ||
| lessonPlanTitle: plan.title.rendered, | ||
| } ); | ||
| } ); | ||
| }; | ||
|
|
||
| const fetchLessonPlans = debounce( ( searchTerm ) => { | ||
| apiFetch( { | ||
| path: `/wp/v2/lesson-plan?search=${ encodeURIComponent( searchTerm ) }&per_page=10`, | ||
| } ).then( ( plans ) => { | ||
| if ( plans.length === 0 ) { | ||
| return; | ||
| } | ||
| const options = plans.map( ( plan ) => ( { | ||
| value: plan.id, | ||
| label: plan.title.rendered, | ||
| } ) ); | ||
| setSearchResults( options ); | ||
| } ); | ||
| }, 300 ); | ||
|
|
||
| const saveLessonPlanContent = () => { | ||
| setIsSaving( true ); | ||
| setSaveSuccess( null ); | ||
| apiFetch( { | ||
| path: `/wp/v2/lesson-plan/${ lessonPlanId }`, | ||
| method: 'POST', | ||
| data: { | ||
| content: lessonPlanContent, | ||
| title: lessonPlanTitle, | ||
| }, | ||
| } ) | ||
| .then( () => { | ||
| setIsSaving( false ); | ||
| setSaveSuccess( true ); | ||
| setTimeout( () => setSaveSuccess( null ), 2000 ); | ||
| } ) | ||
| .catch( ( error ) => { | ||
| setIsSaving( false ); | ||
| setSaveSuccess( false ); | ||
| setErrorMessage( error.message || __( 'An error occurred while saving', 'wporg-learn' ) ); | ||
| } ); | ||
| }; | ||
|
|
||
| const getSaveButton = () => { | ||
| if ( isSaving ) { | ||
| return <Spinner />; | ||
| } | ||
| if ( saveSuccess === true ) { | ||
| return <Icon icon={ check } />; | ||
| } | ||
| if ( saveSuccess === false ) { | ||
| return errorMessage; | ||
| } | ||
| return __( 'Save Changes', 'wporg-learn' ); | ||
| }; | ||
|
|
||
| const getSaveButtonClassName = () => { | ||
| if ( saveSuccess === true ) { | ||
| return 'is-success'; | ||
| } | ||
| if ( saveSuccess === false ) { | ||
| return 'is-failure'; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div { ...useBlockProps() }> | ||
| <ComboboxControl | ||
| label={ __( 'Select Lesson Plan', 'wporg-learn' ) } | ||
| value={ lessonPlanId || '' } | ||
| options={ searchResults } | ||
| onFilterValueChange={ ( inputValue ) => { | ||
| if ( inputValue ) { | ||
| fetchLessonPlans( inputValue ); | ||
| } | ||
| } } | ||
| onChange={ ( newValue ) => { | ||
| setAttributes( { lessonPlanId: newValue } ); | ||
| if ( newValue ) { | ||
| fetchLessonPlanContent( newValue ); | ||
| } | ||
| } } | ||
| placeholder={ __( 'Search for a lesson plan…', 'wporg-learn' ) } | ||
| /> | ||
| { lessonPlanId && ( | ||
| <> | ||
| <RichText | ||
| tagName="h1" | ||
| value={ lessonPlanTitle } | ||
| onChange={ ( newTitle ) => setAttributes( { lessonPlanTitle: newTitle } ) } | ||
| /> | ||
| <Button variant="secondary" onClick={ () => setIsExpanded( ! isExpanded ) }> | ||
| { isExpanded | ||
| ? __( 'Collapse Content', 'wporg-learn' ) | ||
| : __( 'Expand Content', 'wporg-learn' ) } | ||
| </Button> | ||
| <RichText | ||
| className={ isExpanded ? 'is-expanded' : 'is-collapsed' } | ||
| value={ lessonPlanContent } | ||
| onChange={ ( newContent ) => setAttributes( { lessonPlanContent: newContent } ) } | ||
| /> | ||
| </> | ||
| ) } | ||
| { lessonPlanId && ( | ||
| <Button | ||
| variant="primary" | ||
| onClick={ saveLessonPlanContent } | ||
| disabled={ isSaving } | ||
| className={ getSaveButtonClassName() } | ||
| > | ||
| { getSaveButton() } | ||
| </Button> | ||
| ) } | ||
| </div> | ||
| ); | ||
| }, | ||
| save: () => null, | ||
| } ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <?php | ||
| /** | ||
| * Block Name: Lesson Facilitator Notes | ||
| * Description: Displays the facilitator notes for a lesson. | ||
| * | ||
| * @package wporg | ||
| */ | ||
|
|
||
| namespace WordPressdotorg\Theme\Learn_2024\Lesson_Facilitator_Notes; | ||
|
|
||
| use Error; | ||
| use function WPOrg_Learn\{get_build_path}; | ||
|
|
||
| defined( 'WPINC' ) || die(); | ||
|
|
||
| /** | ||
| * Actions and filters. | ||
| */ | ||
| add_action( 'init', __NAMESPACE__ . '\init' ); | ||
|
|
||
| /** | ||
| * Add a script to control elements in the sensei lesson facilitator notes pattern. | ||
| * | ||
| * The dependencies are autogenerated in block.json, and can be read with | ||
| * `wp_json_file_decode` & `register_block_script_handle. | ||
| */ | ||
| function init() { | ||
| register_block_type( | ||
| dirname( dirname( __DIR__ ) ) . '/build/lesson-facilitator-notes', | ||
| array( | ||
| 'render_callback' => __NAMESPACE__ . '\render', | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Render the block content. | ||
| * | ||
| * @param array $attributes Block attributes. | ||
| * @param string $content Block default content. | ||
| * @param WP_Block $block Block instance. | ||
| * | ||
| * @throws Error If the script asset file is not readable. | ||
| * @return string Returns the block markup. | ||
| */ | ||
| function render( $attributes, $content, $block ) { | ||
| $script_asset_path = get_stylesheet_directory() . '/build/lesson-facilitator-notes/index.asset.php'; | ||
| if ( ! is_readable( $script_asset_path ) ) { | ||
| throw new Error( | ||
| 'You need to run `yarn start` or `yarn run build` for the "wporg-learn/lesson-facilitator-notes" block first.' | ||
| ); | ||
| } | ||
|
|
||
| if ( empty( $attributes['lessonPlanId'] ) ) { | ||
| return; | ||
| } | ||
|
|
||
| $lesson_plan = get_post( $attributes['lessonPlanId'] ); | ||
|
|
||
| if ( ! $lesson_plan ) { | ||
| return; | ||
| } | ||
|
|
||
| $lesson_plan_url = get_permalink( $lesson_plan->ID ); | ||
| return sprintf( | ||
| // If changing classname here, you'd also need to update it in style.scss and view.js. | ||
| '<div class="wporg-learn-lesson-facilitator-notes-label"><a href="%s">%s</a></div>', | ||
| esc_url( $lesson_plan_url ), | ||
| esc_html__( 'Facilitator Note', 'wporg-learn' ) | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| .wp-block-wporg-learn-lesson-facilitator-notes { | ||
| .components-base-control__field { | ||
| margin-bottom: var(--wp--preset--spacing--10); | ||
| } | ||
|
|
||
| .block-editor-rich-text__editable { | ||
| white-space: unset !important; | ||
| overflow: scroll; | ||
| border: 1px solid var(--wp--preset--color--charcoal-5); | ||
| margin: var(--wp--preset--spacing--10) 0; | ||
| padding: var(--wp--preset--spacing--10); | ||
|
|
||
| &.is-expanded { | ||
| max-height: none; | ||
| } | ||
|
|
||
| &.is-collapsed { | ||
| max-height: 300px; | ||
| } | ||
| } | ||
|
|
||
| h1.block-editor-rich-text__editable { | ||
| padding: 0 var(--wp--preset--spacing--10); | ||
| } | ||
|
|
||
| button { | ||
| min-width: 118px; | ||
| justify-content: center; | ||
|
|
||
| &.is-success { | ||
| background-color: var(--wp--custom--color--green-50) !important; | ||
|
|
||
| &:hover { | ||
| opacity: 0.9; | ||
| } | ||
| } | ||
|
|
||
| &.is-failure { | ||
| background-color: var(--wp--preset--color--vivid-red) !important; | ||
|
|
||
| &:hover { | ||
| opacity: 0.9; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .components-spinner { | ||
| margin-top: 0; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| document.addEventListener( 'DOMContentLoaded', function () { | ||
| const facilitatorNotes = document.querySelector( '.wporg-learn-lesson-facilitator-notes-label' ); | ||
| const exitCourse = document.querySelector( '.wp-block-sensei-lms-exit-course' ); | ||
| const exitLesson = document.querySelector( '.wp-block-sensei-lms-exit-lesson' ); | ||
| const sidebarToggle = document.querySelector( '.wporg-learn-lesson-sidebar-toggle-wrapper' ); | ||
|
|
||
| // for desktop view | ||
| if ( facilitatorNotes && exitCourse ) { | ||
| exitCourse.insertAdjacentElement( 'beforebegin', facilitatorNotes.cloneNode( true ) ); | ||
| } | ||
|
|
||
| // for mobile view | ||
| if ( facilitatorNotes && sidebarToggle ) { | ||
| sidebarToggle.insertAdjacentElement( 'beforebegin', facilitatorNotes.cloneNode( true ) ); | ||
| } | ||
|
|
||
| // for standalone lesson | ||
| if ( facilitatorNotes && exitLesson ) { | ||
| exitLesson.insertAdjacentElement( 'beforebegin', facilitatorNotes.cloneNode( true ) ); | ||
| } | ||
|
|
||
| facilitatorNotes.remove(); | ||
| } ); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had a lot of trouble finding specific lesson plans in my local site - I was typing exact keywords in the lesson title, but nothing would show up. I think because this search is default WP search, so it's returning when the keywords match in title or content, but the combobox control only matches results on title.
So the API is limited to 10 items, and my search "block directory" returned more than 10 items, pushing the page I wanted out of the options. And nothing would show up when I typed, because "block directory" is not a match in any of the results I had:
Maybe increase the result number? Or see if you can adjust the search for this endpoint to only do title searches.
You could preload the ID/title pairs, and not use an API request for this at all. With 150 published lesson plans, it shouldn't be that slow. Or if you'd rather not do that on the server side, fire off an API request to get all the lesson plans when the block loads (instead of just
if ( lessonPlanId )).