@automattic/newspack-blocks 1.37.0 → 1.48.0

package/src/blocks/iframe/edit.js

@@ -0,0 +1,252 @@
+/**
+ * WordPress dependencies
+ */
+import { Fragment, useState } from '@wordpress/element';
+import { InspectorControls, BlockControls } from '@wordpress/block-editor';
+import {
+	PanelBody,
+	Path,
+	ToggleControl,
+	Toolbar,
+	FocusableIframe,
+	Notice,
+	SVG,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import IframePlaceholder from './iframe-placeholder';
+import { iframeIcon } from './icons';
+
+const iconPreview = (
+	<SVG xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+		<Path d="M12 18.8c-4.8 0-8.5-6.1-8.6-6.4l-.3-.4.2-.4c.2-.3 3.9-6.4 8.6-6.4 4.7 0 8.5 6.1 8.6 6.4l.2.4-.2.4c0 .2-3.7 6.4-8.5 6.4zM4.9 12c.9 1.3 3.8 5.2 7.1 5.2s6.3-4 7.1-5.2c-.9-1.3-3.8-5.3-7.1-5.3-3.3.1-6.3 4-7.1 5.3z" />
+		<Path d="M15 11.2c-.3.5-.8.8-1.4.8-.9 0-1.6-.7-1.6-1.6 0-.5.3-1 .7-1.3-.2 0-.5-.1-.7-.1-1.7 0-3.2 1.4-3.2 3.2s1.4 3.2 3.2 3.2c1.7 0 3.2-1.4 3.2-3.2 0-.3-.1-.7-.2-1z" />
+	</SVG>
+);
+
+const IframeEdit = ( { attributes, setAttributes } ) => {
+	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: <Icon icon={ iconPreview } />,
+			title: showPreview
+				? __( 'Hide iframe preview', 'newspack-blocks' )
+				: __( 'Show iframe preview', 'newspack-blocks' ),
+			onClick: () => setShowPreview( ! showPreview ),
+			isActive: showPreview,
+		},
+	];
+
+	return (
+		<Fragment>
+			{ 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,
+							'max-width': '100%',
+							'max-height': '100%',
+						} }
+					></FocusableIframe>
+				</div>
+			) : (
+				<IframePlaceholder
+					icon={ iframeIcon }
+					label={ label }
+					src={ src }
+					onSelectURL={ embedURL }
+					onSelectMedia={ setIframeArchiveFromMedia }
+					isUploadingArchive={ isUploadingArchive }
+					archiveFolder={ archiveFolder }
+					uploadIframeArchive={ uploadIframeArchive }
+					error={ error }
+				/>
+			) }
+
+			<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>
+		</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 @@
+@import '../../shared/sass/variables';
+@import '../../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 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/icons.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export const iframeIcon = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V9.8l4.7-5.3H19c.3 0 .5.2.5.5v14zm-6-9.5L16 12l-2.5 2.8 1.1 1L18 12l-3.5-3.5-1 1zm-3 0l-1-1L6 12l3.5 3.8 1.1-1L8 12l2.5-2.5z" />
+	</SVG>
+);

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

@@ -0,0 +1,180 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Button, Placeholder, FormFileUpload, Spinner, Notice } from '@wordpress/components';
+import { BlockIcon, URLPopover, MediaUpload } from '@wordpress/block-editor';
+import { keyboardReturn } from '@wordpress/icons';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+const allowedTypes = window.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 (
+			<MediaUpload
+				onSelect={ onSelect }
+				allowedTypes={ allowedTypes }
+				render={ ( { open } ) => {
+					return (
+						<Button variant="tertiary" onClick={ open }>
+							{ __( 'Media Library', 'newspack-blocks' ) }
+						</Button>
+					);
+				} }
+			/>
+		);
+	};
+
+	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={ __(
+				'Upload an asset folder (.zip), a document (PDF, Word, Excel sheet, or a PPT), pick one from your media library, or add one with a URL.',
+				'newspack-blocks'
+			) }
+		>
+			{ error && (
+				<Notice
+					status="error"
+					className="wp-block-newspack-blocks-iframe-notice"
+					isDismissible={ false }
+				>
+					{ error }
+				</Notice>
+			) }
+
+			<div>
+				{ isUploadingArchive ? (
+					<Spinner />
+				) : (
+					<FormFileUpload
+						accept={ allowedTypes.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,48 @@
+/**
+ * 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, category } = metadata;
+
+/**
+ * Style dependencies - will load in editor
+ */
+import './editor.scss';
+import { iframeIcon } from './icons';
+
+export const title = __( 'Iframe', 'newspack-blocks' );
+
+// Name must be exported separately.
+export { name };
+
+export const settings = {
+	title,
+	icon: {
+		src: iframeIcon,
+		foreground: '#36f',
+	},
+	category,
+	keywords: [ __( 'iframe', 'newspack-blocks' ), __( 'project iframe', 'newspack-blocks' ) ],
+	description: (
+		<>
+			<p>{ __( 'Embed an iframe.', 'newspack-blocks' ) }</p>
+			<ExternalLink href={ __( 'https://newspack.pub/support/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,5 @@
+/**
+ * Style dependencies
+ */
+
+import './view.scss';