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,171 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { isFunction, partialRight, noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ExternalLink,
+	Popover,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+import {
+	useCallback,
+	useState,
+} from '@wordpress/element';
+
+import { safeDecodeURI, filterURLForDisplay, isURL, prependHTTP } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import LinkControlSettingsDrawer from './settings-drawer';
+import LinkControlSearchItem from './search-item';
+import LinkControlInputSearch from './input-search';
+
+function LinkControl( { currentLink, fetchSearchSuggestions, onLinkChange, onSettingChange = { noop }, linkSettings } ) {
+	// State
+	const [ inputValue, setInputValue ] = useState( '' );
+	const [ isEditingLink, setIsEditingLink ] = useState( true );
+
+	// Handlers
+	const onInputChange = ( value = '' ) => {
+		setInputValue( value );
+	};
+
+	const closeLinkUI = () => {
+		resetInput();
+	};
+
+	const resetInput = useCallback( () => {
+		setInputValue( '' );
+	} );
+
+	const onLinkSelect = ( event, suggestion ) => {
+		event.preventDefault();
+		event.stopPropagation();
+
+		setIsEditingLink( false );
+
+		if ( isFunction( onLinkChange ) ) {
+			onLinkChange( suggestion );
+		}
+	};
+
+	const onStartEditing = () => {
+		setIsEditingLink( true );
+	};
+
+	const handleURLSearch = async ( value ) => {
+		return [ {
+			id: '1',
+			title: value,
+			type: 'URL',
+			url: prependHTTP( value ),
+		} ];
+	};
+
+	const handleEntitySearch = async ( value ) => {
+		const results = await Promise.all( [
+			fetchSearchSuggestions( value ),
+			handleURLSearch( value ),
+		] );
+
+		const couldBeURL = ! value.includes( ' ' );
+
+		// If it's potentially a URL search then concat on a URL search suggestion
+		// just for good measure. That way once the actual results run out we always
+		// have a URL option to fallback on.
+		return couldBeURL ? results[ 0 ].concat( results[ 1 ] ) : results[ 0 ];
+	};
+
+	// Effects
+	const getSearchHandler = useCallback( ( value ) => {
+		return ( isURL( value ) || value.includes( 'www.' ) ) ? handleURLSearch( value ) : handleEntitySearch( value );
+	}, [ handleURLSearch, fetchSearchSuggestions ] );
+
+	// Render Components
+	const renderSearchResults = ( { suggestionsListProps, buildSuggestionItemProps, suggestions, selectedSuggestion, isLoading } ) => {
+		const resultsListClasses = classnames( 'block-editor-link-control__search-results', {
+			'is-loading': isLoading,
+		} );
+		/* eslint-disable react/jsx-key */
+		return (
+			<div className="block-editor-link-control__search-results-wrapper">
+				<div { ...suggestionsListProps } className={ resultsListClasses }>
+					{ suggestions.map( ( suggestion, index ) => (
+						<LinkControlSearchItem
+							key={ `${ suggestion.id }-${ index }` }
+							itemProps={ buildSuggestionItemProps( suggestion, index ) }
+							suggestion={ suggestion }
+							onClick={ partialRight( onLinkSelect, suggestion ) }
+							isSelected={ index === selectedSuggestion }
+							isURL={ suggestion.type.toLowerCase() === 'url' }
+							searchTerm={ inputValue }
+						/>
+					) ) }
+				</div>
+			</div>
+		);
+		/* eslint-enable react/jsx-key */
+	};
+
+	return (
+		<Popover
+			className="block-editor-link-control"
+			onClose={ closeLinkUI }
+			position="bottom center"
+			focusOnMount="firstElement"
+		>
+			<div className="block-editor-link-control__popover-inner">
+				<div className="block-editor-link-control__search">
+
+					{ ! isEditingLink && (
+						<div
+							className={ classnames( 'block-editor-link-control__search-item', {
+								'is-current': true,
+							} ) }
+						>
+							<span className="block-editor-link-control__search-item-header">
+
+								<ExternalLink
+									className="block-editor-link-control__search-item-title"
+									href={ currentLink.url }
+								>
+									{ currentLink.title }
+								</ExternalLink>
+								<span className="block-editor-link-control__search-item-info">{ currentLink.info || filterURLForDisplay( safeDecodeURI( currentLink.url ) ) || '' }</span>
+							</span>
+
+							<Button isDefault onClick={ onStartEditing } className="block-editor-link-control__search-item-action block-editor-link-control__search-item-action--edit">
+								{ __( 'Change' ) }
+							</Button>
+						</div>
+					) }
+
+					{ isEditingLink && (
+						<LinkControlInputSearch
+							value={ inputValue }
+							onChange={ onInputChange }
+							onSelect={ onLinkSelect }
+							renderSuggestions={ renderSearchResults }
+							fetchSuggestions={ getSearchHandler }
+							onReset={ resetInput }
+						/>
+					) }
+
+					{ ! isEditingLink && (
+						<LinkControlSettingsDrawer settings={ linkSettings } onSettingChange={ onSettingChange } />
+					) }
+				</div>
+			</div>
+		</Popover>
+	);
+}
+
+export default LinkControl;

packages/block-editor/src/components/link-control/input-search.js

@@ -0,0 +1,69 @@
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	IconButton,
+} from '@wordpress/components';
+import {
+	LEFT,
+	RIGHT,
+	UP,
+	DOWN,
+	BACKSPACE,
+	ENTER,
+} from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import {
+	URLInput,
+} from '../';
+
+const LinkControlInputSearch = ( { value, onChange, onSelect, renderSuggestions, fetchSuggestions, onReset } ) => {
+	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.
+			stopPropagation( event );
+		}
+	};
+
+	return (
+		<form>
+			<URLInput
+				className="block-editor-link-control__search-input"
+				value={ value }
+				onChange={ onChange }
+				onKeyDown={ ( event, suggestion ) => {
+					stopPropagationRelevantKeys( event );
+					if ( event.keyCode === ENTER ) {
+						onSelect( event, suggestion );
+					}
+				} }
+				onKeyPress={ stopPropagation }
+				placeholder={ __( 'Search or type url' ) }
+				renderSuggestions={ renderSuggestions }
+				fetchLinkSuggestions={ fetchSuggestions }
+				handleURLSuggestions={ true }
+			/>
+
+			<IconButton
+				disabled={ ! value.length }
+				type="reset"
+				label={ __( 'Reset' ) }
+				icon="no-alt"
+				className="block-editor-link-control__search-reset"
+				onClick={ onReset }
+			/>
+
+		</form>
+	);
+};
+
+export default LinkControlInputSearch;

packages/block-editor/src/components/link-control/search-item.js

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import TextHighlight from './text-highlight';
+
+/**
+ * WordPress dependencies
+ */
+import { safeDecodeURI } from '@wordpress/url';
+
+import {
+	Icon,
+} from '@wordpress/components';
+
+export const LinkControlSearchItem = ( { itemProps, suggestion, isSelected = false, onClick, isURL = false, searchTerm = '' } ) => {
+	return (
+		<button
+			{ ...itemProps }
+			onClick={ onClick }
+			className={ classnames( 'block-editor-link-control__search-item', {
+				'is-selected': isSelected,
+				'is-url': isURL,
+				'is-entity': ! isURL,
+			} ) }
+		>
+			{ isURL && (
+				<Icon className="block-editor-link-control__search-item-icon" icon="admin-site-alt3" />
+			) }
+			<span className="block-editor-link-control__search-item-header">
+				<span className="block-editor-link-control__search-item-title">
+					<TextHighlight text={ suggestion.title } highlight={ searchTerm } />
+				</span>
+				<span aria-hidden={ ! isURL } className="block-editor-link-control__search-item-info">{ safeDecodeURI( suggestion.url ) || '' }</span>
+			</span>
+			{ suggestion.type && (
+				<span className="block-editor-link-control__search-item-type">{ suggestion.type }</span>
+			) }
+		</button>
+	);
+};
+
+export default LinkControlSearchItem;
+

packages/block-editor/src/components/link-control/settings-drawer.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { partial } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	ToggleControl,
+} from '@wordpress/components';
+
+const LinkControlSettingsDrawer = ( { settings, onSettingChange } ) => (
+	<div className="block-editor-link-control__settings">
+		<ToggleControl
+			label={ __( 'Open in New Tab' ) }
+			onChange={ partial( onSettingChange, 'new-tab' ) }
+			checked={ settings[ 'new-tab' ] } />
+	</div>
+);
+
+export default LinkControlSettingsDrawer;