Adds instructional text in place of URL for suggestions that are URLs

Addresses designer feedback #17557 (comment)
WordPress · Oct 23, 2019 · 98836fd · 98836fd
1 parent a065936
commit 98836fd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
@@ -139,7 +139,7 @@ function LinkControl( { currentLink, fetchSearchSuggestions, onLinkChange, onSet
 								>
 									{ currentLink.title }
 								</ExternalLink>
-								<span className="block-editor-link-control__search-item-info">{ currentLink.info || filterURLForDisplay( safeDecodeURI( currentLink.url ) ) || '' }</span>
+								<span className="block-editor-link-control__search-item-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">

diff --git a/packages/block-editor/src/components/link-control/search-item.js b/packages/block-editor/src/components/link-control/search-item.js
@@ -12,6 +12,7 @@ import TextHighlight from './text-highlight';
  * WordPress dependencies
  */
 import { safeDecodeURI } from '@wordpress/url';
+import { __ } from '@wordpress/i18n';
 
 import {
 	Icon,
@@ -35,7 +36,12 @@ export const LinkControlSearchItem = ( { itemProps, suggestion, isSelected = fal
 				<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 aria-hidden={ ! isURL } className="block-editor-link-control__search-item-info">
+					{ ! isURL && ( safeDecodeURI( suggestion.url ) || '' ) }
+					{ isURL && (
+						__( 'Press ENTER to add this link' )
+					) }
+				</span>
 			</span>
 			{ suggestion.type && (
 				<span className="block-editor-link-control__search-item-type">{ suggestion.type }</span>