URLInput: Deprecate bottom margin (#46692)

* URLInput: Deprecate bottom margin * Add changelog and update readme * Add prop to URLInput instances which fixes unit tests * Update versions for deprecation notice
WordPress · Jan 4, 2023 · d9f13a8 · d9f13a8
1 parent 01aea1a
commit d9f13a8
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 1 deletion.
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
@@ -18,6 +18,7 @@
 
 -   `URLInput`: the `renderSuggestions` callback prop now receives `currentInputValue` as a new parameter ([45806](https://github.com/WordPress/gutenberg/pull/45806)).
 -   Fluid typography: add configurable fluid typography settings for minimum font size to theme.json ([#42489](https://github.com/WordPress/gutenberg/pull/42489)).
+-   `URLInput`: Add `__nextHasNoMarginBottom` prop for opting into the new margin-free styles ([46692](https://github.com/WordPress/gutenberg/pull/46692)).
 
 ### Bug Fix
 

diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js
@@ -126,6 +126,7 @@ const LinkControlSearchInput = forwardRef(
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
+					__nextHasNoMarginBottom
 					label={ useLabel ? 'URL' : undefined }
 					className={ inputClasses }
 					value={ value }

diff --git a/packages/block-editor/src/components/url-input/README.md b/packages/block-editor/src/components/url-input/README.md
@@ -160,6 +160,10 @@ When hiding the URLInput using CSS (as is sometimes done for accessibility purpo
 
 This prop allows the suggestions list to be programmatically not rendered by passing a boolean—it can be `true` to make sure suggestions aren't rendered, or `false`/`undefined` to fall back to the default behaviour of showing suggestions when matching autocompletion items are found.
 
+### `__nextHasNoMarginBottom: Boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
+
 ## Example
 
 {% codetabs %}
@@ -217,6 +221,7 @@ registerBlockType( /* ... */, {
 	edit( { className, attributes, setAttributes } ) {
 		return (
 			<URLInput
+				__nextHasNoMarginBottom
 				className={ className }
 				value={ attributes.url }
 				onChange={ ( url, post ) => setAttributes( { url, text: (post && post.title) || 'Click here' } ) }

diff --git a/packages/block-editor/src/components/url-input/button.js b/packages/block-editor/src/components/url-input/button.js
@@ -57,6 +57,7 @@ class URLInputButton extends Component {
 								onClick={ this.toggle }
 							/>
 							<URLInput
+								__nextHasNoMarginBottom
 								value={ url || '' }
 								onChange={ onChange }
 							/>

diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js
@@ -7,6 +7,7 @@ import scrollIntoView from 'dom-scroll-into-view';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __, sprintf, _n } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';
@@ -424,6 +425,8 @@ class URLInput extends Component {
 
 	renderControl() {
 		const {
+			/** Start opting into the new margin-free styles that will become the default in a future version. */
+			__nextHasNoMarginBottom = false,
 			label = null,
 			className,
 			isFullWidth,
@@ -477,8 +480,19 @@ class URLInput extends Component {
 			return renderControl( controlProps, inputProps, loading );
 		}
 
+		if ( ! __nextHasNoMarginBottom ) {
+			deprecated( 'Bottom margin styles for wp.blockEditor.URLInput', {
+				since: '6.2',
+				version: '6.5',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
+			} );
+		}
+
 		return (
-			<BaseControl { ...controlProps }>
+			<BaseControl
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+				{ ...controlProps }
+			>
 				<input { ...inputProps } />
 				{ loading && <Spinner /> }
 			</BaseControl>

diff --git a/packages/block-editor/src/components/url-popover/link-editor.js b/packages/block-editor/src/components/url-popover/link-editor.js
@@ -31,6 +31,7 @@ export default function LinkEditor( {
 			{ ...props }
 		>
 			<URLInput
+				__nextHasNoMarginBottom
 				value={ value }
 				onChange={ onChangeInputValue }
 				autocompleteRef={ autocompleteRef }

diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
@@ -43,6 +43,7 @@ const SocialLinkURLPopover = ( {
 		>
 			<div className="block-editor-url-input">
 				<URLInput
+					__nextHasNoMarginBottom
 					value={ url }
 					onChange={ ( nextURL ) =>
 						setAttributes( { url: nextURL } )