Keep legacy styling

WordPress · Dec 6, 2021 · 05b3631 · 05b3631
1 parent fc7bb08
commit 05b3631
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 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
@@ -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
@@ -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
@@ -1,8 +1,21 @@
-.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
+
+.block-editor-line-height-control {
+	&.has-legacy-styles {
+		margin-bottom: 24px;
+		line-height: 1.4;
+
+		.components-input-control__container {
+			margin-top: 4px;
+		}
+	}
+}