Adds always on display of media URL (#19504)

* rebased and addressed feedback review * removed useless space in button label * use a correct type for empty settings Co-Authored-By: Andrew Duthie <andrew@andrewduthie.com> * fixes arrow keys navigation * adds sending null when suggestions are not needed as it is proper in react rendering * fixes the ESCAPE key to close the dropdown menu * Update packages/block-editor/src/components/media-replace-flow/style.scss Co-Authored-By: Sören Wrede <soerenwrede@gmail.com> * Update packages/block-editor/src/components/media-replace-flow/style.scss Co-Authored-By: Sören Wrede <soerenwrede@gmail.com> * Update packages/block-editor/src/components/media-replace-flow/style.scss Co-Authored-By: Sören Wrede <soerenwrede@gmail.com> * Update packages/block-editor/src/components/media-replace-flow/style.scss Co-Authored-By: Sören Wrede <soerenwrede@gmail.com> * removes deprecated mixing * moves keyboard capture outside of LinkControlto account only for it's usage in a dropwdown for MediaFlow * Overriding the width, removing the hr, and cleaning up spacing with the new grid variables. * Adjusting the spacing around the input for editing the link URL. * I'm not sure these are actually doing anything. Co-authored-by: Andrew Duthie <andrew@andrewduthie.com> Co-authored-by: Sören Wrede <soerenwrede@gmail.com> Co-authored-by: Shaun Andrews <shaun@automattic.com>
WordPress · Mar 12, 2020 · 07d751a · 07d751a
1 parent 23e6728
commit 07d751a
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 84 deletions.
diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md
@@ -92,6 +92,14 @@ Value change handler, called with the updated value if the user selects a new li
 />
 ```
 
+### showSuggestions
+
+- Type: `boolean`
+- Required: No
+- Default: `true`
+
+Whether to present suggestions when typing the URL.
+
 ### showInitialSuggestions
 
 - Type: `boolean`

diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
@@ -139,6 +139,7 @@ const makeCancelable = ( promise ) => {
  * @property {WPLinkControlValue=}                  value                  Current link value.
  * @property {WPLinkControlOnChangeProp=}           onChange               Value change handler, called with the updated value if
  *                                                                         the user selects a new link or updates settings.
+ * @property {boolean=}                             showSuggestions        Whether to present suggestions when typing the URL.
  * @property {boolean=}                             showInitialSuggestions Whether to present initial suggestions immediately.
  * @property {WPLinkControlCreateSuggestionProp=}   createSuggestion       Handler to manage creation of link value from suggestion.
  */
@@ -154,6 +155,7 @@ function LinkControl( {
 	value,
 	settings,
 	onChange = noop,
+	showSuggestions = true,
 	showInitialSuggestions,
 	forceIsEditingLink,
 	createSuggestion,
@@ -345,6 +347,10 @@ function LinkControl( {
 	// Effects
 	const getSearchHandler = useCallback(
 		( val, args ) => {
+			if ( ! showSuggestions ) {
+				return Promise.resolve( [] );
+			}
+
 			return isURLLike( val )
 				? handleDirectEntry( val, args )
 				: handleEntitySearch( val, args );
@@ -544,7 +550,9 @@ function LinkControl( {
 							stopEditing();
 						}
 					} }
-					renderSuggestions={ renderSearchResults }
+					renderSuggestions={
+						showSuggestions ? renderSearchResults : null
+					}
 					fetchSuggestions={ getSearchHandler }
 					showInitialSuggestions={ showInitialSuggestions }
 					errorMessage={ errorMessage }

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,18 +13,17 @@ 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 { link, upload, media as mediaIcon } from '@wordpress/icons';
+import { upload, media as mediaIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 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,29 +35,12 @@ const MediaReplaceFlow = ( {
 	onError,
 	name = __( 'Replace' ),
 } ) => {
-	const [ showURLInput, setShowURLInput ] = useState( false );
-	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 );
@@ -67,7 +49,6 @@ const MediaReplaceFlow = ( {
 
 	const selectURL = ( newURL ) => {
 		onSelectURL( newURL );
-		setShowEditURLInput( false );
 	};
 
 	const uploadFiles = ( event, closeDropdown ) => {
@@ -92,36 +73,6 @@ const MediaReplaceFlow = ( {
 		}
 	};
 
-	let urlInputUIContent;
-	if ( showEditURLInput ) {
-		urlInputUIContent = (
-			<LinkEditor
-				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 = (
-			<LinkViewer
-				isFullWidth={ true }
-				className="block-editor-media-replace-flow__link-viewer"
-				url={ mediaURLValue }
-				onEditLinkClick={ () =>
-					setShowEditURLInput( ! showEditURLInput )
-				}
-			/>
-		);
-	}
-
 	return (
 		<Dropdown
 			contentClassName="block-editor-media-replace-flow__options"
@@ -170,22 +121,32 @@ const MediaReplaceFlow = ( {
 								} }
 							/>
 						</MediaUploadCheck>
-						{ onSelectURL && (
-							<MenuItem
-								icon={ link }
-								onClick={ () =>
-									setShowURLInput( ! showURLInput )
-								}
-								aria-expanded={ showURLInput }
-							>
-								<div> { __( 'Insert from URL' ) } </div>
-							</MenuItem>
-						) }
 					</NavigableMenu>
-					{ showURLInput && (
-						<div className="block-editor-media-flow__url-input">
-							{ urlInputUIContent }
-						</div>
+					{ onSelectURL && (
+						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+						<form
+							className="block-editor-media-flow__url-input"
+							onKeyDown={ ( event ) => {
+								event.stopPropagation();
+							} }
+							onKeyPress={ ( event ) => {
+								event.stopPropagation();
+							} }
+						>
+							<span className="block-editor-media-replace-flow__image-url-label">
+								{ __( 'Current media URL:' ) }
+							</span>
+							<LinkControl
+								value={ { url: mediaURLValue } }
+								settings={ [] }
+								showSuggestions={ false }
+								onChange={ ( { url } ) => {
+									setMediaURLValue( url );
+									selectURL( url );
+									editMediaButtonRef.current.focus();
+								} }
+							/>
+						</form>
 					) }
 				</>
 			) }

diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -5,25 +5,48 @@
 	display: none;
 }
 
-.block-editor-media-flow__url-input {
-	padding: 0 15px;
-	max-width: 255px;
-	padding-bottom: 10px;
+// Forcing some space above the list of options in
+// the dropdown to visually balance them.
+.block-editor-media-replace-flow__options .components-popover__content {
+	padding-top: $grid-unit-20;
+}
 
-	input {
-		max-width: 180px;
-	}
+.block-editor-media-replace-flow__indicator {
+	margin-left: 4px;
 }
 
-.block-editor-media-replace-flow__link-viewer {
-	// Overflow is not working properly if we show the icon.
-	.components-external-link__icon {
-		display: none;
-	}
-	.components-visually-hidden {
-		position: initial;
+.block-editor-media-flow__url-input {
+	margin-top: $grid-unit-20;
+
+	.block-editor-media-replace-flow__image-url-label {
+		top: $grid-unit-20;
 	}
-	.components-button {
-		flex-shrink: 0;
+
+	.block-editor-link-control {
+		margin-top: -16px;
+		width: auto;
+
+		.components-base-control .components-base-control__field {
+			margin-bottom: 0;
+		}
+
+		.block-editor-link-control__search-item-title {
+			max-width: 180px;
+			margin-top: $grid-unit-20;
+		}
+
+		.block-editor-link-control__search-item.is-current {
+			width: auto;
+			padding: 0;
+		}
+
+		.block-editor-link-control__search-input.block-editor-link-control__search-input input[type="text"] {
+			margin: 16px 0 0 0;
+			width: 100%;
+		}
+
+		.block-editor-link-control__search-actions {
+			right: 4px;
+		}
 	}
 }