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 f4b5261b40acee..7ae0438e9fc249 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 (
-
+
);
}
+
+export default function LineHeightControl( {
+ value: lineHeight,
+ onChange,
+ __unstableHasLegacyStyles = true,
+} ) {
+ const isDefined = isLineHeightDefined( lineHeight );
+ const value = isDefined ? lineHeight : RESET_VALUE;
+
+ return (
+
+
+
+ );
+}
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 a6e12d59eb3100..ac50a2b866be54 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 (
+
+
+
Migrated
+
+
+
+
Legacy
+
+
+
value: { value }
+
type: { typeof value }
+
+
+ );
+};
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 ad98d76e4a2ed1..c2fe160b14aeaa 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;
+ }
+ }
+}