@wordpress/block-editor 10.1.0 → 10.2.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' )
@@ -121,40 +103,31 @@ 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( '' );
 	} );
 
 	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( '' );
 	} );
 
 	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( '' );
 	} );
@@ -162,17 +135,14 @@ describe( 'Basic rendering', () => {
 	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';
@@ -167,21 +167,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 && (
@@ -256,6 +256,7 @@ export default function SpacingInputControl( {
 					marks={ marks }
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
+					__nextHasNoMarginBottom={ true }
 				/>
 			) }
 			{ ! showRangeControl && ! showCustomValueControl && (

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: 25px auto;
 }
 
 .component-spacing-sizes-control {
@@ -17,21 +18,34 @@
 		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-15;
+	}
+
+	.components-spacing-sizes-control__side-label {
+		grid-column: 1 / 1;
+		justify-self: left;
+		margin-bottom: 0;
 	}
 
-	.components-spacing-sizes-control__hint-single {
-		margin-top: 0;
-		margin-left: 0;
+	&.is-unlinked {
+		.components-range-control.components-spacing-sizes-control__range-control {
+			margin-top: $grid-unit-15;
+		}
 	}
 
 	.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 {
@@ -47,6 +61,11 @@
 		grid-row: 1 / 1;
 		justify-self: end;
 		padding: 0;
+		&.is-small.has-icon {
+			padding: 0;
+			min-width: $icon-size;
+			height: $grid-unit-20;
+		}
 	}
 
 	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
@@ -56,13 +75,11 @@
 	.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;
+			height: $grid-unit-20;
+			margin-top: $grid-unit-15;
 		}
 	}
 
@@ -75,7 +92,6 @@
 	.components-spacing-sizes-control__custom-value-range {
 		grid-column: span 2;
 		margin-left: $grid-unit-10;
-		padding-right: $grid-unit-10;
 		height: 30px;
 	}
 
@@ -85,12 +101,7 @@
 
 	.components-spacing-sizes-control__range-control {
 		grid-column: span 3;
-		padding-right: $grid-unit-10;
-		height: 30px;
-	}
-
-	.components-range-control__wrapper {
-		margin-bottom: 0;
+		height: 40px;
 	}
 
 	.components-range-control__mark {
@@ -112,13 +123,6 @@
 		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;
 	}

package/src/components/url-popover/image-url-input-ui.js

@@ -221,7 +221,7 @@ const ImageURLInputUI = ( {
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
-				label={ __( 'Link Rel' ) }
+				label={ __( 'Link rel' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>

package/src/components/use-block-drop-zone/index.js

@@ -73,6 +73,20 @@ export function getNearestBlockIndex( elements, position, orientation ) {
 	return candidateIndex;
 }
 
+/**
+ * Determine if the element is an empty paragraph block.
+ *
+ * @param {?HTMLElement} element The element being tested.
+ * @return {boolean} True or False.
+ */
+function isEmptyParagraph( element ) {
+	return (
+		!! element &&
+		element.dataset.type === 'core/paragraph' &&
+		element.dataset.empty === 'true'
+	);
+}
+
 /**
  * @typedef  {Object} WPBlockDropZoneConfig
  * @property {string} rootClientId The root client id for the block list.
@@ -130,7 +144,18 @@ export default function useBlockDropZone( {
 
 			setTargetBlockIndex( targetIndex === undefined ? 0 : targetIndex );
 
-			if ( targetIndex !== null ) {
+			if ( targetIndex !== undefined ) {
+				const nextBlock = blockElements[ targetIndex ];
+				const previousBlock = blockElements[ targetIndex - 1 ];
+
+				// Don't show the insertion point when it's near an empty paragraph block.
+				if (
+					isEmptyParagraph( nextBlock ) ||
+					isEmptyParagraph( previousBlock )
+				) {
+					return;
+				}
+
 				showInsertionPoint( targetRootClientId, targetIndex );
 			}
 		}, [] ),