Block Editor: LinkControl: Incorporate settings in edit state

WordPress · Feb 5, 2020 · 5596566 · 5596566
1 parent 525dd41
commit 5596566
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 28 deletions.
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
@@ -30,7 +30,6 @@ import { focus } from '@wordpress/dom';
 /**
  * Internal dependencies
  */
-import LinkControlSettingsDrawer from './settings-drawer';
 import LinkControlSearchItem from './search-item';
 import LinkControlSearchInput from './search-input';
 
@@ -150,10 +149,6 @@ function LinkControl( {
 		setInputValue( val );
 	};
 
-	const resetInput = () => {
-		setInputValue( '' );
-	};
-
 	const handleDirectEntry = ( val ) => {
 		let type = 'URL';
 
@@ -308,15 +303,16 @@ function LinkControl( {
 		>
 			{ isEditingLink || ! value ? (
 				<LinkControlSearchInput
-					value={ inputValue }
+					inputValue={ inputValue }
+					value={ value }
 					onChange={ onInputChange }
-					onSelect={ ( suggestion ) => {
-						onChange( { ...value, ...suggestion } );
+					onSelect={ ( nextValue ) => {
+						onChange( nextValue );
 						stopEditing();
 					} }
+					settings={ settings }
 					renderSuggestions={ renderSearchResults }
 					fetchSuggestions={ getSearchHandler }
-					onReset={ resetInput }
 					showInitialSuggestions={ showInitialSuggestions }
 				/>
 			) : (
@@ -359,11 +355,6 @@ function LinkControl( {
 							{ __( 'Edit' ) }
 						</Button>
 					</div>
-					<LinkControlSettingsDrawer
-						value={ value }
-						settings={ settings }
-						onChange={ onChange }
-					/>
 				</Fragment>
 			) }
 		</div>

diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
@@ -5,12 +5,13 @@ import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes';
-import { close } from '@wordpress/icons';
+import { chevronDown, chevronUp } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { URLInput } from '../';
+import LinkControlSettingsDrawer from './settings-drawer';
 
 const handleLinkControlOnKeyDown = ( event ) => {
 	const { keyCode } = event;
@@ -32,14 +33,17 @@ const handleLinkControlOnKeyPress = ( event ) => {
 
 const LinkControlSearchInput = ( {
 	value,
+	inputValue,
 	onChange,
 	onSelect,
+	settings,
 	renderSuggestions,
 	fetchSuggestions,
-	onReset,
 	showInitialSuggestions,
 } ) => {
 	const [ selectedSuggestion, setSelectedSuggestion ] = useState();
+	const [ isSettingsExpanded, setIsSettingsExpanded ] = useState( false );
+	const [ pendingSettingsChanges, setPendingSettingsChanges ] = useState();
 
 	const selectItemHandler = ( selection, suggestion ) => {
 		onChange( selection );
@@ -51,15 +55,19 @@ const LinkControlSearchInput = ( {
 		event.preventDefault();
 
 		// Interpret the selected value as either the selected suggestion, if
-		// exists, or otherwise the current input value as entered.
-		onSelect( selectedSuggestion || { url: value } );
+		// exists, or otherwise the current input value as entered. Settings
+		// changes are held in state and merged into the changed value.
+		onSelect( {
+			...pendingSettingsChanges,
+			...( selectedSuggestion || { url: inputValue } ),
+		} );
 	}
 
 	return (
 		<form onSubmit={ selectSuggestionOrCurrentInputValue }>
 			<URLInput
 				className="block-editor-link-control__search-input"
-				value={ value }
+				value={ inputValue }
 				onChange={ selectItemHandler }
 				onKeyDown={ ( event ) => {
 					if ( event.keyCode === ENTER ) {
@@ -74,15 +82,27 @@ const LinkControlSearchInput = ( {
 				__experimentalHandleURLSuggestions={ true }
 				__experimentalShowInitialSuggestions={ showInitialSuggestions }
 			/>
-
 			<Button
-				disabled={ ! value.length }
-				type="reset"
-				label={ __( 'Reset' ) }
-				icon={ close }
-				className="block-editor-link-control__search-reset"
-				onClick={ onReset }
+				isPrimary
+				type="submit"
+				className="block-editor-link-control__search-action"
+			>
+				{ __( 'Apply' ) }
+			</Button>
+			<Button
+				className="block-editor-link-control__search-action"
+				icon={ isSettingsExpanded ? chevronUp : chevronDown }
+				label={ __( 'Link settings' ) }
+				onClick={ () => setIsSettingsExpanded( ! isSettingsExpanded ) }
+				aria-expanded={ isSettingsExpanded }
 			/>
+			{ isSettingsExpanded && (
+				<LinkControlSettingsDrawer
+					value={ { ...value, ...pendingSettingsChanges } }
+					settings={ settings }
+					onChange={ setPendingSettingsChanges }
+				/>
+			) }
 		</form>
 	);
 };

diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js
@@ -7,7 +7,7 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToggleControl } from '@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
 
 const defaultSettings = [
 	{
@@ -33,7 +33,7 @@ const LinkControlSettingsDrawer = ( {
 	};
 
 	const theSettings = settings.map( ( setting ) => (
-		<ToggleControl
+		<CheckboxControl
 			className="block-editor-link-control__setting"
 			key={ setting.id }
 			label={ setting.title }