Implement File block

components/clipboard-button/index.js

@@ -83,8 +83,17 @@ class ClipboardButton extends Component {
 		const classes = classnames( 'components-clipboard-button', className );
 		const ComponentToUse = icon ? IconButton : Button;
 
+		// Workaround for inconsistent behavior in Safari, where <textarea> is not
+		// the document.activeElement at the moment when the copy event fires.
+		// This causes documentHasSelection() in the copy-handler component to
+		// mistakenly override the ClipboardButton, and copy a serialized string
+		// of the current block instead.
+		const focusOnCopyEventTarget = ( e ) => {
+			e.target.focus();
+		};
+
 		return (
-			<span ref={ this.bindContainer }>
+			<span ref={ this.bindContainer } onCopy={ focusOnCopyEventTarget }>
 				<ComponentToUse { ...buttonProps } className={ classes }>
 					{ children }
 				</ComponentToUse>

core-blocks/file/edit.js

@@ -0,0 +1,228 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { getBlobByURL, revokeBlobURL } from '@wordpress/utils';
+import {
+	ClipboardButton,
+	IconButton,
+	Toolbar,
+	withAPIData,
+	withNotices,
+} from '@wordpress/components';
+import { Component, compose, Fragment } from '@wordpress/element';
+import {
+	MediaUpload,
+	MediaPlaceholder,
+	BlockControls,
+	RichText,
+	editorMediaUpload,
+} from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import FileBlockInspector from './inspector';
+import FileBlockEditableLink from './editable-link';
+
+class FileEdit extends Component {
+	constructor() {
+		super( ...arguments );
+
+		const {
+			showDownloadButton = true,
+			buttonText = __( 'Download' ),
+		} = this.props.attributes;
+
+		this.onSelectFile = this.onSelectFile.bind( this );
+
+		// Initialize default values if undefined
+		this.props.setAttributes( {
+			showDownloadButton,
+			buttonText,
+		} );
+
+		this.state = {
+			showCopyConfirmation: false,
+		};
+	}
+
+	componentDidMount() {
+		const { href } = this.props.attributes;
+
+		// Upload a file drag-and-dropped into the editor
+		if ( this.isBlobURL( href ) ) {
+			getBlobByURL( href )
+				.then( ( file ) => {
+					editorMediaUpload( {
+						allowedType: '*',
+						filesList: [ file ],
+						onFileChange: ( [ media ] ) => this.onSelectFile( media ),
+					} );
+					revokeBlobURL( href );
+				} );
+		}
+	}
+
+	componentDidUpdate( prevProps ) {
+		// Reset copy confirmation state when block is deselected
+		if ( prevProps.isSelected && ! this.props.isSelected ) {
+			this.setState( { showCopyConfirmation: false } );
+		}
+	}
+
+	onSelectFile( media ) {
+		if ( media && media.url ) {
+			this.props.setAttributes( {
+				href: media.url,
+				fileName: media.title,
+				textLinkHref: media.url,
+				id: media.id,
+			}, this.props.media.get /* refetch attachment page url */ );
+		}
+	}
+
+	isBlobURL( url = '' ) {
+		return url.indexOf( 'blob:' ) === 0;
+	}
+
+	render() {
+		const {
+			fileName,
+			href,
+			textLinkHref,
+			openInNewWindow,
+			showDownloadButton,
+			buttonText,
+			id,
+		} = this.props.attributes;
+		const {
+			className,
+			isSelected,
+			setAttributes,
+			noticeUI,
+			noticeOperations,
+			media,
+		} = this.props;
+		const { showCopyConfirmation } = this.state;
+		const attachmentPage = ( id !== undefined ) && media.data && media.data.link;
+
+		const classNames = [
+			className,
+			this.isBlobURL( href ) ? 'is-transient' : '',
+		].join( ' ' );
+
+		const confirmCopyURL = () => {
+			this.setState( { showCopyConfirmation: true } );
+		};
+		const resetCopyConfirmation = () => {
+			this.setState( { showCopyConfirmation: false } );
+		};
+
+		// Choose Media File or Attachment Page (when file is in Media Library)
+		const changeLinkDestinationOption = ( newHref ) => {
+			setAttributes( { textLinkHref: newHref } );
+		};
+		const changeOpenInNewWindow = ( newValue ) => {
+			setAttributes( {
+				openInNewWindow: newValue ? '_blank' : false,
+			} );
+		};
+		const changeShowDownloadButton = ( newValue ) => {
+			setAttributes( { showDownloadButton: newValue } );
+		};
+
+		if ( ! href ) {
+			return (
+				<MediaPlaceholder
+					icon="media-default"
+					labels={ {
+						title: __( 'File' ),
+						name: __( 'a file' ),
+					} }
+					onSelect={ this.onSelectFile }
+					notices={ noticeUI }
+					onError={ noticeOperations.createErrorNotice }
+					accept="*"
+					type="*"
+				/>
+			);
+		}
+
+		return (
+			<Fragment>
+				<FileBlockInspector
+					hrefs={ { href, textLinkHref, attachmentPage } }
+					{ ...{
+						openInNewWindow,
+						showDownloadButton,
+						changeLinkDestinationOption,
+						changeOpenInNewWindow,
+						changeShowDownloadButton,
+					} }
+				/>
+				<BlockControls>
+					<Toolbar>
+						<MediaUpload
+							onSelect={ this.onSelectFile }
+							type="*"
+							value={ id }
+							render={ ( { open } ) => (
+								<IconButton
+									className="components-toolbar__control"
+									label={ __( 'Edit file' ) }
+									onClick={ open }
+									icon="edit"
+								/>
+							) }
+						/>
+					</Toolbar>
+				</BlockControls>
+				<div className={ classNames }>
+					<div>
+						<FileBlockEditableLink
+							className={ className }
+							placeholder={ __( 'Write file name…' ) }
+							text={ fileName }
+							href={ textLinkHref }
+							updateFileName={ ( text ) => setAttributes( { fileName: text } ) }
+						/>
+						{ showDownloadButton &&
+							<div className={ `${ className }__button-richtext-wrapper` }>
+								<RichText
+									tagName="div" // must be block-level or else cursor disappears
+									className={ `${ className }__button` }
+									value={ buttonText }
+									formattingControls={ [] } // disable controls
+									placeholder={ __( 'Add text…' ) }
+									keepPlaceholderOnFocus
+									multiline="false"
+									onChange={ ( text ) => setAttributes( { buttonText: text } ) }
+								/>
+							</div>
+						}
+					</div>
+					{ isSelected &&
+						<ClipboardButton
+							isDefault
+							text={ href }
+							className={ `${ className }__copy-url-button` }
+							onCopy={ confirmCopyURL }
+							onFinishCopy={ resetCopyConfirmation }
+						>
+							{ showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy URL' ) }
+						</ClipboardButton>
+					}
+				</div>
+			</Fragment>
+		);
+	}
+}
+
+export default compose( [
+	withAPIData( ( props ) => ( {
+		media: `/wp/v2/media/${ props.attributes.id }`,
+	} ) ),
+	withNotices,
+] )( FileEdit );

core-blocks/file/editable-link.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { Component, Fragment } from '@wordpress/element';
+
+export default class FileBlockEditableLink extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.state = {
+			showPlaceholder: ! this.props.text,
+		};
+	}
+
+	componentDidUpdate( prevProps ) {
+		if ( prevProps.text !== this.props.text ) {
+			this.setState( { showPlaceholder: ! this.props.text } );
+		}
+	}
+
+	render() {
+		const { className, placeholder, text, href, updateFileName } = this.props;
+		const { showPlaceholder } = this.state;
+
+		const copyLinkToClipboard = ( e ) => {
+			const selectedText = document.getSelection().toString();
+			const htmlLink = `<a href="${ href }">${ selectedText }</a>`;
+			e.clipboardData.setData( 'text/plain', selectedText );
+			e.clipboardData.setData( 'text/html', htmlLink );
+		};
+
+		const forcePlainTextPaste = ( e ) => {
+			e.preventDefault();
+
+			const selection = document.getSelection();
+			const clipboard =
+				e.clipboardData.getData( 'text/plain' ).replace( /[\n\r]/g, '' );
+			const textNode = document.createTextNode( clipboard );
+
+			selection.getRangeAt( 0 ).insertNode( textNode );
+			selection.collapseToEnd();
+		};
+
+		const showPlaceholderIfEmptyString = ( e ) => {
+			if ( e.target.innerText === '' ) {
+				this.setState( { showPlaceholder: true } );
+			} else {
+				this.setState( { showPlaceholder: false } );
+			}
+		};
+
+		return (
+			<Fragment>
+				<a
+					aria-label={ placeholder }
+					className={ `${ className }__textlink` }
+					contentEditable={ true }
+					href={ href }
+					onBlur={ ( e ) => updateFileName( e.target.innerText ) }
+					onInput={ showPlaceholderIfEmptyString }
+					onCopy={ copyLinkToClipboard }
+					onCut={ copyLinkToClipboard }
+					onPaste={ forcePlainTextPaste }
+				>
+					{ text }
+				</a>
+				{ showPlaceholder &&
+					// Disable reason: Only useful for mouse users
+					/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+					<span
+						className={ `${ className }__textlink-placeholder` }
+						onClick={ ( e ) => e.target.previousSibling.focus() }
+					>
+						{ placeholder }
+					</span>
+					/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+				}
+			</Fragment>
+		);
+	}
+}

core-blocks/file/editor.scss

@@ -0,0 +1,35 @@
+.wp-block-file {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 0;
+
+	&.is-transient {
+		@include loading_fade;
+	}
+
+	&__textlink {
+		color: $blue-medium-700;
+		min-width: 1em;
+		text-decoration: underline;
+
+		&:focus {
+			box-shadow: none;
+			color: $blue-medium-700;
+		}
+	}
+
+	&__textlink-placeholder {
+		opacity: .5;
+		text-decoration: underline;
+	}
+
+	&__button-richtext-wrapper {
+		display: inline-block;
+		margin-left: 0.75em;
+	}
+
+	&__copy-url-button {
+		margin-left: 1em;
+	}
+}