Improve LinkControl Edit UI (#51712)

* Move text above link * Change "URL" label to "Link" * Style tweaks * Add chevron based advanced settings button * Adapt logic for rendering actions and settings * Tweaks * Add proper i18n Co-authored-by: Ben Dwyer <ben@scruffian.com> * Remove commented out style Co-authored-by: Ben Dwyer <ben@scruffian.com> * Use $button-size-next-default-40px * Add showSettings, combine with new logic * Add additional translation context to advanced * Update toggle drawer name in tests * Standardise query for settings toggle * Update test to check for absence of cancel button during link creation * Fix cancellation tests * Ensure label is always “Link” but remains hidden when it’s the only visible control * Update tests to look for “Link” instead of “URL” name for input * Update empty value UI tests to only run for editing as opposed to creating links * Fix e2e test tabbing order * Use updated terms * Select settings toggle by text not aria label * Fix another tabbing order bug * Fix one more tabbing issue in e2e tests * Fix final tab ordering e2e test * Decouple conditions for showing action buttons from settings Settings may not be provided but action buttons are always needed * Tweak styling to account for action buttons when there are no settings provided * Fix test * Fix e2e test * Update name of the combobox * Fix test expecting Submit button on creation * Fix test by testing under edit rather than creation conditions * Rename URL to Link and avoid triggering command centre * move test earlier --------- Co-authored-by: Ben Dwyer <ben@scruffian.com> Co-authored-by: Dave Smith <getdavemail@gmail.com>
WordPress · Jun 26, 2023 · be4a649 · be4a649
1 parent d81637e
commit be4a649
Show file tree

Hide file tree

Showing 11 changed files with 270 additions and 249 deletions.
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
@@ -292,7 +292,8 @@ function LinkControl( {
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
-	const showSettings = !! settings?.length;
+	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
+	const showActions = isEditingLink && hasLinkValue;
 
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
@@ -322,6 +323,18 @@ 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={ internalControlValue?.title }
+								onChange={ setInternalTextInputValue }
+								onKeyDown={ handleSubmitWithEnter }
+								size="__unstable-large"
+							/>
+						) }
 						<LinkControlSearchInput
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
@@ -339,19 +352,8 @@ function LinkControl( {
 							createSuggestionButtonText={
 								createSuggestionButtonText
 							}
-							useLabel={ showTextControl }
+							hideLabelFromVision={ ! showTextControl }
 						/>
-						{ showTextControl && (
-							<TextControl
-								__nextHasNoMarginBottom
-								ref={ textInputRef }
-								className="block-editor-link-control__field block-editor-link-control__text-content"
-								label={ __( 'Text' ) }
-								value={ internalControlValue?.title }
-								onChange={ setInternalTextInputValue }
-								onKeyDown={ handleSubmitWithEnter }
-							/>
-						) }
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -376,9 +378,9 @@ function LinkControl( {
 				/>
 			) }
 
-			{ isEditing && (
+			{ showSettings && (
 				<div className="block-editor-link-control__tools">
-					{ showSettings && (
+					{ ! currentInputIsEmpty && (
 						<LinkControlSettingsDrawer
 							settingsOpen={ settingsOpen }
 							setSettingsOpen={ setSettingsOpen }
@@ -392,20 +394,22 @@ function LinkControl( {
 							/>
 						</LinkControlSettingsDrawer>
 					) }
+				</div>
+			) }
 
-					<div className="block-editor-link-control__search-actions">
-						<Button
-							variant="primary"
-							onClick={ isDisabled ? noop : handleSubmit }
-							className="block-editor-link-control__search-submit"
-							aria-disabled={ isDisabled }
-						>
-							{ __( 'Save' ) }
-						</Button>
-						<Button variant="tertiary" onClick={ handleCancel }>
-							{ __( 'Cancel' ) }
-						</Button>
-					</div>
+			{ showActions && (
+				<div className="block-editor-link-control__search-actions">
+					<Button
+						variant="primary"
+						onClick={ isDisabled ? noop : handleSubmit }
+						className="block-editor-link-control__search-submit"
+						aria-disabled={ isDisabled }
+					>
+						{ __( 'Save' ) }
+					</Button>
+					<Button variant="tertiary" onClick={ handleCancel }>
+						{ __( 'Cancel' ) }
+					</Button>
 				</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
@@ -46,7 +46,7 @@ const LinkControlSearchInput = forwardRef(
 			suggestionsQuery = {},
 			withURLSuggestion = true,
 			createSuggestionButtonText,
-			useLabel = false,
+			hideLabelFromVision = false,
 		},
 		ref
 	) => {
@@ -120,15 +120,16 @@ const LinkControlSearchInput = forwardRef(
 		};
 
 		const inputClasses = classnames( className, {
-			'has-no-label': ! useLabel,
+			// 'has-no-label': ! hideLabelFromVision,
 		} );
 
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
 					disableSuggestions={ currentLink?.url === value }
 					__nextHasNoMarginBottom
-					label={ useLabel ? 'URL' : undefined }
+					label={ __( 'Link' ) }
+					hideLabelFromVision={ hideLabelFromVision }
 					className={ inputClasses }
 					value={ value }
 					onChange={ onInputChange }

diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js
@@ -6,9 +6,9 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
-import { settings as settingsIcon } from '@wordpress/icons';
+import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
 import { useReducedMotion, useInstanceId } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+import { _x, isRTL } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 
 function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
@@ -28,10 +28,11 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 				className="block-editor-link-control__drawer-toggle"
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }
-				icon={ settingsIcon }
-				label={ __( 'Link Settings' ) }
+				icon={ isRTL() ? chevronLeftSmall : chevronRightSmall }
 				aria-controls={ settingsDrawerId }
-			/>
+			>
+				{ _x( 'Advanced', 'Additional link settings' ) }
+			</Button>
 			<MaybeAnimatePresence>
 				{ settingsOpen && (
 					<MaybeMotionDiv

diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
@@ -60,30 +60,18 @@ $preview-image-height: 140px;
 .block-editor-link-control__field {
 	margin: $grid-unit-20; // allow margin collapse for vertical spacing.
 
-	// Element wrapping the label and input.
-	> .components-base-control__field {
-		display: flex;
-		align-items: center;
-	}
-
-	.components-base-control__label {
-		margin-right: $grid-unit-20;
-		margin-bottom: 0;
-		min-width: 29px; // align with search results.
-	}
-
 	input[type="text"],
 	// Specificity overide of URLInput defaults.
 	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
 		@include input-control;
-		width: calc(100% - #{$grid-unit-20 * 2});
 		display: block;
-		padding: $grid-unit-10 $grid-unit-20;
-		margin: 0;
-		position: relative;
 		border: 1px solid $gray-600;
-		height: 40px;
 		border-radius: $radius-block-ui;
+		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
+		margin: 0;
+		padding: $grid-unit-10 $grid-unit-20;
+		position: relative;
+		width: 100%;
 	}
 }
 
@@ -96,9 +84,37 @@ $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;
+	padding: $grid-unit-10;
 	order: 20;
 }
 
+.block-editor-link-control__search-results-wrapper {
+	position: relative;
+
+	&::before,
+	&::after {
+		content: "";
+		position: absolute;
+		left: -1px;
+		right: $grid-unit-20; // avoid overlaying scrollbars
+		display: block;
+		pointer-events: none;
+		z-index: 100;
+	}
+
+	&::before {
+		height: $grid-unit-20 * 0.5;
+		top: 0;
+		bottom: auto;
+	}
+
+	&::after {
+		height: $grid-unit-20;
+		bottom: 0;
+		top: auto;
+	}
+}
+
 .block-editor-link-control__search-results {
 	margin-top: -$grid-unit-20;
 	padding: $grid-unit-10;
@@ -363,54 +379,18 @@ $preview-image-height: 140px;
 	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;
-	margin: 0;
-	padding: $grid-unit-20;
-
-	// To hide the horizontal scrollbar on toggle.
-	// Margin and padding are needed to prevent cutoff of the toggle button focus outline.
-	// See: https://github.com/WordPress/gutenberg/pull/47986
-	margin-top: calc(var(--wp-admin-border-width-focus) * -1);
-	padding-top: var(--wp-admin-border-width-focus);
-	overflow: hidden;
 }
 
 .block-editor-link-control__unlink {
 	padding-left: $grid-unit-20;
 	padding-right: $grid-unit-20;
 }
 
-.block-editor-link-control__settings {
-	flex: 1;
-	margin: 0;
-
-	.is-alternate & {
-		border-top: $border-width solid $gray-900;
-	}
-}
-
 .block-editor-link-control__setting {
 	margin-bottom: $grid-unit-20;
+	flex: 1;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-30;
 
 	// Cancel left margin inherited from WP Admin Forms CSS.
 	input {
@@ -422,6 +402,31 @@ $preview-image-height: 140px;
 	}
 }
 
+.block-editor-link-control__tools {
+	padding: $grid-unit-10 $grid-unit-10 0 $grid-unit-10;
+	margin-top: #{$grid-unit-20 * -1};
+
+	.components-button.block-editor-link-control__drawer-toggle {
+		padding-left: 0;
+		gap: 0;
+
+		// Point downwards when open (same as list view expander)
+		&[aria-expanded="true"] svg {
+			visibility: visible;
+			transition: transform 0.1s ease;
+			transform: rotate(90deg);
+			@include reduce-motion("transition");
+		}
+		// Point rightwards when closed (same as list view expander)
+		&[aria-expanded="false"] svg {
+			visibility: visible;
+			transform: rotate(0deg);
+			transition: transform 0.1s ease;
+			@include reduce-motion("transition");
+		}
+	}
+}
+
 .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
 	display: block;