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

package/src/blocks/iframe/edit.js

@@ -0,0 +1,232 @@
+/**
+ * Newspack dependencies
+ */
+import { iframe as icon } from 'newspack-icons';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment, useState } from '@wordpress/element';
+import { InspectorControls, BlockControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	PanelBody,
+	ToggleControl,
+	Toolbar,
+	FocusableIframe,
+	Notice,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { seen } from '@wordpress/icons';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import IframePlaceholder from './iframe-placeholder';
+
+const IframeEdit = ( { attributes, setAttributes } ) => {
+	const blockProps = useBlockProps();
+	const label = __( 'Iframe', 'block title' );
+	const { mode, src, archiveFolder, isFullScreen, height, width } = attributes;
+	const [ showPreview, setShowPreview ] = useState( true );
+	const [ isUploadingArchive, setIsUploadingArchive ] = useState();
+	const [ error, setError ] = useState();
+
+	const sizeUnits = [
+		{ value: 'px', label: 'px' },
+		{ value: '%', label: '%' },
+		{ value: 'em', label: 'em' },
+	];
+
+	const embedURL = async url => {
+		setError( null );
+		setIsUploadingArchive( true );
+
+		try {
+			const formData = new FormData();
+			formData.append( 'iframe_url', url );
+
+			const { mode: iframeMode } = await apiFetch( {
+				path: '/newspack-blocks/v1/newspack-blocks-iframe-mode-from-url',
+				method: 'POST',
+				body: formData,
+			} );
+
+			setAttributes( {
+				mode: iframeMode,
+				src: url,
+			} );
+			setShowPreview( true );
+
+			// remove current archive folder if exists.
+			if ( archiveFolder ) {
+				deleteIframeArchive();
+			}
+		} catch ( e ) {
+			setError( e.message || __( 'An error occured when uploading the iframe archive.', 'newspack-blocks' ) );
+		}
+
+		setIsUploadingArchive( false );
+	};
+
+	const uploadIframeArchive = async archiveFile => {
+		setError( null );
+		setIsUploadingArchive( true );
+
+		try {
+			const formData = new FormData();
+			formData.append( 'archive_folder', archiveFolder );
+			formData.append( 'iframe_file', archiveFile );
+
+			const {
+				src: iframeArchiveSrc,
+				dir: iframeArchiveFolder,
+				mode: iframeMode,
+			} = await apiFetch( {
+				path: '/newspack-blocks/v1/newspack-blocks-iframe-archive',
+				method: 'POST',
+				body: formData,
+			} );
+
+			setAttributes( {
+				mode: iframeMode,
+				src: iframeArchiveSrc,
+				archiveFolder: iframeArchiveFolder,
+			} );
+
+			setShowPreview( true );
+		} catch ( e ) {
+			setError( e.message || __( 'An error occured when uploading the iframe archive.', 'newspack-blocks' ) );
+		}
+
+		setIsUploadingArchive( false );
+	};
+
+	const setIframeArchiveFromMedia = async mediaId => {
+		setError( null );
+		setIsUploadingArchive( true );
+
+		try {
+			const formData = new FormData();
+			formData.append( 'media_id', mediaId );
+
+			const {
+				src: iframeArchiveSrc,
+				dir: iframeArchiveFolder,
+				mode: iframeMode,
+			} = await apiFetch( {
+				path: '/newspack-blocks/v1/newspack-blocks-iframe-archive-from-media',
+				method: 'POST',
+				body: formData,
+			} );
+
+			setAttributes( {
+				mode: iframeMode,
+				src: iframeArchiveSrc,
+				archiveFolder: iframeArchiveFolder,
+			} );
+			setShowPreview( true );
+		} catch ( e ) {
+			setError( e.message || __( 'An error occured when setting the iframe from the archive media.', 'newspack-blocks' ) );
+		}
+
+		setIsUploadingArchive( false );
+	};
+
+	const deleteIframeArchive = () => {
+		// Do not remove archive if it's used (if a user clicks on embed after uploading the archive.)
+		if ( src && archiveFolder && ! src.includes( archiveFolder ) ) {
+			apiFetch( {
+				path: '/newspack-blocks/v1/newspack-blocks-remove-iframe-archive',
+				method: 'DELETE',
+				body: JSON.stringify( { archive_folder: archiveFolder } ),
+			} );
+		}
+	};
+
+	const iframeControls = [
+		{
+			icon: seen,
+			title: showPreview ? __( 'Hide iframe preview', 'newspack-blocks' ) : __( 'Show iframe preview', 'newspack-blocks' ),
+			onClick: () => setShowPreview( ! showPreview ),
+			isActive: showPreview,
+		},
+	];
+
+	return (
+		<Fragment>
+			<BlockControls>
+				<Toolbar controls={ src && iframeControls } />
+			</BlockControls>
+
+			<InspectorControls>
+				<PanelBody title={ __( 'Iframe Settings', 'newspack-blocks' ) } initialOpen={ true }>
+					<Fragment>
+						<ToggleControl
+							label={ __( 'Fullscreen', 'newspack-blocks' ) }
+							help={ __( 'If enabled, the iframe will be full screen and hide all the post content.', 'newspack-blocks' ) }
+							checked={ isFullScreen }
+							onChange={ _isFullScreen => setAttributes( { isFullScreen: _isFullScreen } ) }
+							required
+						/>
+
+						{ ! isFullScreen && (
+							<div className="wp-block-newspack-blocks-iframe__unit-control">
+								<UnitControl
+									label={ __( 'Width', 'newspack-blocks' ) }
+									onChange={ _width => setAttributes( { width: _width } ) }
+									value={ width }
+									units={ sizeUnits }
+								/>
+								<UnitControl
+									label={ __( 'Height', 'newspack-blocks' ) }
+									onChange={ _height => setAttributes( { height: _height } ) }
+									value={ height }
+									units={ sizeUnits }
+								/>
+							</div>
+						) }
+					</Fragment>
+				</PanelBody>
+			</InspectorControls>
+			<div { ...blockProps }>
+				{ isFullScreen && (
+					<Notice status="warning" className="wp-block-newspack-blocks-iframe-notice" isDismissible={ false }>
+						{ __( 'This block will take over the page content.', 'newspack-blocks' ) }
+					</Notice>
+				) }
+				{ src && showPreview ? (
+					<div className="iframe-container">
+						<FocusableIframe
+							title={ __( 'Newspack embedded iframe', 'newspack-blocks' ) }
+							src={ 'document' === mode ? `https://docs.google.com/gview?embedded=true&url=${ encodeURIComponent( src ) }` : src }
+							style={ {
+								width: isFullScreen ? '100vw' : width,
+								height: isFullScreen ? '100vh' : height,
+								maxWidth: '100%',
+								maxHeight: '100%',
+								pointerEvents: 'none',
+							} }
+						/>
+					</div>
+				) : (
+					<IframePlaceholder
+						icon={ icon }
+						label={ label }
+						src={ src }
+						onSelectURL={ embedURL }
+						onSelectMedia={ setIframeArchiveFromMedia }
+						isUploadingArchive={ isUploadingArchive }
+						archiveFolder={ archiveFolder }
+						uploadIframeArchive={ uploadIframeArchive }
+						error={ error }
+					/>
+				) }
+			</div>
+		</Fragment>
+	);
+};
+
+export default IframeEdit;

package/src/blocks/iframe/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/iframe/editor.scss

@@ -0,0 +1,84 @@
+@use "../../shared/sass/variables";
+@use "../../shared/sass/mixins";
+
+.editor-styles-wrapper {
+	.components-form-file-upload {
+		display: flex;
+	}
+
+	.wp-block-newspack-blocks-iframe-notice {
+		margin: 0;
+		width: 100%;
+	}
+
+	.wp-block-newspack-blocks-iframe {
+		.wp-block-newspack-blocks-iframe__input {
+			border-radius: 2px;
+			margin: 0 8px 0 0;
+			flex: 1 1 auto;
+		}
+
+		.components-placeholder__fieldset {
+			> * {
+				width: 100%;
+				margin-bottom: 1.5rem;
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
+}
+
+.wp-block-newspack-blocks-iframe__url-input-container {
+	.wp-block-newspack-blocks-iframe__button {
+		margin-bottom: 0;
+	}
+}
+
+.wp-block-newspack-blocks-iframe__url-input-form {
+	display: flex;
+
+	input[type="url"].wp-block-newspack-blocks-iframe__url-input-form__url-input-field {
+		width: 100%;
+		min-width: 200px;
+
+		@include mixins.media( tablet ) {
+			width: 300px;
+		}
+
+		flex-grow: 1;
+		border: none;
+		border-radius: 0;
+		margin: 2px;
+	}
+}
+
+.wp-block-newspack-blocks-iframe__url-input-form__url-input-submit-button {
+	flex-shrink: 1;
+}
+
+.wp-block-newspack-blocks-iframe__button {
+	margin-bottom: 0.5rem;
+}
+
+.wp-block-newspack-blocks-iframe__cancel-button.is-link {
+	margin: 1em;
+	display: block;
+}
+
+.wp-block-newspack-blocks-iframe.is-appender {
+	min-height: 0;
+
+	&:hover {
+		cursor: pointer;
+		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+	}
+}
+
+.wp-block-newspack-blocks-iframe__unit-control {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-gap: 1em;
+}

package/src/blocks/iframe/iframe-placeholder.js

@@ -0,0 +1,166 @@
+/* global newspack_blocks_data */
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, Placeholder, FormFileUpload, Spinner, Notice } from '@wordpress/components';
+import { BlockIcon, URLPopover, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import { keyboardReturn } from '@wordpress/icons';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+const allowedTypes = newspack_blocks_data?.iframe_accepted_file_mimes || [];
+
+const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
+	<URLPopover onClose={ onClose }>
+		<form className="wp-block-newspack-blocks-iframe__url-input-form" onSubmit={ onSubmit }>
+			<input
+				className="wp-block-newspack-blocks-iframe__url-input-form__url-input-field"
+				type="url"
+				aria-label={ __( 'URL' ) }
+				placeholder={ __( 'Paste or type URL' ) }
+				onChange={ onChange }
+				value={ src }
+			/>
+			<Button
+				className="wp-block-newspack-blocks-iframe__url-input-form__url-input-submit-button"
+				icon={ keyboardReturn }
+				label={ __( 'Apply' ) }
+				type="submit"
+			/>
+		</form>
+	</URLPopover>
+);
+
+const IframePlaceholder = ( { icon, label, src, onSelectURL, onSelectMedia, isUploadingArchive, archiveFolder, uploadIframeArchive, error } ) => {
+	const [ isURLInputVisible, setIsURLInputVisible ] = useState( false );
+	const [ urlFieldValue, setUrlFieldValue ] = useState( src );
+
+	// URL text field
+	const onChangeUrlField = event => {
+		setUrlFieldValue( event.target.value );
+	};
+
+	const openURLInput = () => {
+		setIsURLInputVisible( true );
+	};
+	const closeURLInput = () => {
+		setIsURLInputVisible( false );
+	};
+
+	const onSubmitSrc = event => {
+		event.preventDefault();
+		if ( urlFieldValue && onSelectURL ) {
+			onSelectURL( urlFieldValue );
+			closeURLInput();
+		}
+	};
+
+	const onSelectImage = media => {
+		onSelectMedia( media.id );
+	};
+
+	// Uploader
+	const onUpload = event => {
+		const files = event.target.files;
+		if ( 0 < files.length ) {
+			uploadIframeArchive( files.item( 0 ) );
+		}
+	};
+
+	const renderMediaLibraryButton = onSelect => {
+		return (
+			<MediaUploadCheck>
+				<MediaUpload
+					onSelect={ onSelect }
+					allowedTypes={ Object.keys( allowedTypes ) }
+					render={ ( { open } ) => {
+						return (
+							<Button variant="tertiary" onClick={ open }>
+								{ __( 'Media Library', 'newspack-blocks' ) }
+							</Button>
+						);
+					} }
+				/>
+			</MediaUploadCheck>
+		);
+	};
+
+	const renderUrlSelectionUI = isUpdate => {
+		return (
+			onSelectURL && (
+				<div className="wp-block-newspack-blocks-iframe__url-input-container">
+					<Button isTertiary onClick={ openURLInput } isPressed={ isURLInputVisible } variant="tertiary">
+						{ isUpdate ? __( 'Update from URL', 'newspack-blocks' ) : __( 'Embed from URL', 'newspack-blocks' ) }
+					</Button>
+					{ isURLInputVisible && (
+						<InsertFromURLPopover
+							src={ urlFieldValue }
+							onChange={ onChangeUrlField }
+							onSubmit={ onSubmitSrc }
+							onClose={ closeURLInput }
+						/>
+					) }
+				</div>
+			)
+		);
+	};
+
+	return (
+		<Placeholder
+			icon={ <BlockIcon icon={ icon } showColors /> }
+			label={ label }
+			className="wp-block-newspack-blocks-iframe"
+			instructions={ sprintf(
+				// Translators: %s: describes what kinds of files/embeds the current user can use.
+				__( 'Upload a document file (PDF, Word, Excel sheet, or a PPT), choose one from the media library, %s.', 'newspack-blocks' ),
+				newspack_blocks_data?.iframe_can_upload_archives || false
+					? __( 'embed from a URL, or upload a .zip archive containing HTML assets', 'newspack-blocks' )
+					: __( 'or embed from a URL', 'newspack-blocks' )
+			) }
+		>
+			{ error && (
+				<Notice status="error" className="wp-block-newspack-blocks-iframe-notice" isDismissible={ false }>
+					{ error }
+				</Notice>
+			) }
+
+			<div>
+				{ isUploadingArchive ? (
+					<Spinner />
+				) : (
+					<FormFileUpload
+						accept={ Object.keys( allowedTypes )
+							.map( mime => '.' + allowedTypes[ mime ] )
+							.join( ',' ) }
+						onChange={ onUpload }
+						multiple={ false }
+						render={ ( { openFileDialog } ) => (
+							<>
+								<Button
+									isPrimary
+									className={ classnames(
+										'wp-block-newspack-blocks-iframe__button',
+										'wp-block-newspack-blocks-iframe__upload-button'
+									) }
+									onClick={ openFileDialog }
+								>
+									{ archiveFolder ? __( 'Update', 'newspack-blocks' ) : __( 'Upload', 'newspack-blocks' ) }
+								</Button>
+								{ renderMediaLibraryButton( onSelectImage ) }
+								{ renderUrlSelectionUI( '' !== archiveFolder ) }
+							</>
+						) }
+					/>
+				) }
+			</div>
+		</Placeholder>
+	);
+};
+
+export default IframePlaceholder;

package/src/blocks/iframe/index.js

@@ -0,0 +1,54 @@
+/**
+ * Newspack dependencies
+ */
+import colors from 'newspack-colors';
+import { iframe as icon } from 'newspack-icons';
+
+/**
+ * WordPress dependencies
+ */
+import { ExternalLink } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+const { name, attributes, apiVersion, category } = metadata;
+
+/**
+ * Style dependencies - will load in editor
+ */
+import './editor.scss';
+
+export const title = __( 'Iframe', 'newspack-blocks' );
+
+// Name must be exported separately.
+export { name };
+
+export const settings = {
+	apiVersion,
+	title,
+	icon: {
+		src: icon,
+		foreground: colors[ 'primary-400' ],
+	},
+	category,
+	keywords: [ __( 'iframe', 'newspack-blocks' ), __( 'project iframe', 'newspack-blocks' ) ],
+	description: (
+		<>
+			<p>{ __( 'Embed an iframe.', 'newspack-blocks' ) }</p>
+			<ExternalLink href="https://help.newspack.com/publishing-and-appearance/blocks/iframe-block/">
+				{ __( 'Support reference', 'newspack-blocks' ) }
+			</ExternalLink>
+		</>
+	),
+	attributes,
+	supports: {
+		html: false,
+		align: [ 'wide', 'full' ],
+	},
+	edit,
+	save: () => null, // to use view.php
+};

package/src/blocks/iframe/view.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+
+/**
+ * Style dependencies
+ */
+
+import './view.scss';
+
+domReady( () => {
+	const iframes = Array.from( document.querySelectorAll( '.wp-block-newspack-blocks-iframe iframe' ) );
+	iframes.forEach( iframe => {
+		const timerId = setInterval( function () {
+			iframe.src = iframe.src;
+		}, 2000 );
+
+		iframe.onload = function () {
+			clearInterval( timerId );
+		};
+
+		// Add a listener for dynamic resizing if the iframe supports it.
+		window.addEventListener( 'message', function ( event ) {
+			// Reject messages from untrusted origins.
+			if ( event.origin !== new URL( iframe.src ).origin || iframe.contentWindow !== event.source ) {
+				return;
+			}
+
+			let iframeHeight = 0;
+			if ( event.data && event.data.height ) {
+				if ( typeof event.data.height === 'number' ) {
+					iframeHeight = event.data.height;
+				} else if ( typeof event.data.height === 'string' ) {
+					iframeHeight = Number( event.data.height );
+				}
+			}
+			if ( ! isNaN( iframeHeight ) && iframeHeight > 0 ) {
+				// Remove height from the iframe's parent element if needed.
+				if ( iframe.parentElement && iframe.parentElement.style.height !== 'auto' ) {
+					iframe.parentElement.style.height = 'auto';
+				}
+
+				// Set the new height dynamically.
+				iframe.style.height = iframeHeight + 'px';
+			}
+		} );
+	} );
+} );

package/src/blocks/iframe/view.php

@@ -0,0 +1,116 @@
+<?php
+/**
+ * Server-side rendering of the `newspack-blocks/iframe` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `newspack-blocks/iframe` block on server.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string
+ */
+function newspack_blocks_render_block_iframe( $attributes ) {
+	Newspack_Blocks::enqueue_view_assets( 'iframe' );
+
+	return newspack_blocks_get_iframe( $attributes );
+}
+
+/**
+ * Registers the `newspack-blocks/iframe` block on server.
+ */
+function newspack_blocks_register_iframe() {
+	$block_json = json_decode(
+		file_get_contents( __DIR__ . '/block.json' ), // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
+		true
+	);
+
+	register_block_type(
+		'newspack-blocks/' . $block_json['name'],
+		[
+			'api_version'     => $block_json['apiVersion'],
+			'attributes'      => $block_json['attributes'],
+			'render_callback' => 'newspack_blocks_render_block_iframe',
+		]
+	);
+}
+add_action( 'init', 'newspack_blocks_register_iframe' );
+
+/**
+ * Get iframe data for general args.
+ *
+ * @param array $args Arguments. See $defaults.
+ * @return array of iframe info.
+ */
+function newspack_blocks_get_iframe( $args ) {
+	$defaults = array(
+		'mode'         => 'iframe',
+		'src'          => '',
+		'height'       => '600px',
+		'width'        => '100%',
+		'isFullScreen' => false,
+		'align'        => '',
+	);
+	$args     = wp_parse_args( $args, $defaults );
+
+	return newspack_blocks_get_iframe_html( $args['mode'], $args['src'], $args['height'], $args['width'], $args['isFullScreen'], $args['align'] );
+}
+
+/**
+ * Get embed html for embbed iframe.
+ *
+ * @param string  $mode Embed mode (iframe or document).
+ * @param string  $src Iframe source.
+ * @param string  $height Iframe Height.
+ * @param string  $width Iframe width.
+ * @param boolean $is_full_screen If the Iframe should be rendered full screen.
+ * @param string  $align Iframe block alignment.
+ * @return string HTML embed.
+ */
+function newspack_blocks_get_iframe_html( $mode, $src, $height, $width, $is_full_screen, $align ) {
+	$is_document = 'document' === $mode;
+	$height      = $is_full_screen ? '100' : $height;
+	$width       = $is_full_screen ? '100' : $width;
+	$style       = "height: $height; width: $width;";
+	$layout      = 'responsive';
+	$iframe_id   = 'newspack-iframe-' . wp_generate_password( 12, false );
+	$classes[]   = 'wp-block-newspack-blocks-iframe';
+
+	if ( empty( $src ) ) {
+		return;
+	}
+
+	if ( ! empty( $align ) ) {
+		$classes[] = 'align' . $align;
+	}
+
+	if ( $is_full_screen ) {
+		$layout = 'fill';
+		$style  = 'height: 100vh; width: 100vw; max-width: 100vw; max-height: 100vh; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; margin-top: 0!important;';
+	}
+
+	if ( $is_document ) {
+		$src = 'https://docs.google.com/gview?embedded=true&url=' . rawurlencode( $src );
+	}
+
+	ob_start();
+	?>
+	<figure class='<?php echo esc_attr( implode( ' ', $classes ) ); ?>'>
+		<div class='wp-block-embed__wrapper' style="height:<?php echo esc_attr( $height ); ?>; width:<?php echo esc_attr( $width ); ?>;">
+			<iframe
+				id = '<?php echo esc_attr( $iframe_id ); ?>'
+				layout = '<?php echo esc_attr( $layout ); ?>'
+				height = '100'
+				width = '100'
+				src = '<?php echo esc_attr( $src ); ?>'
+				style = '<?php echo esc_attr( $style ); ?>'
+				frameborder = '0'
+				allowfullscreen
+			></iframe>
+		</div>
+	</figure>
+	<?php
+	return ob_get_clean();
+}