1 files changed, 59 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/podcast-player/templates/podcast-header-title.php b/plugins/jetpack/extensions/blocks/podcast-player/templates/podcast-header-title.php
new file mode 100644
index 00000000..763aa83a
--- /dev/null
+++ b/plugins/jetpack/extensions/blocks/podcast-player/templates/podcast-header-title.php
@@ -0,0 +1,59 @@
+<?php
+/**
+ * Podcast Header Title template.
+ *
+ * @package automattic/jetpack
+ */
+
+namespace Automattic\Jetpack\Extensions\Podcast_Player;
+
+/**
+ * Template variables.
+ *
+ * @var string $template_props
+ */
+
+if ( ! isset( $template_props['title'] ) && empty( $template_props['track']['title'] ) ) {
+	return;
+}
+
+$track_link = empty( $template_props['track']['link'] ) ? $template_props['track']['src'] : $template_props['track']['link'];
+?>
+
+<h2 id="<?php echo esc_attr( $template_props['player_id'] ); ?>__title" class="jetpack-podcast-player__title">
+	<span
+		class="jetpack-podcast-player__current-track-title <?php echo esc_attr( $template_props['primary_colors']['class'] ); ?>"
+		<?php echo isset( $template_props['primary_colors']['style'] ) ? 'style="' . esc_attr( $template_props['primary_colors']['style'] ) . '"' : ''; ?>
+	>
+		<?php
+		echo esc_html( $template_props['track']['title'] );
+		if ( ! empty( $track_link ) ) :
+			// Prevent whitespace between title and link to cause a jump when JS kicks in.
+			// phpcs:disable Squiz.PHP.EmbeddedPhp.ContentAfterEnd
+			?><a
+				class="jetpack-podcast-player__track-title-link"
+				href="<?php echo esc_url( $track_link ); ?>"
+				target="_blank"
+				rel="noopener noreferrer nofollow"
+			>
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+					<path d="M15.6 7.2H14v1.5h1.6c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.8 0 5.2-2.3 5.2-5.2 0-2.9-2.3-5.2-5.2-5.2zM4.7 12.4c0-2 1.7-3.7 3.7-3.7H10V7.2H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2H10v-1.5H8.4c-2 0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z" />
+				</svg>
+			</a>
+		<?php endif; // phpcs:enable ?>
+	</span>
+
+	<?php if ( ! empty( $template_props['title'] ) ) : ?>
+		<span class="jetpack-podcast-player--visually-hidden"> - </span>
+
+		<?php
+		render(
+			'podcast-title',
+			array(
+				'title' => $template_props['title'],
+				'link'  => $template_props['link'],
+			)
+		);
+		?>
+	<?php endif; ?>
+</h2>