Experimental Link creation interface

packages/block-editor/README.md

@@ -302,6 +302,10 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inspector-controls/README.md>
 
+<a name="LinkControl" href="#LinkControl">#</a> **LinkControl**
+
+Undocumented declaration.
+
 <a name="MediaPlaceholder" href="#MediaPlaceholder">#</a> **MediaPlaceholder**
 
 _Related_

packages/block-editor/src/components/index.js

@@ -22,6 +22,7 @@ export { default as __experimentalGradientPickerControl } from './gradient-picke
 export { default as InnerBlocks } from './inner-blocks';
 export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
 export { default as InspectorControls } from './inspector-controls';
+export { default as LinkControl } from './link-control';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';
 export { default as MediaUploadCheck } from './media-upload/check';

packages/block-editor/src/components/link-control/index.js

@@ -0,0 +1,117 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	IconButton,
+} from '@wordpress/components';
+
+import { __ } from '@wordpress/i18n';
+
+import {
+	useCallback,
+	useState,
+	useRef,
+	Fragment,
+} from '@wordpress/element';
+
+import {
+	LEFT,
+	RIGHT,
+	UP,
+	DOWN,
+	BACKSPACE,
+	ENTER,
+} from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import {
+	URLPopover,
+	URLInput,
+} from '../';
+
+function LinkControl( { defaultOpen = false } ) {
+	// State
+	const [ isOpen, setIsOpen ] = useState( defaultOpen );
+	const [ inputValue, setInputValue ] = useState( '' );
+
+	// Refs
+	const autocompleteRef = useRef( null );
+
+	// Effects
+	const openLinkUI = useCallback( () => {
+		setIsOpen( true );
+	} );
+
+	// Handlers
+	const onInputChange = ( value = '' ) => {
+		setInputValue( value );
+	};
+
+	const onSubmitLinkChange = ( value ) => {
+		setInputValue( value );
+	};
+
+	const stopPropagation = ( event ) => {
+		event.stopPropagation();
+	};
+
+	const stopPropagationRelevantKeys = ( event ) => {
+		if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) {
+			// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
+			event.stopPropagation();
+		}
+	};
+
+	return (
+		<Fragment>
+			<IconButton
+				icon="insert"
+				className="components-toolbar__control"
+				label={ __( 'Insert link' ) }
+				onClick={ openLinkUI }
+			/>
+
+			{ isOpen && (
+
+				<URLPopover>
+					<div className="link-control__popover-inner">
+						<div className="link-control__search">
+
+							<form
+								onSubmit={ onSubmitLinkChange }
+							>
+
+								<URLInput
+									value={ inputValue }
+									onChange={ onInputChange }
+									autocompleteRef={ autocompleteRef }
+									onKeyDown={ stopPropagationRelevantKeys }
+									onKeyPress={ stopPropagation }
+									placeholder={ __( 'Search or type url' ) }
+								/>
+								<IconButton
+									className="screen-reader-text"
+									icon="editor-break"
+									label={ __( 'Apply' ) }
+									type="submit"
+								/>
+								<IconButton
+									type="reset"
+									label={ __( 'Reset' ) }
+									icon="no-alt"
+									className="link-control__search-reset"
+									onClick={ () => onInputChange() }
+								/>
+							</form>
+						</div>
+					</div>
+				</URLPopover>
+
+			) }
+		</Fragment>
+	);
+}
+
+export default LinkControl;

packages/block-editor/src/components/link-control/style.scss

@@ -0,0 +1,22 @@
+.link-control__popover-inner {
+	padding: 20px;
+}
+
+.link-control__search {
+	position: relative;
+}
+
+.link-control__search-input {
+	border: 1px solid #000;
+	padding-right: 36px; // width of reset button
+
+	.components-button {
+		display: none;
+	}
+}
+
+.link-control__search-reset {
+	position: absolute;
+	top: 0;
+	right: 0;
+}

packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Basic rendering should render icon button and in closed state by default 1`] = `"<button type=\\"button\\" aria-label=\\"Insert link\\" class=\\"components-button components-icon-button components-toolbar__control\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-insert\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zm1-11H9v3H6v2h3v3h2v-3h3V9h-3V6z\\"></path></svg></button>"`;

packages/block-editor/src/components/link-control/test/index.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act, Simulate } from 'react-dom/test-utils';
+
+/**
+ * Internal dependencies
+ */
+import LinkControl from '../index';
+
+let container = null;
+beforeEach( () => {
+	// setup a DOM element as a render target
+	container = document.createElement( 'div' );
+	document.body.appendChild( container );
+} );
+
+afterEach( () => {
+	// cleanup on exiting
+	unmountComponentAtNode( container );
+	container.remove();
+	container = null;
+} );
+
+describe( 'Basic rendering', () => {
+	it( 'should render icon button and in closed state by default', () => {
+		act( () => {
+			render(
+				<LinkControl
+				/>, container
+			);
+		} );
+		const openIconButton = container.querySelector( '[aria-label="Insert link"]' );
+		const openIcon = openIconButton.querySelector( 'svg' );
+		const expectedIconClassName = expect.stringContaining( 'dashicons-insert' );
+
+		expect( openIconButton ).not.toBeNull();
+		expect( openIcon.getAttribute( 'class' ) ).toEqual( expectedIconClassName );
+
+		expect( container.innerHTML ).toMatchSnapshot();
+	} );
+
+	it( 'should render core link ui interface when open', () => {
+		act( () => {
+			render(
+				<LinkControl
+					defaultOpen={ true }
+				/>, container
+			);
+		} );
+
+		// Search Input UI
+		// const searchInputLabel = Array.from( container.querySelectorAll( 'label' ) ).find( ( label ) => label.innerText === 'Search or input url' );
+		const searchInput = container.querySelector( 'input[aria-label="URL"]' );
+
+		// expect( searchInputLabel ).not.toBeNull();
+		expect( searchInput ).not.toBeNull();
+	} );
+
+	it( 'should toggle link ui open on icon ui click', () => {
+		act( () => {
+			render(
+				<LinkControl
+				/>, container
+			);
+		} );
+		const openIconButton = container.querySelector( '[aria-label="Insert link"]' );
+
+		act( () => {
+			Simulate.click( openIconButton );
+		} );
+
+		expect( openIconButton.nextSibling.innerHTML ).toEqual( expect.stringMatching( 'Search or type url' ) );
+	} );
+} );

packages/block-editor/src/components/url-input/index.js

@@ -230,7 +230,7 @@ class URLInput extends Component {
 	}
 
 	render() {
-		const { value = '', autoFocus = true, instanceId, className, id, isFullWidth, hasBorder } = this.props;
+		const { value = '', autoFocus = true, instanceId, className, id, isFullWidth, hasBorder, placeholder = __( 'Paste URL or type to search' ) } = this.props;
 		const { showSuggestions, suggestions, selectedSuggestion, loading } = this.state;
 
 		const suggestionsListboxId = `block-editor-url-input-suggestions-${ instanceId }`;
@@ -251,7 +251,7 @@ class URLInput extends Component {
 					value={ value }
 					onChange={ this.onChange }
 					onInput={ stopEventPropagation }
-					placeholder={ __( 'Paste URL or type to search' ) }
+					placeholder={ placeholder }
 					onKeyDown={ this.onKeyDown }
 					role="combobox"
 					aria-expanded={ showSuggestions }

packages/block-editor/src/style.scss

@@ -18,6 +18,7 @@
 @import "./components/contrast-checker/style.scss";
 @import "./components/default-block-appender/style.scss";
 @import "./components/gradient-picker/control.scss";
+@import "./components/link-control/style.scss";
 @import "./components/inner-blocks/style.scss";
 @import "./components/inserter-with-shortcuts/style.scss";
 @import "./components/inserter/style.scss";