Add support for optional links in image blocks (#1772)

* Create UrlInput component.
* Add support for href value to image blocks.
* Polish link input positioning.
* Handle already set url and dismiss link input when submitting link with enter.
* Code style cleanup.

blocks/library/image/index.js

@@ -16,6 +16,7 @@ import TextControl from '../../inspector-controls/text-control';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import BlockDescription from '../../block-description';
+import UrlInput from '../../url-input';
 
 const { attr, children } = query;
 
@@ -30,6 +31,7 @@ registerBlockType( 'core/image', {
 		url: attr( 'img', 'src' ),
 		alt: attr( 'img', 'alt' ),
 		caption: children( 'figcaption' ),
+		href: attr( 'a', 'href' ),
 	},
 
 	transforms: {
@@ -57,13 +59,14 @@ registerBlockType( 'core/image', {
 	},
 
 	edit( { attributes, setAttributes, focus, setFocus, className } ) {
-		const { url, alt, caption, align, id } = attributes;
+		const { url, alt, caption, align, id, href } = attributes;
 		const updateAlt = ( newAlt ) => setAttributes( { alt: newAlt } );
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const onSelectImage = ( media ) => {
 			setAttributes( { url: media.url, alt: media.alt, caption: media.caption, id: media.id } );
 		};
 		const uploadButtonProps = { isLarge: true };
+		const onSetHref = ( event ) => setAttributes( { href: event.target.value } );
 
 		const controls = (
 			focus && (
@@ -88,6 +91,7 @@ registerBlockType( 'core/image', {
 								<Dashicon icon="edit" />
 							</MediaUploadButton>
 						</li>
+						<UrlInput onChange={ onSetHref } url={ href } />
 					</Toolbar>
 				</BlockControls>
 			)
@@ -149,17 +153,22 @@ registerBlockType( 'core/image', {
 	},
 
 	save( { attributes } ) {
-		const { url, alt, caption, align = 'none' } = attributes;
+		const { url, alt, caption, align = 'none', href } = attributes;
 		const needsWrapper = [ 'wide', 'full' ].indexOf( align ) !== -1;
 
 		// If there's no caption set only save the image element.
 		if ( ! needsWrapper && ( ! caption || ! caption.length ) ) {
-			return <img src={ url } alt={ alt } className={ `align${ align }` } />;
+			const imageWithAlignment = <img src={ url } alt={ alt } className={ `align${ align }` } />;
+			return href
+				? <a href={ href }>{ imageWithAlignment }</a>
+				: imageWithAlignment;
 		}
 
+		const image = <img src={ url } alt={ alt } />;
+
 		return (
 			<figure className={ `align${ align }` }>
-				<img src={ url } alt={ alt } />
+				{ href ? <a href={ href }>{ image }</a> : image }
 				{ caption && !! caption.length && <figcaption>{ caption }</figcaption> }
 			</figure>
 		);

blocks/library/image/style.scss

@@ -6,3 +6,10 @@
 		width: 100%;
 	}
 }
+
+.editor-visual-editor__block[data-type="core/image"] {
+	.editable-format-toolbar__link-modal {
+		top: 0;
+		left: 0;
+	}
+}

blocks/url-input/index.js

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import './style.scss';
+import { __ } from 'i18n';
+import { Component } from 'element';
+import { IconButton } from 'components';
+
+class UrlInput extends Component {
+	constructor() {
+		super( ...arguments );
+		this.toggle = this.toggle.bind( this );
+		this.submitLink = this.submitLink.bind( this );
+		this.state = {
+			expanded: false,
+		};
+	}
+
+	toggle() {
+		this.setState( { expanded: ! this.state.expanded } );
+	}
+
+	submitLink( event ) {
+		event.preventDefault();
+		this.toggle();
+	}
+
+	render() {
+		const { url, onChange } = this.props;
+		const { expanded } = this.state;
+
+		return (
+			<li className="components-url-input">
+				<IconButton
+					icon="admin-links"
+					onClick={ this.toggle }
+					className={ classnames( 'components-toolbar__control', {
+						'is-active': url,
+					} ) }
+				/>
+				{ expanded &&
+					<form
+						className="editable-format-toolbar__link-modal"
+						onSubmit={ this.submitLink }>
+						<IconButton className="components-url-input__back" icon="arrow-left-alt" onClick={ this.toggle } />
+						<input
+							className="editable-format-toolbar__link-input"
+							type="url"
+							value={ url }
+							onChange={ onChange }
+							placeholder={ __( 'Paste URL or type' ) }
+						/>
+						<IconButton icon="editor-break" type="submit" />
+					</form>
+				}
+			</li>
+		);
+	}
+}
+
+export default UrlInput;

blocks/url-input/style.scss

@@ -0,0 +1,18 @@
+ul.components-toolbar > li.components-url-input {
+	position: inherit;	// let the dialog position according to parent
+}
+
+.components-url-input .components-url-input__back {
+	margin-right: 4px;
+	overflow: visible;
+
+	&::after {
+		content: '';
+		position: absolute;
+		display: block;
+		width: 1px;
+		height: 24px;
+		right: -1px;
+		background: $light-gray-500;
+	}
+}