@wordpress/block-editor 10.1.1-next.4d3b314fd5.0 → 10.3.0

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

@@ -1,14 +1,13 @@
 /**
  * External dependencies
  */
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act, Simulate } from 'react-dom/test-utils';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
 import { Fragment, useState } from '@wordpress/element';
-
 import { SelectControl } from '@wordpress/components';
 
 /**
@@ -16,20 +15,6 @@ import { SelectControl } from '@wordpress/components';
  */
 import ResponsiveBlockControl from '../index';
 
-let container = null;
-beforeEach( () => {
-	// Setup a DOM element as a render target.
-	container = document.createElement( 'div' );
-	document.body.appendChild( container );
-} );
-
-afterEach( () => {
-	// Cleanup on exiting.
-	unmountComponentAtNode( container );
-	container.remove();
-	container = null;
-} );
-
 const inputId = 'input-12345678';
 
 const sizeOptions = [
@@ -65,16 +50,13 @@ const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 
 describe( 'Basic rendering', () => {
 	it( 'should render with required props', () => {
-		act( () => {
-			render(
-				<ResponsiveBlockControl
-					title="Padding"
-					property="padding"
-					renderDefaultControl={ renderTestDefaultControlComponent }
-				/>,
-				container
-			);
-		} );
+		const { container } = render(
+			<ResponsiveBlockControl
+				title="Padding"
+				property="padding"
+				renderDefaultControl={ renderTestDefaultControlComponent }
+			/>
+		);
 
 		const activePropertyLabel = Array.from(
 			container.querySelectorAll( 'legend' )
@@ -108,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();
@@ -121,58 +103,46 @@ describe( 'Basic rendering', () => {
 	} );
 
 	it( 'should not render without valid legend', () => {
-		act( () => {
-			render(
-				<ResponsiveBlockControl
-					property="padding"
-					renderDefaultControl={ renderTestDefaultControlComponent }
-				/>,
-				container
-			);
-		} );
+		const { container } = render(
+			<ResponsiveBlockControl
+				property="padding"
+				renderDefaultControl={ renderTestDefaultControlComponent }
+			/>
+		);
 
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render without valid property', () => {
-		act( () => {
-			render(
-				<ResponsiveBlockControl
-					title="Padding"
-					renderDefaultControl={ renderTestDefaultControlComponent }
-				/>,
-				container
-			);
-		} );
+		const { container } = render(
+			<ResponsiveBlockControl
+				title="Padding"
+				renderDefaultControl={ renderTestDefaultControlComponent }
+			/>
+		);
 
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should not render without valid default control render prop', () => {
-		act( () => {
-			render(
-				<ResponsiveBlockControl title="Padding" property="padding" />,
-				container
-			);
-		} );
+		const { container } = render(
+			<ResponsiveBlockControl title="Padding" property="padding" />
+		);
 
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'should render with custom label for toggle control when provided', () => {
 		const customToggleLabel =
 			'Utilise a matching padding value on all viewports';
-		act( () => {
-			render(
-				<ResponsiveBlockControl
-					title="Padding"
-					property="padding"
-					renderDefaultControl={ renderTestDefaultControlComponent }
-					toggleLabel={ customToggleLabel }
-				/>,
-				container
-			);
-		} );
+		const { container } = render(
+			<ResponsiveBlockControl
+				title="Padding"
+				property="padding"
+				renderDefaultControl={ renderTestDefaultControlComponent }
+				toggleLabel={ customToggleLabel }
+			/>
+		);
 
 		const actualToggleLabel = container.querySelector(
 			'label.components-toggle-control__label'
@@ -184,17 +154,14 @@ describe( 'Basic rendering', () => {
 	it( 'should pass custom label for default control group to the renderDefaultControl function when provided', () => {
 		const customDefaultControlGroupLabel = 'Everything';
 
-		act( () => {
-			render(
-				<ResponsiveBlockControl
-					title="Padding"
-					property="padding"
-					renderDefaultControl={ renderTestDefaultControlComponent }
-					defaultLabel={ customDefaultControlGroupLabel }
-				/>,
-				container
-			);
-		} );
+		const { container } = render(
+			<ResponsiveBlockControl
+				title="Padding"
+				property="padding"
+				renderDefaultControl={ renderTestDefaultControlComponent }
+				defaultLabel={ customDefaultControlGroupLabel }
+			/>
+		);
 
 		const defaultControlLabel = Array.from(
 			container.querySelectorAll( 'label' )
@@ -206,17 +173,14 @@ describe( 'Basic rendering', () => {
 
 describe( 'Default and Responsive modes', () => {
 	it( 'should render in responsive mode when isResponsive prop is set to true', () => {
-		act( () => {
-			render(
-				<ResponsiveBlockControl
-					title="Padding"
-					property="padding"
-					isResponsive={ true }
-					renderDefaultControl={ renderTestDefaultControlComponent }
-				/>,
-				container
-			);
-		} );
+		const { container } = render(
+			<ResponsiveBlockControl
+				title="Padding"
+				property="padding"
+				isResponsive={ true }
+				renderDefaultControl={ renderTestDefaultControlComponent }
+			/>
+		);
 
 		const defaultControlGroup = container.querySelector(
 			'.block-editor-responsive-block-control__group:not(.is-responsive)'
@@ -253,18 +217,15 @@ describe( 'Default and Responsive modes', () => {
 			renderTestDefaultControlComponent
 		);
 
-		act( () => {
-			render(
-				<ResponsiveBlockControl
-					title="Padding"
-					property="padding"
-					isResponsive={ true }
-					renderDefaultControl={ mockRenderDefaultControl }
-					viewports={ customViewportSet }
-				/>,
-				container
-			);
-		} );
+		const { container } = render(
+			<ResponsiveBlockControl
+				title="Padding"
+				property="padding"
+				isResponsive={ true }
+				renderDefaultControl={ mockRenderDefaultControl }
+				viewports={ customViewportSet }
+			/>
+		);
 
 		const defaultRenderControlCall = 1;
 
@@ -287,7 +248,10 @@ describe( 'Default and Responsive modes', () => {
 		);
 	} );
 
-	it( 'should switch between default and responsive modes when interacting with toggle control', () => {
+	it( 'should switch between default and responsive modes when interacting with toggle control', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const ResponsiveBlockControlConsumer = () => {
 			const [ isResponsive, setIsResponsive ] = useState( false );
 
@@ -304,9 +268,7 @@ describe( 'Default and Responsive modes', () => {
 			);
 		};
 
-		act( () => {
-			render( <ResponsiveBlockControlConsumer />, container );
-		} );
+		const { container } = render( <ResponsiveBlockControlConsumer /> );
 
 		let defaultControlGroup = container.querySelector(
 			'.block-editor-responsive-block-control__group:not(.is-responsive)'
@@ -332,9 +294,7 @@ describe( 'Default and Responsive modes', () => {
 		expect( responsiveControlGroup ).toBeNull();
 
 		// Toggle to "responsive" mode.
-		act( () => {
-			Simulate.change( toggleInput, { target: { checked: false } } );
-		} );
+		await user.click( toggleInput );
 
 		defaultControlGroup = container.querySelector(
 			'.block-editor-responsive-block-control__group:not(.is-responsive)'
@@ -347,9 +307,7 @@ describe( 'Default and Responsive modes', () => {
 		expect( responsiveControlGroup ).not.toBeNull();
 
 		// Toggle back to "default" mode.
-		act( () => {
-			Simulate.change( toggleInput, { target: { checked: true } } );
-		} );
+		await user.click( toggleInput );
 
 		defaultControlGroup = container.querySelector(
 			'.block-editor-responsive-block-control__group:not(.is-responsive)'
@@ -382,18 +340,15 @@ describe( 'Default and Responsive modes', () => {
 			} );
 		} );
 
-		act( () => {
-			render(
-				<ResponsiveBlockControl
-					title="Padding"
-					property="padding"
-					isResponsive={ true }
-					renderDefaultControl={ spyRenderDefaultControl }
-					renderResponsiveControls={ mockRenderResponsiveControls }
-				/>,
-				container
-			);
-		} );
+		const { container } = render(
+			<ResponsiveBlockControl
+				title="Padding"
+				property="padding"
+				isResponsive={ true }
+				renderDefaultControl={ spyRenderDefaultControl }
+				renderResponsiveControls={ mockRenderResponsiveControls }
+			/>
+		);
 
 		// The user should see "range" controls so we can legitimately query for them here.
 		const customControls = Array.from(

package/src/components/rich-text/index.js

@@ -159,6 +159,8 @@ function RichTextWrapper(
 	// retreived from the store on merge.
 	// To do: fix this somehow.
 	const { selectionStart, selectionEnd, isSelected } = useSelect( selector );
+	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
 	const multilineTag = getMultilineTag( multiline );
 	const adjustedAllowedFormats = getAllowedFormats( {
@@ -195,6 +197,18 @@ function RichTextWrapper(
 			const unset = start === undefined && end === undefined;
 
 			if ( typeof start === 'number' || unset ) {
+				// If we are only setting the start (or the end below), which
+				// means a partial selection, and we're not updating a selection
+				// with the same client ID, abort. This means the selected block
+				// is a parent block.
+				if (
+					end === undefined &&
+					getBlockRootClientId( clientId ) !==
+						getBlockRootClientId( getSelectionEnd().clientId )
+				) {
+					return;
+				}
+
 				selection.start = {
 					clientId,
 					attributeKey: identifier,
@@ -203,6 +217,14 @@ function RichTextWrapper(
 			}
 
 			if ( typeof end === 'number' || unset ) {
+				if (
+					start === undefined &&
+					getBlockRootClientId( clientId ) !==
+						getBlockRootClientId( getSelectionStart().clientId )
+				) {
+					return;
+				}
+
 				selection.end = {
 					clientId,
 					attributeKey: identifier,

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

@@ -1,9 +1,14 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { __experimentalText as Text } from '@wordpress/components';
+import { BaseControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -68,8 +73,15 @@ export default function SpacingSizesControl( {
 	};
 
 	return (
-		<fieldset role="region" className="component-spacing-sizes-control">
-			<Text as="legend">{ label }</Text>
+		<fieldset
+			role="region"
+			className={ classnames( 'component-spacing-sizes-control', {
+				'is-unlinked': ! isLinked,
+			} ) }
+		>
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
 			{ ! hasOneSide && (
 				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
 			) }

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

@@ -9,12 +9,12 @@ import classnames from 'classnames';
 import { useState, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
+	BaseControl,
 	Button,
 	RangeControl,
 	CustomSelectControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalHStack as HStack,
-	__experimentalText as Text,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
@@ -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 ) );
@@ -167,21 +176,21 @@ export default function SpacingInputControl( {
 		<>
 			{ side !== 'all' && (
 				<HStack className="components-spacing-sizes-control__side-labels">
-					<Text className="components-spacing-sizes-control__side-label">
+					<BaseControl.VisualLabel className="components-spacing-sizes-control__side-label">
 						{ LABELS[ side ] }
-					</Text>
+					</BaseControl.VisualLabel>
 
 					{ showHint && (
-						<Text className="components-spacing-sizes-control__hint-single">
+						<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-single">
 							{ currentValueHint }
-						</Text>
+						</BaseControl.VisualLabel>
 					) }
 				</HStack>
 			) }
 			{ side === 'all' && showHint && (
-				<Text className="components-spacing-sizes-control__hint-all">
+				<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-all">
 					{ currentValueHint }
-				</Text>
+				</BaseControl.VisualLabel>
 			) }
 
 			{ ! disableCustomSpacingSizes && (
@@ -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"
@@ -256,6 +269,7 @@ export default function SpacingInputControl( {
 					marks={ marks }
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
+					__nextHasNoMarginBottom={ true }
 				/>
 			) }
 			{ ! showRangeControl && ! showCustomValueControl && (
@@ -278,6 +292,7 @@ export default function SpacingInputControl( {
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
 					__nextUnconstrainedWidth={ true }
+					size={ '__unstable-large' }
 				/>
 			) }
 		</>

package/src/components/spacing-sizes-control/style.scss

@@ -1,7 +1,8 @@
 .tools-panel-item-spacing {
 	display: grid;
 	grid-template-columns: auto 1fr auto;
-	grid-row-gap: $grid-unit-05;
+	align-items: center;
+	grid-template-rows: 16px auto;
 }
 
 .component-spacing-sizes-control {
@@ -17,21 +18,35 @@
 		align-self: center;
 	}
 
+	.components-base-control__label {
+		margin-bottom: 0;
+		height: $grid-unit-20;
+	}
+
 	.components-spacing-sizes-control__side-labels {
 		grid-column: 1 / 1;
-		min-height: 30px;
 		justify-content: left;
+		height: $grid-unit-20;
+		margin-top: $grid-unit-20;
 	}
 
-	.components-spacing-sizes-control__hint-single {
-		margin-top: 0;
-		margin-left: 0;
+	.components-spacing-sizes-control__side-label {
+		grid-column: 1 / 1;
+		justify-self: left;
+		margin-bottom: 0;
+	}
+
+	&.is-unlinked {
+		.components-range-control.components-spacing-sizes-control__range-control,
+		.components-spacing-sizes-control__custom-value-input {
+			margin-top: $grid-unit-10;
+		}
 	}
 
 	.components-spacing-sizes-control__hint-single,
 	.components-spacing-sizes-control__hint-all {
 		color: $gray-700;
-		font-size: 12px;
+		margin-bottom: 0;
 	}
 
 	.components-spacing-sizes-control__hint-all {
@@ -46,7 +61,7 @@
 		grid-column: 2 / 2;
 		grid-row: 1 / 1;
 		justify-self: end;
-		padding: 0;
+		margin-top: -4px;
 	}
 
 	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
@@ -56,41 +71,43 @@
 	.components-spacing-sizes-control__custom-toggle-single {
 		grid-column: 3 / 3;
 		justify-self: end;
-	}
-
-	.components-spacing-sizes-control__custom-toggle-all,
-	.components-spacing-sizes-control__custom-toggle-single {
-		&.is-small.has-icon {
-			padding: 0;
-			min-width: $icon-size;
-		}
+		margin-top: $grid-unit-15;
 	}
 
 	.component-spacing-sizes-control__linked-button {
 		grid-column: 3 / 3;
 		grid-row: 1 / 1;
 		justify-self: end;
+		line-height: 0;
+		margin-top: -4px;
 	}
 
 	.components-spacing-sizes-control__custom-value-range {
 		grid-column: span 2;
-		margin-left: $grid-unit-10;
-		padding-right: $grid-unit-10;
-		height: 30px;
+		margin-left: $grid-unit-20;
+		margin-top: 8px;
 	}
 
 	.components-spacing-sizes-control__custom-value-input {
 		width: 124px;
+		margin-top: 8px;
 	}
 
-	.components-spacing-sizes-control__range-control {
-		grid-column: span 3;
-		padding-right: $grid-unit-10;
-		height: 30px;
+	.components-range-control {
+		height: 40px;
+		/* Vertically center the RangeControl until it has true 40px height. */
+		display: flex;
+		align-items: center;
+
+		> .components-base-control__field {
+			/* Fixes RangeControl contents when the outer wrapper is flex */
+			flex: 1;
+		}
 	}
 
-	.components-range-control__wrapper {
-		margin-bottom: 0;
+	.components-spacing-sizes-control__range-control {
+		grid-column: span 3;
+		margin-top: 8px;
 	}
 
 	.components-range-control__mark {
@@ -112,14 +129,8 @@
 		z-index: 3;
 	}
 
-	.components-spacing-sizes-control__side-label {
-		margin-right: $grid-unit-05;
-		grid-column: 1 / 1;
-		justify-self: left;
-		font-size: 12px;
-	}
-
 	.components-spacing-sizes-control__custom-select-control {
 		grid-column: span 3;
+		margin-top: $grid-unit-10;
 	}
 }