fix: deprecate video playlist block

includes/class-newspack-blocks.php

@@ -241,6 +241,7 @@ public static function enqueue_block_editor_assets() {
 				'custom_taxonomies'          => self::get_custom_taxonomies(),
 				'can_use_name_your_price'    => self::can_use_name_your_price(),
 				'tier_amounts_template'      => self::get_formatted_amount(),
+				'can_use_video_playlist'     => self::can_use_video_playlist_block(),
 			];
 
 			if ( class_exists( 'WP_REST_Newspack_Author_List_Controller' ) ) {
@@ -1643,5 +1644,29 @@ public static function get_image_caption( $attachment_id = null, $include_captio
 
 		return $combined_caption;
 	}
+
+	/**
+	 * Check if the current site can use the Video Playlist block.
+	 * If the block doesn't already exist in site content, it won't be registered.
+	 */
+	public static function can_use_video_playlist_block() {
+		// Check if the block exists in any content on the site.
+		$existing_blocks = new WP_Query(
+			[
+				'fields'         => 'ids',
+				'post_type'      => 'any',
+				'post_status'    => 'publish',
+				's'              => 'newspack-blocks/youtube-video-playlist',
+				'posts_per_page' => 1,
+			]
+		);
+
+		// Don't register the block if it's not already on the site.
+		if ( 0 < $existing_blocks->found_posts ) {
+			return true;
+		}
+
+		return false;
+	}
 }
 Newspack_Blocks::init();

src/blocks/video-playlist/edit.js

@@ -1,19 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { Component, Fragment } from '@wordpress/element';
-import { Placeholder, Spinner, PanelBody, RangeControl } from '@wordpress/components';
+import { Notice, Placeholder, Spinner, PanelBody } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import { addQueryArgs } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 
-/**
- * Internal dependencies.
- */
-import AutocompleteTokenField from '../../components/autocomplete-tokenfield';
-
 class Edit extends Component {
 	constructor( props ) {
 		super( props );
@@ -175,55 +170,46 @@ class Edit extends Component {
 		} );
 	};
 
-	/**
-	 * Hide the overlay so users can play the videos.
-	 */
-	hideOverlay() {
-		this.setState( { interactive: true } );
-	}
-
 	/**
 	 * Render.
 	 */
 	render() {
-		const { attributes, setAttributes } = this.props;
-		const { categories, videosToShow } = attributes;
-		const { embed, isLoading, interactive } = this.state;
+		const { embed, isLoading } = this.state;
+
+		const Warning = () => (
+			<>
+				<h2>{ __( 'The YouTube Video Playlist block is deprecated', 'newspack-plugin' ) }</h2>
+				<p dangerouslySetInnerHTML={ {
+					__html: sprintf(
+						// translators: %1$s is the link to Google's help doc on creating YouTube playlists. %2$s is the link to the help doc on embedding playlists.
+						__( 'Consider using <a href="%1$s">YouTube Playlists</a> instead, which can be <a href="%2$s">embedded</a> into post or page content.', 'newspack-blocks' ),
+						'https://support.google.com/youtube/answer/57792',
+						'https://support.google.com/youtube/answer/171780'
+					),
+				} } />
+			</>
+		)
 
 		return (
 			<Fragment>
-				{ ( isLoading || '' === embed ) && this.renderPlaceholder() }
-				{ ! ( isLoading || '' === embed ) && (
-					<div className="wpbnbvp-preview">
-						<div dangerouslySetInnerHTML={ { __html: embed } } />
-						{ ! interactive && (
-							// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-							<div className="wpbnbvp__overlay" onMouseUp={ () => this.hideOverlay() } />
-						) }
-					</div>
-				) }
+				<div>
+					{ ( isLoading || '' === embed ) && this.renderPlaceholder() }
+					{ ! ( isLoading || '' === embed ) && (
+						<div className="wpbnbvp-preview">
+							<div dangerouslySetInnerHTML={ { __html: embed } } />
+						</div>
+					) }
+					{ ! isLoading && (
+						<div className="wpbnbvp__overlay">
+							<Warning />
+						</div>
+					) }
+				</div>
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings', 'newspack-blocks' ) } initialOpen={ true }>
-						<Fragment>
-							<RangeControl
-								className="videosToShow"
-								label={ __( 'Videos', 'newspack-blocks' ) }
-								help={ __( 'The maximum number of videos to pull from posts.', 'newspack-blocks' ) }
-								value={ videosToShow }
-								onChange={ _videosToShow => setAttributes( { videosToShow: _videosToShow } ) }
-								min={ 1 }
-								max={ 30 }
-								required
-							/>
-							<AutocompleteTokenField
-								key="categories"
-								tokens={ categories || [] }
-								onChange={ _categories => setAttributes( { categories: _categories } ) }
-								fetchSuggestions={ this.fetchCategorySuggestions }
-								fetchSavedInfo={ this.fetchSavedCategories }
-								label={ __( 'Categories', 'newspack-blocks' ) }
-							/>
-						</Fragment>
+						<Notice status="warning" isDismissible={ false }>
+							<Warning />
+						</Notice>
 					</PanelBody>
 				</InspectorControls>
 			</Fragment>

src/blocks/video-playlist/editor.js

@@ -4,4 +4,6 @@
 import { registerBlockType } from '@wordpress/blocks';
 import { name, settings } from '.';
 
-registerBlockType( `newspack-blocks/${ name }`, settings );
+if ( window.newspack_blocks_data?.can_use_video_playlist ) {
+	registerBlockType( `newspack-blocks/${ name }`, settings );
+}

src/blocks/video-playlist/editor.scss

@@ -5,8 +5,17 @@
  * Prevents interaction with the player until the block is focused.
  */
 .wpbnbvp__overlay {
+	align-content: center;
+	background-color: rgba(255, 255, 255, 0.9);
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	left: 0;
+	height: 100%;
 	position: absolute;
-	inset: 0;
+	text-align: center;
+	top: 0;
+	width: 100%;
 }
 
 .wpbnbvp-preview {

src/blocks/video-playlist/index.js

@@ -15,7 +15,7 @@ import edit from './edit';
 import './editor.scss';
 
 export const name = 'youtube-video-playlist';
-export const title = __( 'YouTube Video Playlist', 'newspack-blocks' );
+export const title = __( 'YouTube Video Playlist (DEPRECATED)', 'newspack-blocks' );
 
 export const icon = (
 	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">

src/blocks/video-playlist/view.php

@@ -23,6 +23,10 @@ function newspack_blocks_render_block_video_playlist( $attributes ) {
  * Registers the `newspack-blocks/donate` block on server.
  */
 function newspack_blocks_register_video_playlist() {
+	if ( ! Newspack_Blocks::can_use_video_playlist_block() ) {
+		return;
+	}
+
 	register_block_type(
 		'newspack-blocks/youtube-video-playlist',
 		array(