@wordpress/block-editor 15.9.1-next.738bb1424.0 → 15.10.0

package/src/components/global-styles/typography-panel.js

@@ -9,7 +9,7 @@ import {
 	Notice,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, useEffect } from '@wordpress/element';
 import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
@@ -22,7 +22,6 @@ import LetterSpacingControl from '../letter-spacing-control';
 import TextAlignmentControl from '../text-alignment-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
-import TextIndentControl from '../text-indent-control';
 import WritingModeControl from '../writing-mode-control';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
@@ -30,7 +29,6 @@ import {
 	getMergedFontFamiliesAndFontFamilyFaces,
 	findNearestStyleAndWeight,
 } from './typography-utils';
-import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -43,7 +41,6 @@ export function useHasTypographyPanel( settings ) {
 	const hasTextAlign = useHasTextAlignmentControl( settings );
 	const hasTextTransform = useHasTextTransformControl( settings );
 	const hasTextDecoration = useHasTextDecorationControl( settings );
-	const hasTextIndent = useHasTextIndentControl( settings );
 	const hasWritingMode = useHasWritingModeControl( settings );
 	const hasTextColumns = useHasTextColumnsControl( settings );
 	const hasFontSize = useHasFontSizeControl( settings );
@@ -57,7 +54,6 @@ export function useHasTypographyPanel( settings ) {
 		hasTextTransform ||
 		hasFontSize ||
 		hasTextDecoration ||
-		hasTextIndent ||
 		hasWritingMode ||
 		hasTextColumns
 	);
@@ -121,10 +117,6 @@ function useHasTextColumnsControl( settings ) {
 	return settings?.typography?.textColumns;
 }
 
-function useHasTextIndentControl( settings ) {
-	return settings?.typography?.textIndent;
-}
-
 /**
  * Concatenate all the font sizes into a single list for the font size picker.
  *
@@ -176,7 +168,6 @@ const DEFAULT_CONTROLS = {
 	textAlign: true,
 	textTransform: true,
 	textDecoration: true,
-	textIndent: true,
 	writingMode: true,
 	textColumns: true,
 };
@@ -189,7 +180,7 @@ export default function TypographyPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
-	isGlobalStyles = false,
+	fitText = false,
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
@@ -205,57 +196,15 @@ export default function TypographyPanel( {
 		const slug = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
-		let updatedValue = setImmutably(
-			value,
-			[ 'typography', 'fontFamily' ],
-			slug ? `var:preset|font-family|${ slug }` : newValue || undefined
-		);
-
-		// Check if current font style/weight are available in the new font family.
-		const newFontFamilyFaces =
-			fontFamilies?.find( ( { fontFamily: f } ) => f === newValue )
-				?.fontFace ?? [];
-		const { fontStyles, fontWeights } =
-			getFontStylesAndWeights( newFontFamilyFaces );
-		const hasFontStyle = fontStyles?.some(
-			( { value: fs } ) => fs === fontStyle
-		);
-		const hasFontWeight = fontWeights?.some(
-			( { value: fw } ) => fw?.toString() === fontWeight?.toString()
+		onChange(
+			setImmutably(
+				value,
+				[ 'typography', 'fontFamily' ],
+				slug
+					? `var:preset|font-family|${ slug }`
+					: newValue || undefined
+			)
 		);
-
-		// Find the nearest available font style/weight if not available.
-		if ( ! hasFontStyle || ! hasFontWeight ) {
-			const { nearestFontStyle, nearestFontWeight } =
-				findNearestStyleAndWeight(
-					newFontFamilyFaces,
-					fontStyle,
-					fontWeight
-				);
-			if ( nearestFontStyle || nearestFontWeight ) {
-				// Update to the nearest available font style/weight in the new font family.
-				updatedValue = {
-					...updatedValue,
-					typography: {
-						...updatedValue?.typography,
-						fontStyle: nearestFontStyle || undefined,
-						fontWeight: nearestFontWeight || undefined,
-					},
-				};
-			} else if ( fontStyle || fontWeight ) {
-				// Reset if no available styles/weights found.
-				updatedValue = {
-					...updatedValue,
-					typography: {
-						...updatedValue?.typography,
-						fontStyle: undefined,
-						fontWeight: undefined,
-					},
-				};
-			}
-		}
-
-		onChange( updatedValue );
 	};
 	const hasFontFamily = () => !! value?.typography?.fontFamily;
 	const resetFontFamily = () => setFontFamily( undefined );
@@ -313,6 +262,11 @@ export default function TypographyPanel( {
 	const hasFontWeights = settings?.typography?.fontWeight;
 	const fontStyle = decodeValue( inheritedValue?.typography?.fontStyle );
 	const fontWeight = decodeValue( inheritedValue?.typography?.fontWeight );
+	const { nearestFontStyle, nearestFontWeight } = findNearestStyleAndWeight(
+		fontFamilyFaces,
+		fontStyle,
+		fontWeight
+	);
 	const setFontAppearance = useCallback(
 		( { fontStyle: newFontStyle, fontWeight: newFontWeight } ) => {
 			// Only update the font style and weight if they have changed.
@@ -335,6 +289,24 @@ export default function TypographyPanel( {
 		setFontAppearance( {} );
 	}, [ setFontAppearance ] );
 
+	// Check if previous font style and weight values are available in the new font family.
+	useEffect( () => {
+		if ( nearestFontStyle && nearestFontWeight ) {
+			setFontAppearance( {
+				fontStyle: nearestFontStyle,
+				fontWeight: nearestFontWeight,
+			} );
+		} else {
+			// Reset font appearance if there are no available styles or weights.
+			resetFontAppearance();
+		}
+	}, [
+		nearestFontStyle,
+		nearestFontWeight,
+		resetFontAppearance,
+		setFontAppearance,
+	] );
+
 	// Line Height
 	const hasLineHeightEnabled = useHasLineHeightControl( settings );
 	const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );
@@ -367,21 +339,6 @@ export default function TypographyPanel( {
 	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
 	const resetLetterSpacing = () => setLetterSpacing( undefined );
 
-	// Text Indent
-	const hasTextIndentControl = useHasTextIndentControl( settings );
-	const textIndent = decodeValue( inheritedValue?.typography?.textIndent );
-	const setTextIndent = ( newValue ) => {
-		onChange(
-			setImmutably(
-				value,
-				[ 'typography', 'textIndent' ],
-				newValue || undefined
-			)
-		);
-	};
-	const hasTextIndent = () => !! value?.typography?.textIndent;
-	const resetTextIndent = () => setTextIndent( undefined );
-
 	// Text Columns
 	const hasTextColumnsControl = useHasTextColumnsControl( settings );
 	const textColumns = decodeValue( inheritedValue?.typography?.textColumns );
@@ -492,7 +449,7 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ hasFontSizeEnabled && (
+			{ hasFontSizeEnabled && ! fitText && (
 				<ToolsPanelItem
 					label={ __( 'Size' ) }
 					hasValue={ hasFontSize }
@@ -514,6 +471,7 @@ export default function TypographyPanel( {
 			) }
 			{ hasAppearanceControl && (
 				<ToolsPanelItem
+					className="single-column"
 					label={ appearanceControlLabel }
 					hasValue={ hasFontAppearance }
 					onDeselect={ resetFontAppearance }
@@ -567,30 +525,6 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ hasTextIndentControl && (
-				<ToolsPanelItem
-					label={ __( 'Line indent' ) }
-					hasValue={ hasTextIndent }
-					onDeselect={ resetTextIndent }
-					isShownByDefault={ defaultControls.textIndent }
-					panelId={ panelId }
-				>
-					<TextIndentControl
-						value={ textIndent }
-						onChange={ setTextIndent }
-						size="__unstable-large"
-						__unstableInputWidth="auto"
-						withSlider
-						help={
-							isGlobalStyles
-								? __(
-										'Indents the first line of each paragraph after the first one.'
-								  )
-								: __( 'Indents the first line of text.' )
-						}
-					/>
-				</ToolsPanelItem>
-			) }
 			{ hasTextColumnsControl && (
 				<ToolsPanelItem
 					className="single-column"
@@ -642,6 +576,7 @@ export default function TypographyPanel( {
 						value={ writingMode }
 						onChange={ setWritingMode }
 						size="__unstable-large"
+						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }
@@ -659,6 +594,7 @@ export default function TypographyPanel( {
 						showNone
 						isBlock
 						size="__unstable-large"
+						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }
@@ -675,6 +611,7 @@ export default function TypographyPanel( {
 						onChange={ setTextAlign }
 						options={ [ 'left', 'center', 'right', 'justify' ] }
 						size="__unstable-large"
+						__nextHasNoMarginBottom
 					/>
 
 					{ textAlign === 'justify' && (

package/src/components/height-control/README.md

@@ -1,7 +1,5 @@
 # Height Control
 
-**⚠️ DEPRECATED:** This component is deprecated. Please use `DimensionControl` instead for new implementations.
-
 The `HeightControl` component adds a linked unit control and slider component for controlling the height of a block within the block editor. It supports passing a label, and is used for controlling the minimum height dimensions of Group blocks.
 
 _Note:_ It is worth noting that the minimum height option is an opt-in feature. Themes need to declare support for it before it'll be available, and a convenient way to do that is via opting in to the [appearanceTools](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls) UI controls.
@@ -10,26 +8,6 @@ _Note:_ It is worth noting that the minimum height option is an opt-in feature.
 
 ### Usage
 
-**For new implementations, use `DimensionControl` instead:**
-
-```jsx
-import { useState } from 'react';
-import { DimensionControl } from '@wordpress/block-editor';
-
-const MyDimensionControl = () => {
-	const [ value, setValue ] = useState();
-	return (
-		<DimensionControl
-			label={ 'Height' }
-			onChange={ setValue }
-			value={ value }
-		/>
-	);
-};
-```
-
-**Legacy usage (deprecated):**
-
 Renders the markup for height control component, to be used in the block inspector.
 
 ```jsx
@@ -38,14 +16,12 @@ import { HeightControl } from '@wordpress/block-editor';
 
 const MyLineHeightControl = () => (
 	const [ value, setValue ] = useState();
-	return (
-		<HeightControl
-			label={ 'My Height Control' }
-			onChange={ setValue }
-			value={ value }
-		/>
-	);
-};
+	<HeightControl
+		label={ 'My Height Control' }
+		onChange={ setValue }
+		value={ value }
+	/>
+);
 ```
 
 ### Props
@@ -71,4 +47,4 @@ A label for the height control. This is useful when using the height control for
 
 ## Related components
 
-Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.
+Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/height-control/index.js

@@ -13,7 +13,6 @@ import {
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -54,8 +53,6 @@ const RANGE_CONTROL_CUSTOM_SETTINGS = {
 /**
  * HeightControl renders a linked unit control and range control for adjusting the height of a block.
  *
- * @deprecated Use DimensionControl instead.
- *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/height-control/README.md
  *
  * @param {Object}                     props
@@ -70,11 +67,6 @@ export default function HeightControl( {
 	onChange,
 	value,
 } ) {
-	deprecated( 'wp.blockEditor.HeightControl', {
-		since: '7.0',
-		version: '7.2',
-		alternative: 'wp.blockEditor.DimensionControl',
-	} );
 	const customRangeValue = parseFloat( value );
 
 	const [ availableUnits ] = useSettings( 'spacing.units' );
@@ -185,6 +177,7 @@ export default function HeightControl( {
 							}
 							withInputField={ false }
 							onChange={ handleSliderChange }
+							__nextHasNoMarginBottom
 							label={ label }
 							hideLabelFromVision
 						/>

package/src/components/html-element-control/index.js

@@ -88,6 +88,7 @@ export default function HTMLElementControl( {
 	return (
 		<VStack spacing={ 2 } className="block-editor-html-element-control">
 			<SelectControl
+				__nextHasNoMarginBottom
 				__next40pxDefaultSize
 				label={ __( 'HTML element' ) }
 				options={ modifiedOptions }

package/src/components/iframe/index.js

@@ -21,6 +21,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { getCompatibilityStyles } from './get-compatibility-styles';
 import { useScaleCanvas } from './use-scale-canvas';
@@ -118,6 +119,7 @@ function Iframe( {
 	/** @type {[Document, import('react').Dispatch<Document>]} */
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
+	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 
 	const setRef = useRefEffect( ( node ) => {
@@ -174,6 +176,8 @@ function Iframe( {
 
 			documentElement.classList.add( 'block-editor-iframe__html' );
 
+			clearerRef( documentElement );
+
 			contentDocument.dir = ownerDocument.dir;
 
 			for ( const compatStyle of getCompatibilityStyles() ) {
@@ -239,6 +243,7 @@ function Iframe( {
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
 		contentRef,
+		clearerRef,
 		writingFlowRef,
 		disabledRef,
 	] );

package/src/components/image-editor/zoom-dropdown.js

@@ -35,6 +35,7 @@ export default function ZoomDropdown() {
 				<DropdownContentWrapper paddingSize="medium">
 					<RangeControl
 						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 						label={ __( 'Zoom' ) }
 						min={ MIN_ZOOM }
 						max={ MAX_ZOOM }

package/src/components/image-size-control/index.js

@@ -91,6 +91,7 @@ export default function ImageSizeControl( {
 		<VStack className="block-editor-image-size-control" spacing="4">
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
 				<SelectControl
+					__nextHasNoMarginBottom
 					label={ __( 'Resolution' ) }
 					value={ slug }
 					options={ imageSizeOptions }
@@ -128,6 +129,7 @@ export default function ImageSizeControl( {
 						value={ selectedValue }
 						isBlock
 						__next40pxDefaultSize
+						__nextHasNoMarginBottom
 					>
 						{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
 							return (

package/src/components/index.js

@@ -54,14 +54,12 @@ export { default as __experimentalFontAppearanceControl } from './font-appearanc
 export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
 export { default as __experimentalTextDecorationControl } from './text-decoration-control';
-export { default as __experimentalTextIndentControl } from './text-indent-control';
 export { default as __experimentalTextTransformControl } from './text-transform-control';
 export { default as __experimentalWritingModeControl } from './writing-mode-control';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
-export { default as DimensionControl } from './dimension-control';
 export { default as HeightControl } from './height-control';
 export { default as __experimentalImageEditor } from './image-editor';
 export { default as __experimentalImageSizeControl } from './image-size-control';

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -4,7 +4,7 @@
 import { useLayoutEffect, useState } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
-import { isShallowEqual } from '@wordpress/is-shallow-equal';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies

package/src/components/inserter/block-patterns-explorer/pattern-explorer-sidebar.js

@@ -37,6 +37,7 @@ function PatternsExplorerSearch( { searchValue, setSearchValue } ) {
 	return (
 		<div className={ baseClassName }>
 			<SearchControl
+				__nextHasNoMarginBottom
 				onChange={ setSearchValue }
 				value={ searchValue }
 				label={ __( 'Search' ) }

package/src/components/inserter/block-types-tab.js

@@ -186,11 +186,6 @@ export function BlockTypesTab(
 			continue;
 		}
 
-		// Skip search-only items from browse view (they're still searchable).
-		if ( item.isSearchOnly ) {
-			continue;
-		}
-
 		if ( item.isAllowedInCurrentRoot ) {
 			itemsForCurrentRoot.push( item );
 		} else {

package/src/components/inserter/media-tab/media-panel.js

@@ -25,6 +25,7 @@ export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
 	return (
 		<div className={ baseCssClass }>
 			<SearchControl
+				__nextHasNoMarginBottom
 				className={ `${ baseCssClass }-search` }
 				onChange={ setSearch }
 				value={ search }

package/src/components/inserter/menu.js

@@ -172,6 +172,7 @@ function InserterMenu(
 		return (
 			<>
 				<SearchControl
+					__nextHasNoMarginBottom
 					className="block-editor-inserter__search"
 					onChange={ ( value ) => {
 						if ( hoveredItem ) {

package/src/components/inserter/quick-inserter.js

@@ -89,6 +89,7 @@ export default function QuickInserter( {
 		>
 			{ showSearch && (
 				<SearchControl
+					__nextHasNoMarginBottom
 					className="block-editor-inserter__search"
 					value={ filterValue }
 					onChange={ ( value ) => {

package/src/components/inspector-controls/README.md

@@ -96,6 +96,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings' ) }>
 						<CheckboxControl
+							__nextHasNoMarginBottom
 							heading="Checkbox Field"
 							label="Tick Me"
 							help="Additional help text"
@@ -114,6 +115,7 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<TextControl
+							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							label="Text Field"
 							help="Additional help text"
@@ -122,12 +124,14 @@ registerBlockType( 'my-plugin/inspector-controls-example', {
 						/>
 
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label="Toggle Field"
 							checked={ toggleField }
 							onChange={ onChangeToggleField }
 						/>
 
 						<SelectControl
+							__nextHasNoMarginBottom
 							label="Select Control"
 							value={ selectField }
 							options={ [
@@ -204,6 +208,7 @@ function MyBlockEdit( { attributes, setAttributes } ) {
 			</InspectorControls>
 			<InspectorAdvancedControls>
 				<TextControl
+					__nextHasNoMarginBottom
 					__next40pxDefaultSize
 					label="HTML anchor"
 					value={ attributes.anchor }

package/src/components/link-control/index.js

@@ -443,6 +443,7 @@ function LinkControl( {
 					>
 						{ showTextControl && (
 							<TextControl
+								__nextHasNoMarginBottom
 								ref={ textInputRef }
 								className="block-editor-link-control__field block-editor-link-control__text-content"
 								label={ __( 'Text' ) }

package/src/components/link-control/link-preview.js

@@ -11,7 +11,6 @@ import {
 	Button,
 	ExternalLink,
 	__experimentalTruncate as Truncate,
-	Flex,
 } from '@wordpress/components';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
@@ -103,10 +102,10 @@ export default function LinkPreview( {
 	} );
 
 	return (
-		<Flex
+		<div
 			role="group"
 			aria-label={ __( 'Manage link' ) }
-			className={ clsx( 'block-editor-link-control__preview', {
+			className={ clsx( 'block-editor-link-control__search-item', {
 				'is-current': true,
 				'is-rich': hasRichData,
 				'is-fetching': !! isFetching,
@@ -115,36 +114,30 @@ export default function LinkPreview( {
 				'is-url-title': displayTitle === displayURL,
 			} ) }
 		>
-			<Flex gap={ 0 }>
-				<Flex
-					className="block-editor-link-control__link-information"
+			<div className="block-editor-link-control__search-item-top">
+				<span
+					className="block-editor-link-control__search-item-header"
 					role="figure"
 					aria-label={
 						/* translators: Accessibility text for the link preview when editing a link. */
 						__( 'Link information' )
 					}
-					justify="start"
 				>
-					<Flex
+					<span
 						className={ clsx(
-							'block-editor-link-control__preview-icon',
+							'block-editor-link-control__search-item-icon',
 							{
 								'is-image': richData?.icon,
 							}
 						) }
-						justify="center"
 					>
 						{ icon }
-					</Flex>
-					<Flex
-						className="block-editor-link-control__preview-details"
-						direction="column"
-						gap={ 1 }
-					>
+					</span>
+					<span className="block-editor-link-control__search-item-details">
 						{ ! isEmptyURL ? (
 							<>
 								<ExternalLink
-									className="block-editor-link-control__preview-title"
+									className="block-editor-link-control__search-item-title"
 									href={ value.url }
 								>
 									<Truncate numberOfLines={ 1 }>
@@ -152,7 +145,7 @@ export default function LinkPreview( {
 									</Truncate>
 								</ExternalLink>
 								{ ! isUrlRedundant && (
-									<span className="block-editor-link-control__preview-info">
+									<span className="block-editor-link-control__search-item-info">
 										<Truncate numberOfLines={ 1 }>
 											{ displayURL }
 										</Truncate>
@@ -160,12 +153,12 @@ export default function LinkPreview( {
 								) }
 							</>
 						) : (
-							<span className="block-editor-link-control__preview-error-notice">
+							<span className="block-editor-link-control__search-item-error-notice">
 								{ __( 'Link is empty' ) }
 							</span>
 						) }
-					</Flex>
-				</Flex>
+					</span>
+				</span>
 				<Button
 					icon={ pencil }
 					label={ __( 'Edit link' ) }
@@ -192,7 +185,7 @@ export default function LinkPreview( {
 					showTooltip={ ! showIconLabels }
 				/>
 				<ViewerSlot fillProps={ value } />
-			</Flex>
-		</Flex>
+			</div>
+		</div>
 	);
 }

package/src/components/link-control/settings.js

@@ -45,6 +45,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 			// If render property is not provided, use CheckboxControl
 			return (
 				<CheckboxControl
+					__nextHasNoMarginBottom
 					className="block-editor-link-control__setting"
 					key={ setting.id }
 					label={ setting.title }