@automattic/newspack-blocks 1.0.0-hotfix-cap-count-user-posts-dedup.1

package/src/blocks/iframe/view.scss

@@ -0,0 +1,9 @@
+body.newspack-post-with-fullscreen-iframe {
+	#page {
+		visibility: hidden;
+	}
+
+	.wp-block-newspack-blocks-iframe {
+		visibility: visible;
+	}
+}

package/src/blocks/shared/author.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const authorCustomFields = window.newspack_blocks_data?.author_custom_fields || [];
+
+export const AuthorDisplaySettings = ( { attributes, setAttributes } ) => {
+	const fields = [
+		...[
+			{
+				name: 'Bio',
+				label: __( 'Biographical info', 'newspack-blocks' ),
+			},
+			{
+				name: 'Social',
+				label: __( 'Social links', 'newspack-blocks' ),
+			},
+			{
+				name: 'Email',
+				label: __( 'Email address', 'newspack-blocks' ),
+			},
+			{
+				name: 'ArchiveLink',
+				label: __( 'Link to author archive', 'newspack-blocks' ),
+			},
+		],
+		...authorCustomFields,
+	];
+	return (
+		<>
+			<p>{ __( 'Display the following fields:', 'newspack-blocks' ) }</p>
+			{ fields.map( field => {
+				const attributeName = `show${ field.name }`;
+				return (
+					<ToggleControl
+						key={ field.name }
+						label={ field.label }
+						checked={ Boolean( attributes[ attributeName ] ) }
+						onChange={ () => setAttributes( { [ attributeName ]: ! attributes[ attributeName ] } ) }
+					/>
+				);
+			} ) }
+		</>
+	);
+};

package/src/blocks/video-playlist/edit.js

@@ -0,0 +1,222 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import apiFetch from '@wordpress/api-fetch';
+import { Component, Fragment } from '@wordpress/element';
+import { Notice, Placeholder, Spinner, PanelBody } from '@wordpress/components';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { addQueryArgs } from '@wordpress/url';
+import { decodeEntities } from '@wordpress/html-entities';
+
+class Edit extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {
+			isLoading: false,
+			error: '',
+			embed: '',
+			interactive: false,
+		};
+	}
+
+	/**
+	 * Refresh preview on load.
+	 */
+	componentDidMount() {
+		this.refreshPreview();
+	}
+
+	/**
+	 * Refresh preview if something changes.
+	 *
+	 * @param {Object} prevProps Previous object props.
+	 */
+	componentDidUpdate( prevProps ) {
+		const { attributes } = this.props;
+		const { categories, videosToShow } = attributes;
+		const { attributes: prevAttributes } = prevProps;
+		const { categories: prevCategories, videosToShow: prevVideosToShow } = prevAttributes;
+
+		if ( categories !== prevCategories || videosToShow !== prevVideosToShow ) {
+			this.refreshPreview();
+		}
+	}
+
+	/**
+	 * Bring the overlay back up when the block is un-selected.
+	 * The overlay handling is the same as the core embed blocks.
+	 *
+	 * @see https://github.com/WordPress/gutenberg/blob/8e7f7b1a388829ac46fb6917351c7d064905af9a/packages/block-library/src/embed/embed-preview.js#L27-L111
+	 * @param {Object} nextProps Next object props.
+	 * @param {Object} state     Object state.
+	 * @return {Object} State or null.
+	 */
+	static getDerivedStateFromProps( nextProps, state ) {
+		if ( ! nextProps.isSelected && state.interactive ) {
+			return { interactive: false };
+		}
+
+		return null;
+	}
+
+	/**
+	 * Fetch the latest preview for the current attributes.
+	 */
+	refreshPreview() {
+		const { attributes } = this.props;
+		const { categories, videosToShow } = attributes;
+
+		const basePath = '/newspack-blocks/v1/video-playlist';
+		const path = addQueryArgs( basePath, {
+			categories,
+			videosToShow,
+		} );
+
+		this.setState( { isLoading: true }, () => {
+			apiFetch( {
+				path,
+			} )
+				.then( response => {
+					const { html } = response;
+					this.setState( {
+						embed: html,
+						isLoading: false,
+					} );
+				} )
+				.catch( error => {
+					this.setState( {
+						isLoading: false,
+						error: error.message,
+					} );
+				} );
+		} );
+	}
+
+	/**
+	 * Render an informational placeholder for loading and errors.
+	 */
+	renderPlaceholder() {
+		const { isLoading, error, embed } = this.state;
+
+		if ( isLoading ) {
+			return <Placeholder icon={ <Spinner /> } className="component-placeholder__align-center" />;
+		}
+
+		if ( error.length ) {
+			return <Placeholder icon="warning" label={ __( 'Error', 'newspack-blocks' ) } instructions={ error } />;
+		}
+
+		if ( ! embed.length ) {
+			return (
+				<Placeholder icon="warning" label={ __( 'Error', 'newspack-blocks' ) } instructions={ __( 'No videos found', 'newspack-blocks' ) } />
+			);
+		}
+
+		return null;
+	}
+
+	/**
+	 * Fetch and decode Category autocomplete options.
+	 *
+	 * @param {string} search The text input into the field so far.
+	 * @return {Array} Autocomplete suggestion tokens.
+	 */
+	fetchCategorySuggestions = search => {
+		return apiFetch( {
+			path: addQueryArgs( '/wp/v2/categories', {
+				search,
+				per_page: 20,
+				_fields: 'id,name',
+				orderby: 'count',
+				order: 'desc',
+			} ),
+		} ).then( function ( categories ) {
+			return categories.map( category => ( {
+				value: category.id,
+				label: decodeEntities( category.name ) || __( '(no title)', 'newspack-blocks' ),
+			} ) );
+		} );
+	};
+
+	/**
+	 * Convert saved Category IDs into tokens.
+	 *
+	 * @param {Array} categoryIDs array of Category IDs.
+	 * @return {Array} Tokens.
+	 */
+	fetchSavedCategories = categoryIDs => {
+		return apiFetch( {
+			path: addQueryArgs( '/wp/v2/categories', {
+				per_page: 100,
+				_fields: 'id,name',
+				include: categoryIDs.join( ',' ),
+			} ),
+		} ).then( function ( categories ) {
+			return categories.map( category => ( {
+				value: category.id,
+				label: decodeEntities( category.name ) || __( '(no title)', 'newspack-blocks' ),
+			} ) );
+		} );
+	};
+
+	/**
+	 * Render.
+	 */
+	render() {
+		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>
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings', 'newspack-blocks' ) } initialOpen={ true }>
+						<Notice status="warning" isDismissible={ false }>
+							<Warning />
+						</Notice>
+					</PanelBody>
+				</InspectorControls>
+				<div { ...this.props.blockProps }>
+					<div>
+						{ ( isLoading || '' === embed ) && this.renderPlaceholder() }
+						{ ! ( isLoading || '' === embed ) && (
+							<div className="wpbnbvp-preview">
+								<div dangerouslySetInnerHTML={ { __html: embed } } />
+							</div>
+						) }
+						{ ! isLoading && (
+							<div className="wpbnbvp__overlay">
+								<Warning />
+							</div>
+						) }
+					</div>
+				</div>
+			</Fragment>
+		);
+	}
+}
+
+const EditWithBlockProps = props => {
+	const blockProps = useBlockProps();
+	return <Edit { ...props } blockProps={ blockProps } />;
+};
+
+export default EditWithBlockProps;

package/src/blocks/video-playlist/editor.js

@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { name, settings } from '.';
+
+registerBlockType( `newspack-blocks/${ name }`, settings );

package/src/blocks/video-playlist/editor.scss

@@ -0,0 +1,23 @@
+@use "newspack-colors" as np-colors;
+@use "../../shared/sass/placeholder";
+
+/**
+ * Prevents interaction with the player until the block is focused.
+ */
+.wpbnbvp__overlay {
+	align-content: center;
+	background-color: rgba(np-colors.$neutral-000, 0.9);
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	left: 0;
+	height: 100%;
+	position: absolute;
+	text-align: center;
+	top: 0;
+	width: 100%;
+}
+
+.wpbnbvp-preview {
+	position: relative;
+}

package/src/blocks/video-playlist/index.js

@@ -0,0 +1,54 @@
+/**
+ * Newspack dependencies
+ */
+import colors from 'newspack-colors';
+import { playlist as icon } from 'newspack-icons';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+
+/**
+ * Style dependencies - will load in editor
+ */
+import './editor.scss';
+
+export const name = 'youtube-video-playlist';
+export const title = __( 'YouTube Video Playlist (DEPRECATED)', 'newspack-blocks' );
+
+export const settings = {
+	apiVersion: 3,
+	title,
+	icon: {
+		src: icon,
+		foreground: colors[ 'primary-400' ],
+	},
+	category: 'newspack',
+	keywords: [ __( 'video', 'newspack-blocks' ), __( 'playlist', 'newspack-blocks' ), __( 'youtube', 'newspack-blocks' ) ],
+	description: __( 'Embed a playlist of latest YouTube videos.', 'newspack-blocks' ),
+	attributes: {
+		className: {
+			type: 'string',
+		},
+		categories: {
+			type: 'array',
+			default: [],
+		},
+		videosToShow: {
+			type: 'integer',
+			default: 5,
+		},
+	},
+	supports: {
+		html: false,
+		align: true,
+	},
+	edit,
+	save: () => null, // to use view.php
+};

package/src/blocks/video-playlist/view.php

@@ -0,0 +1,188 @@
+<?php
+/**
+ * Server-side rendering of the `newspack-blocks/video-playlist` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `newspack-blocks/video-playlist` block on server.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string
+ */
+function newspack_blocks_render_block_video_playlist( $attributes ) {
+	Newspack_Blocks::enqueue_view_assets( 'video-playlist' );
+
+	$videos = newspack_blocks_get_video_playlist( $attributes );
+	return $videos['html'];
+}
+
+/**
+ * Registers the `newspack-blocks/donate` block on server.
+ */
+function newspack_blocks_register_video_playlist() {
+	register_block_type(
+		'newspack-blocks/youtube-video-playlist',
+		array(
+			'api_version'     => 3,
+			'attributes'      => array(
+				'className'    => array(
+					'type' => 'string',
+				),
+				'categories'   => array(
+					'type'    => 'array',
+					'default' => array(),
+					'items'   => array(
+						'type' => 'integer',
+					),
+				),
+				'videosToShow' => array(
+					'type'    => 'integer',
+					'default' => 5,
+				),
+			),
+			'render_callback' => 'newspack_blocks_render_block_video_playlist',
+			'supports'        => [],
+		)
+	);
+}
+add_action( 'init', 'newspack_blocks_register_video_playlist' );
+
+/**
+ * Get video playlist data for general args.
+ *
+ * @param array $args Arguments. See $defaults.
+ * @return array of video info.
+ */
+function newspack_blocks_get_video_playlist( $args ) {
+	$defaults = array(
+		'categories'   => array(),
+		'videos'       => array(),
+		'videosToShow' => 5,
+		'className'    => '',
+		'manual'       => false,
+		'align'        => '',
+	);
+	$args     = wp_parse_args( $args, $defaults );
+
+	if ( $args['manual'] ) {
+		$videos = array_map( 'esc_url_raw', $args['videos'] );
+	} else {
+		$videos = newspack_blocks_get_video_playlist_videos( $args );
+	}
+
+	$html = '';
+	if ( $videos ) {
+		$html = newspack_blocks_get_video_playlist_html( $videos, $args );
+	}
+
+	return array(
+		'videos' => $videos,
+		'html'   => $html,
+	);
+}
+
+/**
+ * Get video URLs from among published post content.
+ *
+ * @param array $args Arguments. See $defaults.
+ * @return array of strings.
+ */
+function newspack_blocks_get_video_playlist_videos( $args ) {
+	$defaults = array(
+		'categories'   => array(),
+		'videosToShow' => 5,
+	);
+	$args     = wp_parse_args( $args, $defaults );
+
+	$query_args = array(
+		'post_type'      => 'post',
+		'post_status'    => 'publish',
+		's'              => 'youtube',
+		'posts_per_page' => $args['videosToShow'],
+	);
+
+	if ( ! empty( $args['categories'] ) ) {
+		$query_args['category__in'] = $args['categories'];
+	}
+
+	$videos = array();
+	$posts  = get_posts( $query_args );
+	foreach ( $posts as $post ) {
+		$blocks         = parse_blocks( $post->post_content );
+		$youtube_blocks = array_filter(
+			$blocks,
+			function( $block ) {
+				return ( 'core/embed' === $block['blockName'] && 'youtube' === $block['attrs']['providerNameSlug'] )
+					|| 'core-embed/youtube' === $block['blockName'];
+			}
+		);
+		foreach ( $youtube_blocks as $youtube_block ) {
+			if ( isset( $youtube_block['attrs']['url'] ) ) {
+				$videos[] = esc_url( $youtube_block['attrs']['url'] );
+			}
+		}
+	}
+
+	return array_slice( array_unique( $videos ), 0, $args['videosToShow'] );
+}
+
+/**
+ * Get embed html for an array of YouTube video URLs.
+ *
+ * @param array $videos YouTube video URLs.
+ * @param array $args 'className', 'align' are currently supported.
+ * @return string HTML embed.
+ */
+function newspack_blocks_get_video_playlist_html( $videos, $args = array() ) {
+	$video_ids = array();
+	foreach ( $videos as $video ) {
+		$url_parts = wp_parse_url( $video );
+		if ( empty( $url_parts['query'] ) ) {
+			continue;
+		}
+
+		wp_parse_str( $url_parts['query'], $query_parts );
+		if ( ! empty( $query_parts['v'] ) ) {
+			$video_ids[] = $query_parts['v'];
+		}
+	}
+
+	if ( empty( $video_ids ) ) {
+		return '';
+	}
+
+	$url = 'https://www.youtube.com/embed/' . $video_ids[0] . '?rel=0&showinfo=1';
+	if ( count( $video_ids ) > 1 ) {
+		$url .= '&playlist=' . implode( ',', array_slice( $video_ids, 1 ) );
+	}
+
+	$classes = array(
+		'wp-block-newspack-blocks-video-playlist',
+		'wpbnbvp',
+		'wp-block-embed-youtube',
+		'wp-block-embed',
+		'is-type-video',
+		'is-provider-youtube',
+		'wp-embed-aspect-16-9',
+		'wp-has-aspect-ratio',
+	);
+
+	if ( ! empty( $args['className'] ) ) {
+		$classes[] = $args['className'];
+	}
+	if ( ! empty( $args['align'] ) ) {
+		$classes[] = 'align' . $args['align'];
+	}
+	ob_start();
+	?>
+	<figure class='<?php echo esc_attr( implode( ' ', $classes ) ); ?>'>
+		<div class='wp-block-embed__wrapper'>
+			<iframe width='960' height='540' src='<?php echo esc_url( $url ); ?>' frameborder='0' allowfullscreen allow="autoplay; encrypted-media"></iframe>
+		</div>
+	</figure>
+	<?php
+	return ob_get_clean();
+}