FontSizePicker: Hard deprecate bottom margin (#58702)

* FontSizePicker: Hard deprecate bottom margin * Remove usages in app * Update changelog * Update changelog for block-editor package Co-authored-by: mirka <[email protected]> Co-authored-by: ciampo <[email protected]>
WordPress · Feb 6, 2024 · 2078ac4 · 2078ac4
1 parent 7705c03
commit 2078ac4
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 157 deletions.
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+-   `FontSizePicker`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#58702](https://github.com/WordPress/gutenberg/pull/58702)).
+
 ## 12.18.0 (2024-01-24)
 
 - Deprecated `__experimentalRecursionProvider` and `__experimentalUseHasRecursion` in favor of their new stable counterparts `RecursionProvider` and `useHasRecursion`.

diff --git a/packages/block-editor/src/components/font-sizes/README.MD b/packages/block-editor/src/components/font-sizes/README.MD
@@ -31,7 +31,6 @@ const MyFontSizePicker = () => {
 
 	return (
 		<FontSizePicker
-			__nextHasNoMarginBottom
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
 			onChange={ ( newFontSize ) => {
@@ -80,11 +79,3 @@ If `true`, the UI will contain a slider, instead of a numeric text input field.
 - Type: `Boolean`
 - Required: no
 - Default: `false`
-
-### __nextHasNoMarginBottom
-
-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.)
-
--   Type: `Boolean`
--   Required: no
--   Default: `false`
diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -373,7 +373,6 @@ export default function TypographyPanel( {
 						withReset={ false }
 						withSlider
 						size="__unstable-large"
-						__nextHasNoMarginBottom
 					/>
 				</ToolsPanelItem>
 			) }

diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js
@@ -131,7 +131,6 @@ export function FontSizeEdit( props ) {
 			withReset={ false }
 			withSlider
 			size="__unstable-large"
-			__nextHasNoMarginBottom
 		/>
 	);
 }

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Breaking Changes
 
+-   `FontSizePicker`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#58702](https://github.com/WordPress/gutenberg/pull/58702)).
 -   `GradientPicker`: Remove deprecated `__nextHasNoMargin` prop and promote to default behavior ([#58701](https://github.com/WordPress/gutenberg/pull/58701)).
 -   `CustomGradientPicker`: Remove deprecated `__nextHasNoMargin` prop and promote to default behavior ([#58699](https://github.com/WordPress/gutenberg/pull/58699)).
 -   `AnglePickerControl`: Remove deprecated `__nextHasNoMarginBottom` prop and promote to default behavior ([#58700](https://github.com/WordPress/gutenberg/pull/58700)).

diff --git a/packages/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md
@@ -29,7 +29,6 @@ const MyFontSizePicker = () => {
 
 	return (
 		<FontSizePicker
-			__nextHasNoMarginBottom
 			fontSizes={ fontSizes }
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
@@ -113,10 +112,3 @@ If `true`, a slider will be displayed alongside the input field when a custom fo
 
 -   Required: no
 -   Default: `false`
-
-### `__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.)
-
--   Required: no
--   Default: `false`
diff --git a/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx b/packages/components/src/font-size-picker/font-size-picker-toggle-group.tsx
@@ -14,17 +14,10 @@ import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
 import type { FontSizePickerToggleGroupProps } from './types';
 
 const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
-	const {
-		fontSizes,
-		value,
-		__nextHasNoMarginBottom,
-		__next40pxDefaultSize,
-		size,
-		onChange,
-	} = props;
+	const { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;
 	return (
 		<ToggleGroupControl
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__nextHasNoMarginBottom
 			__next40pxDefaultSize={ __next40pxDefaultSize }
 			label={ __( 'Font size' ) }
 			hideLabelFromVision

diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
@@ -6,7 +6,6 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 import { useState, useMemo, forwardRef } from '@wordpress/element';
@@ -31,7 +30,6 @@ import {
 	HeaderHint,
 	HeaderLabel,
 	HeaderToggle,
-	Controls,
 } from './styles';
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
@@ -43,8 +41,6 @@ const UnforwardedFontSizePicker = (
 	ref: ForwardedRef< any >
 ) => {
 	const {
-		/** Start opting into the new margin-free styles that will become the default in a future version. */
-		__nextHasNoMarginBottom = false,
 		__next40pxDefaultSize = false,
 		fallbackFontSize,
 		fontSizes = [],
@@ -57,14 +53,6 @@ const UnforwardedFontSizePicker = (
 		withReset = true,
 	} = props;
 
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated( 'Bottom margin styles for wp.components.FontSizePicker', {
-			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.',
-		} );
-	}
-
 	const units = useCustomUnits( {
 		availableUnits: unitsProp || [ 'px', 'em', 'rem' ],
 	} );
@@ -159,10 +147,7 @@ const UnforwardedFontSizePicker = (
 					) }
 				</Header>
 			</Spacer>
-			<Controls
-				className="components-font-size-picker__controls"
-				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			>
+			<div>
 				{ !! fontSizes.length &&
 					shouldUseSelectControl &&
 					! showCustomValueControl && (
@@ -196,7 +181,6 @@ const UnforwardedFontSizePicker = (
 					<FontSizePickerToggleGroup
 						fontSizes={ fontSizes }
 						value={ value }
-						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 						__next40pxDefaultSize={ __next40pxDefaultSize }
 						size={ size }
 						onChange={ ( newValue ) => {
@@ -243,9 +227,7 @@ const UnforwardedFontSizePicker = (
 							<FlexItem isBlock>
 								<Spacer marginX={ 2 } marginBottom={ 0 }>
 									<RangeControl
-										__nextHasNoMarginBottom={
-											__nextHasNoMarginBottom
-										}
+										__nextHasNoMarginBottom
 										__next40pxDefaultSize={
 											__next40pxDefaultSize
 										}
@@ -297,7 +279,7 @@ const UnforwardedFontSizePicker = (
 						) }
 					</Flex>
 				) }
-			</Controls>
+			</div>
 		</Container>
 	);
 };

diff --git a/packages/components/src/font-size-picker/stories/index.story.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx
@@ -66,7 +66,6 @@ const TwoFontSizePickersWithState: StoryFn< typeof FontSizePicker > = ( {
 export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
-	__nextHasNoMarginBottom: true,
 	disableCustomFontSizes: false,
 	fontSizes: [
 		{

diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts
@@ -36,10 +36,3 @@ export const HeaderLabel = styled( BaseControl.VisualLabel )`
 export const HeaderHint = styled.span`
 	color: ${ COLORS.gray[ 700 ] };
 `;
-
-export const Controls = styled.div< {
-	__nextHasNoMarginBottom: boolean;
-} >`
-	${ ( props ) =>
-		! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }
-`;