From 689dce7676072c8cf71e24b900c516fabdfbdd9f Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Mon, 14 Oct 2024 16:46:12 +0900 Subject: [PATCH 01/26] Restore the first breadcrumb to 'Learn WordPress' --- wp-content/themes/pub/wporg-learn-2024/functions.php | 5 ----- 1 file changed, 5 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php index 9a9526cb1..0d31f921e 100644 --- a/wp-content/themes/pub/wporg-learn-2024/functions.php +++ b/wp-content/themes/pub/wporg-learn-2024/functions.php @@ -443,11 +443,6 @@ function get_learning_pathway_level_content( $learning_pathway ) { * @return array The modified breadcrumbs. */ function set_site_breadcrumbs( $breadcrumbs ) { - if ( isset( $breadcrumbs[0] ) ) { - // Change the title of the first breadcrumb to 'Home'. - $breadcrumbs[0]['title'] = 'Home'; - } - $post_id = get_the_ID(); $post_type = get_post_type(); From b82ac05c0e0d50580454a5982931aefeddab5f43 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Mon, 14 Oct 2024 17:16:08 +0900 Subject: [PATCH 02/26] Don't render separator bar when on mobile view --- .../wporg-learn-2024/src/style/_sensei.scss | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss index ad9f1862d..21f0ec3e4 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss @@ -30,14 +30,16 @@ body.sensei { .wp-block-sensei-lms-exit-course { margin-left: var(--wp--preset--spacing--30); - &::before { - content: ""; - display: inline-block; - height: 100%; - border-right: 1px solid var(--sensei-course-progress-bar-color); - position: absolute; - margin-left: -30px; - top: 0; + @media (min-width: 783px) { + &::before { + content: ""; + display: inline-block; + height: 100%; + border-right: 1px solid var(--sensei-course-progress-bar-color); + position: absolute; + margin-left: -30px; + top: 0; + } } } } From 6b591035e9e026369f1631130b1ee0bb096e1997 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Wed, 4 Dec 2024 22:58:58 +0900 Subject: [PATCH 03/26] Add Lesson Facilitator Notes Block --- .../themes/pub/wporg-learn-2024/functions.php | 1 + .../src/lesson-facilitator-notes/block.json | 20 +++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php index 0d31f921e..b7a7377e1 100644 --- a/wp-content/themes/pub/wporg-learn-2024/functions.php +++ b/wp-content/themes/pub/wporg-learn-2024/functions.php @@ -14,6 +14,7 @@ require_once __DIR__ . '/src/learning-pathway-cards/index.php'; require_once __DIR__ . '/src/learning-pathway-header/index.php'; require_once __DIR__ . '/src/lesson-course-info/index.php'; +require_once __DIR__ . '/src/lesson-facilitator-notes/index.php'; require_once __DIR__ . '/src/lesson-grid/index.php'; require_once __DIR__ . '/src/lesson-standalone/index.php'; require_once __DIR__ . '/src/search-results-context/index.php'; diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json new file mode 100644 index 000000000..b90112eee --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json @@ -0,0 +1,20 @@ +{ + "$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 + } + }, + "textdomain": "wporg-learn", + "editorScript": "file:./index.js", + "style": "file:./style-index.css" +} From aceed8140c52dea5a253864cf2f1c835bf767f83 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Wed, 4 Dec 2024 22:59:12 +0900 Subject: [PATCH 04/26] Add editor script --- .../src/lesson-facilitator-notes/index.js | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js new file mode 100644 index 000000000..c8486dff3 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js @@ -0,0 +1,78 @@ +/** + * WordPress dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; +import { RichText, useBlockProps } from '@wordpress/block-editor'; +import { useSelect } from '@wordpress/data'; +import { Button, SelectControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import apiFetch from '@wordpress/api-fetch'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import './style.scss'; + +registerBlockType( metadata.name, { + edit: function Edit( { attributes, setAttributes } ) { + const { lessonPlanId, lessonPlanContent } = attributes; + + const lessonPlans = useSelect( + ( select ) => select( 'core' ).getEntityRecords( 'postType', 'lesson-plan', { per_page: -1 } ), + [] + ); + + const options = lessonPlans + ? lessonPlans.map( ( plan ) => ( { + 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 } ); + } ); + }; + + const saveLessonPlanContent = () => { + apiFetch( { + path: `/wp/v2/lesson-plan/${ lessonPlanId }`, + method: 'POST', + data: { content: lessonPlanContent }, + } ).then( () => { + // Optionally, you can show a success message or update the UI + } ); + }; + + return ( +
+ { + setAttributes( { lessonPlanId: parseInt( newValue, 10 ) } ); + fetchLessonPlanContent( newValue ); + } } + /> + { lessonPlanId && ( + setAttributes( { lessonPlanContent: newContent } ) } + /> + ) } + { lessonPlanId && ( + + ) } +
+ ); + }, + save: () => null, +} ); From 73b644e9f1ba0254a4b7f94fd095716cd8adb970 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Wed, 4 Dec 2024 22:59:25 +0900 Subject: [PATCH 05/26] Add front end rendering --- .../src/lesson-facilitator-notes/index.php | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php new file mode 100644 index 000000000..d128adfc8 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php @@ -0,0 +1,59 @@ + __NAMESPACE__ . '\render', + ) + ); +} + +/** + * Render the block content. + * + * @param array $attributes Block attributes. + * @param string $content Block default content. + * @param WP_Block $block Block instance. + * + * @return string Returns the block markup. + */ +function render( $attributes, $content, $block ) { + 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( + '
%s
', + esc_url( $lesson_plan_url ), + esc_html__( 'Facilitator Note', 'wporg-learn' ) + ); +} From 9457bf455a3f8217ed77157721309039905baed0 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Thu, 5 Dec 2024 18:09:17 +0900 Subject: [PATCH 06/26] Fix rich text style --- .../wporg-learn-2024/src/lesson-facilitator-notes/index.js | 1 - .../wporg-learn-2024/src/lesson-facilitator-notes/style.scss | 5 +++++ 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js index c8486dff3..8df7dac51 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js @@ -60,7 +60,6 @@ registerBlockType( metadata.name, { /> { lessonPlanId && ( setAttributes( { lessonPlanContent: newContent } ) } diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss new file mode 100644 index 000000000..98b8ce689 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss @@ -0,0 +1,5 @@ +.wp-block-wporg-learn-lesson-facilitator-notes { + .block-editor-rich-text__editable { + white-space: unset !important; + } +} From 2efb6563c54c9539509bda4a39063633e32a28d0 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Thu, 5 Dec 2024 18:15:39 +0900 Subject: [PATCH 07/26] Add error handler --- .../src/lesson-facilitator-notes/index.php | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php index d128adfc8..01714d991 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php @@ -8,6 +8,9 @@ namespace WordPressdotorg\Theme\Learn_2024\Lesson_Facilitator_Notes; +use Error; +use function WPOrg_Learn\{get_build_path}; + defined( 'WPINC' ) || die(); /** @@ -37,9 +40,17 @@ function init() { * @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; } From 1a189f35160215a5a0a16563db0b05da86d70426 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Thu, 5 Dec 2024 18:25:33 +0900 Subject: [PATCH 08/26] Fix empty content after refreshing --- .../wporg-learn-2024/src/lesson-facilitator-notes/block.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json index b90112eee..d4171556f 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json @@ -12,6 +12,10 @@ "lessonPlanId": { "type": "number", "default": null + }, + "lessonPlanContent": { + "type": "string", + "default": "" } }, "textdomain": "wporg-learn", From b3da315c633436e283b9df19ca7329aa02abdea3 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Thu, 5 Dec 2024 20:21:27 +0900 Subject: [PATCH 09/26] Fix the error message when selecting 'Select a plan' --- .../src/lesson-facilitator-notes/index.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js index 8df7dac51..295632e54 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js @@ -51,11 +51,13 @@ registerBlockType( metadata.name, {
{ - setAttributes( { lessonPlanId: parseInt( newValue, 10 ) } ); - fetchLessonPlanContent( newValue ); + setAttributes( { lessonPlanId: newValue } ); + if ( newValue ) { + fetchLessonPlanContent( newValue ); + } } } /> { lessonPlanId && ( From 5c655ca1c5e57548d2e0f0856d7feba482b019e5 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Thu, 5 Dec 2024 20:35:53 +0900 Subject: [PATCH 10/26] Change to use ComboboxControl --- .../src/lesson-facilitator-notes/index.js | 42 ++++++++++++------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js index 295632e54..ee4d98073 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js @@ -3,10 +3,11 @@ */ import { registerBlockType } from '@wordpress/blocks'; import { RichText, useBlockProps } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; -import { Button, SelectControl } from '@wordpress/components'; +import { Button, ComboboxControl } from '@wordpress/components'; +import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; +import { debounce } from 'lodash'; /** * Internal dependencies @@ -17,18 +18,7 @@ import './style.scss'; registerBlockType( metadata.name, { edit: function Edit( { attributes, setAttributes } ) { const { lessonPlanId, lessonPlanContent } = attributes; - - const lessonPlans = useSelect( - ( select ) => select( 'core' ).getEntityRecords( 'postType', 'lesson-plan', { per_page: -1 } ), - [] - ); - - const options = lessonPlans - ? lessonPlans.map( ( plan ) => ( { - value: plan.id, - label: plan.title.rendered, - } ) ) - : []; + const [ searchResults, setSearchResults ] = useState( [] ); const fetchLessonPlanContent = ( id ) => { apiFetch( { path: `/wp/v2/lesson-plan/${ id }` } ).then( ( plan ) => { @@ -37,6 +27,18 @@ registerBlockType( metadata.name, { } ); }; + const fetchLessonPlans = debounce( ( searchTerm ) => { + apiFetch( { + path: `/wp/v2/lesson-plan?search=${ encodeURIComponent( searchTerm ) }&per_page=10`, + } ).then( ( plans ) => { + const options = plans.map( ( plan ) => ( { + value: plan.id, + label: plan.title.rendered, + } ) ); + setSearchResults( options ); + } ); + }, 300 ); + const saveLessonPlanContent = () => { apiFetch( { path: `/wp/v2/lesson-plan/${ lessonPlanId }`, @@ -49,16 +51,24 @@ registerBlockType( metadata.name, { return (
- { + if ( inputValue ) { + fetchLessonPlans( inputValue ); + } else { + setSearchResults( [] ); + } + } } onChange={ ( newValue ) => { setAttributes( { lessonPlanId: newValue } ); if ( newValue ) { fetchLessonPlanContent( newValue ); } } } + placeholder={ __( 'Search for a lesson plan…', 'wporg-learn' ) } /> { lessonPlanId && ( Date: Thu, 5 Dec 2024 21:02:11 +0900 Subject: [PATCH 11/26] Show content in collapsible container --- .../src/lesson-facilitator-notes/index.js | 46 +++++++++++++++---- 1 file changed, 38 insertions(+), 8 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js index ee4d98073..9f5c28686 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js @@ -4,7 +4,7 @@ import { registerBlockType } from '@wordpress/blocks'; import { RichText, useBlockProps } from '@wordpress/block-editor'; import { Button, ComboboxControl } from '@wordpress/components'; -import { useState } from '@wordpress/element'; +import { useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; import { debounce } from 'lodash'; @@ -19,6 +19,23 @@ registerBlockType( metadata.name, { edit: function Edit( { attributes, setAttributes } ) { const { lessonPlanId, lessonPlanContent } = attributes; const [ searchResults, setSearchResults ] = useState( [] ); + const [ isExpanded, setIsExpanded ] = useState( false ); + + 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 ) => { @@ -58,8 +75,6 @@ registerBlockType( metadata.name, { onFilterValueChange={ ( inputValue ) => { if ( inputValue ) { fetchLessonPlans( inputValue ); - } else { - setSearchResults( [] ); } } } onChange={ ( newValue ) => { @@ -71,11 +86,26 @@ registerBlockType( metadata.name, { placeholder={ __( 'Search for a lesson plan…', 'wporg-learn' ) } /> { lessonPlanId && ( - setAttributes( { lessonPlanContent: newContent } ) } - /> + <> + +
+ setAttributes( { lessonPlanContent: newContent } ) } + /> +
+ ) } { lessonPlanId && ( -
- setAttributes( { lessonPlanContent: newContent } ) } - /> -
+ setAttributes( { lessonPlanContent: newContent } ) } + /> ) } { lessonPlanId && ( diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss index 98b8ce689..66dfd8756 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss @@ -1,5 +1,21 @@ .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) 0; + + &.is-expanded { + max-height: none; + } + + &.is-collapsed { + max-height: 300px; + } } } From 64335b8d149ceb579fcd352e7841a60ea40ee27c Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Thu, 5 Dec 2024 22:44:55 +0900 Subject: [PATCH 14/26] Add lessonPlanTitle --- .../src/lesson-facilitator-notes/block.json | 4 ++++ .../src/lesson-facilitator-notes/index.js | 18 ++++++++++++++---- .../src/lesson-facilitator-notes/style.scss | 6 +++++- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json index d4171556f..44fd4bb9c 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json @@ -16,6 +16,10 @@ "lessonPlanContent": { "type": "string", "default": "" + }, + "lessonPlanTitle": { + "type": "string", + "default": "" } }, "textdomain": "wporg-learn", diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js index 1d2ff47ea..e6baf7074 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js @@ -17,7 +17,7 @@ import './style.scss'; registerBlockType( metadata.name, { edit: function Edit( { attributes, setAttributes } ) { - const { lessonPlanId, lessonPlanContent } = attributes; + const { lessonPlanId, lessonPlanContent, lessonPlanTitle } = attributes; const [ searchResults, setSearchResults ] = useState( [] ); const [ isExpanded, setIsExpanded ] = useState( false ); @@ -40,7 +40,10 @@ registerBlockType( metadata.name, { const fetchLessonPlanContent = ( id ) => { apiFetch( { path: `/wp/v2/lesson-plan/${ id }` } ).then( ( plan ) => { const cleanedContent = plan.content.rendered.replace( /\s+/g, ' ' ).trim(); - setAttributes( { lessonPlanContent: cleanedContent } ); + setAttributes( { + lessonPlanContent: cleanedContent, + lessonPlanTitle: plan.title.rendered, + } ); } ); }; @@ -63,7 +66,10 @@ registerBlockType( metadata.name, { apiFetch( { path: `/wp/v2/lesson-plan/${ lessonPlanId }`, method: 'POST', - data: { content: lessonPlanContent }, + data: { + content: lessonPlanContent, + title: lessonPlanTitle, + }, } ).then( () => { // Optionally, you can show a success message or update the UI } ); @@ -90,6 +96,11 @@ registerBlockType( metadata.name, { /> { lessonPlanId && ( <> + setAttributes( { lessonPlanTitle: newTitle } ) } + /> setAttributes( { lessonPlanContent: newContent } ) } /> diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss index 66dfd8756..474d6a835 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss @@ -8,7 +8,7 @@ overflow: scroll; border: 1px solid var(--wp--preset--color--charcoal-5); margin: var(--wp--preset--spacing--10) 0; - padding: var(--wp--preset--spacing--10) 0; + padding: var(--wp--preset--spacing--10); &.is-expanded { max-height: none; @@ -18,4 +18,8 @@ max-height: 300px; } } + + h1.block-editor-rich-text__editable { + padding: 0 var(--wp--preset--spacing--10); + } } From f2c40d952909275e015b30e20b34edb79ad451a7 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Thu, 5 Dec 2024 23:37:16 +0900 Subject: [PATCH 15/26] Add success/failure handler for save --- .../src/lesson-facilitator-notes/index.js | 53 ++++++++++++++++--- .../src/lesson-facilitator-notes/style.scss | 25 +++++++++ 2 files changed, 72 insertions(+), 6 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js index e6baf7074..3c9a9f32f 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.js @@ -3,7 +3,8 @@ */ import { registerBlockType } from '@wordpress/blocks'; import { RichText, useBlockProps } from '@wordpress/block-editor'; -import { Button, ComboboxControl } from '@wordpress/components'; +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'; @@ -20,6 +21,9 @@ registerBlockType( metadata.name, { 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 @@ -63,6 +67,8 @@ registerBlockType( metadata.name, { }, 300 ); const saveLessonPlanContent = () => { + setIsSaving( true ); + setSaveSuccess( null ); apiFetch( { path: `/wp/v2/lesson-plan/${ lessonPlanId }`, method: 'POST', @@ -70,9 +76,39 @@ registerBlockType( metadata.name, { content: lessonPlanContent, title: lessonPlanTitle, }, - } ).then( () => { - // Optionally, you can show a success message or update the UI - } ); + } ) + .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 ; + } + if ( saveSuccess === true ) { + return ; + } + 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 ( @@ -114,8 +150,13 @@ registerBlockType( metadata.name, { ) } { lessonPlanId && ( - ) }
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss index 474d6a835..a07c60357 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss @@ -22,4 +22,29 @@ 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; + } } From 66377c0d8bc51a91c77bcd4a55f3c2cd09e32bb6 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Mon, 9 Dec 2024 21:44:17 +0900 Subject: [PATCH 16/26] Add icon-chevron-down --- .../themes/pub/wporg-learn-2024/assets/icon-chevron-down.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 wp-content/themes/pub/wporg-learn-2024/assets/icon-chevron-down.svg diff --git a/wp-content/themes/pub/wporg-learn-2024/assets/icon-chevron-down.svg b/wp-content/themes/pub/wporg-learn-2024/assets/icon-chevron-down.svg new file mode 100644 index 000000000..4493213c0 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/assets/icon-chevron-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From d0dc853161c7eb593f3a470c8a655db13f2b375d Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Mon, 9 Dec 2024 21:44:51 +0900 Subject: [PATCH 17/26] Add header mobile view --- .../patterns/sensei-lesson-header.php | 14 +++ .../wporg-learn-2024/src/style/_sensei.scss | 109 ++++++++++++++++-- 2 files changed, 112 insertions(+), 11 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php index 67da9358b..1ed39568a 100644 --- a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-header.php @@ -42,5 +42,19 @@ + + +
+ + + + + +
+ +
+ +
+
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss index 21f0ec3e4..749b8f8d9 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss @@ -14,6 +14,33 @@ body.sensei { --sensei-module-lesson-color: var(--wp--preset--color--charcoal-1); --sensei-lm-mobile-header-height: 60px; + @media (max-width: 782px) { + &.sensei-course-theme--sidebar-open { + .wporg-learn-facilitator-notes-label { + opacity: 1 !important; + } + + // The inner progress bar causes a 1px jitter when the sidebar is opened. + .wporg-learn-lesson-header-mobile-view { + position: relative; + top: 1px; + + .wporg-learn-lesson-sidebar-toggle-wrapper { + background-color: var(--wp--preset--color--light-grey-2) !important; + + > button { + transform: rotate(180deg) scale(1.5) !important; + } + } + } + + .sensei-course-theme__sidebar { + top: calc(var(--sensei-lm-header-height) * 2 + var(--sensei-wpadminbar-offset, 0px)) !important; + background-color: var(--wp--preset--color--light-grey-2); + } + } + } + .wp-block-sensei-lms-course-theme-notices:empty { display: none; } @@ -24,21 +51,73 @@ body.sensei { } .sensei-course-theme__header__info { - gap: var(--wp--preset--spacing--30); + gap: 60px; + + .wp-block-sensei-lms-exit-course { + text-decoration: none; + order: 1; + opacity: 1; + + @media (min-width: 783px) { + &::before { + content: ""; + display: inline-block; + height: var(--sensei-lm-header-height); + border-right: 1px solid var(--sensei-course-progress-bar-color); + position: absolute; + margin-left: -30px; + top: 0; + } + } + } } - .wp-block-sensei-lms-exit-course { - margin-left: var(--wp--preset--spacing--30); + @media (max-width: 782px) { + .sensei-course-theme__sidebar-toggle { + display: none !important; + } + } - @media (min-width: 783px) { - &::before { - content: ""; - display: inline-block; - height: 100%; - border-right: 1px solid var(--sensei-course-progress-bar-color); + ~ .wporg-learn-lesson-header-mobile-view { + display: none; + + @media (max-width: 782px) { + display: flex; + height: var(--sensei-lm-header-height); + padding: 0 0 0 var(--wp--preset--spacing--30); + + .sensei-course-theme-course-progress { + display: block; + opacity: 1; + position: unset; + + @media (max-width: 460px) { + width: 47%; + } + } + + .wporg-learn-facilitator-notes-label { + display: block; position: absolute; - margin-left: -30px; - top: 0; + right: calc(60px + var(--wp--preset--spacing--20)); + } + + .wporg-learn-lesson-sidebar-toggle-wrapper { + position: absolute; + right: 0; + + > button { + background: url(../../assets/icon-chevron-down.svg) !important; + background-repeat: no-repeat !important; + background-position: center !important; + transform: scale(1.5); + width: 60px; + height: 60px; + } + + svg { + display: none; + } } } } @@ -60,9 +139,15 @@ body.sensei { .sensei-course-theme__columns { margin-top: calc(var(--sensei-lm-header-height) + var(--sensei-wpadminbar-offset, 0px)) !important; + @media (max-width: 782px) { + margin-top: calc(var(--sensei-lm-header-height) * 2 + var(--sensei-wpadminbar-offset, 0px)) !important; + } + .sensei-course-theme__sidebar ~ .sensei-course-theme__main-content { --sensei-lm-sidebar-width: calc(280px + (var(--wp--preset--spacing--edge-space) * 2) - 24px); margin-top: 0; + padding-left: var(--wp--preset--spacing--30); + padding-right: var(--wp--preset--spacing--30); > * { margin-left: unset; @@ -183,6 +268,8 @@ body.sensei { .sensei-course-theme__sidebar { row-gap: 40px; + padding-left: var(--wp--preset--spacing--30) !important; + padding-right: var(--wp--preset--spacing--30) !important; .sensei-lms-course-navigation__modules { gap: var(--wp--preset--spacing--20); From 7424cf24047e55000f90fb800b159e03c6bcad0d Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Tue, 10 Dec 2024 14:35:06 +0900 Subject: [PATCH 18/26] Adjust the label position. --- .../src/lesson-facilitator-notes/block.json | 7 ++++--- .../src/lesson-facilitator-notes/index.php | 3 ++- .../src/lesson-facilitator-notes/style.scss | 20 +++++++++++++++++++ .../src/lesson-facilitator-notes/view.js | 8 ++++++++ 4 files changed, 34 insertions(+), 4 deletions(-) create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json index 44fd4bb9c..0c366bf42 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/block.json @@ -21,8 +21,9 @@ "type": "string", "default": "" } - }, - "textdomain": "wporg-learn", - "editorScript": "file:./index.js", + }, + "textdomain": "wporg-learn", + "editorScript": "file:./index.js", + "viewScript": "file:./view.js", "style": "file:./style-index.css" } diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php index 01714d991..2256be7de 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php @@ -63,7 +63,8 @@ function render( $attributes, $content, $block ) { $lesson_plan_url = get_permalink( $lesson_plan->ID ); return sprintf( - '
%s
', + // If changing classname here, you'd also need to update it in style.scss and view.js. + '
%s
', esc_url( $lesson_plan_url ), esc_html__( 'Facilitator Note', 'wporg-learn' ) ); diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss index a07c60357..aac466fd4 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss @@ -48,3 +48,23 @@ margin-top: 0; } } + +.wporg-learn-lesson-facilitator-notes-label { + cursor: pointer; + font-family: var(--wp--preset--font-family--inter); + font-size: var(--wp--preset--font-size--small); + color: var(--wp--custom--link--color--text); + text-decoration: underline; + text-underline-offset: 0.13em; + user-select: none; + line-height: 1.1875; + margin-left: -30px !important; + + &:hover { + text-decoration: none; + } + + @media (max-width: 782px) { + display: none; + } +} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js new file mode 100644 index 000000000..f348997e4 --- /dev/null +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js @@ -0,0 +1,8 @@ +document.addEventListener( 'DOMContentLoaded', function () { + const facilitatorNotes = document.querySelector( '.wporg-learn-lesson-facilitator-notes-label' ); + const headerInfo = document.querySelector( '.sensei-course-theme__header__info' ); + + if ( facilitatorNotes && headerInfo ) { + headerInfo.insertBefore( facilitatorNotes, headerInfo.lastChild ); + } +} ); From afb7fadb7a782f8f41b137c7503e98767cea8b6f Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Tue, 10 Dec 2024 15:15:03 +0900 Subject: [PATCH 19/26] Add mobile view styles for the label --- .../src/lesson-facilitator-notes/style.scss | 18 +++++++++++++++--- .../src/lesson-facilitator-notes/view.js | 8 +++++--- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss index aac466fd4..b9311d109 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss @@ -49,6 +49,7 @@ } } +// general styles .wporg-learn-lesson-facilitator-notes-label { cursor: pointer; font-family: var(--wp--preset--font-family--inter); @@ -58,13 +59,24 @@ text-underline-offset: 0.13em; user-select: none; line-height: 1.1875; - margin-left: -30px !important; &:hover { text-decoration: none; } - @media (max-width: 782px) { - display: none; + // mobile styles + position: absolute; + right: calc(60px + var(--wp--preset--spacing--20)); +} + +// desktop styles +.sensei-course-theme-header-content { + .wporg-learn-lesson-facilitator-notes-label { + margin-left: -30px !important; + position: unset; + + @media (max-width: 782px) { + display: none; + } } } diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js index f348997e4..0395b645b 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js @@ -1,8 +1,10 @@ document.addEventListener( 'DOMContentLoaded', function () { const facilitatorNotes = document.querySelector( '.wporg-learn-lesson-facilitator-notes-label' ); - const headerInfo = document.querySelector( '.sensei-course-theme__header__info' ); + const headerInfos = document.querySelectorAll( '.sensei-course-theme-course-progress' ); - if ( facilitatorNotes && headerInfo ) { - headerInfo.insertBefore( facilitatorNotes, headerInfo.lastChild ); + if ( facilitatorNotes && headerInfos.length > 0 ) { + headerInfos.forEach( ( headerInfo ) => { + headerInfo.insertAdjacentElement( 'afterend', facilitatorNotes.cloneNode( true ) ); + } ); } } ); From 0f260b33f11d1db750d7a6bdc1fda6d5643c0d98 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Tue, 10 Dec 2024 15:15:11 +0900 Subject: [PATCH 20/26] Remove unused styles --- .../themes/pub/wporg-learn-2024/src/style/_sensei.scss | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss index 749b8f8d9..61440b0f2 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss @@ -16,10 +16,6 @@ body.sensei { @media (max-width: 782px) { &.sensei-course-theme--sidebar-open { - .wporg-learn-facilitator-notes-label { - opacity: 1 !important; - } - // The inner progress bar causes a 1px jitter when the sidebar is opened. .wporg-learn-lesson-header-mobile-view { position: relative; @@ -96,12 +92,6 @@ body.sensei { } } - .wporg-learn-facilitator-notes-label { - display: block; - position: absolute; - right: calc(60px + var(--wp--preset--spacing--20)); - } - .wporg-learn-lesson-sidebar-toggle-wrapper { position: absolute; right: 0; From 9ec5620a0a6bf45f14dfb97dac6f7cddf6558098 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Tue, 10 Dec 2024 17:04:09 +0900 Subject: [PATCH 21/26] Adjust label style for standalone lesson --- .../src/lesson-facilitator-notes/view.js | 5 ++++ .../wporg-learn-2024/src/style/_sensei.scss | 26 ++++++++++++++----- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js index 0395b645b..c08264b92 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js @@ -1,10 +1,15 @@ document.addEventListener( 'DOMContentLoaded', function () { const facilitatorNotes = document.querySelector( '.wporg-learn-lesson-facilitator-notes-label' ); const headerInfos = document.querySelectorAll( '.sensei-course-theme-course-progress' ); + const headerContent = document.querySelector( '.sensei-course-theme-header-content' ); if ( facilitatorNotes && headerInfos.length > 0 ) { headerInfos.forEach( ( headerInfo ) => { headerInfo.insertAdjacentElement( 'afterend', facilitatorNotes.cloneNode( true ) ); } ); + } else if ( facilitatorNotes && headerContent ) { + headerContent.firstElementChild.insertAdjacentElement( 'afterend', facilitatorNotes.cloneNode( true ) ); } + + facilitatorNotes.remove(); } ); diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss index 61440b0f2..3ce21cc55 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss @@ -830,14 +830,26 @@ body.sensei { .sensei-course-theme-header-content { border-bottom: 1px solid var(--wp--custom--color--border); - div:nth-of-type(2)::before { - content: ""; - display: inline-block; - height: 100%; - border-right: 1px solid var(--sensei-course-progress-bar-color); + @media (min-width: 783px) { + div:last-child::before { + content: ""; + display: inline-block; + height: 100%; + border-right: 1px solid var(--sensei-course-progress-bar-color); + position: absolute; + margin-left: -30px; + top: 0; + } + } + + .wporg-learn-lesson-facilitator-notes-label { position: absolute; - margin-left: -30px; - top: 0; + right: 130px; + display: unset; + + @media (min-width: 783px) { + right: calc(150px + var(--wp--preset--spacing--20)); + } } } From 359594b09346b4ebccbf9e5d6277ed8aac573910 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Wed, 11 Dec 2024 18:41:20 +0900 Subject: [PATCH 22/26] Refresh the page to open the link --- .../pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php index 2256be7de..5ed22db23 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/index.php @@ -64,7 +64,7 @@ function render( $attributes, $content, $block ) { $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. - '
%s
', + '
%s
', esc_url( $lesson_plan_url ), esc_html__( 'Facilitator Note', 'wporg-learn' ) ); From affb77e2ed100af4ae10364822498529afac1e28 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Wed, 11 Dec 2024 21:22:38 +0900 Subject: [PATCH 23/26] Fix lesson title too long making layout go wrong --- .../wporg-learn-2024/src/style/_sensei.scss | 32 ++++++++----------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss index 3ce21cc55..f7e709c05 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss @@ -43,7 +43,7 @@ body.sensei { .sensei-course-theme-header-content { > .wp-block-group { - row-gap: 0; + gap: 0; } .sensei-course-theme__header__info { @@ -51,8 +51,6 @@ body.sensei { .wp-block-sensei-lms-exit-course { text-decoration: none; - order: 1; - opacity: 1; @media (min-width: 783px) { &::before { @@ -830,25 +828,21 @@ body.sensei { .sensei-course-theme-header-content { border-bottom: 1px solid var(--wp--custom--color--border); - @media (min-width: 783px) { - div:last-child::before { - content: ""; - display: inline-block; - height: 100%; - border-right: 1px solid var(--sensei-course-progress-bar-color); - position: absolute; - margin-left: -30px; - top: 0; - } + .wporg-site-breadcrumbs__wrapper { + white-space: pre-wrap; } - .wporg-learn-lesson-facilitator-notes-label { - position: absolute; - right: 130px; - display: unset; + @media (min-width: 783px) { + div:last-child { + height: 100%; - @media (min-width: 783px) { - right: calc(150px + var(--wp--preset--spacing--20)); + &::before { + content: ""; + display: inline-block; + height: 100%; + border-right: 1px solid var(--sensei-course-progress-bar-color); + margin-right: var(--wp--preset--spacing--30); + } } } } From ff05a6737f654658547f86eed0c08458f5be212c Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Wed, 11 Dec 2024 23:40:47 +0900 Subject: [PATCH 24/26] Adjust label position for mobile, desktop, unenrolled --- .../patterns/sensei-lesson-standalone.php | 4 +- .../src/lesson-facilitator-notes/style.scss | 32 ---------------- .../src/lesson-facilitator-notes/view.js | 26 ++++++++----- .../wporg-learn-2024/src/style/_sensei.scss | 38 ++++++++++++++++++- 4 files changed, 55 insertions(+), 45 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-standalone.php b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-standalone.php index f4cba0493..827a1fb29 100644 --- a/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-standalone.php +++ b/wp-content/themes/pub/wporg-learn-2024/patterns/sensei-lesson-standalone.php @@ -15,8 +15,8 @@ - -
+ +

diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss index b9311d109..a07c60357 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/style.scss @@ -48,35 +48,3 @@ margin-top: 0; } } - -// general styles -.wporg-learn-lesson-facilitator-notes-label { - cursor: pointer; - font-family: var(--wp--preset--font-family--inter); - font-size: var(--wp--preset--font-size--small); - color: var(--wp--custom--link--color--text); - text-decoration: underline; - text-underline-offset: 0.13em; - user-select: none; - line-height: 1.1875; - - &:hover { - text-decoration: none; - } - - // mobile styles - position: absolute; - right: calc(60px + var(--wp--preset--spacing--20)); -} - -// desktop styles -.sensei-course-theme-header-content { - .wporg-learn-lesson-facilitator-notes-label { - margin-left: -30px !important; - position: unset; - - @media (max-width: 782px) { - display: none; - } - } -} diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js index c08264b92..8ea878560 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js +++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-facilitator-notes/view.js @@ -1,14 +1,22 @@ document.addEventListener( 'DOMContentLoaded', function () { const facilitatorNotes = document.querySelector( '.wporg-learn-lesson-facilitator-notes-label' ); - const headerInfos = document.querySelectorAll( '.sensei-course-theme-course-progress' ); - const headerContent = document.querySelector( '.sensei-course-theme-header-content' ); - - if ( facilitatorNotes && headerInfos.length > 0 ) { - headerInfos.forEach( ( headerInfo ) => { - headerInfo.insertAdjacentElement( 'afterend', facilitatorNotes.cloneNode( true ) ); - } ); - } else if ( facilitatorNotes && headerContent ) { - headerContent.firstElementChild.insertAdjacentElement( 'afterend', facilitatorNotes.cloneNode( true ) ); + 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(); diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss index f7e709c05..24466ddf7 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss @@ -15,8 +15,8 @@ body.sensei { --sensei-lm-mobile-header-height: 60px; @media (max-width: 782px) { + // The inner progress bar causes a 1px jitter when the sidebar is opened. &.sensei-course-theme--sidebar-open { - // The inner progress bar causes a 1px jitter when the sidebar is opened. .wporg-learn-lesson-header-mobile-view { position: relative; top: 1px; @@ -41,6 +41,26 @@ body.sensei { display: none; } + // general styles + .wporg-learn-lesson-facilitator-notes-label { + cursor: pointer; + font-family: var(--wp--preset--font-family--inter); + font-size: var(--wp--preset--font-size--small); + color: var(--wp--custom--link--color--text); + text-decoration: underline; + text-underline-offset: 0.13em; + user-select: none; + line-height: 1.1875; + + &:hover { + text-decoration: none; + } + + @media (max-width: 782px) { + display: none; + } + } + .sensei-course-theme-header-content { > .wp-block-group { gap: 0; @@ -51,6 +71,7 @@ body.sensei { .wp-block-sensei-lms-exit-course { text-decoration: none; + opacity: 1; @media (min-width: 783px) { &::before { @@ -90,6 +111,13 @@ body.sensei { } } + .wporg-learn-lesson-facilitator-notes-label { + // mobile styles + position: absolute; + right: calc(60px + var(--wp--preset--spacing--20)); + display: block; + } + .wporg-learn-lesson-sidebar-toggle-wrapper { position: absolute; right: 0; @@ -832,8 +860,14 @@ body.sensei { white-space: pre-wrap; } + // standalone lesson styles + .wporg-learn-lesson-facilitator-notes-label { + right: calc(150px + var(--wp--preset--spacing--20)); + position: absolute; + } + @media (min-width: 783px) { - div:last-child { + .wp-block-sensei-lms-exit-lesson { height: 100%; &::before { From 55d8b14dd984fe1c5a3d123878bd8e36e6c4959e Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Wed, 11 Dec 2024 23:44:02 +0900 Subject: [PATCH 25/26] Make label in standalone lesson always show up --- wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss index 24466ddf7..85ffba6c4 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss @@ -864,6 +864,7 @@ body.sensei { .wporg-learn-lesson-facilitator-notes-label { right: calc(150px + var(--wp--preset--spacing--20)); position: absolute; + display: block; } @media (min-width: 783px) { From 81bce2f6cff1d78565054352cf8617fbdd729129 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Thu, 12 Dec 2024 14:14:38 +0900 Subject: [PATCH 26/26] Update standalone style --- .../themes/pub/wporg-learn-2024/src/style/_sensei.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss index 85ffba6c4..2a9662441 100644 --- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss +++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss @@ -855,6 +855,7 @@ body.sensei { .sensei-course-theme__header--standalone { .sensei-course-theme-header-content { border-bottom: 1px solid var(--wp--custom--color--border); + gap: 0; .wporg-site-breadcrumbs__wrapper { white-space: pre-wrap; @@ -862,8 +863,9 @@ body.sensei { // standalone lesson styles .wporg-learn-lesson-facilitator-notes-label { - right: calc(150px + var(--wp--preset--spacing--20)); - position: absolute; + line-height: var(--wp--custom--body--small--typography--line-height); + margin-right: var(--wp--preset--spacing--30) !important; + margin-left: auto !important; display: block; }