@wordpress/block-editor 9.0.0 → 9.3.0

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

@@ -0,0 +1,171 @@
+/**
+ * External dependencies
+ */
+import { useSharedValue } from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { useThrottle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useBlockListContext } from '../block-list/block-list-context';
+import { getDistanceToNearestEdge } from '../../utils/math';
+import useOnBlockDrop from '../use-on-block-drop';
+
+/** @typedef {import('../../utils/math').WPPoint} WPPoint */
+
+/**
+ * The orientation of a block list.
+ *
+ * @typedef {'horizontal'|'vertical'|undefined} WPBlockListOrientation
+ */
+
+/**
+ * Given a list of blocks layouts finds the index that a block should be dropped at.
+ *
+ * @param {Object}                 blocksLayouts Blocks layouts object.
+ * @param {WPPoint}                position      The position of the item being dragged.
+ * @param {WPBlockListOrientation} orientation   The orientation of a block list.
+ * @param {boolean}                isRTL         Check if current locale is RTL.
+ *
+ * @return {number|undefined} The block index that's closest to the drag position.
+ */
+export function getNearestBlockIndex(
+	blocksLayouts,
+	position,
+	orientation,
+	isRTL
+) {
+	const allowedEdges =
+		orientation === 'horizontal'
+			? [ 'left', 'right' ]
+			: [ 'top', 'bottom' ];
+
+	const isRightToLeft = isRTL;
+
+	let candidateIndex;
+	let candidateDistance;
+
+	// Only enabled for root level blocks.
+	blocksLayouts.forEach( ( element, index ) => {
+		const { x, y, width, height } = element;
+		const rect = {
+			x: element.x,
+			y: element.y,
+			top: y,
+			right: x + width,
+			bottom: y + height,
+			left: x,
+			width,
+			height,
+		};
+		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;
+		}
+	} );
+	return candidateIndex;
+}
+
+/**
+ * @typedef  {Object} WPBlockDropZoneConfig
+ * @property {string} rootClientId The root client id for the block list.
+ */
+
+/**
+ * A React hook that can be used to make a block list handle drag and drop.
+ *
+ * @param {WPBlockDropZoneConfig} dropZoneConfig configuration data for the drop zone.
+ *
+ * @return {Object} An object that contains `targetBlockIndex` and the event
+ * handlers `onBlockDragOver`, `onBlockDragEnd` and `onBlockDrop`.
+ */
+export default function useBlockDropZone( {
+	// An undefined value represents a top-level block. Default to an empty
+	// string for this so that `targetRootClientId` can be easily compared to
+	// values returned by the `getRootBlockClientId` selector, which also uses
+	// an empty string to represent top-level blocks.
+	rootClientId: targetRootClientId = '',
+} = {} ) {
+	const targetBlockIndex = useSharedValue( null );
+
+	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
+	const { blocksLayouts, getBlockLayoutsOrderedByYCoord } =
+		useBlockListContext();
+
+	const getSortedBlocksLayouts = useCallback( () => {
+		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );
+	}, [ blocksLayouts.current ] );
+
+	const isRTL = getSettings().isRTL;
+
+	const onBlockDrop = useOnBlockDrop();
+
+	const throttled = useThrottle(
+		useCallback(
+			( event ) => {
+				const sortedBlockLayouts = getSortedBlocksLayouts();
+
+				const targetIndex = getNearestBlockIndex(
+					sortedBlockLayouts,
+					{ x: event.x, y: event.y },
+					getBlockListSettings( targetRootClientId )?.orientation,
+					isRTL
+				);
+				if ( targetIndex !== null ) {
+					targetBlockIndex.value = targetIndex ?? 0;
+				}
+			},
+			[
+				getSortedBlocksLayouts,
+				getNearestBlockIndex,
+				getBlockListSettings,
+				targetBlockIndex,
+			]
+		),
+		200
+	);
+
+	return {
+		onBlockDragOver( event ) {
+			throttled( event );
+		},
+		onBlockDragEnd() {
+			throttled.cancel();
+			targetBlockIndex.value = null;
+		},
+		onBlockDrop: ( event ) => {
+			if ( targetBlockIndex.value !== null ) {
+				onBlockDrop( {
+					...event,
+					targetRootClientId,
+					targetBlockIndex: targetBlockIndex.value,
+				} );
+			}
+		},
+		targetBlockIndex,
+	};
+}

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

@@ -39,30 +39,29 @@ const createMockClassList = ( classes ) => {
 	};
 };
 
-const mapElements = ( orientation ) => (
-	{ top, right, bottom, left },
-	index
-) => {
-	return {
-		dataset: { block: index + 1 },
-		getBoundingClientRect() {
-			return orientation === 'vertical'
-				? {
-						top,
-						right,
-						bottom,
-						left,
-				  }
-				: {
-						top: left,
-						bottom: right,
-						left: top,
-						right: bottom,
-				  };
-		},
-		classList: createMockClassList( 'wp-block' ),
+const mapElements =
+	( orientation ) =>
+	( { top, right, bottom, left }, index ) => {
+		return {
+			dataset: { block: index + 1 },
+			getBoundingClientRect() {
+				return orientation === 'vertical'
+					? {
+							top,
+							right,
+							bottom,
+							left,
+					  }
+					: {
+							top: left,
+							bottom: right,
+							left: top,
+							right: bottom,
+					  };
+			},
+			classList: createMockClassList( 'wp-block' ),
+		};
 	};
-};
 
 const verticalElements = elementData.map( mapElements( 'vertical' ) );
 // Flip the elementData to make a horizontal block list.

package/src/components/use-display-block-controls/index.native.js

@@ -14,9 +14,8 @@ export default function useDisplayBlockControls() {
 	const { isSelected, clientId, name } = useBlockEditContext();
 	return useSelect(
 		( select ) => {
-			const { getBlockName, getBlockRootClientId } = select(
-				blockEditorStore
-			);
+			const { getBlockName, getBlockRootClientId } =
+				select( blockEditorStore );
 
 			const parentId = getBlockRootClientId( clientId );
 			const parentBlockName = getBlockName( parentId );

package/src/components/use-no-recursive-renders/test/use-no-recursive-renders.js

@@ -16,9 +16,8 @@ import {
 // of calling itself depending on its `uniqueId` attribute.
 function Edit( { attributes: { uniqueId } } ) {
 	const { name } = useBlockEditContext();
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		uniqueId
-	);
+	const [ hasAlreadyRendered, RecursionProvider ] =
+		useNoRecursiveRenders( uniqueId );
 
 	if ( hasAlreadyRendered ) {
 		return <div className={ `wp-block__${ name }--halted` }>Halt</div>;

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

@@ -217,11 +217,8 @@ export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
 		[]
 	);
-	const {
-		canInsertBlockType,
-		getBlockIndex,
-		getClientIdsOfDescendants,
-	} = useSelect( blockEditorStore );
+	const { canInsertBlockType, getBlockIndex, getClientIdsOfDescendants } =
+		useSelect( blockEditorStore );
 	const {
 		insertBlocks,
 		moveBlocksToPosition,

package/src/components/use-on-block-drop/index.native.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import { cloneBlock } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+/**
+ * A function that returns an event handler function for block drop events.
+ *
+ * @param {Function} getBlockIndex             A function that gets the index of a block.
+ * @param {Function} getClientIdsOfDescendants A function that gets the client ids of descendant blocks.
+ * @param {Function} moveBlocksToPosition      A function that moves blocks.
+ * @param {Function} insertBlocks              A function that inserts blocks.
+ * @param {Function} clearSelectedBlock        A function that clears block selection.
+ * @return {Function} The event handler for a block drop event.
+ */
+export function onBlockDrop(
+	getBlockIndex,
+	getClientIdsOfDescendants,
+	moveBlocksToPosition,
+	insertBlocks,
+	clearSelectedBlock
+) {
+	return ( {
+		blocks,
+		srcClientIds: sourceClientIds,
+		srcRootClientId: sourceRootClientId,
+		targetBlockIndex,
+		targetRootClientId,
+		type: dropType,
+	} ) => {
+		// If the user is inserting a block.
+		if ( dropType === 'inserter' ) {
+			clearSelectedBlock();
+			const blocksToInsert = blocks.map( ( block ) =>
+				cloneBlock( block )
+			);
+			insertBlocks(
+				blocksToInsert,
+				targetBlockIndex,
+				targetRootClientId,
+				true,
+				null
+			);
+		}
+
+		// If the user is moving a block.
+		if ( dropType === 'block' ) {
+			const sourceBlockIndex = getBlockIndex( sourceClientIds[ 0 ] );
+
+			// If the user is dropping to the same position, return early.
+			if (
+				sourceRootClientId === targetRootClientId &&
+				sourceBlockIndex === targetBlockIndex
+			) {
+				return;
+			}
+
+			// If the user is attempting to drop a block within its own
+			// nested blocks, return early as this would create infinite
+			// recursion.
+			if (
+				sourceClientIds.includes( targetRootClientId ) ||
+				getClientIdsOfDescendants( sourceClientIds ).some(
+					( id ) => id === targetRootClientId
+				)
+			) {
+				return;
+			}
+
+			const isAtSameLevel = sourceRootClientId === targetRootClientId;
+			const draggedBlockCount = sourceClientIds.length;
+
+			// If the block is kept at the same level and moved downwards,
+			// subtract to take into account that the blocks being dragged
+			// were removed from the block list above the insertion point.
+			const insertIndex =
+				isAtSameLevel && sourceBlockIndex < targetBlockIndex
+					? targetBlockIndex - draggedBlockCount
+					: targetBlockIndex;
+
+			moveBlocksToPosition(
+				sourceClientIds,
+				sourceRootClientId,
+				targetRootClientId,
+				insertIndex
+			);
+		}
+	};
+}
+
+/**
+ * A React hook for handling block drop events.
+ *
+ * @return {Function} The event handler for a block drop event.
+ */
+export default function useOnBlockDrop() {
+	const { getBlockIndex, getClientIdsOfDescendants } =
+		useSelect( blockEditorStore );
+	const { insertBlocks, moveBlocksToPosition, clearSelectedBlock } =
+		useDispatch( blockEditorStore );
+
+	return onBlockDrop(
+		getBlockIndex,
+		getClientIdsOfDescendants,
+		moveBlocksToPosition,
+		insertBlocks,
+		clearSelectedBlock
+	);
+}

package/src/components/use-setting/index.js

@@ -128,9 +128,10 @@ export default function useSetting( path ) {
 				clientId, // The current block is added last, so it overwrites any ancestor.
 			];
 			candidates.forEach( ( candidateClientId ) => {
-				const candidateBlockName = select(
-					blockEditorStore
-				).getBlockName( candidateClientId );
+				const candidateBlockName =
+					select( blockEditorStore ).getBlockName(
+						candidateClientId
+					);
 				if (
 					hasBlockSupport(
 						candidateBlockName,
@@ -138,9 +139,10 @@ export default function useSetting( path ) {
 						false
 					)
 				) {
-					const candidateAtts = select(
-						blockEditorStore
-					).getBlockAttributes( candidateClientId );
+					const candidateAtts =
+						select( blockEditorStore ).getBlockAttributes(
+							candidateClientId
+						);
 					const candidateResult =
 						get(
 							candidateAtts,

package/src/components/warning/index.js

@@ -13,50 +13,55 @@ import { moreHorizontal } from '@wordpress/icons';
 
 function Warning( { className, actions, children, secondaryActions } ) {
 	return (
-		<div className={ classnames( className, 'block-editor-warning' ) }>
-			<div className="block-editor-warning__contents">
-				<p className="block-editor-warning__message">{ children }</p>
+		<div style={ { display: 'contents', all: 'initial' } }>
+			<div className={ classnames( className, 'block-editor-warning' ) }>
+				<div className="block-editor-warning__contents">
+					<p className="block-editor-warning__message">
+						{ children }
+					</p>
 
-				{ ( Children.count( actions ) > 0 || secondaryActions ) && (
-					<div className="block-editor-warning__actions">
-						{ Children.count( actions ) > 0 &&
-							Children.map( actions, ( action, i ) => (
-								<span
-									key={ i }
-									className="block-editor-warning__action"
+					{ ( Children.count( actions ) > 0 || secondaryActions ) && (
+						<div className="block-editor-warning__actions">
+							{ Children.count( actions ) > 0 &&
+								Children.map( actions, ( action, i ) => (
+									<span
+										key={ i }
+										className="block-editor-warning__action"
+									>
+										{ action }
+									</span>
+								) ) }
+							{ secondaryActions && (
+								<DropdownMenu
+									className="block-editor-warning__secondary"
+									icon={ moreHorizontal }
+									label={ __( 'More options' ) }
+									popoverProps={ {
+										position: 'bottom left',
+										className:
+											'block-editor-warning__dropdown',
+									} }
+									noIcons
 								>
-									{ action }
-								</span>
-							) ) }
-						{ secondaryActions && (
-							<DropdownMenu
-								className="block-editor-warning__secondary"
-								icon={ moreHorizontal }
-								label={ __( 'More options' ) }
-								popoverProps={ {
-									position: 'bottom left',
-									className: 'block-editor-warning__dropdown',
-								} }
-								noIcons
-							>
-								{ () => (
-									<MenuGroup>
-										{ secondaryActions.map(
-											( item, pos ) => (
-												<MenuItem
-													onClick={ item.onClick }
-													key={ pos }
-												>
-													{ item.title }
-												</MenuItem>
-											)
-										) }
-									</MenuGroup>
-								) }
-							</DropdownMenu>
-						) }
-					</div>
-				) }
+									{ () => (
+										<MenuGroup>
+											{ secondaryActions.map(
+												( item, pos ) => (
+													<MenuItem
+														onClick={ item.onClick }
+														key={ pos }
+													>
+														{ item.title }
+													</MenuItem>
+												)
+											) }
+										</MenuGroup>
+									) }
+								</DropdownMenu>
+							) }
+						</div>
+					) }
+				</div>
 			</div>
 		</div>
 	);

package/src/components/warning/test/__snapshots__/index.js.snap

@@ -2,16 +2,25 @@
 
 exports[`Warning should match snapshot 1`] = `
 <div
-  className="block-editor-warning"
+  style={
+    Object {
+      "all": "initial",
+      "display": "contents",
+    }
+  }
 >
   <div
-    className="block-editor-warning__contents"
+    className="block-editor-warning"
   >
-    <p
-      className="block-editor-warning__message"
+    <div
+      className="block-editor-warning__contents"
     >
-      error
-    </p>
+      <p
+        className="block-editor-warning__message"
+      >
+        error
+      </p>
+    </div>
   </div>
 </div>
 `;

package/src/components/warning/test/index.js

@@ -18,7 +18,7 @@ describe( 'Warning', () => {
 	it( 'should have valid class', () => {
 		const wrapper = shallow( <Warning /> );
 
-		expect( wrapper.hasClass( 'block-editor-warning' ) ).toBe( true );
+		expect( wrapper.find( '.block-editor-warning' ) ).toHaveLength( 1 );
 		expect( wrapper.find( '.block-editor-warning__actions' ) ).toHaveLength(
 			0
 		);

package/src/components/writing-flow/test/index.js

@@ -12,7 +12,13 @@ describe( 'isNavigationCandidate', () => {
 	let elements;
 	beforeAll( () => {
 		elements = {};
-		elements.input = document.createElement( 'input' );
+
+		elements.inputText = document.createElement( 'input' );
+		elements.inputText.setAttribute( 'type', 'text' );
+
+		elements.inputCheckbox = document.createElement( 'input' );
+		elements.inputCheckbox.setAttribute( 'type', 'checkbox' );
+
 		elements.contentEditable = document.createElement( 'p' );
 		elements.contentEditable.contentEditable = true;
 	} );
@@ -20,7 +26,7 @@ describe( 'isNavigationCandidate', () => {
 	it( 'should return true if vertically navigating input without modifier', () => {
 		[ UP, DOWN ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(
-				elements.input,
+				elements.inputText,
 				keyCode,
 				false
 			);
@@ -32,7 +38,7 @@ describe( 'isNavigationCandidate', () => {
 	it( 'should return false if vertically navigating input with modifier', () => {
 		[ UP, DOWN ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(
-				elements.input,
+				elements.inputText,
 				keyCode,
 				true
 			);
@@ -44,7 +50,7 @@ describe( 'isNavigationCandidate', () => {
 	it( 'should return false if horizontally navigating input', () => {
 		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(
-				elements.input,
+				elements.inputText,
 				keyCode,
 				false
 			);
@@ -53,6 +59,18 @@ describe( 'isNavigationCandidate', () => {
 		} );
 	} );
 
+	it( 'should return true if horizontally navigating simple inputs like checkboxes', () => {
+		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
+			const result = isNavigationCandidate(
+				elements.inputCheckbox,
+				keyCode,
+				false
+			);
+
+			expect( result ).toBe( true );
+		} );
+	} );
+
 	it( 'should return true if horizontally navigating non-input', () => {
 		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(

package/src/components/writing-flow/use-arrow-nav.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find, reverse } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -43,9 +38,25 @@ export function isNavigationCandidate( element, keyCode, hasModifier ) {
 		return true;
 	}
 
-	// Native inputs should not navigate horizontally.
 	const { tagName } = element;
-	return tagName !== 'INPUT' && tagName !== 'TEXTAREA';
+
+	// Native inputs should not navigate horizontally, unless they are simple types that don't need left/right arrow keys.
+	if ( tagName === 'INPUT' ) {
+		const simpleInputTypes = [
+			'button',
+			'checkbox',
+			'color',
+			'file',
+			'image',
+			'radio',
+			'reset',
+			'submit',
+		];
+		return simpleInputTypes.includes( element.getAttribute( 'type' ) );
+	}
+
+	// Native textareas should not navigate horizontally.
+	return tagName !== 'TEXTAREA';
 }
 
 /**
@@ -73,7 +84,7 @@ export function getClosestTabbable(
 	let focusableNodes = focus.focusable.find( containerElement );
 
 	if ( isReverse ) {
-		focusableNodes = reverse( focusableNodes );
+		focusableNodes.reverse();
 	}
 
 	// Consider as candidates those focusables after the current target. It's
@@ -114,7 +125,7 @@ export function getClosestTabbable(
 		return true;
 	}
 
-	return find( focusableNodes, isTabCandidate );
+	return focusableNodes.find( isTabCandidate );
 }
 
 export default function useArrowNav() {
@@ -215,7 +226,8 @@ export default function useArrowNav() {
 			const selectedBlockClientId = getSelectedBlockClientId();
 
 			if ( isShift ) {
-				const selectionEndClientId = getMultiSelectedBlocksEndClientId();
+				const selectionEndClientId =
+					getMultiSelectedBlocksEndClientId();
 				const selectionBeforeEndClientId = getPreviousBlockClientId(
 					selectionEndClientId || selectedBlockClientId
 				);

package/src/components/writing-flow/use-click-selection.js

@@ -12,11 +12,8 @@ import { getBlockClientId } from '../../utils/dom';
 
 export default function useClickSelection() {
 	const { selectBlock } = useDispatch( blockEditorStore );
-	const {
-		isSelectionEnabled,
-		getBlockSelectionStart,
-		hasMultiSelection,
-	} = useSelect( blockEditorStore );
+	const { isSelectionEnabled, getBlockSelectionStart, hasMultiSelection } =
+		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			function onMouseDown( event ) {