Squash

WordPress · Jul 22, 2020 · 2728b35 · 2728b35
1 parent 432984a
commit 2728b35
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 97 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -210,6 +210,10 @@ _Returns_
 
 Undocumented declaration.
 
+<a name="BlockToolbarLinkControl" href="#BlockToolbarLinkControl">#</a> **BlockToolbarLinkControl**
+
+Undocumented declaration.
+
 <a name="BlockVerticalAlignmentToolbar" href="#BlockVerticalAlignmentToolbar">#</a> **BlockVerticalAlignmentToolbar**
 
 _Related_

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -22,6 +22,7 @@ export { default as __experimentalBlockNavigationEditor } from './block-navigati
 export { default as __experimentalBlockNavigationTree } from './block-navigation/tree';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
+export { default as BlockToolbarLinkControl } from './block-toolbar-link-control';
 export { default as ButtonBlockerAppender } from './button-block-appender';
 export { default as ColorPalette } from './color-palette';
 export { default as ColorPaletteControl } from './color-palette/control';

diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
@@ -7,7 +7,7 @@ import { noop, omit } from 'lodash';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -19,105 +19,120 @@ import { CREATE_TYPE } from './constants';
 import useSearchHandler from './use-search-handler';
 
 const noopSearchHandler = Promise.resolve( [] );
-const LinkControlSearchInput = ( {
-	value,
-	children,
-	currentLink = {},
-	className = null,
-	placeholder = null,
-	withCreateSuggestion = false,
-	onCreateSuggestion = noop,
-	onChange = noop,
-	onSelect = noop,
-	showSuggestions = true,
-	renderSuggestions = ( props ) => <LinkControlSearchResults { ...props } />,
-	fetchSuggestions = null,
-	allowDirectEntry = true,
-	showInitialSuggestions = false,
-} ) => {
-	const genericSearchHandler = useSearchHandler( allowDirectEntry );
-	const searchHandler = showSuggestions
-		? fetchSuggestions || genericSearchHandler
-		: noopSearchHandler;
+const LinkControlSearchInput = forwardRef(
+	(
+		{
+			value,
+			children,
+			currentLink = {},
+			className = null,
+			placeholder = null,
+			withCreateSuggestion = false,
+			onCreateSuggestion = noop,
+			onChange = noop,
+			onSelect = noop,
+			showSuggestions = true,
+			renderSuggestions = ( props ) => (
+				<LinkControlSearchResults
+					{ ...props }
+					className="is-vertically-retracted"
+				/>
+			),
+			renderControl = null,
+			fetchSuggestions = null,
+			allowDirectEntry = true,
+			showInitialSuggestions = false,
+		},
+		ref
+	) => {
+		const genericSearchHandler = useSearchHandler( allowDirectEntry );
+		const searchHandler = showSuggestions
+			? fetchSuggestions || genericSearchHandler
+			: noopSearchHandler;
 
-	const instanceId = useInstanceId( LinkControlSearchInput );
-	const [ focusedSuggestion, setFocusedSuggestion ] = useState();
+		const instanceId = useInstanceId( LinkControlSearchInput );
+		const [ focusedSuggestion, setFocusedSuggestion ] = useState();
 
-	/**
-	 * Handles the user moving between different suggestions. Does not handle
-	 * choosing an individual item.
-	 *
-	 * @param {string} selection the url of the selected suggestion.
-	 * @param {Object} suggestion the suggestion object.
-	 */
-	const onInputChange = ( selection, suggestion ) => {
-		onChange( selection );
-		setFocusedSuggestion( suggestion );
-	};
+		/**
+		 * Handles the user moving between different suggestions. Does not handle
+		 * choosing an individual item.
+		 *
+		 * @param {string} selection the url of the selected suggestion.
+		 * @param {Object} suggestion the suggestion object.
+		 */
+		const onInputChange = ( selection, suggestion ) => {
+			onChange( selection );
+			setFocusedSuggestion( suggestion );
+		};
 
-	const onFormSubmit = ( event ) => {
-		event.preventDefault();
-		onSuggestionSelected( focusedSuggestion || { url: value } );
-	};
+		const onFormSubmit = ( event ) => {
+			event.preventDefault();
+			onSuggestionSelected( focusedSuggestion || { url: value } );
+		};
 
-	const handleRenderSuggestions = ( props ) =>
-		renderSuggestions( {
-			...props,
-			instanceId,
-			withCreateSuggestion,
-			currentInputValue: value,
-			handleSuggestionClick: ( suggestion ) => {
-				if ( props.handleSuggestionClick ) {
-					props.handleSuggestionClick( suggestion );
-				}
-				onSuggestionSelected( suggestion );
-			},
-		} );
+		const handleRenderSuggestions = ( props ) =>
+			renderSuggestions( {
+				...props,
+				instanceId,
+				withCreateSuggestion,
+				currentInputValue: value,
+				handleSuggestionClick: ( suggestion ) => {
+					if ( props.handleSuggestionClick ) {
+						props.handleSuggestionClick( suggestion );
+					}
+					onSuggestionSelected( suggestion );
+				},
+			} );
 
-	const onSuggestionSelected = async ( selectedSuggestion ) => {
-		let suggestion = selectedSuggestion;
-		if ( CREATE_TYPE === selectedSuggestion.type ) {
-			// Create a new page and call onSelect with the output from the onCreateSuggestion callback
-			try {
-				suggestion = await onCreateSuggestion(
-					selectedSuggestion.title
-				);
-				if ( suggestion?.url ) {
-					onSelect( suggestion );
-				}
-			} catch ( e ) {}
-			return;
-		}
+		const onSuggestionSelected = async ( selectedSuggestion ) => {
+			let suggestion = selectedSuggestion;
+			if ( CREATE_TYPE === selectedSuggestion.type ) {
+				// Create a new page and call onSelect with the output from the onCreateSuggestion callback
+				try {
+					suggestion = await onCreateSuggestion(
+						selectedSuggestion.title
+					);
+					if ( suggestion?.url ) {
+						onSelect( suggestion );
+					}
+				} catch ( e ) {}
+				return;
+			}
 
-		if (
-			allowDirectEntry ||
-			( suggestion && Object.keys( suggestion ).length >= 1 )
-		) {
-			onSelect(
-				// Some direct entries don't have types or IDs, and we still need to clear the previous ones.
-				{ ...omit( currentLink, 'id', 'url' ), ...suggestion },
-				suggestion
-			);
-		}
-	};
+			if (
+				allowDirectEntry ||
+				( suggestion && Object.keys( suggestion ).length >= 1 )
+			) {
+				onSelect(
+					// Some direct entries don't have types or IDs, and we still need to clear the previous ones.
+					{ ...omit( currentLink, 'id', 'url' ), ...suggestion },
+					suggestion
+				);
+			}
+		};
 
-	return (
-		<form onSubmit={ onFormSubmit }>
-			<URLInput
-				className={ className }
-				value={ value }
-				onChange={ onInputChange }
-				placeholder={ placeholder ?? __( 'Search or type url' ) }
-				__experimentalRenderSuggestions={
-					showSuggestions ? handleRenderSuggestions : null
-				}
-				__experimentalFetchLinkSuggestions={ searchHandler }
-				__experimentalHandleURLSuggestions={ true }
-				__experimentalShowInitialSuggestions={ showInitialSuggestions }
-			/>
-			{ children }
-		</form>
-	);
-};
+		return (
+			<form onSubmit={ onFormSubmit }>
+				<URLInput
+					className={ className }
+					value={ value }
+					onChange={ onInputChange }
+					inputRef={ ref }
+					placeholder={ placeholder ?? __( 'Search or type url' ) }
+					__experimentalRenderSuggestions={
+						showSuggestions ? handleRenderSuggestions : () => null
+					}
+					__experimentalFetchLinkSuggestions={ searchHandler }
+					__experimentalHandleURLSuggestions={ true }
+					__experimentalShowInitialSuggestions={
+						showInitialSuggestions
+					}
+					__experimentalRenderControl={ renderControl }
+				/>
+				{ children }
+			</form>
+		);
+	}
+);
 
 export default LinkControlSearchInput;
diff --git a/packages/block-editor/src/components/link-control/search-results.js b/packages/block-editor/src/components/link-control/search-results.js
@@ -20,6 +20,7 @@ import { CREATE_TYPE } from './constants';
 export default function LinkControlSearchResults( {
 	instanceId,
 	withCreateSuggestion,
+	className,
 	currentInputValue,
 	handleSuggestionClick,
 	suggestionsListProps,
@@ -71,8 +72,13 @@ export default function LinkControlSearchResults( {
 		</span>
 	);
 
+	const wrapperClass = classnames(
+		'block-editor-link-control__search-results-wrapper',
+		className
+	);
+
 	return (
-		<div className="block-editor-link-control__search-results-wrapper">
+		<div className={ wrapperClass }>
 			{ searchResultsLabel }
 			<div
 				{ ...suggestionsListProps }

diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
@@ -61,7 +61,9 @@ $block-editor-link-control-number-of-actions: 1;
 
 .block-editor-link-control__search-results-wrapper {
 	position: relative;
-	margin-top: -$grid-unit-20 + 1px;
+	&.is-vertically-retracted {
+		margin-top: -$grid-unit-20 + 1px;
+	}
 
 	&::before,
 	&::after {

diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -24,6 +24,7 @@
 @import "./components/block-settings-menu/style.scss";
 @import "./components/block-styles/style.scss";
 @import "./components/block-switcher/style.scss";
+@import "./components/block-toolbar-link-control/style.scss";
 @import "./components/block-types-list/style.scss";
 @import "./components/block-variation-picker/style.scss";
 @import "./components/button-block-appender/style.scss";

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -18,11 +18,13 @@ import {
 	TextareaControl,
 	ToolbarButton,
 	ToolbarGroup,
+	__experimentalToolbarItem as ToolbarItem,
 } from '@wordpress/components';
 import { rawShortcut, displayShortcut } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import {
 	BlockControls,
+	BlockToolbarLinkControl,
 	InnerBlocks,
 	InspectorControls,
 	RichText,
@@ -135,6 +137,14 @@ function NavigationLinkEdit( {
 
 	return (
 		<Fragment>
+			{ isLinkOpen && (
+				<BlockToolbarLinkControl
+					initialLink={ link }
+					createSuggestion={ handleCreatePage }
+					close={ () => setIsLinkOpen( false ) }
+					onChange={ setAttributes }
+				/>
+			) }
 			<BlockControls>
 				<ToolbarGroup>
 					<KeyboardShortcuts
@@ -223,7 +233,7 @@ function NavigationLinkEdit( {
 							'core/strikethrough',
 						] }
 					/>
-					{ isLinkOpen && (
+					{ false && isLinkOpen && (
 						<Popover
 							position="bottom center"
 							onClose={ () => setIsLinkOpen( false ) }