Add settings "drawer" to Link Control

packages/block-editor/src/components/link-control/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
+import { Button, Spinner, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
@@ -136,6 +136,8 @@ function LinkControl( {
 	const textInputRef = useRef();
 	const isEndingEditWithFocus = useRef( false );
 
+	const [ settingsOpen, setSettingsOpen ] = useState( false );
+
 	const [ internalUrlInputValue, setInternalUrlInputValue ] =
 		useInternalInputValue( value?.url || '' );
 
@@ -201,6 +203,7 @@ function LinkControl( {
 			wrapperNode.current.ownerDocument.activeElement
 		);
 
+		setSettingsOpen( false );
 		setIsEditingLink( false );
 	};
 
@@ -267,14 +270,15 @@ function LinkControl( {
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
-	const showSettingsDrawer = !! settings?.length;
+	const showSettings = !! settings?.length;
 
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
 	// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
 	const showTextControl = hasLinkValue && hasTextControl;
 
 	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
+
 	return (
 		<div
 			tabIndex={ -1 }
@@ -295,18 +299,6 @@ function LinkControl( {
 							'has-text-control': showTextControl,
 						} ) }
 					>
-						{ showTextControl && (
-							<TextControl
-								__nextHasNoMarginBottom
-								ref={ textInputRef }
-								className="block-editor-link-control__field block-editor-link-control__text-content"
-								label="Text"
-								value={ internalTextInputValue }
-								onChange={ setInternalTextInputValue }
-								onKeyDown={ handleSubmitWithEnter }
-							/>
-						) }
-
 						<LinkControlSearchInput
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
@@ -350,18 +342,26 @@ function LinkControl( {
 				/>
 			) }
 
-			<div className="block-editor-link-control__drawer">
-				{ showSettingsDrawer && (
-					<div className="block-editor-link-control__tools">
+			{ isEditing && (
+				<div className="block-editor-link-control__tools">
+					{ ( showSettings || showTextControl ) && (
 						<LinkControlSettingsDrawer
+							settingsOpen={ settingsOpen }
+							setSettingsOpen={ setSettingsOpen }
+							showTextControl={ showTextControl }
+							showSettings={ showSettings }
+							textInputRef={ textInputRef }
+							internalTextInputValue={ internalTextInputValue }
+							setInternalTextInputValue={
+								setInternalTextInputValue
+							}
+							handleSubmitWithEnter={ handleSubmitWithEnter }
 							value={ value }
 							settings={ settings }
 							onChange={ onChange }
 						/>
-					</div>
-				) }
+					) }
 
-				{ isEditing && (
 					<div className="block-editor-link-control__search-actions">
 						<Button
 							variant="primary"
@@ -375,8 +375,8 @@ function LinkControl( {
 							{ __( 'Cancel' ) }
 						</Button>
 					</div>
-				) }
-			</div>
+				</div>
+			) }
 
 			{ renderControlBottom && renderControlBottom() }
 		</div>

packages/block-editor/src/components/link-control/settings-drawer.js

@@ -1,41 +1,96 @@
 /**
  * WordPress dependencies
  */
+import {
+	Button,
+	TextControl,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { settings as settingsIcon } from '@wordpress/icons';
+import { useReducedMotion, useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { ToggleControl, VisuallyHidden } from '@wordpress/components';
-
-const noop = () => {};
+import { Fragment } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import Settings from './settings';
 
-const LinkControlSettingsDrawer = ( { value, onChange = noop, settings } ) => {
-	if ( ! settings || ! settings.length ) {
-		return null;
-	}
+function LinkSettingsDrawer( {
+	settingsOpen,
+	setSettingsOpen,
+	showTextControl,
+	showSettings,
+	textInputRef,
+	internalTextInputValue,
+	setInternalTextInputValue,
+	handleSubmitWithEnter,
+	value,
+	settings,
+	onChange,
+} ) {
+	const prefersReducedMotion = useReducedMotion();
+	const MaybeAnimatePresence = prefersReducedMotion
+		? Fragment
+		: AnimatePresence;
+	const MaybeMotionDiv = prefersReducedMotion ? 'div' : motion.div;
 
-	const handleSettingChange = ( setting ) => ( newValue ) => {
-		onChange( {
-			...value,
-			[ setting.id ]: newValue,
-		} );
-	};
+	const id = useInstanceId( LinkSettingsDrawer );
 
-	const theSettings = settings.map( ( setting ) => (
-		<ToggleControl
-			className="block-editor-link-control__setting"
-			key={ setting.id }
-			label={ setting.title }
-			onChange={ handleSettingChange( setting ) }
-			checked={ value ? !! value[ setting.id ] : false }
-		/>
-	) );
+	const settingsDrawerId = `link-control-settings-drawer-${ id }`;
 
 	return (
-		<fieldset className="block-editor-link-control__settings">
-			<VisuallyHidden as="legend">
-				{ __( 'Currently selected link settings' ) }
-			</VisuallyHidden>
-			{ theSettings }
-		</fieldset>
+		<>
+			<Button
+				className="block-editor-link-control__drawer-toggle"
+				aria-expanded={ settingsOpen }
+				onClick={ () => setSettingsOpen( ! settingsOpen ) }
+				icon={ settingsIcon }
+				label={ __( 'Toggle link settings' ) }
+				aria-controls={ settingsDrawerId }
+			/>
+			<MaybeAnimatePresence>
+				{ settingsOpen && (
+					<MaybeMotionDiv
+						className="block-editor-link-control__drawer"
+						hidden={ ! settingsOpen }
+						id={ settingsDrawerId }
+						initial="collapsed"
+						animate="open"
+						exit="collapsed"
+						variants={ {
+							open: { opacity: 1, height: 'auto' },
+							collapsed: { opacity: 0, height: 0 },
+						} }
+						transition={ {
+							duration: 0.1,
+						} }
+					>
+						<div className="block-editor-link-control__drawer-inner">
+							{ showTextControl && (
+								<TextControl
+									__nextHasNoMarginBottom
+									ref={ textInputRef }
+									className="block-editor-link-control__setting block-editor-link-control__text-content"
+									label="Text"
+									value={ internalTextInputValue }
+									onChange={ setInternalTextInputValue }
+									onKeyDown={ handleSubmitWithEnter }
+								/>
+							) }
+							{ showSettings && (
+								<Settings
+									value={ value }
+									settings={ settings }
+									onChange={ onChange }
+								/>
+							) }
+						</div>
+					</MaybeMotionDiv>
+				) }
+			</MaybeAnimatePresence>
+		</>
 	);
-};
+}
 
-export default LinkControlSettingsDrawer;
+export default LinkSettingsDrawer;

packages/block-editor/src/components/link-control/settings.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToggleControl, VisuallyHidden } from '@wordpress/components';
+
+const noop = () => {};
+
+const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
+	if ( ! settings || ! settings.length ) {
+		return null;
+	}
+
+	const handleSettingChange = ( setting ) => ( newValue ) => {
+		onChange( {
+			...value,
+			[ setting.id ]: newValue,
+		} );
+	};
+
+	const theSettings = settings.map( ( setting ) => (
+		<ToggleControl
+			className="block-editor-link-control__setting"
+			key={ setting.id }
+			label={ setting.title }
+			onChange={ handleSettingChange( setting ) }
+			checked={ value ? !! value[ setting.id ] : false }
+		/>
+	) );
+
+	return (
+		<fieldset className="block-editor-link-control__settings">
+			<VisuallyHidden as="legend">
+				{ __( 'Currently selected link settings' ) }
+			</VisuallyHidden>
+			{ theSettings }
+		</fieldset>
+	);
+};
+
+export default LinkControlSettings;

packages/block-editor/src/components/link-control/style.scss

@@ -80,6 +80,7 @@ $preview-image-height: 140px;
 	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
 	justify-content: flex-start;
 	gap: $grid-unit-10;
+	order: 20;
 }
 
 .components-button .block-editor-link-control__search-submit .has-icon {
@@ -427,12 +428,42 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__drawer {
+	display: flex; // allow for ordering.
+	order: 30;
+	flex-direction: column;
+	flex-basis: 100%; // occupy full width.
+}
+
+// Inner div required to avoid padding/margin
+// causing janky animation.
+.block-editor-link-control__drawer-inner {
+	display: flex; // allow for ordering.
+	flex-direction: column;
+	flex-basis: 100%; // occupy full width.
+	margin-top: $grid-unit-20;
+	padding-top: $grid-unit-20;
+	position: relative;
+
+	&::after {
+		content: "";
+		display: block;
+		height: 1px;
+		background-color: $gray-300;
+		position: absolute;
+		left: -$grid-unit-20;
+		right: -$grid-unit-20;
+		top: 0;
+	}
+}
+
+.block-editor-link-control__tools {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
-	border-top: $border-width solid $gray-300;
 	margin: 0;
 	padding: $grid-unit-20;
+	padding-top: 0;
 }
 
 .block-editor-link-control__unlink {
@@ -444,11 +475,6 @@ $preview-image-height: 140px;
 	flex: 1;
 	margin: 0;
 
-
-	:last-child {
-		margin-bottom: 0;
-	}
-
 	.is-alternate & {
 		border-top: $border-width solid $gray-900;
 	}
@@ -457,7 +483,7 @@ $preview-image-height: 140px;
 .block-editor-link-control__setting {
 	margin-bottom: $grid-unit-20;
 
-	:last-child {
+	&.block-editor-link-control__setting:last-child {
 		margin-bottom: 0;
 	}
 }