@wordpress/block-editor 10.2.0 → 10.4.0

package/src/components/rich-text/format-toolbar-container.js

@@ -42,7 +42,7 @@ function InlineSelectionToolbar( {
 function InlineToolbar( { popoverAnchor } ) {
 	return (
 		<Popover
-			position="top center"
+			placement="top"
 			focusOnMount={ false }
 			anchor={ popoverAnchor }
 			className="block-editor-rich-text__inline-format-toolbar"

package/src/components/rich-text/use-paste-handler.js

@@ -255,7 +255,7 @@ export function usePasteHandler( props ) {
 
 /**
  * Normalizes a given string of HTML to remove the Windows-specific "Fragment"
- * comments and any preceeding and trailing content.
+ * comments and any preceding and trailing content.
  *
  * @param {string} html the html to be normalized
  * @return {string} the normalized html

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

@@ -16,6 +16,8 @@ export default function AllInputControl( {
 	spacingSizes,
 	type,
 	minimumCustomValue,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	const allValue = getAllRawValue( values );
 	const hasValues = isValuesDefined( values );
@@ -35,6 +37,8 @@ export default function AllInputControl( {
 			isMixed={ isMixed }
 			type={ type }
 			minimumCustomValue={ minimumCustomValue }
+			onMouseOver={ onMouseOver }
+			onMouseOut={ onMouseOut }
 		/>
 	);
 }

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

@@ -13,6 +13,8 @@ export default function AxialInputControls( {
 	spacingSizes,
 	type,
 	minimumCustomValue,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	const createHandleOnChange = ( side ) => ( next ) => {
 		if ( ! onChange ) {
@@ -54,6 +56,8 @@ export default function AxialInputControls( {
 						spacingSizes={ spacingSizes }
 						type={ type }
 						minimumCustomValue={ minimumCustomValue }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				);
 			} ) }

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

@@ -29,6 +29,8 @@ export default function SpacingSizesControl( {
 	splitOnAxis = false,
 	useSelect,
 	minimumCustomValue = 0,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	const spacingSizes = [
 		{ name: 0, slug: '0', size: 0 },
@@ -70,6 +72,8 @@ export default function SpacingSizesControl( {
 		useSelect,
 		type: label,
 		minimumCustomValue,
+		onMouseOver,
+		onMouseOut,
 	};
 
 	return (

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

@@ -11,6 +11,8 @@ export default function BoxInputControls( {
 	spacingSizes,
 	type,
 	minimumCustomValue,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	// Filter sides if custom configuration provided, maintaining default order.
 	const filteredSides = sides?.length
@@ -38,6 +40,8 @@ export default function BoxInputControls( {
 						spacingSizes={ spacingSizes }
 						type={ type }
 						minimumCustomValue={ minimumCustomValue }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				);
 			} ) }

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,
@@ -42,6 +51,8 @@ export default function SpacingInputControl( {
 	isMixed = false,
 	type,
 	minimumCustomValue,
+	onMouseOver,
+	onMouseOut,
 } ) {
 	// Treat value as a preset value if the passed in value matches the value of one of the spacingSizes.
 	value = getPresetValueFromCustomValue( value, spacingSizes );
@@ -107,7 +118,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 ) );
@@ -209,6 +220,8 @@ export default function SpacingInputControl( {
 			{ showCustomValueControl && (
 				<>
 					<UnitControl
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 						onChange={ ( newSize ) =>
 							onChange( getNewCustomValue( newSize ) )
 						}
@@ -220,13 +233,18 @@ export default function SpacingInputControl( {
 						label={ ariaLabel }
 						hideLabelFromVision={ true }
 						className="components-spacing-sizes-control__custom-value-input"
-						style={ { gridColumn: '1' } }
+						size={ '__unstable-large' }
 					/>
 
 					<RangeControl
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 						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"
@@ -235,6 +253,8 @@ export default function SpacingInputControl( {
 			) }
 			{ showRangeControl && ! showCustomValueControl && (
 				<RangeControl
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
 					className="components-spacing-sizes-control__range-control"
 					value={ currentValue }
 					onChange={ ( newSize ) =>
@@ -279,6 +299,9 @@ export default function SpacingInputControl( {
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
 					__nextUnconstrainedWidth={ true }
+					size={ '__unstable-large' }
+					onMouseOver={ onMouseOver }
+					onMouseOut={ onMouseOut }
 				/>
 			) }
 		</>

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

@@ -2,7 +2,7 @@
 	display: grid;
 	grid-template-columns: auto 1fr auto;
 	align-items: center;
-	grid-template-rows: 25px auto;
+	grid-template-rows: 16px auto;
 }
 
 .component-spacing-sizes-control {
@@ -27,7 +27,7 @@
 		grid-column: 1 / 1;
 		justify-content: left;
 		height: $grid-unit-20;
-		margin-top: $grid-unit-15;
+		margin-top: $grid-unit-20;
 	}
 
 	.components-spacing-sizes-control__side-label {
@@ -37,8 +37,9 @@
 	}
 
 	&.is-unlinked {
-		.components-range-control.components-spacing-sizes-control__range-control {
-			margin-top: $grid-unit-15;
+		.components-range-control.components-spacing-sizes-control__range-control,
+		.components-spacing-sizes-control__custom-value-input {
+			margin-top: $grid-unit-10;
 		}
 	}
 
@@ -60,12 +61,7 @@
 		grid-column: 2 / 2;
 		grid-row: 1 / 1;
 		justify-self: end;
-		padding: 0;
-		&.is-small.has-icon {
-			padding: 0;
-			min-width: $icon-size;
-			height: $grid-unit-20;
-		}
+		margin-top: -4px;
 	}
 
 	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
@@ -75,33 +71,44 @@
 	.components-spacing-sizes-control__custom-toggle-single {
 		grid-column: 3 / 3;
 		justify-self: end;
-		&.is-small.has-icon {
-			padding: 0;
-			min-width: $icon-size;
-			height: $grid-unit-20;
-			margin-top: $grid-unit-15;
-		}
+		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;
-		height: 30px;
+		margin-left: $grid-unit-20;
+		margin-top: 8px;
 	}
 
 	.components-spacing-sizes-control__custom-value-input {
 		width: 124px;
+		margin-top: 8px;
+		grid-column: 1;
+	}
+
+	.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-spacing-sizes-control__range-control {
 		grid-column: span 3;
-		height: 40px;
+		margin-top: 8px;
 	}
 
 	.components-range-control__mark {
@@ -125,5 +132,6 @@
 
 	.components-spacing-sizes-control__custom-select-control {
 		grid-column: span 3;
+		margin-top: $grid-unit-10;
 	}
 }

package/src/components/url-input/index.js

@@ -543,7 +543,7 @@ class URLInput extends Component {
 			!! suggestions.length
 		) {
 			return (
-				<Popover position="bottom" focusOnMount={ false }>
+				<Popover placement="bottom" focusOnMount={ false }>
 					<div
 						{ ...suggestionsListProps }
 						className={ classnames(

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

@@ -8,15 +8,20 @@ import {
 	__experimentalUseDropZone as useDropZone,
 } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
+import { isUnmodifiedDefaultBlock as getIsUnmodifiedDefaultBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import useOnBlockDrop from '../use-on-block-drop';
-import { getDistanceToNearestEdge } from '../../utils/math';
+import {
+	getDistanceToNearestEdge,
+	isPointContainedByRect,
+} from '../../utils/math';
 import { store as blockEditorStore } from '../../store';
 
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
+/** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
 /**
  * The orientation of a block list.
@@ -25,16 +30,31 @@ import { store as blockEditorStore } from '../../store';
  */
 
 /**
- * Given a list of block DOM elements finds the index that a block should be dropped
- * at.
+ * The insert position when dropping a block.
  *
- * @param {Element[]}              elements    Array of DOM elements that represent each block in a block list.
- * @param {WPPoint}                position    The position of the item being dragged.
- * @param {WPBlockListOrientation} orientation The orientation of a block list.
+ * @typedef {'before'|'after'} WPInsertPosition
+ */
+
+/**
+ * @typedef {Object} WPBlockData
+ * @property {boolean}       isUnmodifiedDefaultBlock Is the block unmodified default block.
+ * @property {() => DOMRect} getBoundingClientRect    Get the bounding client rect of the block.
+ * @property {number}        blockIndex               The index of the block.
+ */
+
+/**
+ * Get the drop target position from a given drop point and the orientation.
  *
- * @return {number|undefined} The block index that's closest to the drag position.
+ * @param {WPBlockData[]}          blocksData  The block data list.
+ * @param {WPPoint}                position    The position of the item being dragged.
+ * @param {WPBlockListOrientation} orientation The orientation of the block list.
+ * @return {[number, WPDropOperation]} The drop target position.
  */
-export function getNearestBlockIndex( elements, position, orientation ) {
+export function getDropTargetPosition(
+	blocksData,
+	position,
+	orientation = 'vertical'
+) {
 	const allowedEdges =
 		orientation === 'horizontal'
 			? [ 'left', 'right' ]
@@ -42,49 +62,67 @@ export function getNearestBlockIndex( elements, position, orientation ) {
 
 	const isRightToLeft = isRTL();
 
-	let candidateIndex;
-	let candidateDistance;
-
-	elements.forEach( ( element, index ) => {
-		const rect = element.getBoundingClientRect();
-		const [ distance, edge ] = getDistanceToNearestEdge(
-			position,
-			rect,
-			allowedEdges
-		);
-
-		if ( candidateDistance === undefined || distance < candidateDistance ) {
-			// If the user is dropping to the trailing edge of the block
-			// add 1 to the index to represent dragging after.
-			// Take RTL languages into account where the left edge is
-			// the trailing edge.
-			const isTrailingEdge =
-				edge === 'bottom' ||
-				( ! isRightToLeft && edge === 'right' ) ||
-				( isRightToLeft && edge === 'left' );
-			const offset = isTrailingEdge ? 1 : 0;
-
-			// Update the currently known best candidate.
-			candidateDistance = distance;
-			candidateIndex = index + offset;
-		}
-	} );
+	let nearestIndex = 0;
+	let insertPosition = 'before';
+	let minDistance = Infinity;
 
-	return candidateIndex;
-}
+	blocksData.forEach(
+		( { isUnmodifiedDefaultBlock, getBoundingClientRect, blockIndex } ) => {
+			const rect = getBoundingClientRect();
 
-/**
- * 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'
+			let [ distance, edge ] = getDistanceToNearestEdge(
+				position,
+				rect,
+				allowedEdges
+			);
+			// Prioritize the element if the point is inside of an unmodified default block.
+			if (
+				isUnmodifiedDefaultBlock &&
+				isPointContainedByRect( position, rect )
+			) {
+				distance = 0;
+			}
+
+			if ( distance < minDistance ) {
+				// Where the dropped block will be inserted on the nearest block.
+				insertPosition =
+					edge === 'bottom' ||
+					( ! isRightToLeft && edge === 'right' ) ||
+					( isRightToLeft && edge === 'left' )
+						? 'after'
+						: 'before';
+
+				// Update the currently known best candidate.
+				minDistance = distance;
+				nearestIndex = blockIndex;
+			}
+		}
 	);
+
+	const adjacentIndex =
+		nearestIndex + ( insertPosition === 'after' ? 1 : -1 );
+	const isNearestBlockUnmodifiedDefaultBlock =
+		!! blocksData[ nearestIndex ]?.isUnmodifiedDefaultBlock;
+	const isAdjacentBlockUnmodifiedDefaultBlock =
+		!! blocksData[ adjacentIndex ]?.isUnmodifiedDefaultBlock;
+
+	// If both blocks are not unmodified default blocks then just insert between them.
+	if (
+		! isNearestBlockUnmodifiedDefaultBlock &&
+		! isAdjacentBlockUnmodifiedDefaultBlock
+	) {
+		// If the user is dropping to the trailing edge of the block
+		// add 1 to the index to represent dragging after.
+		const insertionIndex =
+			insertPosition === 'after' ? nearestIndex + 1 : nearestIndex;
+		return [ insertionIndex, 'insert' ];
+	}
+
+	// Otherwise, replace the nearest unmodified default block.
+	return [
+		isNearestBlockUnmodifiedDefaultBlock ? nearestIndex : adjacentIndex,
+		'replace',
+	];
 }
 
 /**
@@ -104,7 +142,10 @@ export default function useBlockDropZone( {
 	// an empty string to represent top-level blocks.
 	rootClientId: targetRootClientId = '',
 } = {} ) {
-	const [ targetBlockIndex, setTargetBlockIndex ] = useState( null );
+	const [ dropTarget, setDropTarget ] = useState( {
+		index: null,
+		operation: 'insert',
+	} );
 
 	const isDisabled = useSelect(
 		( select ) => {
@@ -125,40 +166,58 @@ export default function useBlockDropZone( {
 		[ targetRootClientId ]
 	);
 
-	const { getBlockListSettings } = useSelect( blockEditorStore );
+	const { getBlockListSettings, getBlocks, getBlockIndex } =
+		useSelect( blockEditorStore );
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
-	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
+	const onBlockDrop = useOnBlockDrop( targetRootClientId, dropTarget.index, {
+		operation: dropTarget.operation,
+	} );
 	const throttled = useThrottle(
-		useCallback( ( event, currentTarget ) => {
-			const blockElements = Array.from( currentTarget.children ).filter(
-				// Ensure the element is a block. It should have the `wp-block` class.
-				( element ) => element.classList.contains( 'wp-block' )
-			);
-			const targetIndex = getNearestBlockIndex(
-				blockElements,
-				{ x: event.clientX, y: event.clientY },
-				getBlockListSettings( targetRootClientId )?.orientation
-			);
-
-			setTargetBlockIndex( targetIndex === undefined ? 0 : targetIndex );
-
-			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 )
-				) {
+		useCallback(
+			( event, ownerDocument ) => {
+				const blocks = getBlocks( targetRootClientId );
+
+				// The block list is empty, don't show the insertion point but still allow dropping.
+				if ( blocks.length === 0 ) {
+					setDropTarget( {
+						index: 0,
+						operation: 'insert',
+					} );
 					return;
 				}
 
-				showInsertionPoint( targetRootClientId, targetIndex );
-			}
-		}, [] ),
+				const blocksData = blocks.map( ( block ) => {
+					const clientId = block.clientId;
+
+					return {
+						isUnmodifiedDefaultBlock:
+							getIsUnmodifiedDefaultBlock( block ),
+						getBoundingClientRect: () =>
+							ownerDocument
+								.getElementById( `block-${ clientId }` )
+								.getBoundingClientRect(),
+						blockIndex: getBlockIndex( clientId ),
+					};
+				} );
+
+				const [ targetIndex, operation ] = getDropTargetPosition(
+					blocksData,
+					{ x: event.clientX, y: event.clientY },
+					getBlockListSettings( targetRootClientId )?.orientation
+				);
+
+				setDropTarget( {
+					index: targetIndex,
+					operation,
+				} );
+				showInsertionPoint( targetRootClientId, targetIndex, {
+					operation,
+				} );
+			},
+			[ targetRootClientId ]
+		),
 		200
 	);
 
@@ -169,17 +228,15 @@ export default function useBlockDropZone( {
 			// `currentTarget` is only available while the event is being
 			// handled, so get it now and pass it to the thottled function.
 			// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
-			throttled( event, event.currentTarget );
+			throttled( event, event.currentTarget.ownerDocument );
 		},
 		onDragLeave() {
 			throttled.cancel();
 			hideInsertionPoint();
-			setTargetBlockIndex( null );
 		},
 		onDragEnd() {
 			throttled.cancel();
 			hideInsertionPoint();
-			setTargetBlockIndex( null );
 		},
 	} );
 }