From d92f2b9ad62c84b0e14702de0883c624fd2c9db1 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 20 Dec 2022 14:22:34 -0800 Subject: [PATCH] URLInput: Add flag to remove bottom margin --- .../src/components/url-input/README.md | 8 ++++++++ .../src/components/url-input/index.js | 16 +++++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/url-input/README.md b/packages/block-editor/src/components/url-input/README.md index c6f4f172968759..d15702bcfb0bca 100644 --- a/packages/block-editor/src/components/url-input/README.md +++ b/packages/block-editor/src/components/url-input/README.md @@ -160,6 +160,13 @@ 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` + +- **Type:** `boolean` +- **Default:** `false` + +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 +224,7 @@ registerBlockType( /* ... */, { edit( { className, attributes, setAttributes } ) { return ( setAttributes( { url, text: (post && post.title) || 'Click here' } ) } diff --git a/packages/block-editor/src/components/url-input/index.js b/packages/block-editor/src/components/url-input/index.js index 0eb97730e15d18..e4074531d00e82 100644 --- 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.1', + version: '6.4', + hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version', + } ); + } + return ( - + { loading && }