@wordpress/block-editor 8.6.0 → 9.2.0

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

@@ -0,0 +1,173 @@
+/**
+ * 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-on-block-drop/index.native.js

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

@@ -7,7 +7,10 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { __EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE } from '@wordpress/blocks';
+import {
+	__EXPERIMENTAL_PATHS_WITH_MERGE as PATHS_WITH_MERGE,
+	hasBlockSupport,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -91,8 +94,10 @@ const removeCustomPrefixes = ( path ) => {
 };
 
 /**
- * Hook that retrieves the editor setting.
- * It works with nested objects using by finding the value at path.
+ * Hook that retrieves the given setting for the block instance in use.
+ *
+ * It looks up the settings first in the block instance hierarchy.
+ * If none is found, it'll look it up in the block editor store.
  *
  * @param {string} path The path to the setting.
  * @return {any} Returns the value defined for the setting.
@@ -102,7 +107,7 @@ const removeCustomPrefixes = ( path ) => {
  * ```
  */
 export default function useSetting( path ) {
-	const { name: blockName } = useBlockEditContext();
+	const { name: blockName, clientId } = useBlockEditContext();
 
 	const setting = useSelect(
 		( select ) => {
@@ -113,28 +118,59 @@ export default function useSetting( path ) {
 				);
 				return undefined;
 			}
-			const settings = select( blockEditorStore ).getSettings();
 
-			// 1 - Use __experimental features, if available.
-			// We cascade to the all value if the block one is not available.
+			let result;
 			const normalizedPath = removeCustomPrefixes( path );
-			const defaultsPath = `__experimentalFeatures.${ normalizedPath }`;
-			const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ normalizedPath }`;
-			const experimentalFeaturesResult =
-				get( settings, blockPath ) ?? get( settings, defaultsPath );
 
-			if ( experimentalFeaturesResult !== undefined ) {
+			// 1. Take settings from the block instance or its ancestors.
+			const candidates = [
+				...select( blockEditorStore ).getBlockParents( clientId ),
+				clientId, // The current block is added last, so it overwrites any ancestor.
+			];
+			candidates.forEach( ( candidateClientId ) => {
+				const candidateBlockName = select(
+					blockEditorStore
+				).getBlockName( candidateClientId );
+				if (
+					hasBlockSupport(
+						candidateBlockName,
+						'__experimentalSettings',
+						false
+					)
+				) {
+					const candidateAtts = select(
+						blockEditorStore
+					).getBlockAttributes( candidateClientId );
+					const candidateResult =
+						get(
+							candidateAtts,
+							`settings.blocks.${ blockName }.${ normalizedPath }`
+						) ??
+						get( candidateAtts, `settings.${ normalizedPath }` );
+					if ( candidateResult !== undefined ) {
+						result = candidateResult;
+					}
+				}
+			} );
+
+			// 2. Fall back to the settings from the block editor store (__experimentalFeatures).
+			const settings = select( blockEditorStore ).getSettings();
+			if ( result === undefined ) {
+				const defaultsPath = `__experimentalFeatures.${ normalizedPath }`;
+				const blockPath = `__experimentalFeatures.blocks.${ blockName }.${ normalizedPath }`;
+				result =
+					get( settings, blockPath ) ?? get( settings, defaultsPath );
+			}
+
+			// Return if the setting was found in either the block instance or the store.
+			if ( result !== undefined ) {
 				if ( PATHS_WITH_MERGE[ normalizedPath ] ) {
-					return (
-						experimentalFeaturesResult.custom ??
-						experimentalFeaturesResult.theme ??
-						experimentalFeaturesResult.default
-					);
+					return result.custom ?? result.theme ?? result.default;
 				}
-				return experimentalFeaturesResult;
+				return result;
 			}
 
-			// 2 - Use deprecated settings, otherwise.
+			// 3. Otherwise, use deprecated settings.
 			const deprecatedSettingsValue = deprecatedFlags[ normalizedPath ]
 				? deprecatedFlags[ normalizedPath ]( settings )
 				: undefined;
@@ -142,13 +178,13 @@ export default function useSetting( path ) {
 				return deprecatedSettingsValue;
 			}
 
-			// 3 - Fall back for typography.dropCap:
+			// 4. Fallback for typography.dropCap:
 			// This is only necessary to support typography.dropCap.
 			// when __experimentalFeatures are not present (core without plugin).
 			// To remove when __experimentalFeatures are ported to core.
 			return normalizedPath === 'typography.dropCap' ? true : undefined;
 		},
-		[ blockName, path ]
+		[ blockName, clientId, path ]
 	);
 
 	return setting;

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/use-click-selection.js

@@ -11,10 +11,9 @@ import { store as blockEditorStore } from '../../store';
 import { getBlockClientId } from '../../utils/dom';
 
 export default function useClickSelection() {
-	const { multiSelect, selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock } = useDispatch( blockEditorStore );
 	const {
 		isSelectionEnabled,
-		getBlockParents,
 		getBlockSelectionStart,
 		hasMultiSelection,
 	} = useSelect( blockEditorStore );
@@ -54,10 +53,8 @@ export default function useClickSelection() {
 			};
 		},
 		[
-			multiSelect,
 			selectBlock,
 			isSelectionEnabled,
-			getBlockParents,
 			getBlockSelectionStart,
 			hasMultiSelection,
 		]

package/src/components/writing-flow/use-input.js

@@ -30,6 +30,16 @@ export default function useInput() {
 	} = useDispatch( blockEditorStore );
 
 	return useRefEffect( ( node ) => {
+		function onBeforeInput( event ) {
+			if ( ! hasMultiSelection() ) {
+				return;
+			}
+			// Prevent the browser to format something when we have multiselection.
+			if ( event.inputType?.startsWith( 'format' ) ) {
+				event.preventDefault();
+			}
+		}
+
 		function onKeyDown( event ) {
 			if ( event.defaultPrevented ) {
 				return;
@@ -102,9 +112,11 @@ export default function useInput() {
 			}
 		}
 
+		node.addEventListener( 'beforeinput', onBeforeInput );
 		node.addEventListener( 'keydown', onKeyDown );
 		node.addEventListener( 'compositionstart', onCompositionStart );
 		return () => {
+			node.removeEventListener( 'beforeinput', onBeforeInput );
 			node.removeEventListener( 'keydown', onKeyDown );
 			node.removeEventListener( 'compositionstart', onCompositionStart );
 		};