Mark Link Creation Interface as Experimental (#18110)

* mark main component as experimental

* mark new URLInput props as experimental

* add experimental onKeyPress

* remove key handlers

* Updates to use alias on experimental props

Addresses #18110 (comment)

packages/block-editor/README.md

@@ -314,10 +314,6 @@ _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

@@ -26,7 +26,7 @@ export { default as __experimentalGradientPickerPanel } from './gradient-picker/
 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 __experimentalLinkControl } 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/input-search.js

@@ -50,9 +50,9 @@ const LinkControlInputSearch = ( {
 				value={ value }
 				onChange={ selectItemHandler }
 				placeholder={ __( 'Search or type url' ) }
-				renderSuggestions={ renderSuggestions }
-				fetchLinkSuggestions={ fetchSuggestions }
-				handleURLSuggestions={ true }
+				__experimentalRenderSuggestions={ renderSuggestions }
+				__experimentalFetchLinkSuggestions={ fetchSuggestions }
+				__experimentalHandleURLSuggestions={ true }
 			/>
 
 			<IconButton

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { throttle, isFunction, noop } from 'lodash';
+import { throttle, isFunction } from 'lodash';
 import classnames from 'classnames';
 import scrollIntoView from 'dom-scroll-into-view';
 
@@ -71,7 +71,10 @@ class URLInput extends Component {
 	}
 
 	updateSuggestions( value ) {
-		const { fetchLinkSuggestions, handleURLSuggestions } = this.props;
+		const {
+			__experimentalFetchLinkSuggestions: fetchLinkSuggestions,
+			__experimentalHandleURLSuggestions: handleURLSuggestions,
+		} = this.props;
 		if ( ! fetchLinkSuggestions ) {
 			return;
 		}
@@ -258,7 +261,7 @@ class URLInput extends Component {
 			id,
 			isFullWidth,
 			hasBorder,
-			renderSuggestions,
+			__experimentalRenderSuggestions: renderSuggestions,
 			placeholder = __( 'Paste URL or type to search' ),
 			value = '',
 			autoFocus = true,
@@ -371,12 +374,12 @@ export default compose(
 	withSelect( ( select, props ) => {
 		// If a link suggestions handler is already provided then
 		// bail
-		if ( isFunction( props.fetchLinkSuggestions ) ) {
+		if ( isFunction( props.__experimentalFetchLinkSuggestions ) ) {
 			return;
 		}
 		const { getSettings } = select( 'core/block-editor' );
 		return {
-			fetchLinkSuggestions: getSettings().__experimentalFetchLinkSuggestions,
+			__experimentalFetchLinkSuggestions: getSettings().__experimentalFetchLinkSuggestions,
 		};
 	} )
 )( URLInput );

playground/src/index.js

@@ -17,7 +17,7 @@ import {
 	BlockInspector,
 	WritingFlow,
 	ObserveTyping,
-	LinkControl,
+	__experimentalLinkControl,
 } from '@wordpress/block-editor';
 import {
 	Button,
@@ -131,7 +131,7 @@ function App() {
 								<WritingFlow>
 									<ObserveTyping>
 										{ isVisible &&
-											<LinkControl
+											<__experimentalLinkControl
 												currentLink={ link }
 												currentSettings={ linkSettings }
 												onLinkChange={ ( theLink ) => {