@wordpress/block-editor 10.2.0 → 10.3.0

package/src/components/list-view/use-list-view-drop-zone.js

@@ -11,7 +11,10 @@ import {
 /**
  * Internal dependencies
  */
-import { getDistanceToNearestEdge } from '../../utils/math';
+import {
+	getDistanceToNearestEdge,
+	isPointContainedByRect,
+} from '../../utils/math';
 import useOnBlockDrop from '../use-on-block-drop';
 import { store as blockEditorStore } from '../../store';
 
@@ -48,23 +51,6 @@ import { store as blockEditorStore } from '../../store';
  *                                                  'inside' refers to nesting as an inner block.
  */
 
-/**
- * Is the point contained by the rectangle.
- *
- * @param {WPPoint} point The point.
- * @param {DOMRect} rect  The rectangle.
- *
- * @return {boolean} True if the point is contained by the rectangle, false otherwise.
- */
-function isPointContainedByRect( point, rect ) {
-	return (
-		rect.left <= point.x &&
-		rect.right >= point.x &&
-		rect.top <= point.y &&
-		rect.bottom >= point.y
-	);
-}
-
 /**
  * Determines whether the user positioning the dragged block to nest as an
  * inner block.

package/src/components/panel-color-settings/test/index.js

@@ -31,7 +31,7 @@ describe( 'PanelColorSettings', () => {
 				] }
 			/>
 		);
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should render a color panel if at least one setting supports custom colors', async () => {
@@ -55,7 +55,7 @@ describe( 'PanelColorSettings', () => {
 				] }
 			/>
 		);
-		expect( container.innerHTML ).not.toBe( '' );
+		expect( container ).not.toBeEmptyDOMElement();
 	} );
 
 	it( 'should render a color panel if at least one setting specifies some colors to choose', async () => {
@@ -85,7 +85,7 @@ describe( 'PanelColorSettings', () => {
 				] }
 			/>
 		);
-		expect( container.innerHTML ).not.toBe( '' );
+		expect( container ).not.toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render anything if none of the setting panels has colors to choose', async () => {
@@ -112,6 +112,6 @@ describe( 'PanelColorSettings', () => {
 				] }
 			/>
 		);
-		expect( container.innerHTML ).not.toBe( '' );
+		expect( container ).not.toBeEmptyDOMElement();
 	} );
 } );

package/src/components/preview-options/index.js

@@ -13,6 +13,7 @@ import { check } from '@wordpress/icons';
 
 export default function PreviewOptions( {
 	children,
+	viewLabel,
 	className,
 	isEnabled = true,
 	deviceType,
@@ -32,8 +33,7 @@ export default function PreviewOptions( {
 		variant: 'tertiary',
 		className: 'block-editor-post-preview__button-toggle',
 		disabled: ! isEnabled,
-		/* translators: button label text should, if possible, be under 16 characters. */
-		children: __( 'View' ),
+		children: viewLabel,
 	};
 	const menuProps = {
 		'aria-label': __( 'View options' ),

package/src/components/preview-options/style.scss

@@ -28,7 +28,7 @@
 }
 
 .edit-post-header__settings,
-.edit-site-header__actions {
+.edit-site-header-edit-mode__actions {
 	@include break-small () {
 		.editor-post-preview {
 			display: none;

package/src/components/provider/test/use-block-sync.js

@@ -6,7 +6,7 @@ import { registerBlockType } from '@wordpress/blocks';
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -48,16 +48,13 @@ describe( 'useBlockSync hook', () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();
 
-		let root;
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					value={ fakeBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		const { rerender } = render(
+			<TestWrapper
+				value={ fakeBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		// Reset blocks should be called on mount.
 		expect( onChange ).not.toHaveBeenCalled();
@@ -68,15 +65,13 @@ describe( 'useBlockSync hook', () => {
 		const testBlocks = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
 		];
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					value={ testBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				value={ testBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		// Reset blocks should be called when the incoming value changes.
 		expect( onChange ).not.toHaveBeenCalled();
@@ -95,17 +90,14 @@ describe( 'useBlockSync hook', () => {
 		const onChange = jest.fn();
 		const onInput = jest.fn();
 
-		let root;
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					clientId="test"
-					value={ fakeBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		const { rerender } = render(
+			<TestWrapper
+				clientId="test"
+				value={ fakeBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		expect( resetBlocks ).not.toHaveBeenCalled();
 		expect( onChange ).not.toHaveBeenCalled();
@@ -123,16 +115,14 @@ describe( 'useBlockSync hook', () => {
 				attributes: { foo: 1 },
 			},
 		];
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					clientId="test"
-					value={ testBlocks }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				clientId="test"
+				value={ testBlocks }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		// Reset blocks should be called when the incoming value changes.
 		expect( onChange ).not.toHaveBeenCalled();
@@ -158,22 +148,20 @@ describe( 'useBlockSync hook', () => {
 				attributes: { foo: 1 },
 			},
 		];
-		let root;
+
 		let registry;
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					clientId="test"
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		const { rerender } = render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				clientId="test"
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		registry
 			.dispatch( blockEditorStore )
@@ -188,16 +176,14 @@ describe( 'useBlockSync hook', () => {
 		// triggered once more.
 		expect( newBlockValue ).not.toBe( value1 );
 
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					clientId="test"
-					value={ newBlockValue }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				clientId="test"
+				value={ newBlockValue }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		// replaceInnerBlocks should not be called when the controlling
 		// block value is the same as what already exists in the store.
@@ -210,16 +196,14 @@ describe( 'useBlockSync hook', () => {
 			'setHasControlledInnerBlocks'
 		);
 
-		await act( async () => {
-			create(
-				<TestWrapper
-					clientId="test"
-					value={ [] }
-					onChange={ jest.fn() }
-					onInput={ jest.fn() }
-				/>
-			);
-		} );
+		render(
+			<TestWrapper
+				clientId="test"
+				value={ [] }
+				onChange={ jest.fn() }
+				onInput={ jest.fn() }
+			/>
+		);
 		expect( setAsController ).toHaveBeenCalledWith( 'test', true );
 	} );
 
@@ -233,16 +217,14 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		await act( async () => {
-			create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 		onChange.mockClear();
 		onInput.mockClear();
 
@@ -278,16 +260,14 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		await act( async () => {
-			create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 		onChange.mockClear();
 		onInput.mockClear();
 
@@ -327,30 +307,26 @@ describe( 'useBlockSync hook', () => {
 			},
 		];
 
-		await act( async () => {
-			create(
-				<TestWrapper
-					clientId="test"
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		const { rerender } = render(
+			<TestWrapper
+				clientId="test"
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 		onChange.mockClear();
 		onInput.mockClear();
 		replaceInnerBlocks.mockClear();
 
-		await act( async () => {
-			create(
-				<TestWrapper
-					clientId="test"
-					value={ [] }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				clientId="test"
+				value={ [] }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 
 		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [] );
 		expect( onChange ).not.toHaveBeenCalled();
@@ -379,16 +355,14 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		await act( async () => {
-			create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ value1 }
-					onChange={ onChange }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ value1 }
+				onChange={ onChange }
+				onInput={ onInput }
+			/>
+		);
 		onChange.mockClear();
 		onInput.mockClear();
 		replaceInnerBlocks.mockClear();
@@ -429,17 +403,15 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		let root;
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ fakeBlocks }
-					onChange={ onChange1 }
-					onInput={ onInput }
-				/>
-			);
-		} );
+
+		const { rerender } = render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ fakeBlocks }
+				onChange={ onChange1 }
+				onInput={ onInput }
+			/>
+		);
 
 		// Create a persistent change.
 		registry
@@ -468,16 +440,14 @@ describe( 'useBlockSync hook', () => {
 
 		// Update the component to point at a "different entity" (e.g. different
 		// blocks and onChange handler.)
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ newBlocks }
-					onChange={ onChange2 }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ newBlocks }
+				onChange={ onChange2 }
+				onInput={ onInput }
+			/>
+		);
 
 		// Create a persistent change.
 		registry
@@ -511,17 +481,15 @@ describe( 'useBlockSync hook', () => {
 		const setRegistry = ( reg ) => {
 			registry = reg;
 		};
-		let root;
-		await act( async () => {
-			root = create(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ fakeBlocks }
-					onChange={ onChange1 }
-					onInput={ onInput }
-				/>
-			);
-		} );
+
+		const { rerender } = render(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ fakeBlocks }
+				onChange={ onChange1 }
+				onInput={ onInput }
+			/>
+		);
 
 		const newBlocks = [
 			{ clientId: 'b', innerBlocks: [], attributes: { foo: 1 } },
@@ -531,16 +499,14 @@ describe( 'useBlockSync hook', () => {
 
 		// Update the component to point at a "different entity" (e.g. different
 		// blocks and onChange handler.)
-		await act( async () => {
-			root.update(
-				<TestWrapper
-					setRegistry={ setRegistry }
-					value={ newBlocks }
-					onChange={ onChange2 }
-					onInput={ onInput }
-				/>
-			);
-		} );
+		rerender(
+			<TestWrapper
+				setRegistry={ setRegistry }
+				value={ newBlocks }
+				onChange={ onChange2 }
+				onInput={ onInput }
+			/>
+		);
 
 		// Create a persistent change.
 		registry

package/src/components/responsive-block-control/test/index.js

@@ -90,7 +90,7 @@ describe( 'Basic rendering', () => {
 			'.block-editor-responsive-block-control__group.is-responsive'
 		);
 
-		expect( container.innerHTML ).not.toBe( '' );
+		expect( container ).not.toBeEmptyDOMElement();
 
 		expect( defaultControlGroup ).not.toBeNull();
 		expect( responsiveControlGroup ).toBeNull();
@@ -110,7 +110,7 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render without valid property', () => {
@@ -121,7 +121,7 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render without valid default control render prop', () => {
@@ -129,7 +129,7 @@ describe( 'Basic rendering', () => {
 			<ResponsiveBlockControl title="Padding" property="padding" />
 		);
 
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should render with custom label for toggle control when provided', () => {

package/src/components/spacing-sizes-control/spacing-input-control.js

@@ -34,6 +34,15 @@ import {
 	isValueSpacingPreset,
 } from './utils';
 
+const CUSTOM_VALUE_SETTINGS = {
+	px: { max: 300, steps: 1 },
+	'%': { max: 100, steps: 1 },
+	vw: { max: 100, steps: 1 },
+	vh: { max: 100, steps: 1 },
+	em: { max: 10, steps: 0.1 },
+	rm: { max: 10, steps: 0.1 },
+};
+
 export default function SpacingInputControl( {
 	spacingSizes,
 	value,
@@ -107,7 +116,7 @@ export default function SpacingInputControl( {
 	const customTooltipContent = ( newValue ) =>
 		value === undefined ? undefined : spacingSizes[ newValue ]?.name;
 
-	const customRangeValue = parseInt( currentValue, 10 );
+	const customRangeValue = parseFloat( currentValue, 10 );
 
 	const getNewCustomValue = ( newSize ) => {
 		const isNumeric = ! isNaN( parseFloat( newSize ) );
@@ -221,12 +230,16 @@ export default function SpacingInputControl( {
 						hideLabelFromVision={ true }
 						className="components-spacing-sizes-control__custom-value-input"
 						style={ { gridColumn: '1' } }
+						size={ '__unstable-large' }
 					/>
 
 					<RangeControl
 						value={ customRangeValue }
 						min={ 0 }
-						max={ 100 }
+						max={ CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10 }
+						step={
+							CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.steps ?? 0.1
+						}
 						withInputField={ false }
 						onChange={ handleCustomValueSliderChange }
 						className="components-spacing-sizes-control__custom-value-range"
@@ -279,6 +292,7 @@ export default function SpacingInputControl( {
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
 					__nextUnconstrainedWidth={ true }
+					size={ '__unstable-large' }
 				/>
 			) }
 		</>