diff --git a/includes/class-newspack-blocks.php b/includes/class-newspack-blocks.php index 252351e8d..f826ebfe1 100644 --- a/includes/class-newspack-blocks.php +++ b/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(); diff --git a/src/blocks/video-playlist/edit.js b/src/blocks/video-playlist/edit.js index 50cc88fd0..372e10d8f 100644 --- a/src/blocks/video-playlist/edit.js +++ b/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 = () => ( + <> +

{ __( 'The YouTube Video Playlist block is deprecated', 'newspack-plugin' ) }

+

YouTube Playlists instead, which can be embedded into post or page content.', 'newspack-blocks' ), + 'https://support.google.com/youtube/answer/57792', + 'https://support.google.com/youtube/answer/171780' + ), + } } /> + + ) return ( - { ( isLoading || '' === embed ) && this.renderPlaceholder() } - { ! ( isLoading || '' === embed ) && ( -

-
- { ! interactive && ( - // eslint-disable-next-line jsx-a11y/no-static-element-interactions -
this.hideOverlay() } /> - ) } -
- ) } +
+ { ( isLoading || '' === embed ) && this.renderPlaceholder() } + { ! ( isLoading || '' === embed ) && ( +
+
+
+ ) } + { ! isLoading && ( +
+ +
+ ) } +
- - setAttributes( { videosToShow: _videosToShow } ) } - min={ 1 } - max={ 30 } - required - /> - setAttributes( { categories: _categories } ) } - fetchSuggestions={ this.fetchCategorySuggestions } - fetchSavedInfo={ this.fetchSavedCategories } - label={ __( 'Categories', 'newspack-blocks' ) } - /> - + + + diff --git a/src/blocks/video-playlist/editor.js b/src/blocks/video-playlist/editor.js index ed4f28163..18cd89a3a 100644 --- a/src/blocks/video-playlist/editor.js +++ b/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 ); +} diff --git a/src/blocks/video-playlist/editor.scss b/src/blocks/video-playlist/editor.scss index 15611d6f9..d19ae86f4 100644 --- a/src/blocks/video-playlist/editor.scss +++ b/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 { diff --git a/src/blocks/video-playlist/index.js b/src/blocks/video-playlist/index.js index 038c4b886..2c2c3892e 100644 --- a/src/blocks/video-playlist/index.js +++ b/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 = ( diff --git a/src/blocks/video-playlist/view.php b/src/blocks/video-playlist/view.php index cf6d8b8d4..2ffdc7553 100644 --- a/src/blocks/video-playlist/view.php +++ b/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(