From 2fbb2da399ca621319503acbb1a0b2efc7ca30b4 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 2 Sep 2022 23:59:19 +0900
Subject: [PATCH 1/2] FontSizePicker: Deprecate bottom margin

---
 .../src/components/font-sizes/README.MD         |  9 +++++++++
 .../components/src/font-size-picker/README.md   |  9 +++++++++
 .../components/src/font-size-picker/index.js    |  9 +++++++++
 .../src/font-size-picker/stories/index.js       |  8 +++-----
 .../src/font-size-picker/test/index.js          | 17 +++++++++++++++--
 5 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/font-sizes/README.MD b/packages/block-editor/src/components/font-sizes/README.MD
index 69354b90f2a35..adfe0ca8853d8 100644
--- a/packages/block-editor/src/components/font-sizes/README.MD
+++ b/packages/block-editor/src/components/font-sizes/README.MD
@@ -31,6 +31,7 @@ const MyFontSizePicker = () => {
 
 	return (
 		<FontSizePicker
+			__nextHasNoMarginBottom
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
 			onChange={ ( newFontSize ) => {
@@ -79,3 +80,11 @@ 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/components/src/font-size-picker/README.md b/packages/components/src/font-size-picker/README.md
index 48fdf6a4c6f6b..99a320d38f94f 100644
--- a/packages/components/src/font-size-picker/README.md
+++ b/packages/components/src/font-size-picker/README.md
@@ -29,6 +29,7 @@ const MyFontSizePicker = () => {
 
 	return (
 		<FontSizePicker
+			__nextHasNoMarginBottom
 			fontSizes={ fontSizes }
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
@@ -105,3 +106,11 @@ If `true`, a reset button will be displayed alongside the input field when a cus
 -   Type: `Boolean`
 -   Required: no
 -   Default: `true`
+
+### __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`
\ No newline at end of file
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index 74f0f8f90bffc..1fb266bba02b2 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __, sprintf } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 import { useState, useMemo, forwardRef } from '@wordpress/element';
@@ -58,6 +59,14 @@ function FontSizePicker(
 	},
 	ref
 ) {
+	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 hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes(
 		'string'
 	);
diff --git a/packages/components/src/font-size-picker/stories/index.js b/packages/components/src/font-size-picker/stories/index.js
index b86941e3d9836..6a2e63eb8ad71 100644
--- a/packages/components/src/font-size-picker/stories/index.js
+++ b/packages/components/src/font-size-picker/stories/index.js
@@ -12,17 +12,14 @@ export default {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	argTypes: {
-		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
 		initialValue: { table: { disable: true } }, // hide prop because it's not actually part of FontSizePicker
 		fallbackFontSize: {
 			description:
 				'If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.',
 		},
 		size: {
-			control: {
-				type: 'radio',
-				options: [ 'default', '__unstable-large' ],
-			},
+			control: { type: 'radio' },
+			options: [ 'default', '__unstable-large' ],
 		},
 		withReset: {
 			description:
@@ -68,6 +65,7 @@ const TwoFontSizePickersWithState = ( { fontSizes, ...props } ) => {
 
 export const Default = FontSizePickerWithState.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	disableCustomFontSizes: false,
 	fontSizes: [
 		{
diff --git a/packages/components/src/font-size-picker/test/index.js b/packages/components/src/font-size-picker/test/index.js
index d227f0e9df64f..ca6a8e1a87330 100644
--- a/packages/components/src/font-size-picker/test/index.js
+++ b/packages/components/src/font-size-picker/test/index.js
@@ -28,7 +28,11 @@ describe( 'FontSizePicker', () => {
 			);
 
 			render(
-				<FontSizePicker value={ fontSize } onChange={ setFontSize } />
+				<FontSizePicker
+					value={ fontSize }
+					onChange={ setFontSize }
+					__nextHasNoMarginBottom
+				/>
 			);
 
 			const unitSelect = getUnitSelect();
@@ -52,7 +56,11 @@ describe( 'FontSizePicker', () => {
 			);
 
 			render(
-				<FontSizePicker value={ fontSize } onChange={ setFontSize } />
+				<FontSizePicker
+					value={ fontSize }
+					onChange={ setFontSize }
+					__nextHasNoMarginBottom
+				/>
 			);
 
 			const unitSelect = getUnitSelect();
@@ -87,6 +95,7 @@ describe( 'FontSizePicker', () => {
 					fontSizes={ fontSizes }
 					value={ fontSize }
 					onChange={ setFontSize }
+					__nextHasNoMarginBottom
 				/>
 			);
 
@@ -123,6 +132,7 @@ describe( 'FontSizePicker', () => {
 					fontSizes={ fontSizes }
 					value={ fontSize }
 					onChange={ setFontSize }
+					__nextHasNoMarginBottom
 				/>
 			);
 
@@ -182,6 +192,7 @@ describe( 'FontSizePicker', () => {
 				<FontSizePicker
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
+					__nextHasNoMarginBottom
 				/>
 			);
 			// Trigger click to open the select menu and take into account
@@ -199,6 +210,7 @@ describe( 'FontSizePicker', () => {
 					<FontSizePicker
 						fontSizes={ fontSizes }
 						value={ fontSizes[ 0 ].size }
+						__nextHasNoMarginBottom
 					/>
 				);
 				const element = screen.getByLabelText( 'Large' );
@@ -218,6 +230,7 @@ describe( 'FontSizePicker', () => {
 					<FontSizePicker
 						fontSizes={ fontSizes }
 						value={ fontSizes[ 0 ].size }
+						__nextHasNoMarginBottom
 					/>
 				);
 				const largeElement = screen.getByLabelText( 'Large' );

From e056cbd50db550e6cadf1f3c307a49670bfe46f3 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 6 Sep 2022 02:02:41 +0900
Subject: [PATCH 2/2] Add changelog

---
 packages/block-editor/CHANGELOG.md | 4 ++++
 packages/components/CHANGELOG.md   | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 4e261a8a5fba9..6ef7ae6571ccb 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking change
+
+-   `FontSizePicker`: Deprecate bottom margin style. Add a `__nextHasNoMarginBottom` prop to start opting into the margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4 ([#43870](https://github.com/WordPress/gutenberg/pull/43870)).
+
 ## 9.8.0 (2022-08-24)
 
 ## 9.7.0 (2022-08-10)
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 47159ec62d079..a0eebc8ca1096 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   `FontSizePicker`: Deprecate bottom margin style. Add a `__nextHasNoMarginBottom` prop to start opting into the margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4 ([#43870](https://github.com/WordPress/gutenberg/pull/43870)).
+
 ### Bug Fix
 
 -   `Popover`: enable auto-updating every animation frame ([#43617](https://github.com/WordPress/gutenberg/pull/43617)).