LineHeightControl: Enhance interactions by migrating internals to NumberControl on Style options.

packages/block-editor/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   `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)
 
 ### Bug Fix

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 }
+		__nextHasNoMarginBottom={ true }
+	/>
 );
 ```
 
@@ -38,6 +42,13 @@ The value of the line height.
 
 A callback function that handles the application of the line height value.
 
+#### `__nextHasNoMarginBottom`
+
+-   **Type:** `boolean`
+-   **Default:** `false`
+
+Start opting into the new margin-free styles that will become the default in a future version. 
+
 ## 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.

packages/block-editor/src/components/line-height-control/index.js

@@ -1,8 +1,12 @@
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
+import {
+	__experimentalNumberControl as NumberControl,
+	TextControl,
+} from '@wordpress/components';
 import { ZERO } from '@wordpress/keycodes';
 
 /**
@@ -15,7 +19,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 +69,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 +84,46 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) {
 		</div>
 	);
 }
+
+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',
+} ) {
+	const isDefined = isLineHeightDefined( lineHeight );
+	const value = isDefined ? lineHeight : RESET_VALUE;
+
+	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="block-editor-line-height-control"
+			style={ deprecatedStyles }
+		>
+			<NumberControl
+				__unstableInputWidth={ __unstableInputWidth }
+				onChange={ onChange }
+				label={ __( 'Line height' ) }
+				placeholder={ BASE_DEFAULT_VALUE }
+				step={ STEP }
+				value={ value }
+				min={ 0 }
+			/>
+		</div>
+	);
+}

packages/block-editor/src/components/line-height-control/stories/index.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import LineHeightControl, { LegacyLineHeightControl } from '../';
+
+export default {
+	component: LineHeightControl,
+	title: 'BlockEditor/LineHeightControl',
+};
+
+const Template = ( props ) => {
+	const [ value, setValue ] = useState();
+	return (
+		<LineHeightControl onChange={ setValue } value={ value } { ...props } />
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+	__unstableInputWidth: '60px',
+};
+
+export const UnconstrainedWidth = Template.bind( {} );
+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>
+	);
+};

packages/block-editor/src/components/line-height-control/style.scss

@@ -1,8 +1,10 @@
-.block-editor-line-height-control {
+// TODO: Remove this class before merging
+.block-editor-line-height-control-legacy {
 	margin-bottom: 24px;
 
 	input {
 		display: block;
 		max-width: 60px;
 	}
 }
+// end TODO

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 }
 		/>

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;
 	}

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