Add Label Support for URLInput Component

packages/block-editor/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Master
 
+### New Features
+
+- Added a `label` prop to `URLInput`. This allows the label to be set without needing to wrap the `URLInput` in a `BaseControl`.
+
 ### Deprecation
 
 - `dropZoneUIOnly` prop in `MediaPlaceholder` component has been deprecated in favor of `disableMediaButtons` prop.

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should display with required props 1`] = `"<span><div tabindex=\\"-1\\"><div><div><div class=\\"components-popover block-editor-link-control is-bottom is-center components-animate__appear is-from-top\\" style=\\"\\"><div class=\\"components-popover__content\\" tabindex=\\"-1\\"><div class=\\"block-editor-link-control__popover-inner\\"><div class=\\"block-editor-link-control__search\\"><form><div class=\\"editor-url-input block-editor-url-input block-editor-link-control__search-input\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div><button type=\\"reset\\" disabled=\\"\\" aria-label=\\"Reset\\" class=\\"components-button components-icon-button block-editor-link-control__search-reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-no-alt\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div></div></div></div></div></div></div></span>"`;
+exports[`Basic rendering should display with required props 1`] = `"<span><div tabindex=\\"-1\\"><div><div><div class=\\"components-popover block-editor-link-control is-bottom is-center components-animate__appear is-from-top\\" style=\\"\\"><div class=\\"components-popover__content\\" tabindex=\\"-1\\"><div class=\\"block-editor-link-control__popover-inner\\"><div class=\\"block-editor-link-control__search\\"><form><div class=\\"components-base-control editor-url-input block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" aria-label=\\"Reset\\" class=\\"components-button components-icon-button block-editor-link-control__search-reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-no-alt\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div></div></div></div></div></div></div></span>"`;

packages/block-editor/src/components/url-input/README.md

@@ -125,6 +125,10 @@ Renders the URL input field used by the `URLInputButton` component. It can be us
 }
 ```
 
+### `label: String`
+
+*Optional.* If this property is added, a label will be generated using label property as the content.
+
 ### `autoFocus: Boolean`
 
 *Optional.* By default, the input will gain focus when it is rendered, as typically it is displayed conditionally. For example when clicking on `URLInputButton` or editing a block.

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

@@ -11,7 +11,7 @@ import scrollIntoView from 'dom-scroll-into-view';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
-import { Spinner, withSpokenMessages, Popover } from '@wordpress/components';
+import { BaseControl, Spinner, withSpokenMessages, Popover } from '@wordpress/components';
 import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { isURL } from '@wordpress/url';
@@ -256,9 +256,9 @@ class URLInput extends Component {
 
 	render() {
 		const {
+			label,
 			instanceId,
 			className,
-			id,
 			isFullWidth,
 			hasBorder,
 			__experimentalRenderSuggestions: renderSuggestions,
@@ -273,6 +273,7 @@ class URLInput extends Component {
 			selectedSuggestion,
 			loading,
 		} = this.state;
+		const id = `url-input-control-${ instanceId }`;
 
 		const suggestionsListboxId = `block-editor-url-input-suggestions-${ instanceId }`;
 		const suggestionOptionIdPrefix = `block-editor-url-input-suggestion-${ instanceId }`;
@@ -295,12 +296,15 @@ class URLInput extends Component {
 
 		/* eslint-disable jsx-a11y/no-autofocus */
 		return (
-			<div className={ classnames( 'editor-url-input block-editor-url-input', className, {
-				'is-full-width': isFullWidth,
-				'has-border': hasBorder,
-			} ) }>
+			<BaseControl
+				label={ label }
+				id={ id }
+				className={ classnames( 'editor-url-input block-editor-url-input', className, {
+					'is-full-width': isFullWidth,
+					'has-border': hasBorder,
+				} ) }
+			>
 				<input
-					id={ id }
 					autoFocus={ autoFocus }
 					type="text"
 					aria-label={ __( 'URL' ) }
@@ -358,7 +362,7 @@ class URLInput extends Component {
 						</div>
 					</Popover>
 				}
-			</div>
+			</BaseControl>
 		);
 		/* eslint-enable jsx-a11y/no-autofocus */
 	}

packages/block-editor/src/components/url-input/style.scss

@@ -51,7 +51,7 @@ $input-size: 300px;
 	.components-spinner {
 		position: absolute;
 		right: $input-padding;
-		top: $input-padding + 1;
+		bottom: $input-padding + $grid-size + 1;
 		margin: 0;
 	}
 }

packages/block-editor/src/components/url-popover/style.scss

@@ -60,21 +60,29 @@
 		transform: rotate(180deg);
 	}
 }
+.block-editor-url-popover__input-container {
+	.components-base-control:last-child,
+	.components-base-control:last-child .components-base-control__field {
+		margin-bottom: 0;
+	}
+}
 
 .block-editor-url-popover__settings {
 	display: block;
 	padding: $panel-padding;
 	border-top: $border-width solid $light-gray-500;
-
-	.components-base-control:last-child,
-	.components-base-control:last-child .components-base-control__field {
-		margin-bottom: 0;
-	}
 }
 
 .block-editor-url-popover__link-editor,
 .block-editor-url-popover__link-viewer {
 	display: flex;
+
+	.block-editor-url-input .components-base-control__field {
+		margin-bottom: 0;
+	}
+	.block-editor-url-input .components-spinner {
+		bottom: $input-padding + 1;
+	}
 }
 
 .block-editor-url-popover__link-viewer-url {

packages/block-library/src/button/edit.js

@@ -15,7 +15,6 @@ import {
 	withInstanceId,
 } from '@wordpress/compose';
 import {
-	BaseControl,
 	PanelBody,
 	RangeControl,
 	TextControl,
@@ -84,7 +83,6 @@ function ButtonEdit( {
 	fallbackTextColor,
 	setAttributes,
 	className,
-	instanceId,
 	isSelected,
 } ) {
 	const {
@@ -127,7 +125,6 @@ function ButtonEdit( {
 		setGradient,
 	} = __experimentalUseGradient();
 
-	const linkId = `wp-block-button__inline-link-${ instanceId }`;
 	return (
 		<div className={ className } title={ title }>
 			<RichText
@@ -154,24 +151,19 @@ function ButtonEdit( {
 					borderRadius: borderRadius ? borderRadius + 'px' : undefined,
 				} }
 			/>
-			<BaseControl
+			<URLInput
 				label={ __( 'Link' ) }
 				className="wp-block-button__inline-link"
-				id={ linkId }>
-				<URLInput
-					className="wp-block-button__inline-link-input"
-					value={ url }
-					/* eslint-disable jsx-a11y/no-autofocus */
-					// Disable Reason: The rule is meant to prevent enabling auto-focus, not disabling it.
-					autoFocus={ false }
-					/* eslint-enable jsx-a11y/no-autofocus */
-					onChange={ ( value ) => setAttributes( { url: value } ) }
-					disableSuggestions={ ! isSelected }
-					id={ linkId }
-					isFullWidth
-					hasBorder
-				/>
-			</BaseControl>
+				value={ url }
+				/* eslint-disable jsx-a11y/no-autofocus */
+				// Disable Reason: The rule is meant to prevent enabling auto-focus, not disabling it.
+				autoFocus={ false }
+				/* eslint-enable jsx-a11y/no-autofocus */
+				onChange={ ( value ) => setAttributes( { url: value } ) }
+				disableSuggestions={ ! isSelected }
+				isFullWidth
+				hasBorder
+			/>
 			<InspectorControls>
 				<PanelColorSettings
 					title={ __( 'Color Settings' ) }

packages/e2e-tests/specs/editor/various/links.test.js

@@ -346,7 +346,7 @@ describe( 'Links', () => {
 		// focused with the value previously inserted.
 		await pressKeyWithModifier( 'primary', 'K' );
 		await waitForAutoFocus();
-		const activeElementParentClasses = await page.evaluate( () => Object.values( document.activeElement.parentElement.classList ) );
+		const activeElementParentClasses = await page.evaluate( () => Object.values( document.activeElement.parentElement.parentElement.classList ) );
 		expect( activeElementParentClasses ).toContain( 'block-editor-url-input' );
 		const activeElementValue = await page.evaluate( () => document.activeElement.value );
 		expect( activeElementValue ).toBe( URL );