@wordpress/block-editor 8.1.2 → 8.3.0-next.e230fbab09.0

package/src/components/line-height-control/index.js

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
-import { ZERO } from '@wordpress/keycodes';
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -15,64 +15,87 @@ import {
 	isLineHeightDefined,
 } from './utils';
 
-export default function LineHeightControl( { 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',
+} ) {
 	const isDefined = isLineHeightDefined( lineHeight );
 
-	const handleOnKeyDown = ( event ) => {
-		const { keyCode } = event;
+	const adjustNextValue = ( nextValue, wasTypedOrPasted ) => {
+		// Set the next value without modification if lineHeight has been defined.
+		if ( isDefined ) return nextValue;
 
-		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.
+		 * 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.
 		 */
-		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;
+				// 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;
 		}
+	};
 
-		onChange( adjustedNextValue );
+	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 ) {
+		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">
-			<TextControl
-				autoComplete="off"
-				onKeyDown={ handleOnKeyDown }
-				onChange={ handleOnChange }
+		<div
+			className="block-editor-line-height-control"
+			style={ deprecatedStyles }
+		>
+			<NumberControl
+				__unstableInputWidth={ __unstableInputWidth }
+				__unstableStateReducer={ stateReducer }
+				onChange={ onChange }
 				label={ __( 'Line height' ) }
 				placeholder={ BASE_DEFAULT_VALUE }
 				step={ STEP }
-				type="number"
 				value={ value }
 				min={ 0 }
 			/>

package/src/components/line-height-control/index.native.js

@@ -20,6 +20,8 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) {
 			step={ STEP }
 			value={ value }
 			onChange={ onChange }
+			// TODO: should be updated to avoid using `false`, in order to
+			// align with the web version of `UnitControl`
 			units={ false }
 		/>
 	);

package/src/components/line-height-control/stories/index.js

@@ -0,0 +1,33 @@
+/**
+ * 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 } />
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	__nextHasNoMarginBottom: true,
+	__unstableInputWidth: '60px',
+};
+
+export const UnconstrainedWidth = Template.bind( {} );
+UnconstrainedWidth.args = {
+	...Default.args,
+	__unstableInputWidth: '100%',
+};

package/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 );
+	} );
+} );

package/src/components/link-control/index.js

@@ -246,7 +246,7 @@ function LinkControl( {
 		const { keyCode } = event;
 		if (
 			keyCode === ENTER &&
-			! currentInputIsEmpty // disallow submitting empty values.
+			! currentInputIsEmpty // Disallow submitting empty values.
 		) {
 			event.preventDefault();
 			handleSubmit();
@@ -319,7 +319,7 @@ function LinkControl( {
 									label={ __( 'Submit' ) }
 									icon={ keyboardReturn }
 									className="block-editor-link-control__search-submit"
-									disabled={ currentInputIsEmpty } // disallow submitting empty values.
+									disabled={ currentInputIsEmpty } // Disallow submitting empty values.
 								/>
 							</div>
 						</LinkControlSearchInput>

package/src/components/link-control/search-input.js

@@ -94,7 +94,7 @@ const LinkControlSearchInput = forwardRef(
 		const onSuggestionSelected = async ( selectedSuggestion ) => {
 			let suggestion = selectedSuggestion;
 			if ( CREATE_TYPE === selectedSuggestion.type ) {
-				// Create a new page and call onSelect with the output from the onCreateSuggestion callback
+				// Create a new page and call onSelect with the output from the onCreateSuggestion callback.
 				try {
 					suggestion = await onCreateSuggestion(
 						selectedSuggestion.title

package/src/components/link-control/search-results.js

@@ -66,7 +66,7 @@ export default function LinkControlSearchResults( {
 	// when that is required.
 	const searchResultsLabel = createElement(
 		isInitialSuggestions ? Fragment : VisuallyHidden,
-		{}, // empty props
+		{}, // Empty props.
 		<span
 			className="block-editor-link-control__search-results-label"
 			id={ searchResultsLabelId }
@@ -109,7 +109,7 @@ export default function LinkControlSearchResults( {
 					}
 
 					// If we're not handling "Create" suggestions above then
-					// we don't want them in the main results so exit early
+					// we don't want them in the main results so exit early.
 					if ( CREATE_TYPE === suggestion.type ) {
 						return null;
 					}