@wordpress/block-editor 12.1.0 → 12.2.0

package/src/components/off-canvas-editor/use-block-selection.js

@@ -1,169 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { speak } from '@wordpress/a11y';
-import { __, sprintf } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
-import { UP, DOWN, HOME, END } from '@wordpress/keycodes';
-import { store as blocksStore } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-import { getCommonDepthClientIds } from './utils';
-
-export default function useBlockSelection() {
-	const { clearSelectedBlock, multiSelect, selectBlock } =
-		useDispatch( blockEditorStore );
-	const {
-		getBlockName,
-		getBlockParents,
-		getBlockSelectionStart,
-		getBlockSelectionEnd,
-		getSelectedBlockClientIds,
-		hasMultiSelection,
-		hasSelectedBlock,
-	} = useSelect( blockEditorStore );
-
-	const { getBlockType } = useSelect( blocksStore );
-
-	const updateBlockSelection = useCallback(
-		async ( event, clientId, destinationClientId ) => {
-			if ( ! event?.shiftKey ) {
-				selectBlock( clientId );
-				return;
-			}
-
-			// To handle multiple block selection via the `SHIFT` key, prevent
-			// the browser default behavior of opening the link in a new window.
-			event.preventDefault();
-
-			const isKeyPress =
-				event.type === 'keydown' &&
-				( event.keyCode === UP ||
-					event.keyCode === DOWN ||
-					event.keyCode === HOME ||
-					event.keyCode === END );
-
-			// Handle clicking on a block when no blocks are selected, and return early.
-			if (
-				! isKeyPress &&
-				! hasSelectedBlock() &&
-				! hasMultiSelection()
-			) {
-				selectBlock( clientId, null );
-				return;
-			}
-
-			const selectedBlocks = getSelectedBlockClientIds();
-			const clientIdWithParents = [
-				...getBlockParents( clientId ),
-				clientId,
-			];
-
-			if (
-				isKeyPress &&
-				! selectedBlocks.some( ( blockId ) =>
-					clientIdWithParents.includes( blockId )
-				)
-			) {
-				// Ensure that shift-selecting blocks via the keyboard only
-				// expands the current selection if focusing over already
-				// selected blocks. Otherwise, clear the selection so that
-				// a user can create a new selection entirely by keyboard.
-				await clearSelectedBlock();
-			}
-
-			let startTarget = getBlockSelectionStart();
-			let endTarget = clientId;
-
-			// Handle keyboard behavior for selecting multiple blocks.
-			if ( isKeyPress ) {
-				if ( ! hasSelectedBlock() && ! hasMultiSelection() ) {
-					// Set the starting point of the selection to the currently
-					// focused block, if there are no blocks currently selected.
-					// This ensures that as the selection is expanded or contracted,
-					// the starting point of the selection is anchored to that block.
-					startTarget = clientId;
-				}
-				if ( destinationClientId ) {
-					// If the user presses UP or DOWN, we want to ensure that the block they're
-					// moving to is the target for selection, and not the currently focused one.
-					endTarget = destinationClientId;
-				}
-			}
-
-			const startParents = getBlockParents( startTarget );
-			const endParents = getBlockParents( endTarget );
-
-			const { start, end } = getCommonDepthClientIds(
-				startTarget,
-				endTarget,
-				startParents,
-				endParents
-			);
-			await multiSelect( start, end, null );
-
-			// Announce deselected block, or number of deselected blocks if
-			// the total number of blocks deselected is greater than one.
-			const updatedSelectedBlocks = getSelectedBlockClientIds();
-
-			// If the selection is greater than 1 and the Home or End keys
-			// were used to generate the selection, then skip announcing the
-			// deselected blocks.
-			if (
-				( event.keyCode === HOME || event.keyCode === END ) &&
-				updatedSelectedBlocks.length > 1
-			) {
-				return;
-			}
-
-			const selectionDiff = selectedBlocks.filter(
-				( blockId ) => ! updatedSelectedBlocks.includes( blockId )
-			);
-
-			let label;
-			if ( selectionDiff.length === 1 ) {
-				const title = getBlockType(
-					getBlockName( selectionDiff[ 0 ] )
-				)?.title;
-				if ( title ) {
-					label = sprintf(
-						/* translators: %s: block name */
-						__( '%s deselected.' ),
-						title
-					);
-				}
-			} else if ( selectionDiff.length > 1 ) {
-				label = sprintf(
-					/* translators: %s: number of deselected blocks */
-					__( '%s blocks deselected.' ),
-					selectionDiff.length
-				);
-			}
-
-			if ( label ) {
-				speak( label );
-			}
-		},
-		[
-			clearSelectedBlock,
-			getBlockName,
-			getBlockType,
-			getBlockParents,
-			getBlockSelectionStart,
-			getBlockSelectionEnd,
-			getSelectedBlockClientIds,
-			hasMultiSelection,
-			hasSelectedBlock,
-			multiSelect,
-			selectBlock,
-		]
-	);
-
-	return {
-		updateBlockSelection,
-	};
-}

package/src/components/off-canvas-editor/use-inserted-block.js

@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-export const useInsertedBlock = ( insertedBlockClientId ) => {
-	const { insertedBlockAttributes, insertedBlockName } = useSelect(
-		( select ) => {
-			const { getBlockName, getBlockAttributes } =
-				select( blockEditorStore );
-
-			return {
-				insertedBlockAttributes: getBlockAttributes(
-					insertedBlockClientId
-				),
-				insertedBlockName: getBlockName( insertedBlockClientId ),
-			};
-		},
-		[ insertedBlockClientId ]
-	);
-
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	const setInsertedBlockAttributes = ( _updatedAttributes ) => {
-		if ( ! insertedBlockClientId ) return;
-		updateBlockAttributes( insertedBlockClientId, _updatedAttributes );
-	};
-
-	if ( ! insertedBlockClientId ) {
-		return {
-			insertedBlockAttributes: undefined,
-			insertedBlockName: undefined,
-			setInsertedBlockAttributes,
-		};
-	}
-
-	return {
-		insertedBlockAttributes,
-		insertedBlockName,
-		setInsertedBlockAttributes,
-	};
-};

package/src/components/off-canvas-editor/use-list-view-client-ids.js

@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../store';
-
-export default function useListViewClientIds( blocks ) {
-	return useSelect(
-		( select ) => {
-			const {
-				getDraggedBlockClientIds,
-				getSelectedBlockClientIds,
-				__unstableGetClientIdsTree,
-			} = select( blockEditorStore );
-
-			return {
-				selectedClientIds: getSelectedBlockClientIds(),
-				draggedClientIds: getDraggedBlockClientIds(),
-				clientIdsTree: blocks ? blocks : __unstableGetClientIdsTree(),
-			};
-		},
-		[ blocks ]
-	);
-}

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,
-	};
-}