@wordpress/block-editor 12.1.0 → 12.3.0

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

@@ -1,260 +0,0 @@
-/**
- * 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 | undefined} 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

@@ -1,58 +0,0 @@
-/**
- * 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

@@ -1,58 +0,0 @@
-/**
- * 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/spacing-sizes-control/all-input-control.js

@@ -1,44 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalApplyValueToSides as applyValueToSides } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import SpacingInputControl from './spacing-input-control';
-import { getAllRawValue, isValuesMixed, isValuesDefined } from './utils';
-
-export default function AllInputControl( {
-	onChange,
-	values,
-	sides,
-	spacingSizes,
-	type,
-	minimumCustomValue,
-	onMouseOver,
-	onMouseOut,
-} ) {
-	const allValue = getAllRawValue( values );
-	const hasValues = isValuesDefined( values );
-	const isMixed = hasValues && isValuesMixed( values, sides );
-
-	const handleOnChange = ( next ) => {
-		const nextValues = applyValueToSides( values, next, sides );
-		onChange( nextValues );
-	};
-
-	return (
-		<SpacingInputControl
-			value={ allValue }
-			onChange={ handleOnChange }
-			side={ 'all' }
-			spacingSizes={ spacingSizes }
-			isMixed={ isMixed }
-			type={ type }
-			minimumCustomValue={ minimumCustomValue }
-			onMouseOver={ onMouseOver }
-			onMouseOut={ onMouseOut }
-		/>
-	);
-}

package/src/components/spacing-sizes-control/linked-button.js

@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { link, linkOff } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { Button, Tooltip } from '@wordpress/components';
-
-export default function LinkedButton( { isLinked, onClick } ) {
-	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
-
-	return (
-		<Tooltip text={ label }>
-			<span className="component-spacing-sizes-control__linked-button">
-				<Button
-					isSmall
-					icon={ isLinked ? link : linkOff }
-					iconSize={ 24 }
-					aria-label={ label }
-					onClick={ onClick }
-				/>
-			</span>
-		</Tooltip>
-	);
-}

package/src/components/ungroup-button/icon.js

@@ -1,26 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/components';
-
-const UngroupSVG = (
-	<SVG
-		width="20"
-		height="20"
-		viewBox="0 0 20 20"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M9 2H15C16.1 2 17 2.9 17 4V7C17 8.1 16.1 9 15 9H9C7.9 9 7 8.1 7 7V4C7 2.9 7.9 2 9 2ZM9 7H15V4H9V7Z"
-		/>
-		<Path
-			fillRule="evenodd"
-			clipRule="evenodd"
-			d="M5 11H11C12.1 11 13 11.9 13 13V16C13 17.1 12.1 18 11 18H5C3.9 18 3 17.1 3 16V13C3 11.9 3.9 11 5 11ZM5 16H11V13H5V16Z"
-		/>
-	</SVG>
-);
-
-export default UngroupSVG;