Add sensei logo to the default learning mode template

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 );

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
+	}
+}

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 (
+		<a href="#pseudo-link-to-sensei-site">
+			<SenseiLogoTree />
+		</a>
+	);
+};
+
+/**
+ * Sensei Logo block.
+ */
+export default {
+	...meta,
+	icon: {
+		src: <LogoTreeIcon width="20" height="20" />,
+		foreground: '#43AF99',
+	},
+	edit: Edit,
+};

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 {

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();
 	}
 }

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

@@ -0,0 +1,61 @@
+<?php
+/**
+ * File containing the Sensei_Logo class.
+ *
+ * @package sensei
+ * @since   4.0.0
+ */
+
+namespace Sensei\Blocks\Course_Theme;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+use \Sensei_Blocks;
+
+/**
+ * Exit course link, to leave Learning Mode and open the course page.
+ */
+class Sensei_Logo {
+	/**
+	 * Block JSON file.
+	 */
+	const BLOCK_JSON_FILE = '/sensei-logo-block/block.json';
+
+	/**
+	 * Exit_Course constructor.
+	 */
+	public function __construct() {
+		$block_json_path = Sensei()->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 '<a href="https://www.senseilms.com/" target="_blank">' . $icon . '</a>';
+	}
+}

includes/class-sensei-assets.php

@@ -304,13 +304,16 @@ private function get_icon_href( string $name ) : string {
 	 *
 	 * @param string $name        The name of the icon file at "assets/images/<name>.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 = '' ) : string {
-		$href = $this->get_icon_href( $name );
+	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 '<svg class="' . esc_attr( $class_names ) . '"><use href="' . esc_url( $href ) . '"></use></svg>';
+		return '<svg class="' . esc_attr( $class_names ) . " width='$width' height='$height'>" . '<use href="' . esc_url( $href ) . '"></use></svg>';
 	}
 
 	/**

themes/sensei-course-theme/templates/default/lesson.html

@@ -35,7 +35,17 @@
 <div class="wp-block-sensei-lms-ui sensei-course-theme__columns">
 	<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__sidebar","className":""} -->
 	<div class="wp-block-sensei-lms-ui sensei-course-theme__frame sensei-course-theme__sidebar">
-		<!-- wp:sensei-lms/course-navigation /--></div>
+		<!-- wp:sensei-lms/course-navigation /-->
+
+		<!-- wp:sensei-lms/spacer-flex -->
+		<div class="wp-block-sensei-lms-spacer-flex sensei-course-theme__spacer-flex"></div>
+		<!-- /wp:sensei-lms/spacer-flex -->
+
+		<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
+		<div class="wp-block-group" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
+			<!-- wp:sensei-lms/sensei-logo /--></div>
+		<!-- /wp:group -->
+	</div>
 	<!-- /wp:sensei-lms/ui -->
 
 	<!-- wp:sensei-lms/ui {"elementClass":"sensei-course-theme__main-content","lock":{"move":false,"remove":false}} -->