Add tutorial template with wordpress.tv video embed (#2565)

* Add tutorial template with wordpress.tv video embed

* Add sidebar meta info

wp-content/themes/pub/wporg-learn-2024/patterns/single-tutorial-embed.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * Title: Single Tutorial Embed
+ * Slug: wporg-learn-2024/single-tutorial-embed
+ * Inserter: no
+ */
+
+global $wp_embed;
+global $post;
+
+if ( ! isset( $post->video_url ) ) {
+	return;
+}
+
+?>
+
+<!-- wp:embed {"url":"<?php echo esc_url( $post->video_url ); ?>","type":"video","providerNameSlug":"wordpress-tv","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio","autoembed":true} -->
+<figure class="wp-block-embed is-type-video is-provider-wordpress-tv wp-block-embed-wordpress-tv wp-embed-aspect-16-9 wp-has-aspect-ratio">
+
+	<div class="wp-block-embed__wrapper">
+		<?php echo $wp_embed->autoembed( $post->video_url ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+	</div>
+
+</figure>
+<!-- /wp:embed -->

wp-content/themes/pub/wporg-learn-2024/src/sensei-meta-list/index.php

@@ -10,6 +10,8 @@
 
 use Sensei_Utils;
 use Sensei_Reports_Overview_Service_Courses;
+use function WPOrg_Learn\Post_Meta\{get_workshop_duration};
+use function WordPressdotorg\Locales\get_locale_name_from_code;
 
 add_action( 'init', __NAMESPACE__ . '\init' );
 
@@ -90,6 +92,41 @@ function render( $attributes, $content, $block ) {
 				'key'   => 'last-updated',
 			),
 		);
+	} else if ( 'wporg_workshop' === $block->context['postType'] ) {
+		$workshop = get_post( $block->context['postId'] );
+
+		if ( ! $workshop ) {
+			return '';
+		}
+
+		$meta_fields = array(
+			array(
+				'label' => __( 'Length', 'wporg-learn' ),
+				'value' => get_workshop_duration( $workshop, 'string' ),
+				'key'   => 'length',
+			),
+			array(
+				'label' => __( 'Language', 'wporg-learn' ),
+				'value' => esc_html( get_locale_name_from_code( $workshop->language, 'native' ) ),
+				'key'   => 'language',
+			),
+		);
+
+		$captions = get_post_meta( $block->context['postId'], 'video_caption_language' );
+		$subtitles = array_map(
+			function( $caption_lang ) {
+				return esc_html( get_locale_name_from_code( $caption_lang, 'native' ) );
+			},
+			$captions
+		);
+
+		if ( ! empty( $captions ) ) {
+			$meta_fields[] = array(
+				'label' => __( 'Subtitles', 'wporg-learn' ),
+				'value' => implode( ', ', $subtitles ),
+				'key'   => 'subtitles',
+			);
+		}
 	}
 
 	foreach ( $meta_fields as $field ) {

wp-content/themes/pub/wporg-learn-2024/templates/single-wporg_workshop.html

@@ -0,0 +1,53 @@
+<!-- wp:template-part {"slug":"header","className":"has-display-contents","tagName":"div"} /-->
+
+<!-- wp:group {"className":"wporg-breadcrumbs","align":"full","style":{"spacing":{"padding":{"top":"23px","bottom":"23px","left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"backgroundColor":"white","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+<div class="wporg-breadcrumbs wp-block-group alignfull has-white-background-color has-background" style="padding-top:23px;padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:23px;padding-left:var(--wp--preset--spacing--edge-space)">
+	<!-- wp:wporg/site-breadcrumbs {"fontSize":"small"} /-->
+</div>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"main","layout":{"type":"constrained"},"className":"entry-content","style":{"spacing":{"blockGap":"0px"}}} -->
+<main class="wp-block-group entry-content">
+
+	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space","top":"var:preset|spacing|30","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--edge-space);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--edge-space)">
+
+		<!-- wp:group {"layout":{"type":"constrained"},"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} -->
+		<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--40)">
+
+			<!-- wp:post-title {"level":1} /-->
+
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:pattern {"slug":"wporg-learn-2024/single-tutorial-embed"} /-->
+
+		<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|40"},"margin":{"top":"var:preset|spacing|40"}}}} -->
+		<div class="wp-block-columns alignwide" style="margin-top:var(--wp--preset--spacing--40)">
+
+			<!-- wp:column {"width":"75%","layout":{"type":"constrained","justifyContent":"left"}} -->
+			<div class="wp-block-column" style="flex-basis:75%">
+
+				<!-- wp:post-content {"layout":{"inherit":true}} /-->
+
+			</div>
+			<!-- /wp:column -->
+
+			<!-- wp:column {"width":"25%"} -->
+			<div class="wp-block-column" style="flex-basis:25%">
+
+				<!-- wp:pattern {"slug":"wporg-learn-2024/sidebar-meta-info"} /-->
+
+			</div>
+			<!-- /wp:column -->
+
+			</div>
+		<!-- /wp:columns -->
+
+	</div>
+	<!-- /wp:group -->
+
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer"} /-->