UrlInput: Reorganize Folder Structure, moving the url-input up in the…

… hierarchy

blocks/editable/format-toolbar/index.js

@@ -10,7 +10,7 @@ import { ESCAPE } from 'utils/keycodes';
  * Internal dependencies
  */
 import './style.scss';
-import LinkInput from './link-input';
+import UrlInput from '../../url-input';
 
 const FORMATTING_CONTROLS = [
 	{
@@ -154,7 +154,7 @@ class FormatToolbar extends Component {
 						className="blocks-format-toolbar__link-modal"
 						style={ linkStyle }
 						onSubmit={ this.submitLink }>
-						<LinkInput value={ this.state.linkValue } onChange={ this.updateLinkValue } />
+						<UrlInput value={ this.state.linkValue } onChange={ this.updateLinkValue } />
 						<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
 						<IconButton icon="editor-unlink" label={ __( 'Remove link' ) } onClick={ this.dropLink } />
 					</form>

blocks/editable/format-toolbar/style.scss

@@ -25,64 +25,3 @@
 		@include long-content-fade( $size: 40% );
 	}
 }
-
-// Link input
-.blocks-format-toolbar__link-input {
-	width: 100%;
-	flex-grow: 1;
-	position: relative;
-
-	input[type=url] {
-		padding: 10px;
-		font-size: $default-font-size;
-		width: 100%;
-		border: none;
-		outline: none;
-		box-shadow: none;
-	}
-
-	&:focus {
-		border: none;
-		box-shadow: none;
-		outline: none;
-	}
-
-	.spinner {
-		position: absolute;
-		right: 0;
-		top: 10px;
-		margin: 0;
-	}
-}
-
-.blocks-format-toolbar__link-input-suggestions {
-	position: absolute;
-	top: 100%;
-	left: 0;
-	right: -64px; // to match the link modal borders
-	background: $white;
-	max-height: 200px;
-	overflow-y: scroll;
-	transition: all .15s ease-in-out;
-	list-style: none;
-	margin: 0;
-	box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
-	z-index: z-index( '.blocks-format-toolbar__link-input-suggestions' )
-}
-
-.blocks-format-toolbar__link-input-suggestion {
-	color: $dark-gray-500;
-	display: block;
-	font-size: $default-font-size;
-	padding: 4px 8px;
-	cursor: pointer;
-	background: $white;
-	width: 100%;
-	border: none;
-	text-align: left;
-
-	&.is-selected {
-		background: $blue-medium-500;
-		color: $white;
-	}
-}

blocks/library/button/index.js

@@ -11,7 +11,7 @@ import './style.scss';
 import './block.scss';
 import { registerBlockType, query } from '../../api';
 import Editable from '../../editable';
-import LinkInput from '../../editable/format-toolbar/link-input';
+import UrlInput from '../../url-input';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 
@@ -61,7 +61,7 @@ registerBlockType( 'core/button', {
 					<form
 						className="blocks-format-toolbar__link-modal"
 						onSubmit={ ( event ) => event.preventDefault() }>
-						<LinkInput
+						<UrlInput
 							value={ url }
 							onChange={ ( value ) => setAttributes( { url: value } ) }
 						/>

blocks/library/button/style.scss

@@ -18,7 +18,7 @@ $blocks-button__height: 46px;
 		transform: translateX( -50% );
 	}
 
-	.blocks-format-toolbar__link-input-suggestions {
+	.blocks-link-url__suggestions {
 		right: -35px;
 	}
 }

blocks/library/image/index.js

@@ -21,7 +21,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';
+import UrlInputButton from '../../url-input/button';
 
 const { attr, children } = query;
 
@@ -96,7 +96,7 @@ registerBlockType( 'core/image', {
 								<Dashicon icon="edit" />
 							</MediaUploadButton>
 						</li>
-						<UrlInput onChange={ onSetHref } url={ href } />
+						<UrlInputButton onChange={ onSetHref } url={ href } />
 					</Toolbar>
 				</BlockControls>
 			)

blocks/url-input/button.js

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import './style.scss';
+import { __ } from 'i18n';
+import { Component } from 'element';
+import { IconButton } from 'components';
+
+/**
+ * Internal dependencies
+ */
+import UrlInput from './';
+
+class UrlInputButton 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="blocks-url-input__button">
+				<IconButton
+					icon="admin-links"
+					label={ __( 'Edit Image Link' ) }
+					onClick={ this.toggle }
+					className={ classnames( 'components-toolbar__control', {
+						'is-active': url,
+					} ) }
+				/>
+				{ expanded &&
+					<form
+						className="blocks-format-toolbar__link-modal"
+						onSubmit={ this.submitLink }>
+						<IconButton
+							className="blocks-url-input__back"
+							icon="arrow-left-alt"
+							label={ __( 'Close' ) }
+							onClick={ this.toggle }
+						/>
+						<UrlInput value={ url || '' } onChange={ onChange } />
+						<IconButton
+							icon="editor-break"
+							label={ __( 'Submit' ) }
+							type="submit"
+						/>
+					</form>
+				}
+			</li>
+		);
+	}
+}
+
+export default UrlInputButton;