@wordpress/block-editor 14.8.0 → 14.8.1-next.cd6172eb0.0

package/src/components/media-placeholder/index.js

@@ -19,7 +19,6 @@ import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { keyboardReturn } from '@wordpress/icons';
-import { pasteHandler } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
 
 /**
@@ -29,6 +28,7 @@ import MediaUpload from '../media-upload';
 import MediaUploadCheck from '../media-upload/check';
 import URLPopover from '../url-popover';
 import { store as blockEditorStore } from '../../store';
+import { parseDropEvent } from '../use-on-block-drop';
 
 const noop = () => {};
 
@@ -229,30 +229,15 @@ export function MediaPlaceholder( {
 		} );
 	};
 
-	async function handleBlocksDrop( blocks ) {
-		if ( ! blocks || ! Array.isArray( blocks ) ) {
-			return;
-		}
+	async function handleBlocksDrop( event ) {
+		const { blocks } = parseDropEvent( event );
 
-		function recursivelyFindMediaFromBlocks( _blocks ) {
-			return _blocks.flatMap( ( block ) =>
-				( block.name === 'core/image' ||
-					block.name === 'core/audio' ||
-					block.name === 'core/video' ) &&
-				( block.attributes.url || block.attributes.src )
-					? [ block ]
-					: recursivelyFindMediaFromBlocks( block.innerBlocks )
-			);
-		}
-
-		const mediaBlocks = recursivelyFindMediaFromBlocks( blocks );
-
-		if ( ! mediaBlocks.length ) {
+		if ( ! blocks?.length ) {
 			return;
 		}
 
 		const uploadedMediaList = await Promise.all(
-			mediaBlocks.map( ( block ) => {
+			blocks.map( ( block ) => {
 				const blockType = block.name.split( '/' )[ 1 ];
 				if ( block.attributes.id ) {
 					block.attributes.type = blockType;
@@ -292,13 +277,6 @@ export function MediaPlaceholder( {
 		}
 	}
 
-	async function onDrop( event ) {
-		const blocks = pasteHandler( {
-			HTML: event.dataTransfer?.getData( 'default' ),
-		} );
-		return await handleBlocksDrop( blocks );
-	}
-
 	const onUpload = ( event ) => {
 		onFilesUpload( event.target.files );
 	};
@@ -385,7 +363,26 @@ export function MediaPlaceholder( {
 			return null;
 		}
 
-		return <DropZone onFilesDrop={ onFilesUpload } onDrop={ onDrop } />;
+		return (
+			<DropZone
+				onFilesDrop={ onFilesUpload }
+				onDrop={ handleBlocksDrop }
+				isEligible={ ( dataTransfer ) => {
+					const prefix = 'wp-block:core/';
+					const types = [];
+					for ( const type of dataTransfer.types ) {
+						if ( type.startsWith( prefix ) ) {
+							types.push( type.slice( prefix.length ) );
+						}
+					}
+					return (
+						types.every( ( type ) =>
+							allowedTypes.includes( type )
+						) && ( multiple ? true : types.length === 1 )
+					);
+				} }
+			/>
+		);
 	};
 
 	const renderCancelLink = () => {

package/src/components/rich-text/index.js

@@ -431,6 +431,11 @@ export function RichTextWrapper(
 				aria-multiline={ ! disableLineBreaks }
 				aria-readonly={ shouldDisableEditing }
 				{ ...props }
+				// Unset draggable (coming from block props) for contentEditable
+				// elements because it will interfere with multi block selection
+				// when the contentEditable and draggable elements are the same
+				// element.
+				draggable={ undefined }
 				aria-label={
 					bindingsLabel || props[ 'aria-label' ] || placeholder
 				}

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

@@ -332,6 +332,7 @@ export default function useBlockDropZone( {
 		isGroupable,
 		isZoomOut,
 		getSectionRootClientId,
+		getBlockParents,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		showInsertionPoint,
@@ -358,13 +359,29 @@ export default function useBlockDropZone( {
 					// So, ensure that the drag state is set when the user drags over a drop zone.
 					startDragging();
 				}
+
+				const draggedBlockClientIds = getDraggedBlockClientIds();
+				const targetParents = [
+					targetRootClientId,
+					...getBlockParents( targetRootClientId, true ),
+				];
+
+				// Check if the target is within any of the dragged blocks.
+				const isTargetWithinDraggedBlocks = draggedBlockClientIds.some(
+					( clientId ) => targetParents.includes( clientId )
+				);
+
+				if ( isTargetWithinDraggedBlocks ) {
+					return;
+				}
+
 				const allowedBlocks = getAllowedBlocks( targetRootClientId );
 				const targetBlockName = getBlockNamesByClientId( [
 					targetRootClientId,
 				] )[ 0 ];
 
 				const draggedBlockNames = getBlockNamesByClientId(
-					getDraggedBlockClientIds()
+					draggedBlockClientIds
 				);
 				const isBlockDroppingAllowed = isDropTargetValid(
 					getBlockType,

package/src/components/use-moving-animation/index.js

@@ -52,6 +52,7 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 		isFirstMultiSelectedBlock,
 		isBlockMultiSelected,
 		isAncestorMultiSelected,
+		isDraggingBlocks,
 	} = useSelect( blockEditorStore );
 
 	// Whenever the trigger changes, we need to take a snapshot of the current
@@ -73,8 +74,14 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 		const isSelected = isBlockSelected( clientId );
 		const adjustScrolling =
 			isSelected || isFirstMultiSelectedBlock( clientId );
+		const isDragging = isDraggingBlocks();
 
 		function preserveScrollPosition() {
+			// The user already scrolled when dragging blocks.
+			if ( isDragging ) {
+				return;
+			}
+
 			if ( adjustScrolling && prevRect ) {
 				const blockRect = ref.current.getBoundingClientRect();
 				const diff = blockRect.top - prevRect.top;
@@ -107,6 +114,13 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 			isSelected ||
 			isBlockMultiSelected( clientId ) ||
 			isAncestorMultiSelected( clientId );
+
+		// The user already dragged the blocks to the new position, so don't
+		// animate the dragged blocks.
+		if ( isPartOfSelection && isDragging ) {
+			return;
+		}
+
 		// Make sure the other blocks move under the selected block(s).
 		const zIndex = isPartOfSelection ? '1' : '';
 
@@ -153,6 +167,7 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 		isFirstMultiSelectedBlock,
 		isBlockMultiSelected,
 		isAncestorMultiSelected,
+		isDraggingBlocks,
 	] );
 
 	return ref;

package/src/components/use-resize-canvas/index.js

@@ -60,7 +60,7 @@ export default function useResizeCanvas( deviceType ) {
 					marginLeft: marginHorizontal,
 					marginRight: marginHorizontal,
 					height,
-					overflowY: 'auto',
+					maxWidth: '100%',
 				};
 			default:
 				return {

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

@@ -80,7 +80,17 @@ export default function useDragSelection() {
 				} );
 			}
 
+			let lastMouseDownTarget;
+
+			function onMouseDown( { target } ) {
+				lastMouseDownTarget = target;
+			}
+
 			function onMouseLeave( { buttons, target, relatedTarget } ) {
+				if ( ! target.contains( lastMouseDownTarget ) ) {
+					return;
+				}
+
 				// If we're moving into a child element, ignore. We're tracking
 				// the mouse leaving the element to a parent, no a child.
 				if ( target.contains( relatedTarget ) ) {
@@ -141,6 +151,7 @@ export default function useDragSelection() {
 			}
 
 			node.addEventListener( 'mouseout', onMouseLeave );
+			node.addEventListener( 'mousedown', onMouseDown );
 
 			return () => {
 				node.removeEventListener( 'mouseout', onMouseLeave );

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

@@ -35,6 +35,11 @@ export default function useTabNav() {
 	const noCaptureRef = useRef();
 
 	function onFocusCapture( event ) {
+		const canvasElement =
+			container.current.ownerDocument === event.target.ownerDocument
+				? container.current
+				: container.current.ownerDocument.defaultView.frameElement;
+
 		// Do not capture incoming focus if set by us in WritingFlow.
 		if ( noCaptureRef.current ) {
 			noCaptureRef.current = null;
@@ -64,17 +69,15 @@ export default function useTabNav() {
 					.focus();
 			}
 			// If we don't have any section blocks, focus the section root.
-			else {
+			else if ( sectionRootClientId ) {
 				container.current
 					.querySelector( `[data-block="${ sectionRootClientId }"]` )
 					.focus();
+			} else {
+				// If we don't have any section root, focus the canvas.
+				canvasElement.focus();
 			}
 		} else {
-			const canvasElement =
-				container.current.ownerDocument === event.target.ownerDocument
-					? container.current
-					: container.current.ownerDocument.defaultView.frameElement;
-
 			const isBefore =
 				// eslint-disable-next-line no-bitwise
 				event.target.compareDocumentPosition( canvasElement ) &

package/src/hooks/block-bindings.js

@@ -300,13 +300,17 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 						/>
 					) }
 				</ItemGroup>
-				<ItemGroup>
-					<Text variant="muted">
+				{ /*
+					Use a div element to make the ToolsPanelHiddenInnerWrapper
+					toggle the visibility of this help text automatically.
+				*/ }
+				<Text as="div" variant="muted">
+					<p>
 						{ __(
 							'Attributes connected to custom fields or other dynamic data.'
 						) }
-					</Text>
-				</ItemGroup>
+					</p>
+				</Text>
 			</ToolsPanel>
 		</InspectorControls>
 	);

package/src/hooks/gap.js

@@ -27,7 +27,7 @@ export function getGapBoxControlValueFromStyle( blockGapValue ) {
  * Returns a CSS value for the `gap` property from a given blockGap style.
  *
  * @param {string? | Object?} blockGapValue A block gap string or axial object value, e.g., '10px' or { top: '10px', left: '10px'}.
- * @param {string?}           defaultValue  A default gap value.
+ * @param {?string}           defaultValue  A default gap value.
  * @return {string|null}                    The concatenated gap value (row and column).
  */
 export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {

package/src/store/private-selectors.js

@@ -112,12 +112,12 @@ function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
 export const getEnabledClientIdsTree = createRegistrySelector( ( select ) =>
 	createSelector( getEnabledClientIdsTreeUnmemoized, ( state ) => [
 		state.blocks.order,
+		state.derivedBlockEditingModes,
+		state.derivedNavModeBlockEditingModes,
 		state.blockEditingModes,
 		state.settings.templateLock,
 		state.blockListSettings,
 		select( STORE_NAME ).__unstableGetEditorMode( state ),
-		state.zoomLevel,
-		getSectionRootClientId( state ),
 	] )
 );
 
@@ -406,21 +406,6 @@ export const getAllPatterns = createRegistrySelector( ( select ) =>
 	}, getAllPatternsDependants( select ) )
 );
 
-export const isResolvingPatterns = createRegistrySelector( ( select ) =>
-	createSelector( ( state ) => {
-		const blockPatternsSelect = state.settings[ selectBlockPatternsKey ];
-		const reusableBlocksSelect = state.settings[ reusableBlocksSelectKey ];
-		return (
-			( blockPatternsSelect
-				? blockPatternsSelect( select ) === undefined
-				: false ) ||
-			( reusableBlocksSelect
-				? reusableBlocksSelect( select ) === undefined
-				: false )
-		);
-	}, getAllPatternsDependants( select ) )
-);
-
 const EMPTY_ARRAY = [];
 
 export const getReusableBlocks = createRegistrySelector(