From de150a7ce0baaceda92b1deb7720c89d484a37d2 Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Thu, 25 May 2023 21:05:15 +0100 Subject: [PATCH 1/4] Add sensei logo on learnning mode template --- assets/course-theme/blocks/index.js | 2 + .../blocks/sensei-logo-block/block.json | 12 +++++ .../blocks/sensei-logo-block/index.js | 29 ++++++++++ .../sensei-course-theme/fixed-sidebar.scss | 2 +- assets/icons/sensei-logo-tree.svg | 9 ++++ .../class-course-theme-blocks.php | 1 + .../blocks/course-theme/class-sensei-logo.php | 53 +++++++++++++++++++ includes/class-sensei-assets.php | 6 ++- .../templates/default/lesson.html | 12 ++++- 9 files changed, 122 insertions(+), 4 deletions(-) create mode 100644 assets/course-theme/blocks/sensei-logo-block/block.json create mode 100644 assets/course-theme/blocks/sensei-logo-block/index.js create mode 100644 assets/icons/sensei-logo-tree.svg create mode 100644 includes/blocks/course-theme/class-sensei-logo.php diff --git a/assets/course-theme/blocks/index.js b/assets/course-theme/blocks/index.js index 94be8fc289..aa53d0a61d 100644 --- a/assets/course-theme/blocks/index.js +++ b/assets/course-theme/blocks/index.js @@ -6,6 +6,7 @@ import courseNavigationBlock from './course-navigation'; import uiBlocks from './ui'; import lessonBlocks from './lesson-blocks'; import quizBlocks from './quiz-blocks'; +import senseiLogo from './sensei-logo-block'; import { templateStyleBlock } from './template-style'; const blocks = [ @@ -14,6 +15,7 @@ const blocks = [ ...uiBlocks, courseNavigationBlock, templateStyleBlock, + senseiLogo, ]; registerTemplateBlocks( blocks ); diff --git a/assets/course-theme/blocks/sensei-logo-block/block.json b/assets/course-theme/blocks/sensei-logo-block/block.json new file mode 100644 index 0000000000..8b915b0ab6 --- /dev/null +++ b/assets/course-theme/blocks/sensei-logo-block/block.json @@ -0,0 +1,12 @@ +{ + "apiVersion": 2, + "name": "sensei-lms/sensei-logo", + "title": "Sensei LMS Logo", + "category": "sensei-lms", + "textdomain": "sensei-lms", + "description": "Show the Sensei logo.", + "supports": { + "inserter": true, + "html": true + } +} \ No newline at end of file diff --git a/assets/course-theme/blocks/sensei-logo-block/index.js b/assets/course-theme/blocks/sensei-logo-block/index.js new file mode 100644 index 0000000000..023d69b9cc --- /dev/null +++ b/assets/course-theme/blocks/sensei-logo-block/index.js @@ -0,0 +1,29 @@ +/** + * Internal dependencies + */ +import meta from './block.json'; +import SenseiLogoTree from '../../../icons/sensei-logo-tree.svg'; +import LogoTreeIcon from '../../../icons/logo-tree.svg'; + +/** + * WordPress dependencies + */ +const Edit = () => { + return ( + + + + ); +}; + +/** + * Course Navigation block. + */ +export default { + ...meta, + icon: { + src: , + foreground: '#43AF99', + }, + edit: Edit, +}; diff --git a/assets/css/sensei-course-theme/fixed-sidebar.scss b/assets/css/sensei-course-theme/fixed-sidebar.scss index 03a606b3d9..124723bc0b 100644 --- a/assets/css/sensei-course-theme/fixed-sidebar.scss +++ b/assets/css/sensei-course-theme/fixed-sidebar.scss @@ -22,7 +22,7 @@ $min_desktop_width: 783px; overscroll-behavior: contain; display: flex; flex-direction: column; - padding: 32px 24px 40px 24px; + padding: 32px 24px 46px 24px; } &__header ~ &__columns &__sidebar { diff --git a/assets/icons/sensei-logo-tree.svg b/assets/icons/sensei-logo-tree.svg new file mode 100644 index 0000000000..c7426fa8c9 --- /dev/null +++ b/assets/icons/sensei-logo-tree.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/includes/blocks/course-theme/class-course-theme-blocks.php b/includes/blocks/course-theme/class-course-theme-blocks.php index 8d66120d19..f0006b009b 100644 --- a/includes/blocks/course-theme/class-course-theme-blocks.php +++ b/includes/blocks/course-theme/class-course-theme-blocks.php @@ -67,5 +67,6 @@ public function initialize_blocks() { new \Sensei_Block_Quiz_Progress(); new Blocks\Lesson_Properties(); new Blocks\Lesson_Video(); + new Blocks\Sensei_Logo(); } } diff --git a/includes/blocks/course-theme/class-sensei-logo.php b/includes/blocks/course-theme/class-sensei-logo.php new file mode 100644 index 0000000000..c03156e57f --- /dev/null +++ b/includes/blocks/course-theme/class-sensei-logo.php @@ -0,0 +1,53 @@ +assets->src_path( 'course-theme/blocks' ) . self::BLOCK_JSON_FILE; + + Sensei_Blocks::register_sensei_block( + 'sensei-lms/sensei-logo', + [ + 'render_callback' => [ $this, 'render' ], + 'style' => 'sensei-theme-blocks', + ], + $block_json_path + ); + } + + /** + * Renders the block. + * + * @access private + * + * @return string The block HTML. + */ + public function render(): string { + $icon = Sensei()->assets->get_icon('sensei-logo-tree', '', ['width' => '85', 'height' => '40'] ); + return ''. $icon .''; + } +} diff --git a/includes/class-sensei-assets.php b/includes/class-sensei-assets.php index 58a1a87dc9..de869df6f1 100644 --- a/includes/class-sensei-assets.php +++ b/includes/class-sensei-assets.php @@ -307,10 +307,12 @@ private function get_icon_href( string $name ) : string { * * @return string The SVG HTML. */ - public function get_icon( string $name, string $class_names = '' ) : string { + public function get_icon( string $name, string $class_names = '', array $size = [] ) : string { $href = $this->get_icon_href( $name ); + $width = $size['width'] ?? ''; + $height = $size['height'] ?? ''; - return ''; + return ''; } /** diff --git a/themes/sensei-course-theme/templates/default/lesson.html b/themes/sensei-course-theme/templates/default/lesson.html index 4fb1b1b039..968a2b94f6 100644 --- a/themes/sensei-course-theme/templates/default/lesson.html +++ b/themes/sensei-course-theme/templates/default/lesson.html @@ -35,7 +35,17 @@
-
+ + + +
+ + + +
+
+ +
From c0a1c56f03815dbf58a27a942799229e572c2a18 Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Thu, 25 May 2023 21:11:14 +0100 Subject: [PATCH 2/4] Fix docs --- assets/course-theme/blocks/sensei-logo-block/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/course-theme/blocks/sensei-logo-block/index.js b/assets/course-theme/blocks/sensei-logo-block/index.js index 023d69b9cc..cf0bba5d2a 100644 --- a/assets/course-theme/blocks/sensei-logo-block/index.js +++ b/assets/course-theme/blocks/sensei-logo-block/index.js @@ -17,7 +17,7 @@ const Edit = () => { }; /** - * Course Navigation block. + * Sensei Logo block. */ export default { ...meta, From de0b3fbf8fe68fc48cdd9951a8fe6a504cb225b1 Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Fri, 26 May 2023 14:41:59 +0100 Subject: [PATCH 3/4] Fix lint issues --- includes/blocks/course-theme/class-sensei-logo.php | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/includes/blocks/course-theme/class-sensei-logo.php b/includes/blocks/course-theme/class-sensei-logo.php index c03156e57f..e14413b905 100644 --- a/includes/blocks/course-theme/class-sensei-logo.php +++ b/includes/blocks/course-theme/class-sensei-logo.php @@ -47,7 +47,15 @@ public function __construct() { * @return string The block HTML. */ public function render(): string { - $icon = Sensei()->assets->get_icon('sensei-logo-tree', '', ['width' => '85', 'height' => '40'] ); - return ''. $icon .''; + $icon = Sensei()->assets->get_icon( + 'sensei-logo-tree', + '', + [ + 'width' => '85', + 'height' => '40', + ] + ); + + return '' . $icon . ''; } } From 488ceaf657a3519f1586cbb7fb0886c2af4b9cbb Mon Sep 17 00:00:00 2001 From: Gabriel Caires Date: Fri, 26 May 2023 17:18:03 +0100 Subject: [PATCH 4/4] Add docs to the extra get_icon param --- includes/class-sensei-assets.php | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/includes/class-sensei-assets.php b/includes/class-sensei-assets.php index de869df6f1..3d4af8f3d3 100644 --- a/includes/class-sensei-assets.php +++ b/includes/class-sensei-assets.php @@ -304,15 +304,16 @@ private function get_icon_href( string $name ) : string { * * @param string $name The name of the icon file at "assets/images/.svg". * @param string $class_names Classnames to add to the SVG element. + * @param array $size Set the icon width/height. * * @return string The SVG HTML. */ public function get_icon( string $name, string $class_names = '', array $size = [] ) : string { - $href = $this->get_icon_href( $name ); - $width = $size['width'] ?? ''; - $height = $size['height'] ?? ''; + $href = $this->get_icon_href( $name ); + $width = $size['width'] ?? ''; + $height = $size['height'] ?? ''; - return ''; + return '" . ''; } /**