From 8ebdeab286d0e8a4f5c2bccfe0926913f73bfe64 Mon Sep 17 00:00:00 2001
From: Adam Wood <1017872+adamwoodnz@users.noreply.github.com>
Date: Tue, 20 Aug 2024 21:54:29 +1200
Subject: [PATCH] Add course info block on lesson cards (#2847)

* Add course info block on lesson cards

* Update lesson card experience level style

* Fix doc

* Use block gap var for level spacing to match row style
---
 .../themes/pub/wporg-learn-2024/functions.php |  1 +
 .../parts/card-lesson-h3.html                 |  6 +-
 .../wporg-learn-2024/parts/card-lesson.html   |  6 +-
 .../pub/wporg-learn-2024/parts/card.html      |  6 +-
 .../src/lesson-course-info/block.json         | 31 ++++++++
 .../src/lesson-course-info/index.js           | 19 +++++
 .../src/lesson-course-info/index.php          | 71 +++++++++++++++++++
 .../src/lesson-course-info/style.scss         | 14 ++++
 .../src/style/_card-grid.scss                 | 34 +++++++++
 .../pub/wporg-learn-2024/src/style/_tag.scss  | 30 --------
 .../pub/wporg-learn-2024/src/style/style.scss |  1 -
 11 files changed, 182 insertions(+), 37 deletions(-)
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/block.json
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.js
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.php
 create mode 100644 wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/style.scss
 delete mode 100644 wp-content/themes/pub/wporg-learn-2024/src/style/_tag.scss

diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php
index cac7ce2c7..5c4529d87 100644
--- a/wp-content/themes/pub/wporg-learn-2024/functions.php
+++ b/wp-content/themes/pub/wporg-learn-2024/functions.php
@@ -13,6 +13,7 @@
 require_once __DIR__ . '/src/course-outline/index.php';
 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-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/parts/card-lesson-h3.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
index a78798aa2..58df16115 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson-h3.html
@@ -8,14 +8,16 @@
 
 		<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
 
+		<!-- wp:wporg-learn/lesson-course-info {"style":{"typography":{"lineHeight":1.6},"spacing":{"margin":{"top":"6px"}}},"fontSize":"extra-small"} /-->
+
 		<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"layout":{"selfStretch":"fill","flexSize":null},"typography":{"lineHeight":"1.6"}}} /-->
 
-		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
+		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"center"}} -->
 		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
 
 			<!-- wp:wporg-learn/learning-duration {"fontSize":"extra-small"} /-->
 
-			<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /-->
+			<!-- wp:post-terms {"term":"level","separator":" ","fontSize":"extra-small"} /-->
 
 		</div>
 		<!-- /wp:group -->
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
index 34f7f72d8..5d094e477 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card-lesson.html
@@ -8,14 +8,16 @@
 
 		<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
 
+		<!-- wp:wporg-learn/lesson-course-info {"style":{"typography":{"lineHeight":1.6},"spacing":{"margin":{"top":"6px"}}},"fontSize":"extra-small"} /-->
+
 		<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"layout":{"selfStretch":"fill","flexSize":null},"typography":{"lineHeight":"1.6"}}} /-->
 
-		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
+		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"center"}} -->
 		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
 
 			<!-- wp:wporg-learn/learning-duration {"fontSize":"extra-small"} /-->
 
-			<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /-->
+			<!-- wp:post-terms {"term":"level","separator":" ","fontSize":"extra-small"} /-->
 
 		</div>
 		<!-- /wp:group -->
diff --git a/wp-content/themes/pub/wporg-learn-2024/parts/card.html b/wp-content/themes/pub/wporg-learn-2024/parts/card.html
index 140624e80..eb46f457b 100644
--- a/wp-content/themes/pub/wporg-learn-2024/parts/card.html
+++ b/wp-content/themes/pub/wporg-learn-2024/parts/card.html
@@ -8,9 +8,11 @@
 
 		<!-- wp:post-title {"level":2,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":1.6},"spacing":{"margin":{"bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|blueberry-1"}}}},"fontSize":"normal","fontFamily":"inter"} /-->
 
+		<!-- wp:wporg-learn/lesson-course-info {"style":{"typography":{"lineHeight":1.6},"spacing":{"margin":{"top":"6px"}}},"fontSize":"extra-small"} /-->
+
 		<!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":16,"style":{"spacing":{"margin":{"top":"var:preset|spacing|10"}},"layout":{"selfStretch":"fill","flexSize":null},"typography":{"lineHeight":"1.6"}}} /-->
 
-		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
+		<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"center"}} -->
 		<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--20)">
 
 			<!-- wp:wporg-learn/learning-duration {"fontSize":"extra-small"} /-->
@@ -19,7 +21,7 @@
 
 			<!-- wp:wporg-learn/course-status {"fontSize":"extra-small"} /-->
 
-			<!-- wp:post-terms {"term":"level","separator":" ","className":"is-style-tag","fontSize":"extra-small"} /-->
+			<!-- wp:post-terms {"term":"level","separator":" ","fontSize":"extra-small"} /-->
 
 		</div>
 		<!-- /wp:group -->
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/block.json b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/block.json
new file mode 100644
index 000000000..2ce5f7e98
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/block.json
@@ -0,0 +1,31 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg-learn/lesson-course-info",
+	"version": "0.1.0",
+	"title": "Lesson Course Info",
+	"category": "design",
+	"icon": "info-outline",
+	"description": "Displays information about the course a lesson belongs to.",
+	"textdomain": "wporg-learn",
+	"supports": {
+		"align": true,
+		"html": false,
+		"color": {
+			"text": true,
+			"background": true,
+			"link": true
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
+	},
+	"usesContext": [ "postId", "postType" ],
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css"
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.js b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.js
new file mode 100644
index 000000000..4d27653d6
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Edit from '../shared/dynamic-edit';
+import metadata from './block.json';
+import './style.scss';
+
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+	save: () => null,
+} );
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.php b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.php
new file mode 100644
index 000000000..f1d386995
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/index.php
@@ -0,0 +1,71 @@
+<?php
+/**
+ * Block Name: Lesson Course Info
+ * Description: Displays information about the course a lesson belongs to.
+ *
+ * @package wporg
+ */
+
+namespace WordPressdotorg\Theme\Learn_2024\Lesson_Course_Info;
+
+use Sensei_Utils;
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function init() {
+	register_block_type(
+		dirname( dirname( __DIR__ ) ) . '/build/lesson-course-info',
+		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.
+ *
+ * @return string Returns the block markup.
+ */
+function render( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['postId'] ) || ! isset( $block->context['postType'] ) || 'lesson' !== $block->context['postType'] ) {
+		return '';
+	}
+
+	$course_id = get_post_meta( $block->context['postId'], '_lesson_course', true );
+
+	if ( empty( $course_id ) ) {
+		return '';
+	}
+
+	$course_title = get_the_title( $course_id );
+	$course_permalink = get_permalink( $course_id );
+
+	if ( empty( $course_title ) || ! $course_permalink ) {
+		return '';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes();
+	return sprintf(
+		'<p %s>%s</p>',
+		$wrapper_attributes,
+		wp_kses_post(
+			sprintf(
+				/* translators: 1: Course link, 2: Course title */
+				__( 'Part of: <a href="%1$s">%2$s</a>', 'wporg-learn' ),
+				get_permalink( $course_id ),
+				get_the_title( $course_id ),
+			)
+		),
+	);
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/style.scss
new file mode 100644
index 000000000..4df15f4ee
--- /dev/null
+++ b/wp-content/themes/pub/wporg-learn-2024/src/lesson-course-info/style.scss
@@ -0,0 +1,14 @@
+.wp-block-wporg-learn-lesson-course-info {
+	white-space: nowrap;
+	overflow-x: hidden;
+	text-overflow: ellipsis;
+	max-width: 100%;
+
+	> a {
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
index 54a860240..7e4598690 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_card-grid.scss
@@ -78,6 +78,40 @@
 		.taxonomy-level {
 			display: none;
 		}
+
+		.wp-block-wporg-learn-course-status {
+			display: inline-block;
+			padding: 4px var(--wp--preset--spacing--10);
+			border-radius: 2px;
+			text-decoration: none;
+			color: var(--wp--preset--color--charcoal-1);
+			background-color: var(--wp--preset--color--light-grey-2);
+
+			&.is-completed {
+				background-color: var(--wp--preset--color--acid-green-3);
+				color: var(--wp--custom--color--green-70);
+			}
+		}
+	}
+
+	.lesson {
+		.wp-block-post-terms a {
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+
+		.wp-block-wporg-learn-learning-duration + .wp-block-post-terms {
+			margin-left: calc(var(--wp--style--block-gap) * -1);
+
+			&::before {
+				content: "•";
+				margin: 0 var(--wp--preset--spacing--10);
+				color: var(--wp--preset--color--charcoal-5);
+			}
+		}
 	}
 
 	.wp-block-post-title a {
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_tag.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_tag.scss
deleted file mode 100644
index 4289c6464..000000000
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_tag.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-%wporg-learn-tag {
-	display: inline-block;
-	padding: 4px var(--wp--preset--spacing--10);
-	border-radius: 2px;
-	text-decoration: none;
-	color: var(--wp--preset--color--charcoal-1);
-}
-
-.wp-block-post-terms.is-style-tag a {
-
-	@extend %wporg-learn-tag;
-
-	background-color: var(--wp--preset--color--blueberry-4);
-
-	&:hover {
-		text-decoration: underline;
-	}
-}
-
-.wp-block-wporg-learn-course-status {
-
-	@extend %wporg-learn-tag;
-
-	background-color: var(--wp--preset--color--light-grey-2);
-
-	&.is-completed {
-		background-color: var(--wp--preset--color--acid-green-3);
-		color: var(--wp--custom--color--green-70);
-	}
-}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
index e812f873b..693ebcb0e 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/style.scss
@@ -9,7 +9,6 @@
 @import "sensei";
 @import "sidebar";
 @import "search";
-@import "tag";
 @import "taxonomy";
 @import "wp-components";
 @import "wporg-meeting-calendar";