From 8dd786b48cd31e94f3fd16350fb2e4a74a8ef991 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 4 Dec 2021 02:19:45 +0900
Subject: [PATCH 01/14] Add story for LineHeightControl

---
 .../line-height-control/stories/index.js      | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 packages/block-editor/src/components/line-height-control/stories/index.js

diff --git a/packages/block-editor/src/components/line-height-control/stories/index.js b/packages/block-editor/src/components/line-height-control/stories/index.js
new file mode 100644
index 0000000000000..a6e12d59eb310
--- /dev/null
+++ b/packages/block-editor/src/components/line-height-control/stories/index.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import LineHeightControl from '../';
+
+export default {
+	component: LineHeightControl,
+	title: 'BlockEditor/LineHeightControl',
+};
+
+const Template = ( props ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<>
+			<LineHeightControl
+				onChange={ setValue }
+				value={ value }
+				{ ...props }
+			/>
+			<hr />
+			<p>value: { value }</p>
+			<p>type: { typeof value }</p>
+		</>
+	);
+};
+
+export const Default = Template.bind( {} );

From d0ad242b56fff0c863249ce7f38749f8b43e910e Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sun, 5 Dec 2021 03:31:58 +0900
Subject: [PATCH 02/14] Keep legacy styling

---
 .../components/line-height-control/index.js   | 44 +++++++++++++++++--
 .../line-height-control/stories/index.js      | 35 ++++++++++++++-
 .../components/line-height-control/style.scss | 15 ++++++-
 3 files changed, 89 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index f4b5261b40ace..7ae0438e9fc24 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -1,8 +1,16 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
+import {
+	__experimentalNumberControl as NumberControl,
+	TextControl,
+} from '@wordpress/components';
 import { ZERO } from '@wordpress/keycodes';
 
 /**
@@ -15,7 +23,8 @@ import {
 	isLineHeightDefined,
 } from './utils';
 
-export default function LineHeightControl( { value: lineHeight, onChange } ) {
+// TODO: Remove before merging
+export function LegacyLineHeightControl( { value: lineHeight, onChange } ) {
 	const isDefined = isLineHeightDefined( lineHeight );
 
 	const handleOnKeyDown = ( event ) => {
@@ -64,7 +73,7 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) {
 	const value = isDefined ? lineHeight : RESET_VALUE;
 
 	return (
-		<div className="block-editor-line-height-control">
+		<div className="block-editor-line-height-control-legacy">
 			<TextControl
 				autoComplete="off"
 				onKeyDown={ handleOnKeyDown }
@@ -79,3 +88,32 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) {
 		</div>
 	);
 }
+
+export default function LineHeightControl( {
+	value: lineHeight,
+	onChange,
+	__unstableHasLegacyStyles = true,
+} ) {
+	const isDefined = isLineHeightDefined( lineHeight );
+	const value = isDefined ? lineHeight : RESET_VALUE;
+
+	return (
+		<div
+			className={ classNames( 'block-editor-line-height-control', {
+				'has-legacy-styles': __unstableHasLegacyStyles,
+			} ) }
+		>
+			<NumberControl
+				__unstableInputWidth={
+					__unstableHasLegacyStyles ? '60px' : undefined
+				}
+				onChange={ onChange }
+				label={ __( 'Line height' ) }
+				placeholder={ BASE_DEFAULT_VALUE }
+				step={ STEP }
+				value={ value }
+				min={ 0 }
+			/>
+		</div>
+	);
+}
diff --git a/packages/block-editor/src/components/line-height-control/stories/index.js b/packages/block-editor/src/components/line-height-control/stories/index.js
index a6e12d59eb310..ac50a2b866be5 100644
--- a/packages/block-editor/src/components/line-height-control/stories/index.js
+++ b/packages/block-editor/src/components/line-height-control/stories/index.js
@@ -6,7 +6,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import LineHeightControl from '../';
+import LineHeightControl, { LegacyLineHeightControl } from '../';
 
 export default {
 	component: LineHeightControl,
@@ -30,3 +30,36 @@ const Template = ( props ) => {
 };
 
 export const Default = Template.bind( {} );
+Default.args = {
+	__unstableHasLegacyStyles: true,
+};
+
+// TODO: Remove before merge
+export const TemporaryTest = () => {
+	const [ value, setValue ] = useState();
+	return (
+		<div
+			style={ {
+				display: 'grid',
+				gap: 20,
+				gridTemplateColumns: '1fr 1fr',
+				width: 300,
+			} }
+		>
+			<div>
+				<h2>Migrated</h2>
+				<Template />
+			</div>
+			<div>
+				<h2>Legacy</h2>
+				<LegacyLineHeightControl
+					onChange={ setValue }
+					value={ value }
+				/>
+				<hr />
+				<p>value: { value }</p>
+				<p>type: { typeof value }</p>
+			</div>
+		</div>
+	);
+};
diff --git a/packages/block-editor/src/components/line-height-control/style.scss b/packages/block-editor/src/components/line-height-control/style.scss
index ad98d76e4a2ed..c2fe160b14aea 100644
--- a/packages/block-editor/src/components/line-height-control/style.scss
+++ b/packages/block-editor/src/components/line-height-control/style.scss
@@ -1,4 +1,5 @@
-.block-editor-line-height-control {
+// TODO: Remove this class before merging
+.block-editor-line-height-control-legacy {
 	margin-bottom: 24px;
 
 	input {
@@ -6,3 +7,15 @@
 		max-width: 60px;
 	}
 }
+// end TODO
+
+.block-editor-line-height-control {
+	&.has-legacy-styles {
+		margin-bottom: 24px;
+		line-height: 1.4;
+
+		.components-input-control__container {
+			margin-top: 4px;
+		}
+	}
+}

From 3dd0171ba189c2f255f7199a0e4970b47b00d3e8 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 21 Dec 2021 20:45:14 +0900
Subject: [PATCH 03/14] Add deprecation warning

---
 .../src/components/line-height-control/index.js          | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index 7ae0438e9fc24..42f72586132d5 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalNumberControl as NumberControl,
@@ -97,6 +98,14 @@ export default function LineHeightControl( {
 	const isDefined = isLineHeightDefined( lineHeight );
 	const value = isDefined ? lineHeight : RESET_VALUE;
 
+	if ( __unstableHasLegacyStyles ) {
+		deprecated( 'Legacy styles for wp.blockEditor.LineHeightControl', {
+			since: '5.10',
+			hint:
+				'Set the `__unstableHasLegacyStyles` prop to false to start opting into the new styles, which will become the default in a future version.',
+		} );
+	}
+
 	return (
 		<div
 			className={ classNames( 'block-editor-line-height-control', {

From f9ff0a35ddd62641ffd43f35569f08fd413fae33 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 21 Dec 2021 21:24:15 +0900
Subject: [PATCH 04/14] Update docs

---
 .../src/components/line-height-control/README.md   | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/line-height-control/README.md b/packages/block-editor/src/components/line-height-control/README.md
index 806d181e180b7..9f1208a67abf3 100644
--- a/packages/block-editor/src/components/line-height-control/README.md
+++ b/packages/block-editor/src/components/line-height-control/README.md
@@ -18,9 +18,13 @@ _Note:_ It is worth noting that the line height setting option is an opt-in feat
 Renders the markup for the line height setting option in the block inspector.
 
 ```jsx
-import { KeyboardShortcuts } from '@wordpress/block-editor';
+import { LineHeightControl } from '@wordpress/block-editor';
 const MyLineHeightControl = () => (
-	<LineHeightControl value={ lineHeight } onChange={ onChange } />
+	<LineHeightControl
+		value={ lineHeight }
+		onChange={ onChange }
+		__unstableHasLegacyStyles={ false }
+	/>
 );
 ```
 
@@ -38,6 +42,12 @@ The value of the line height.
 
 A callback function that handles the application of the line height value.
 
+#### `__unstableHasLegacyStyles`
+
+-   **Type:** `boolean`
+
+Whether to use the legacy styling, which is deprecated and will be removed in a future version. Set this to `false` to opt into the new styling, which will soon become the default.
+
 ## 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.

From b8d066021f7fb087cd7273c37d1872bc981d6aba Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 11 Feb 2022 03:09:34 +0900
Subject: [PATCH 05/14] Update changelog

---
 packages/block-editor/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 02594fdb5a6d4..8e90181c0aba2 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Change internal implementation of the `LineHeightControl` component to use `NumberControl`. New styles, which are more consistent with other control components, can be used by setting the `__unstableHasLegacyStyles` prop to `false`. In a future version, these new styles will become the default and legacy styles will be removed.
+
 ## 8.1.1 (2022-02-10)
 
 ### Bug Fix

From a8eabceb572ab2adf196ca3344da17b37ab93d8b Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 11 Feb 2022 06:16:45 +0900
Subject: [PATCH 06/14] Update style deprecation to match new guidelines

---
 packages/block-editor/CHANGELOG.md            |  2 +-
 .../components/line-height-control/index.js   | 36 +++++++++----------
 .../line-height-control/stories/index.js      |  2 +-
 .../components/line-height-control/style.scss | 11 ------
 4 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 8e90181c0aba2..af57ce5bc4bfb 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### New Features
 
--   Change internal implementation of the `LineHeightControl` component to use `NumberControl`. New styles, which are more consistent with other control components, can be used by setting the `__unstableHasLegacyStyles` prop to `false`. In a future version, these new styles will become the default and legacy styles will be removed.
+-   `LineHeightControl`: Changes internal implementation to use `NumberControl`, which allows enhanced interactions such as dragging to change the value. To improve consistency with other control components, the bottom margin styles on the component has been deprecated, and will be removed in a future version. To opt into this simplified margin style, set the `__nextHasNoMarginBottom` prop to `true`.
 
 ## 8.1.1 (2022-02-10)
 
diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index 42f72586132d5..c48422cd50738 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -93,29 +88,34 @@ export function LegacyLineHeightControl( { value: lineHeight, onChange } ) {
 export default function LineHeightControl( {
 	value: lineHeight,
 	onChange,
-	__unstableHasLegacyStyles = true,
+	__nextHasNoMarginBottom = false,
+	__unstableInputWidth = '60px',
 } ) {
 	const isDefined = isLineHeightDefined( lineHeight );
 	const value = isDefined ? lineHeight : RESET_VALUE;
 
-	if ( __unstableHasLegacyStyles ) {
-		deprecated( 'Legacy styles for wp.blockEditor.LineHeightControl', {
-			since: '5.10',
-			hint:
-				'Set the `__unstableHasLegacyStyles` prop to false to start opting into the new styles, which will become the default in a future version.',
-		} );
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			'Bottom margin styles for wp.blockEditor.LineHeightControl',
+			{
+				since: '6.0',
+				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 deprecatedStyles = __nextHasNoMarginBottom
+		? undefined
+		: { marginBottom: 24 };
 
 	return (
 		<div
-			className={ classNames( 'block-editor-line-height-control', {
-				'has-legacy-styles': __unstableHasLegacyStyles,
-			} ) }
+			className="block-editor-line-height-control"
+			style={ deprecatedStyles }
 		>
 			<NumberControl
-				__unstableInputWidth={
-					__unstableHasLegacyStyles ? '60px' : undefined
-				}
+				__unstableInputWidth={ __unstableInputWidth }
 				onChange={ onChange }
 				label={ __( 'Line height' ) }
 				placeholder={ BASE_DEFAULT_VALUE }
diff --git a/packages/block-editor/src/components/line-height-control/stories/index.js b/packages/block-editor/src/components/line-height-control/stories/index.js
index ac50a2b866be5..45e9d4df28fb1 100644
--- a/packages/block-editor/src/components/line-height-control/stories/index.js
+++ b/packages/block-editor/src/components/line-height-control/stories/index.js
@@ -31,7 +31,7 @@ const Template = ( props ) => {
 
 export const Default = Template.bind( {} );
 Default.args = {
-	__unstableHasLegacyStyles: true,
+	__nextHasNoMarginBottom: false,
 };
 
 // TODO: Remove before merge
diff --git a/packages/block-editor/src/components/line-height-control/style.scss b/packages/block-editor/src/components/line-height-control/style.scss
index c2fe160b14aea..41535165a517a 100644
--- a/packages/block-editor/src/components/line-height-control/style.scss
+++ b/packages/block-editor/src/components/line-height-control/style.scss
@@ -8,14 +8,3 @@
 	}
 }
 // end TODO
-
-.block-editor-line-height-control {
-	&.has-legacy-styles {
-		margin-bottom: 24px;
-		line-height: 1.4;
-
-		.components-input-control__container {
-			margin-top: 4px;
-		}
-	}
-}

From 56d86ecf38d51a152be69b93d8cff293e3bcd180 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 11 Feb 2022 06:23:36 +0900
Subject: [PATCH 07/14] Update usage in Typography Panel

---
 packages/block-editor/src/hooks/line-height.js  | 2 ++
 packages/block-editor/src/hooks/typography.scss | 4 ----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js
index e1b79c2d58c0c..7f4c2d5a4aa01 100644
--- a/packages/block-editor/src/hooks/line-height.js
+++ b/packages/block-editor/src/hooks/line-height.js
@@ -38,6 +38,8 @@ export function LineHeightEdit( props ) {
 	};
 	return (
 		<LineHeightControl
+			__unstableInputWidth="100%"
+			__nextHasNoMarginBottom={ true }
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
 		/>
diff --git a/packages/block-editor/src/hooks/typography.scss b/packages/block-editor/src/hooks/typography.scss
index 8093312feb10c..a9beccdce5c23 100644
--- a/packages/block-editor/src/hooks/typography.scss
+++ b/packages/block-editor/src/hooks/typography.scss
@@ -6,10 +6,6 @@
 		margin-bottom: 0;
 	}
 
-	.block-editor-line-height-control input {
-		max-width: 100%;
-	}
-
 	.single-column {
 		grid-column: span 1;
 	}

From ec0b9ad239abac5c6c835c0aebb0cad3c2c3d32b Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 11 Feb 2022 06:38:25 +0900
Subject: [PATCH 08/14] Update usage in Global Styles

---
 .../global-styles/typography-panel.js           | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index 03e3634ce77d4..1d7229f2f099c 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -7,7 +7,11 @@ import {
 	__experimentalFontAppearanceControl as FontAppearanceControl,
 	__experimentalLetterSpacingControl as LetterSpacingControl,
 } from '@wordpress/block-editor';
-import { PanelBody, FontSizePicker } from '@wordpress/components';
+import {
+	PanelBody,
+	FontSizePicker,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -143,10 +147,13 @@ export default function TypographyPanel( { name, element } ) {
 				/>
 			) }
 			{ hasLineHeightEnabled && (
-				<LineHeightControl
-					value={ lineHeight }
-					onChange={ setLineHeight }
-				/>
+				<Spacer marginBottom={ 6 }>
+					<LineHeightControl
+						__nextHasNoMarginBottom={ true }
+						value={ lineHeight }
+						onChange={ setLineHeight }
+					/>
+				</Spacer>
 			) }
 			{ hasAppearanceControl && (
 				<FontAppearanceControl

From f5c7dbf115377ca3089d0234427379c465b9dde4 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 11 Feb 2022 08:26:03 +0900
Subject: [PATCH 09/14] Update docs

---
 .../src/components/line-height-control/README.md           | 7 ++++---
 .../src/components/line-height-control/index.js            | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/line-height-control/README.md b/packages/block-editor/src/components/line-height-control/README.md
index 9f1208a67abf3..9f25d4b371b0c 100644
--- a/packages/block-editor/src/components/line-height-control/README.md
+++ b/packages/block-editor/src/components/line-height-control/README.md
@@ -23,7 +23,7 @@ const MyLineHeightControl = () => (
 	<LineHeightControl
 		value={ lineHeight }
 		onChange={ onChange }
-		__unstableHasLegacyStyles={ false }
+		__nextHasNoMarginBottom={ true }
 	/>
 );
 ```
@@ -42,11 +42,12 @@ The value of the line height.
 
 A callback function that handles the application of the line height value.
 
-#### `__unstableHasLegacyStyles`
+#### `__nextHasNoMarginBottom`
 
 -   **Type:** `boolean`
+-   **Default:** `false`
 
-Whether to use the legacy styling, which is deprecated and will be removed in a future version. Set this to `false` to opt into the new styling, which will soon become the default.
+Start opting into the new margin-free styles that will become the default in a future version. 
 
 ## Related components
 
diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index c48422cd50738..21042a8cad389 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -88,6 +88,7 @@ export function LegacyLineHeightControl( { value: lineHeight, onChange } ) {
 export default function LineHeightControl( {
 	value: lineHeight,
 	onChange,
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
 	__nextHasNoMarginBottom = false,
 	__unstableInputWidth = '60px',
 } ) {

From 9440108849daed782df6576c10e8253590f11247 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 11 Feb 2022 08:26:19 +0900
Subject: [PATCH 10/14] Tweak stories

---
 .../line-height-control/stories/index.js      | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/line-height-control/stories/index.js b/packages/block-editor/src/components/line-height-control/stories/index.js
index 45e9d4df28fb1..aabbd439bff42 100644
--- a/packages/block-editor/src/components/line-height-control/stories/index.js
+++ b/packages/block-editor/src/components/line-height-control/stories/index.js
@@ -16,22 +16,20 @@ export default {
 const Template = ( props ) => {
 	const [ value, setValue ] = useState();
 	return (
-		<>
-			<LineHeightControl
-				onChange={ setValue }
-				value={ value }
-				{ ...props }
-			/>
-			<hr />
-			<p>value: { value }</p>
-			<p>type: { typeof value }</p>
-		</>
+		<LineHeightControl onChange={ setValue } value={ value } { ...props } />
 	);
 };
 
 export const Default = Template.bind( {} );
 Default.args = {
-	__nextHasNoMarginBottom: false,
+	__nextHasNoMarginBottom: true,
+	__unstableInputWidth: '60px',
+};
+
+export const UnconstrainedWidth = Template.bind( {} );
+UnconstrainedWidth.args = {
+	...Default.args,
+	__unstableInputWidth: '100%',
 };
 
 // TODO: Remove before merge

From 8744cc12787cfe2ba768eb52892dc9fea74aa313 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 15 Feb 2022 04:34:03 +0900
Subject: [PATCH 11/14] Update story for ToolsPanel

---
 packages/components/src/tools-panel/stories/typography-panel.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/tools-panel/stories/typography-panel.js b/packages/components/src/tools-panel/stories/typography-panel.js
index c57ac4c19e9d5..98d3a3ca52fe0 100644
--- a/packages/components/src/tools-panel/stories/typography-panel.js
+++ b/packages/components/src/tools-panel/stories/typography-panel.js
@@ -161,6 +161,8 @@ export const TypographyPanel = () => {
 							<LineHeightControl
 								value={ lineHeight }
 								onChange={ setLineHeight }
+								__unstableInputWidth="100%"
+								__nextHasNoMarginBottom={ true }
 							/>
 						</ToolsPanelItem>
 

From d56a3c195f158360c42d36025af1b59d01c94eaf Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 15 Feb 2022 04:57:19 +0900
Subject: [PATCH 12/14] Add deprecation note to prop readme

---
 .../block-editor/src/components/line-height-control/README.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/line-height-control/README.md b/packages/block-editor/src/components/line-height-control/README.md
index 9f25d4b371b0c..36f9d17f15bd6 100644
--- a/packages/block-editor/src/components/line-height-control/README.md
+++ b/packages/block-editor/src/components/line-height-control/README.md
@@ -47,7 +47,7 @@ A callback function that handles the application of the line height value.
 -   **Type:** `boolean`
 -   **Default:** `false`
 
-Start opting into the new margin-free styles that will become the default in a future version. 
+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.)
 
 ## Related components
 

From d4e38a0aa11dabcaef08624803cf3475e3c3d0c2 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 16 Feb 2022 06:24:14 +0900
Subject: [PATCH 13/14] LineHeightControl: Migrate internals to `NumberControl`
 (Part 2: Behavior) (#37164)

* Maintain previous behavior via state reducer

* Add tests

* Add comment about strange reducer behavior

* Fix tests
---
 .../components/line-height-control/index.js   | 45 ++++++++++++++
 .../line-height-control/test/index.js         | 61 +++++++++++++++++++
 .../src/input-control/reducer/reducer.ts      |  3 +
 3 files changed, 109 insertions(+)
 create mode 100644 packages/block-editor/src/components/line-height-control/test/index.js

diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index 21042a8cad389..89071b5671d8d 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -93,6 +93,50 @@ export default function LineHeightControl( {
 	__unstableInputWidth = '60px',
 } ) {
 	const isDefined = isLineHeightDefined( lineHeight );
+
+	const adjustNextValue = ( nextValue, wasTypedOrPasted ) => {
+		// Set the next value without modification if lineHeight has been defined
+		if ( isDefined ) return nextValue;
+
+		/**
+		 * The following logic handles the initial step up/down action
+		 * (from an undefined value state) so that the next values are better suited for
+		 * line-height rendering. For example, the first step up should immediately
+		 * go to 1.6, rather than the normally expected 0.1.
+		 *
+		 * Step up/down actions can be triggered by keydowns of the up/down arrow keys,
+		 * or by clicking the spin buttons.
+		 */
+		switch ( nextValue ) {
+			case `${ STEP }`:
+				// Increment by step value
+				return BASE_DEFAULT_VALUE + STEP;
+			case '0': {
+				// This means the user explicitly input '0', rather than stepped down
+				// from an undefined value state
+				if ( wasTypedOrPasted ) return nextValue;
+				// Decrement by step value
+				return BASE_DEFAULT_VALUE - STEP;
+			}
+			case '':
+				return BASE_DEFAULT_VALUE;
+			default:
+				return nextValue;
+		}
+	};
+
+	const stateReducer = ( state, action ) => {
+		// Be careful when changing this — cross-browser behavior of the
+		// `inputType` field in `input` events are inconsistent.
+		// For example, Firefox emits an input event with inputType="insertReplacementText"
+		// on spin button clicks, while other browsers do not even emit an input event.
+		const wasTypedOrPasted = [ 'insertText', 'insertFromPaste' ].includes(
+			action.payload.event.nativeEvent.inputType
+		);
+		state.value = adjustNextValue( state.value, wasTypedOrPasted );
+		return state;
+	};
+
 	const value = isDefined ? lineHeight : RESET_VALUE;
 
 	if ( ! __nextHasNoMarginBottom ) {
@@ -117,6 +161,7 @@ export default function LineHeightControl( {
 		>
 			<NumberControl
 				__unstableInputWidth={ __unstableInputWidth }
+				__unstableStateReducer={ stateReducer }
 				onChange={ onChange }
 				label={ __( 'Line height' ) }
 				placeholder={ BASE_DEFAULT_VALUE }
diff --git a/packages/block-editor/src/components/line-height-control/test/index.js b/packages/block-editor/src/components/line-height-control/test/index.js
new file mode 100644
index 0000000000000..c6a16f5db3cad
--- /dev/null
+++ b/packages/block-editor/src/components/line-height-control/test/index.js
@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { UP, DOWN } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import LineHeightControl from '../';
+import { BASE_DEFAULT_VALUE, STEP } from '../utils';
+
+const ControlledLineHeightControl = () => {
+	const [ value, setValue ] = useState();
+	return (
+		<LineHeightControl
+			value={ value }
+			onChange={ setValue }
+			__nextHasNoMarginBottom={ true }
+		/>
+	);
+};
+
+describe( 'LineHeightControl', () => {
+	it( 'should immediately step up from the default value if up-arrowed from an unset state', () => {
+		render( <ControlledLineHeightControl /> );
+		const input = screen.getByRole( 'spinbutton' );
+		input.focus();
+		fireEvent.keyDown( input, { keyCode: UP } );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + STEP );
+	} );
+
+	it( 'should immediately step down from the default value if down-arrowed from an unset state', () => {
+		render( <ControlledLineHeightControl /> );
+		const input = screen.getByRole( 'spinbutton' );
+		input.focus();
+		fireEvent.keyDown( input, { keyCode: DOWN } );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - STEP );
+	} );
+
+	it( 'should immediately step up from the default value if spin button up was clicked from an unset state', () => {
+		render( <ControlledLineHeightControl /> );
+		const input = screen.getByRole( 'spinbutton' );
+		input.focus();
+		fireEvent.change( input, { target: { value: 0.1 } } ); // simulates click on spin button up
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + STEP );
+	} );
+
+	it( 'should immediately step down from the default value if spin button down was clicked from an unset state', () => {
+		render( <ControlledLineHeightControl /> );
+		const input = screen.getByRole( 'spinbutton' );
+		input.focus();
+		fireEvent.change( input, { target: { value: 0 } } ); // simulates click on spin button down
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - STEP );
+	} );
+} );
diff --git a/packages/components/src/input-control/reducer/reducer.ts b/packages/components/src/input-control/reducer/reducer.ts
index c67c99baeca2f..618cd5a7ca234 100644
--- a/packages/components/src/input-control/reducer/reducer.ts
+++ b/packages/components/src/input-control/reducer/reducer.ts
@@ -50,6 +50,9 @@ export const composeStateReducers = (
 ): StateReducer => {
 	return ( ...args ) => {
 		return fns.reduceRight( ( state, fn ) => {
+			// TODO: Assess whether this can be replaced with a more standard `compose` implementation
+			// like wp.data.compose() (aka lodash flowRight) or Redux compose().
+			// The current implementation only works by functions mutating the original state object.
 			const fnState = fn( ...args );
 			return isEmpty( fnState ) ? state : { ...state, ...fnState };
 		}, {} as InputState );

From e379dd3e99a6053102f907ab90829580d5a982d3 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 16 Feb 2022 06:34:14 +0900
Subject: [PATCH 14/14] Remove temporary code

---
 .../components/line-height-control/index.js   | 72 +------------------
 .../line-height-control/stories/index.js      | 32 +--------
 .../components/line-height-control/style.scss | 10 ---
 packages/block-editor/src/style.scss          |  1 -
 4 files changed, 2 insertions(+), 113 deletions(-)
 delete mode 100644 packages/block-editor/src/components/line-height-control/style.scss

diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index 89071b5671d8d..2cdc533c90cc6 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/packages/block-editor/src/components/line-height-control/index.js
@@ -3,11 +3,7 @@
  */
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
-import {
-	__experimentalNumberControl as NumberControl,
-	TextControl,
-} from '@wordpress/components';
-import { ZERO } from '@wordpress/keycodes';
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -19,72 +15,6 @@ import {
 	isLineHeightDefined,
 } from './utils';
 
-// TODO: Remove before merging
-export function LegacyLineHeightControl( { value: lineHeight, onChange } ) {
-	const isDefined = isLineHeightDefined( lineHeight );
-
-	const handleOnKeyDown = ( event ) => {
-		const { keyCode } = event;
-
-		if ( keyCode === ZERO && ! isDefined ) {
-			/**
-			 * Prevents the onChange callback from firing, which prevents
-			 * the logic from assuming the change was triggered from
-			 * an input arrow CLICK.
-			 */
-			event.preventDefault();
-			onChange( '0' );
-		}
-	};
-
-	const handleOnChange = ( nextValue ) => {
-		// Set the next value without modification if lineHeight has been defined
-		if ( isDefined ) {
-			onChange( nextValue );
-			return;
-		}
-
-		// Otherwise...
-		/**
-		 * The following logic handles the initial up/down arrow CLICK of the
-		 * input element. This is so that the next values (from an undefined value state)
-		 * are more better suited for line-height rendering.
-		 */
-		let adjustedNextValue = nextValue;
-
-		switch ( nextValue ) {
-			case `${ STEP }`:
-				// Increment by step value
-				adjustedNextValue = BASE_DEFAULT_VALUE + STEP;
-				break;
-			case '0':
-				// Decrement by step value
-				adjustedNextValue = BASE_DEFAULT_VALUE - STEP;
-				break;
-		}
-
-		onChange( adjustedNextValue );
-	};
-
-	const value = isDefined ? lineHeight : RESET_VALUE;
-
-	return (
-		<div className="block-editor-line-height-control-legacy">
-			<TextControl
-				autoComplete="off"
-				onKeyDown={ handleOnKeyDown }
-				onChange={ handleOnChange }
-				label={ __( 'Line height' ) }
-				placeholder={ BASE_DEFAULT_VALUE }
-				step={ STEP }
-				type="number"
-				value={ value }
-				min={ 0 }
-			/>
-		</div>
-	);
-}
-
 export default function LineHeightControl( {
 	value: lineHeight,
 	onChange,
diff --git a/packages/block-editor/src/components/line-height-control/stories/index.js b/packages/block-editor/src/components/line-height-control/stories/index.js
index aabbd439bff42..1b751409f32e3 100644
--- a/packages/block-editor/src/components/line-height-control/stories/index.js
+++ b/packages/block-editor/src/components/line-height-control/stories/index.js
@@ -6,7 +6,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import LineHeightControl, { LegacyLineHeightControl } from '../';
+import LineHeightControl from '../';
 
 export default {
 	component: LineHeightControl,
@@ -31,33 +31,3 @@ UnconstrainedWidth.args = {
 	...Default.args,
 	__unstableInputWidth: '100%',
 };
-
-// TODO: Remove before merge
-export const TemporaryTest = () => {
-	const [ value, setValue ] = useState();
-	return (
-		<div
-			style={ {
-				display: 'grid',
-				gap: 20,
-				gridTemplateColumns: '1fr 1fr',
-				width: 300,
-			} }
-		>
-			<div>
-				<h2>Migrated</h2>
-				<Template />
-			</div>
-			<div>
-				<h2>Legacy</h2>
-				<LegacyLineHeightControl
-					onChange={ setValue }
-					value={ value }
-				/>
-				<hr />
-				<p>value: { value }</p>
-				<p>type: { typeof value }</p>
-			</div>
-		</div>
-	);
-};
diff --git a/packages/block-editor/src/components/line-height-control/style.scss b/packages/block-editor/src/components/line-height-control/style.scss
deleted file mode 100644
index 41535165a517a..0000000000000
--- a/packages/block-editor/src/components/line-height-control/style.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// TODO: Remove this class before merging
-.block-editor-line-height-control-legacy {
-	margin-bottom: 24px;
-
-	input {
-		display: block;
-		max-width: 60px;
-	}
-}
-// end TODO
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index fae1c7053c8e6..4d3ae160df4e8 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -36,7 +36,6 @@
 @import "./components/inner-blocks/style.scss";
 @import "./components/inserter-list-item/style.scss";
 @import "./components/justify-content-control/style.scss";
-@import "./components/line-height-control/style.scss";
 @import "./components/link-control/style.scss";
 @import "./components/list-view/style.scss";
 @import "./components/media-replace-flow/style.scss";