Merge pull request #266 from 10up/feature/issue-83-latest-episode-block

Feature/issue 83 latest episode block

assets/js/blocks.js

@@ -2,7 +2,7 @@
  * Internal block libraries
  */
 import { __ } from '@wordpress/i18n';
-import { registerBlockType } from '@wordpress/blocks';
+import { registerBlockType, registerBlockVariation } from '@wordpress/blocks';
 
 // Split the Edit component out.
 import Edit from './edit';
@@ -105,3 +105,39 @@ export default registerBlockType(
 		},
 	},
 );
+
+const VARIATION_NAME = 'podcasting/latest-episode';
+
+registerBlockVariation('core/query', {
+	name: VARIATION_NAME,
+	title: 'Latest Podcast Episode',
+	description: 'Displays the latest podcast episode.',
+	isActive: ['simple-podcasting'],
+	icon: 'microphone',
+	attributes: {
+		namespace: VARIATION_NAME,
+		query: {
+			postType: 'post',
+			podcastingQuery: 'not_empty',
+		},
+	},
+	allowedControls: [ ],
+	scope: [ 'inserter' ],
+	innerBlocks: [
+		[
+			'core/post-template',
+			{},
+			[ [
+				'core/group',
+				{ className: 'podcasting-latest-episode' },
+				[
+					[ 'core/post-featured-image' ],
+					[ 'core/group', { className: 'podcasting-latest-episode__content' }, [
+						[ 'core/post-title' ], [ 'core/post-date' ], [ 'core/post-excerpt' ]
+					] ],
+				]
+			] ],
+		],
+		[ 'core/query-no-results' ],
+	],
+});

assets/js/blocks/latest-episode/index.js

@@ -0,0 +1 @@
+import './index.scss';

assets/js/blocks/latest-episode/index.scss

@@ -0,0 +1,51 @@
+.podcasting-latest-episode {
+	display: flex;
+	flex-direction: column;
+	justify-content: end;
+	min-height: 20rem;
+	overflow: hidden;
+	position: relative;
+
+	& .wp-block-post-featured-image {
+		height: 100%;
+		object-fit: fill;
+		object-position: center;
+		position: absolute;
+		width: 100%;
+
+		&::after {
+			background-color: rgb(0 0 0 / 75%);
+			content: "";
+			display: block;
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+	}
+}
+
+.podcasting-latest-episode__content {
+	color: #fff;
+	padding: 3rem;
+	position: relative;
+	z-index: 1;
+
+	@media (min-width: 768px) {
+		padding: 3rem;
+	}
+
+	& .wp-block-post-excerpt,
+	& .wp-block-post-excerpt__more-text {
+		margin-top: 0.25rem;
+	}
+
+	& .wp-block-post-excerpt__more-link {
+		color: #fff;
+	}
+}
+
+.editor-styles-wrapper .wp-block-post-content .podcasting-latest-episode__content .wp-block-post-excerpt__more-link:where(:not(.wp-element-button)) {
+	color: #fff;
+}

includes/blocks.php

@@ -360,3 +360,71 @@ function( $platform ) {
 	wp_send_json_success( $result );
 }
 add_action( 'wp_ajax_get_podcast_platforms', __NAMESPACE__ . '\ajax_get_podcast_platforms' );
+
+/**
+ * Latest podcast query for front-end.
+ *
+ * @param Object $query query object.
+ */
+function latest_episode_query_loop( $query ) {
+
+	// update query to only return posts that have a podcast selected
+	return [
+		'post_type'      => 'post',
+		'posts_per_page' => 1,
+		'orderby'        => 'date',
+		'order'          => 'DESC',
+		'tax_query'      => [
+			[
+				'taxonomy' => 'podcasting_podcasts',
+				'field'    => 'term_id',
+				'operator' => 'EXISTS',
+			],
+		],
+	];
+}
+
+/**
+ * Latest podcast check.
+ *
+ * @param String   $pre_render   pre render object.
+ * @param Array    $parsed_block parsed block object.
+ * @param WP_Block $parent_block parent block object.
+ */
+function latest_episode_check( $pre_render, $parsed_block, $parent_block ) {
+
+	if ( isset( $parsed_block['attrs']['namespace'] ) && 'podcasting/latest-episode' === $parsed_block['attrs']['namespace'] ) {
+		add_action( 'query_loop_block_query_vars', __NAMESPACE__ . '\latest_episode_query_loop' );
+	}
+}
+add_filter( 'pre_render_block', __NAMESPACE__ . '\latest_episode_check', 10, 3 );
+
+/**
+ * Latest podcast query in editor.
+ *
+ * @param Array $args    query args.
+ * @param Array $request request object.
+ */
+function latest_episode_query_api( $args, $request ) {
+
+	$podcasting_podcasts = $request->get_param( 'podcastingQuery' );
+
+	if ( 'not_empty' === $podcasting_podcasts ) {
+		$args = [
+			'post_type'      => 'post',
+			'posts_per_page' => 1,
+			'orderby'        => 'date',
+			'order'          => 'DESC',
+			'tax_query'      => [
+				[
+					'taxonomy' => 'podcasting_podcasts',
+					'field'    => 'term_id',
+					'operator' => 'EXISTS',
+				],
+			],
+		];
+	}
+
+	return $args;
+}
+add_filter( 'rest_post_query', __NAMESPACE__ . '\latest_episode_query_api', 10, 2 );

simple-podcasting.php

@@ -250,3 +250,47 @@ function setup_edit_screen() {
 	}
 }
 add_action( 'admin_init', __NAMESPACE__ . '\setup_edit_screen' );
+
+/**
+ * Registers block assets for Latest Episode.
+ */
+function register_latest_episode_assets() {
+	if ( ! file_exists( PODCASTING_PATH . 'dist/latest-episode.asset.php' ) ) {
+		return;
+	}
+
+	$block_asset = require PODCASTING_PATH . 'dist/latest-episode.asset.php';
+
+	wp_register_style(
+		'latest-episode-block',
+		PODCASTING_URL . 'dist/latest-episode.css',
+		array(),
+		$block_asset['version'],
+		'all'
+	);
+
+	wp_enqueue_style( 'latest-episode-block' );
+}
+add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\register_latest_episode_assets' );
+
+/**
+ * Registers block assets for Latest Episode in admin.
+ */
+function register_latest_episode_assets_admin() {
+	if ( ! file_exists( PODCASTING_PATH . 'dist/latest-episode.asset.php' ) ) {
+		return;
+	}
+
+	$block_asset = require PODCASTING_PATH . 'dist/latest-episode.asset.php';
+
+	wp_register_style(
+		'latest-episode-block',
+		PODCASTING_URL . 'dist/latest-episode.css',
+		array(),
+		$block_asset['version'],
+		'all'
+	);
+
+	wp_enqueue_style( 'latest-episode-block' );
+}
+add_action( 'admin_enqueue_scripts', __NAMESPACE__ . '\register_latest_episode_assets_admin' );

webpack.config.js

@@ -40,6 +40,11 @@ module.exports = {
 			'assets/js',
 			'create-podcast-show.js'
 		),
+		'latest-episode': path.resolve(
+			process.cwd(),
+			'assets/js/blocks/latest-episode',
+			'index.js'
+		),
 	},
 	plugins: [
 		...defaultConfig.plugins,