uses LinkControl instead of old LinkViewer and LinkEdit components

WordPress · Feb 13, 2020 · cd5f1c6 · cd5f1c6
1 parent 778f6a1
commit cd5f1c6
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 85 deletions.
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
@@ -95,6 +95,7 @@ function LinkControl( {
 	value,
 	settings,
 	onChange = noop,
+	showSuggestions = true,
 	showInitialSuggestions,
 	forceIsEditingLink,
 } ) {
@@ -323,7 +324,9 @@ function LinkControl( {
 						onChange( { ...value, ...suggestion } );
 						stopEditing();
 					} }
-					renderSuggestions={ renderSearchResults }
+					renderSuggestions={
+						showSuggestions ? renderSearchResults : noop
+					}
 					fetchSuggestions={ getSearchHandler }
 					showInitialSuggestions={ showInitialSuggestions }
 				/>

diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -54,19 +58,22 @@ const LinkControlSearchInput = ( {
 	}
 
 	return (
-		<form onSubmit={ selectSuggestionOrCurrentInputValue }>
+		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+		<form
+			onSubmit={ selectSuggestionOrCurrentInputValue }
+			onKeyDown={ ( event ) => {
+				if ( event.keyCode === ENTER ) {
+					return;
+				}
+				handleLinkControlOnKeyDown( event );
+			} }
+			onKeyPress={ handleLinkControlOnKeyPress }
+		>
 			<URLInput
 				className="block-editor-link-control__search-input"
 				value={ value }
 				onChange={ selectItemHandler }
-				onFocus={ selectItemHandler }
-				onKeyDown={ ( event ) => {
-					if ( event.keyCode === ENTER ) {
-						return;
-					}
-					handleLinkControlOnKeyDown( event );
-				} }
-				onKeyPress={ handleLinkControlOnKeyPress }
+				onFocus={ noop }
 				placeholder={ __( 'Search or type url' ) }
 				__experimentalRenderSuggestions={ renderSuggestions }
 				__experimentalFetchLinkSuggestions={ fetchSuggestions }

diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -13,7 +13,7 @@ import {
 	Dropdown,
 	withNotices,
 } from '@wordpress/components';
-import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
+import { DOWN } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { upload } from '@wordpress/icons';
@@ -23,8 +23,7 @@ import { upload } from '@wordpress/icons';
  */
 import MediaUpload from '../media-upload';
 import MediaUploadCheck from '../media-upload/check';
-import LinkEditor from '../url-popover/link-editor';
-import LinkViewer from '../url-popover/link-viewer';
+import LinkControl from '../link-control';
 
 const MediaReplaceFlow = ( {
 	mediaURL,
@@ -36,28 +35,12 @@ const MediaReplaceFlow = ( {
 	onError,
 	name = __( 'Replace' ),
 } ) => {
-	const [ showEditURLInput, setShowEditURLInput ] = useState( false );
 	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
 	const mediaUpload = useSelect( ( select ) => {
 		return select( 'core/block-editor' ).getSettings().mediaUpload;
 	}, [] );
 	const editMediaButtonRef = createRef();
 
-	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();
-		}
-	};
-
 	const selectMedia = ( media ) => {
 		onSelect( media );
 		setMediaURLValue( media.url );
@@ -66,7 +49,6 @@ const MediaReplaceFlow = ( {
 
 	const selectURL = ( newURL ) => {
 		onSelectURL( newURL );
-		setShowEditURLInput( false );
 	};
 
 	const uploadFiles = ( event, closeDropdown ) => {
@@ -91,43 +73,6 @@ const MediaReplaceFlow = ( {
 		}
 	};
 
-	let urlInputUIContent;
-	if ( showEditURLInput ) {
-		urlInputUIContent = (
-			<LinkEditor
-				className="block-editor-media-replace-flow__link-editor"
-				onKeyDown={ stopPropagationRelevantKeys }
-				onKeyPress={ stopPropagation }
-				value={ mediaURLValue }
-				isFullWidthInput={ true }
-				hasInputBorder={ true }
-				onChangeInputValue={ ( url ) => setMediaURLValue( url ) }
-				onSubmit={ ( event ) => {
-					event.preventDefault();
-					selectURL( mediaURLValue );
-					editMediaButtonRef.current.focus();
-				} }
-			/>
-		);
-	} else {
-		urlInputUIContent = (
-			<>
-				<span className="block-editor-media-replace-flow__image-url-label">
-					{ __( ' Current media URL:' ) }
-				</span>
-				<LinkViewer
-					isFullWidth={ true }
-					iconButton={ false }
-					className="block-editor-media-replace-flow__link-viewer"
-					url={ mediaURLValue }
-					onEditLinkClick={ () =>
-						setShowEditURLInput( ! showEditURLInput )
-					}
-				/>
-			</>
-		);
-	}
-
 	return (
 		<Dropdown
 			contentClassName="block-editor-media-replace-flow__options"
@@ -180,7 +125,19 @@ const MediaReplaceFlow = ( {
 					</NavigableMenu>
 					{ onSelectURL && (
 						<div className="block-editor-media-flow__url-input">
-							{ urlInputUIContent }
+							<span className="block-editor-media-replace-flow__image-url-label">
+								{ __( ' Current media URL:' ) }
+							</span>
+							<LinkControl
+								value={ { url: mediaURLValue } }
+								settings={ false }
+								showSuggestions={ false }
+								onChange={ ( { url } ) => {
+									setMediaURLValue( url );
+									selectURL( url );
+									editMediaButtonRef.current.focus();
+								} }
+							/>
 						</div>
 					) }
 				</>

diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -20,24 +20,33 @@
 }
 
 .block-editor-media-flow__url-input {
-	padding: 12px 16px 8px 16px;
-	max-width: 258px;
+
 	border-top: 1px solid $light-gray-800;
 	margin-top: 8px;
 
-	input {
-		max-width: 180px;
+	.block-editor-media-replace-flow__image-url-label {
+		color: $dark-gray-300;
+		font-size: $default-font-size;
+		display: block;
+		position: relative;
+		top: $grid-size-large;
+		padding-left: $grid-size-large;
 	}
-}
 
-.block-editor-media-replace-flow__image-url-label {
-	color: $dark-gray-300;
-	font-size: $default-font-size;
-	margin-bottom: -8px;
-	display: block;
+	.block-editor-link-control {
+		min-width: auto;
+		margin-top: -16px;
+		.block-editor-link-control__search-item-title {
+			max-width: 180px;
+			margin-top: $grid-size-large;
+		}
+		.block-editor-link-control__search-item.is-current {
+			width: auto;
+			padding: $grid-size-large;
+		}
+	}
 }
 
-
 .block-editor-media-replace-flow__link-viewer {
 	align-items: center;
 
@@ -62,9 +71,3 @@
 		top: -8px;
 	}
 }
-
-.block-editor-media-replace-flow__link-editor {
-	.block-editor-url-input .components-base-control__field input[type="text"] {
-		border: 1px solid $dark-gray-200;
-	}
-}