@wordpress/block-editor 10.4.0 → 10.5.0

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

@@ -0,0 +1,260 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useState, useCallback } from '@wordpress/element';
+import {
+	useThrottle,
+	__experimentalUseDropZone as useDropZone,
+} from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getDistanceToNearestEdge,
+	isPointContainedByRect,
+} from '../../utils/math';
+import useOnBlockDrop from '../use-on-block-drop';
+import { store as blockEditorStore } from '../../store';
+
+/** @typedef {import('../../utils/math').WPPoint} WPPoint */
+
+/**
+ * The type of a drag event.
+ *
+ * @typedef {'default'|'file'|'html'} WPDragEventType
+ */
+
+/**
+ * An array representing data for blocks in the DOM used by drag and drop.
+ *
+ * @typedef {Object} WPListViewDropZoneBlocks
+ * @property {string}  clientId                        The client id for the block.
+ * @property {string}  rootClientId                    The root client id for the block.
+ * @property {number}  blockIndex                      The block's index.
+ * @property {Element} element                         The DOM element representing the block.
+ * @property {number}  innerBlockCount                 The number of inner blocks the block has.
+ * @property {boolean} isDraggedBlock                  Whether the block is currently being dragged.
+ * @property {boolean} canInsertDraggedBlocksAsSibling Whether the dragged block can be a sibling of this block.
+ * @property {boolean} canInsertDraggedBlocksAsChild   Whether the dragged block can be a child of this block.
+ */
+
+/**
+ * An object containing details of a drop target.
+ *
+ * @typedef {Object} WPListViewDropZoneTarget
+ * @property {string}                  blockIndex   The insertion index.
+ * @property {string}                  rootClientId The root client id for the block.
+ * @property {string|undefined}        clientId     The client id for the block.
+ * @property {'top'|'bottom'|'inside'} dropPosition The position relative to the block that the user is dropping to.
+ *                                                  'inside' refers to nesting as an inner block.
+ */
+
+/**
+ * Determines whether the user positioning the dragged block to nest as an
+ * inner block.
+ *
+ * Presently this is determined by whether the cursor is on the right hand side
+ * of the block.
+ *
+ * @param {WPPoint} point The point representing the cursor position when dragging.
+ * @param {DOMRect} rect  The rectangle.
+ */
+function isNestingGesture( point, rect ) {
+	const blockCenterX = rect.left + rect.width / 2;
+	return point.x > blockCenterX;
+}
+
+// Block navigation is always a vertical list, so only allow dropping
+// to the above or below a block.
+const ALLOWED_DROP_EDGES = [ 'top', 'bottom' ];
+
+/**
+ * Given blocks data and the cursor position, compute the drop target.
+ *
+ * @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
+ * @param {WPPoint}                  position   The point representing the cursor position when dragging.
+ *
+ * @return {WPListViewDropZoneTarget} An object containing data about the drop target.
+ */
+function getListViewDropTarget( blocksData, position ) {
+	let candidateEdge;
+	let candidateBlockData;
+	let candidateDistance;
+	let candidateRect;
+
+	for ( const blockData of blocksData ) {
+		if ( blockData.isDraggedBlock ) {
+			continue;
+		}
+
+		const rect = blockData.element.getBoundingClientRect();
+		const [ distance, edge ] = getDistanceToNearestEdge(
+			position,
+			rect,
+			ALLOWED_DROP_EDGES
+		);
+
+		const isCursorWithinBlock = isPointContainedByRect( position, rect );
+		if (
+			candidateDistance === undefined ||
+			distance < candidateDistance ||
+			isCursorWithinBlock
+		) {
+			candidateDistance = distance;
+
+			const index = blocksData.indexOf( blockData );
+			const previousBlockData = blocksData[ index - 1 ];
+
+			// If dragging near the top of a block and the preceding block
+			// is at the same level, use the preceding block as the candidate
+			// instead, as later it makes determining a nesting drop easier.
+			if (
+				edge === 'top' &&
+				previousBlockData &&
+				previousBlockData.rootClientId === blockData.rootClientId &&
+				! previousBlockData.isDraggedBlock
+			) {
+				candidateBlockData = previousBlockData;
+				candidateEdge = 'bottom';
+				candidateRect =
+					previousBlockData.element.getBoundingClientRect();
+			} else {
+				candidateBlockData = blockData;
+				candidateEdge = edge;
+				candidateRect = rect;
+			}
+
+			// If the mouse position is within the block, break early
+			// as the user would intend to drop either before or after
+			// this block.
+			//
+			// This solves an issue where some rows in the list view
+			// tree overlap slightly due to sub-pixel rendering.
+			if ( isCursorWithinBlock ) {
+				break;
+			}
+		}
+	}
+
+	if ( ! candidateBlockData ) {
+		return;
+	}
+
+	const isDraggingBelow = candidateEdge === 'bottom';
+
+	// If the user is dragging towards the bottom of the block check whether
+	// they might be trying to nest the block as a child.
+	// If the block already has inner blocks, this should always be treated
+	// as nesting since the next block in the tree will be the first child.
+	if (
+		isDraggingBelow &&
+		candidateBlockData.canInsertDraggedBlocksAsChild &&
+		( candidateBlockData.innerBlockCount > 0 ||
+			isNestingGesture( position, candidateRect ) )
+	) {
+		return {
+			rootClientId: candidateBlockData.clientId,
+			blockIndex: 0,
+			dropPosition: 'inside',
+		};
+	}
+
+	// If dropping as a sibling, but block cannot be inserted in
+	// this context, return early.
+	if ( ! candidateBlockData.canInsertDraggedBlocksAsSibling ) {
+		return;
+	}
+
+	const offset = isDraggingBelow ? 1 : 0;
+	return {
+		rootClientId: candidateBlockData.rootClientId,
+		clientId: candidateBlockData.clientId,
+		blockIndex: candidateBlockData.blockIndex + offset,
+		dropPosition: candidateEdge,
+	};
+}
+
+/**
+ * A react hook for implementing a drop zone in list view.
+ *
+ * @return {WPListViewDropZoneTarget} The drop target.
+ */
+export default function useListViewDropZone() {
+	const {
+		getBlockRootClientId,
+		getBlockIndex,
+		getBlockCount,
+		getDraggedBlockClientIds,
+		canInsertBlocks,
+	} = useSelect( blockEditorStore );
+	const [ target, setTarget ] = useState();
+	const { rootClientId: targetRootClientId, blockIndex: targetBlockIndex } =
+		target || {};
+
+	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
+
+	const draggedBlockClientIds = getDraggedBlockClientIds();
+	const throttled = useThrottle(
+		useCallback(
+			( event, currentTarget ) => {
+				const position = { x: event.clientX, y: event.clientY };
+				const isBlockDrag = !! draggedBlockClientIds?.length;
+
+				const blockElements = Array.from(
+					currentTarget.querySelectorAll( '[data-block]' )
+				);
+
+				const blocksData = blockElements.map( ( blockElement ) => {
+					const clientId = blockElement.dataset.block;
+					const rootClientId = getBlockRootClientId( clientId );
+
+					return {
+						clientId,
+						rootClientId,
+						blockIndex: getBlockIndex( clientId ),
+						element: blockElement,
+						isDraggedBlock: isBlockDrag
+							? draggedBlockClientIds.includes( clientId )
+							: false,
+						innerBlockCount: getBlockCount( clientId ),
+						canInsertDraggedBlocksAsSibling: isBlockDrag
+							? canInsertBlocks(
+									draggedBlockClientIds,
+									rootClientId
+							  )
+							: true,
+						canInsertDraggedBlocksAsChild: isBlockDrag
+							? canInsertBlocks( draggedBlockClientIds, clientId )
+							: true,
+					};
+				} );
+
+				const newTarget = getListViewDropTarget( blocksData, position );
+
+				if ( newTarget ) {
+					setTarget( newTarget );
+				}
+			},
+			[ draggedBlockClientIds ]
+		),
+		200
+	);
+
+	const ref = useDropZone( {
+		onDrop: onBlockDrop,
+		onDragOver( event ) {
+			// `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 );
+		},
+		onDragEnd() {
+			throttled.cancel();
+			setTarget( null );
+		},
+	} );
+
+	return { ref, target };
+}

package/src/components/off-canvas-editor/use-list-view-expand-selected-item.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function useListViewExpandSelectedItem( {
+	firstSelectedBlockClientId,
+	setExpandedState,
+} ) {
+	const [ selectedTreeId, setSelectedTreeId ] = useState( null );
+	const { selectedBlockParentClientIds } = useSelect(
+		( select ) => {
+			const { getBlockParents } = select( blockEditorStore );
+			return {
+				selectedBlockParentClientIds: getBlockParents(
+					firstSelectedBlockClientId,
+					false
+				),
+			};
+		},
+		[ firstSelectedBlockClientId ]
+	);
+
+	const parentClientIds =
+		Array.isArray( selectedBlockParentClientIds ) &&
+		selectedBlockParentClientIds.length
+			? selectedBlockParentClientIds
+			: null;
+
+	// Expand tree when a block is selected.
+	useEffect( () => {
+		// If the selectedTreeId is the same as the selected block,
+		// it means that the block was selected using the block list tree.
+		if ( selectedTreeId === firstSelectedBlockClientId ) {
+			return;
+		}
+
+		// If the selected block has parents, get the top-level parent.
+		if ( parentClientIds ) {
+			// If the selected block has parents,
+			// expand the tree branch.
+			setExpandedState( {
+				type: 'expand',
+				clientIds: selectedBlockParentClientIds,
+			} );
+		}
+	}, [ firstSelectedBlockClientId ] );
+
+	return {
+		setSelectedTreeId,
+	};
+}

package/src/components/off-canvas-editor/utils.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+export const getBlockPositionDescription = ( position, siblingCount, level ) =>
+	sprintf(
+		/* translators: 1: The numerical position of the block. 2: The total number of blocks. 3. The level of nesting for the block. */
+		__( 'Block %1$d of %2$d, Level %3$d' ),
+		position,
+		siblingCount,
+		level
+	);
+
+/**
+ * Returns true if the client ID occurs within the block selection or multi-selection,
+ * or false otherwise.
+ *
+ * @param {string}          clientId               Block client ID.
+ * @param {string|string[]} selectedBlockClientIds Selected block client ID, or an array of multi-selected blocks client IDs.
+ *
+ * @return {boolean} Whether the block is in multi-selection set.
+ */
+export const isClientIdSelected = ( clientId, selectedBlockClientIds ) =>
+	Array.isArray( selectedBlockClientIds ) && selectedBlockClientIds.length
+		? selectedBlockClientIds.indexOf( clientId ) !== -1
+		: selectedBlockClientIds === clientId;
+
+/**
+ * From a start and end clientId of potentially different nesting levels,
+ * return the nearest-depth ids that have a common level of depth in the
+ * nesting hierarchy. For multiple block selection, this ensure that the
+ * selection is always at the same nesting level, and not split across
+ * separate levels.
+ *
+ * @param {string}   startId      The first id of a selection.
+ * @param {string}   endId        The end id of a selection, usually one that has been clicked on.
+ * @param {string[]} startParents An array of ancestor ids for the start id, in descending order.
+ * @param {string[]} endParents   An array of ancestor ids for the end id, in descending order.
+ * @return {Object} An object containing the start and end ids.
+ */
+export function getCommonDepthClientIds(
+	startId,
+	endId,
+	startParents,
+	endParents
+) {
+	const startPath = [ ...startParents, startId ];
+	const endPath = [ ...endParents, endId ];
+	const depth = Math.min( startPath.length, endPath.length ) - 1;
+	const start = startPath[ depth ];
+	const end = endPath[ depth ];
+
+	return {
+		start,
+		end,
+	};
+}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -48,6 +48,20 @@ const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	);
 };
 
+function getDefaultControlGroup( container ) {
+	// TODO: Use a user-facing query to fetch this.
+	return container.querySelector(
+		'.block-editor-responsive-block-control__group:not(.is-responsive)'
+	);
+}
+
+function getResponsiveControlGroup( container ) {
+	// TODO: Use a user-facing query to fetch this.
+	return container.querySelector(
+		'.block-editor-responsive-block-control__group.is-responsive'
+	);
+}
+
 describe( 'Basic rendering', () => {
 	it( 'should render with required props', () => {
 		const { container } = render(
@@ -58,48 +72,30 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		const activePropertyLabel = Array.from(
-			container.querySelectorAll( 'legend' )
-		).find( ( legend ) => legend.innerHTML === 'Padding' );
-
-		const activeViewportLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).find( ( label ) => label.innerHTML.includes( 'All' ) );
-
-		const defaultControl = container.querySelector(
-			`#${ activeViewportLabel.getAttribute( 'for' ) }`
-		);
-
-		const toggleLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).filter( ( label ) =>
-			label.innerHTML.includes(
-				'Use the same padding on all screensizes'
-			)
-		);
+		const activePropertyLabel = screen.getByRole( 'group', {
+			name: 'Padding',
+		} );
 
-		const toggleState = container.querySelector(
-			'input[type="checkbox"]'
-		).checked;
+		const defaultControl = screen.getByRole( 'combobox', {
+			name: 'All Controls the padding property for All viewports.',
+		} );
 
-		const defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
+		const toggleState = screen.getByRole( 'checkbox', {
+			name: 'Use the same padding on all screensizes.',
+			checked: true,
+		} );
 
-		const responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		const defaultControlGroup = getDefaultControlGroup( container );
+		const responsiveControlGroup = getResponsiveControlGroup( container );
 
 		expect( container ).not.toBeEmptyDOMElement();
 
 		expect( defaultControlGroup ).not.toBeNull();
 		expect( responsiveControlGroup ).toBeNull();
 
-		expect( activeViewportLabel ).not.toBeNull();
-		expect( activePropertyLabel ).not.toBeNull();
-		expect( defaultControl ).not.toBeNull();
-		expect( toggleLabel ).not.toBeNull();
-		expect( toggleState ).toBe( true );
+		expect( activePropertyLabel ).toBeVisible();
+		expect( defaultControl ).toBeVisible();
+		expect( toggleState ).toBeVisible();
 	} );
 
 	it( 'should not render without valid legend', () => {
@@ -135,7 +131,7 @@ describe( 'Basic rendering', () => {
 	it( 'should render with custom label for toggle control when provided', () => {
 		const customToggleLabel =
 			'Utilise a matching padding value on all viewports';
-		const { container } = render(
+		render(
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
@@ -144,17 +140,21 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		const actualToggleLabel = container.querySelector(
-			'label.components-toggle-control__label'
-		).innerHTML;
-
-		expect( actualToggleLabel ).toEqual( customToggleLabel );
+		expect(
+			screen.getByRole( 'checkbox', {
+				name: customToggleLabel,
+				checked: true,
+			} )
+		).toBeVisible();
 	} );
 
 	it( 'should pass custom label for default control group to the renderDefaultControl function when provided', () => {
-		const customDefaultControlGroupLabel = 'Everything';
+		const customDefaultControlGroupLabel = {
+			id: 'everything',
+			label: 'Everything',
+		};
 
-		const { container } = render(
+		render(
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
@@ -163,11 +163,11 @@ describe( 'Basic rendering', () => {
 			/>
 		);
 
-		const defaultControlLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).find( ( label ) => label.innerHTML.includes( 'Everything' ) );
+		const defaultControlLabel = screen.getByRole( 'combobox', {
+			name: 'Everything Controls the padding property for Everything viewports.',
+		} );
 
-		expect( defaultControlLabel ).not.toBeNull();
+		expect( defaultControlLabel ).toBeVisible();
 	} );
 } );
 
@@ -182,12 +182,8 @@ describe( 'Default and Responsive modes', () => {
 			/>
 		);
 
-		const defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
-		const responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		const defaultControlGroup = getDefaultControlGroup( container );
+		const responsiveControlGroup = getResponsiveControlGroup( container );
 
 		expect( defaultControlGroup ).toBeNull();
 		expect( responsiveControlGroup ).not.toBeNull();
@@ -217,7 +213,7 @@ describe( 'Default and Responsive modes', () => {
 			renderTestDefaultControlComponent
 		);
 
-		const { container } = render(
+		render(
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
@@ -230,13 +226,12 @@ describe( 'Default and Responsive modes', () => {
 		const defaultRenderControlCall = 1;
 
 		// Get array of labels which match those in the custom viewports provided
-		const responsiveViewportsLabels = Array.from(
-			container.querySelectorAll( 'label' )
-		).filter( ( label ) => {
-			const labelText = label.innerHTML;
-			// Is the label one of those in the custom device set?
-			return !! customViewportSet.find( ( deviceName ) =>
-				labelText.includes( deviceName.label )
+		const responsiveViewportsLabels = [];
+		customViewportSet.forEach( ( { label } ) => {
+			responsiveViewportsLabels.push(
+				screen.getByRole( 'combobox', {
+					name: `${ label } Controls the padding property for ${ label } viewports.`,
+				} )
 			);
 		} );
 
@@ -270,24 +265,14 @@ describe( 'Default and Responsive modes', () => {
 
 		const { container } = render( <ResponsiveBlockControlConsumer /> );
 
-		let defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
-		let responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		let defaultControlGroup = getDefaultControlGroup( container );
+		let responsiveControlGroup = getResponsiveControlGroup( container );
 
 		// Select elements based on what the user can see.
-		const toggleLabel = Array.from(
-			container.querySelectorAll( 'label' )
-		).find( ( label ) =>
-			label.innerHTML.includes(
-				'Use the same padding on all screensizes'
-			)
-		);
-		const toggleInput = container.querySelector(
-			`#${ toggleLabel.getAttribute( 'for' ) }`
-		);
+		const toggleInput = screen.getByRole( 'checkbox', {
+			name: 'Use the same padding on all screensizes.',
+			checked: true,
+		} );
 
 		// Initial mode (default)
 		expect( defaultControlGroup ).not.toBeNull();
@@ -296,12 +281,8 @@ describe( 'Default and Responsive modes', () => {
 		// Toggle to "responsive" mode.
 		await user.click( toggleInput );
 
-		defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
-		responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		defaultControlGroup = getDefaultControlGroup( container );
+		responsiveControlGroup = getResponsiveControlGroup( container );
 
 		expect( defaultControlGroup ).toBeNull();
 		expect( responsiveControlGroup ).not.toBeNull();
@@ -309,12 +290,8 @@ describe( 'Default and Responsive modes', () => {
 		// Toggle back to "default" mode.
 		await user.click( toggleInput );
 
-		defaultControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group:not(.is-responsive)'
-		);
-		responsiveControlGroup = container.querySelector(
-			'.block-editor-responsive-block-control__group.is-responsive'
-		);
+		defaultControlGroup = getDefaultControlGroup( container );
+		responsiveControlGroup = getResponsiveControlGroup( container );
 
 		expect( defaultControlGroup ).not.toBeNull();
 		expect( responsiveControlGroup ).toBeNull();
@@ -340,7 +317,7 @@ describe( 'Default and Responsive modes', () => {
 			} );
 		} );
 
-		const { container } = render(
+		render(
 			<ResponsiveBlockControl
 				title="Padding"
 				property="padding"
@@ -351,9 +328,9 @@ describe( 'Default and Responsive modes', () => {
 		);
 
 		// The user should see "range" controls so we can legitimately query for them here.
-		const customControls = Array.from(
-			container.querySelectorAll( 'input[type="range"]' )
-		);
+		const customControls = screen.getAllByRole( 'slider', {
+			name: /\w+ screens$/,
+		} );
 
 		// Also called because default control rendeer function is always called
 		// (for convenience) even though it's not displayed in output.

package/src/components/url-popover/README.md

@@ -94,13 +94,13 @@ class MyURLPopover extends Component {
 
 The component accepts the following props. Any other props are passed through to the underlying `Popover` component ([refer to props documentation](/packages/components/src/popover/README.md)).
 
-### position
+### placement
 
-Where the Popover should be positioned relative to its parent. Defaults to "bottom center".
+Where the Popover should be positioned relative to its parent. Defaults to "bottom".
 
 -   Type: `String`
 -   Required: No
--   Default: "bottom center"
+-   Default: "bottom"
 
 ### focusOnMount
 
@@ -194,3 +194,12 @@ Reference passed to the auto complete element of the ([URLInput component](/pack
 
 -   Type: `Object`
 -   Required: no
+
+### position
+
+_Note: this prop is deprecated. Please use the `placement` prop instead._
+
+Where the Popover should be positioned relative to its parent.
+
+-   Type: `String`
+-   Required: No