From fa24d1bbc60cef95d87fb2a44ee597f8f55c7eb6 Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Wed, 27 Nov 2024 15:58:58 +0100 Subject: [PATCH] Drag and drop: fix drop zones on block drag (#67317) Co-authored-by: ellatrix Co-authored-by: tellthemachines Co-authored-by: ramonjd --- .../inserter-draggable-blocks/index.js | 48 +++++++---------- .../src/components/media-placeholder/index.js | 53 +++++++++---------- packages/components/CHANGELOG.md | 1 + packages/components/src/drop-zone/index.tsx | 45 ++++++++-------- packages/components/src/drop-zone/types.ts | 5 ++ test/e2e/specs/editor/blocks/image.spec.js | 23 ++++---- 6 files changed, 84 insertions(+), 91 deletions(-) diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js index 0e1aaadc72e67b..ebef6304937aa7 100644 --- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js +++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js @@ -2,12 +2,9 @@ * WordPress dependencies */ import { Draggable } from '@wordpress/components'; -import { - createBlock, - serialize, - store as blocksStore, -} from '@wordpress/blocks'; +import { createBlock, store as blocksStore } from '@wordpress/blocks'; import { useDispatch, useSelect } from '@wordpress/data'; +import { useMemo } from '@wordpress/element'; /** * Internal dependencies @@ -24,20 +21,6 @@ const InserterDraggableBlocks = ( { children, pattern, } ) => { - const transferData = { - type: 'inserter', - blocks, - }; - - const blocksContainMedia = - blocks.filter( - ( block ) => - ( block.name === 'core/image' || - block.name === 'core/audio' || - block.name === 'core/video' ) && - ( block.attributes.url || block.attributes.src ) - ).length > 0; - const blockTypeIcon = useSelect( ( select ) => { const { getBlockType } = select( blocksStore ); @@ -52,6 +35,13 @@ const InserterDraggableBlocks = ( { useDispatch( blockEditorStore ) ); + const patternBlock = useMemo( () => { + return pattern?.type === INSERTER_PATTERN_TYPES.user && + pattern?.syncStatus !== 'unsynced' + ? [ createBlock( 'core/block', { ref: pattern.id } ) ] + : undefined; + }, [ pattern?.type, pattern?.syncStatus, pattern?.id ] ); + if ( ! isEnabled ) { return children( { draggable: false, @@ -60,21 +50,21 @@ const InserterDraggableBlocks = ( { } ); } + const draggableBlocks = patternBlock ?? blocks; return ( { startDragging(); - const parsedBlocks = - pattern?.type === INSERTER_PATTERN_TYPES.user && - pattern?.syncStatus !== 'unsynced' - ? [ createBlock( 'core/block', { ref: pattern.id } ) ] - : blocks; - event.dataTransfer.setData( - blocksContainMedia ? 'default' : 'text/html', - serialize( parsedBlocks ) - ); + for ( const block of draggableBlocks ) { + const type = `wp-block:${ block.name }`; + // This will fill in the dataTransfer.types array so that + // the drop zone can check if the draggable is eligible. + // Unfortuantely, on drag start, we don't have access to the + // actual data, only the data keys/types. + event.dataTransfer.items.add( '', type ); + } } } onDragEnd={ () => { stopDragging(); diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index e7b6c836468f02..0cbc6c8c26203f 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/packages/block-editor/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 ; + return ( + { + 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 = () => { diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index feff5ddc975356..a780f8f139d3e7 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -32,6 +32,7 @@ - `ColorPicker`: Update sizes of color format select and copy button ([#67093](https://github.com/WordPress/gutenberg/pull/67093)). - `ComboboxControl`: Update reset button size ([#67215](https://github.com/WordPress/gutenberg/pull/67215)). - `Autocomplete`: Increase option height ([#67214](https://github.com/WordPress/gutenberg/pull/67214)). +- `DropZone`: Add `isEligible` prop to allow customizing whether the drop zone should activate ([#67317](https://github.com/WordPress/gutenberg/pull/67317)). - `CircularOptionPicker`: Update `Button` sizes to be ready for 40px default size ([#67285](https://github.com/WordPress/gutenberg/pull/67285)). ### Experimental diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx index b1bd0199e877d8..dd8b97149a0598 100644 --- a/packages/components/src/drop-zone/index.tsx +++ b/packages/components/src/drop-zone/index.tsx @@ -15,7 +15,7 @@ import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose'; /** * Internal dependencies */ -import type { DropType, DropZoneProps } from './types'; +import type { DropZoneProps } from './types'; import type { WordPressComponentProps } from '../context'; /** @@ -47,19 +47,22 @@ export function DropZoneComponent( { onFilesDrop, onHTMLDrop, onDrop, + isEligible = () => true, ...restProps }: WordPressComponentProps< DropZoneProps, 'div', false > ) { const [ isDraggingOverDocument, setIsDraggingOverDocument ] = useState< boolean >(); const [ isDraggingOverElement, setIsDraggingOverElement ] = useState< boolean >(); - const [ type, setType ] = useState< DropType >(); + const [ isActive, setIsActive ] = useState< boolean >(); const ref = useDropZone( { onDrop( event ) { - const files = event.dataTransfer - ? getFilesFromDataTransfer( event.dataTransfer ) - : []; - const html = event.dataTransfer?.getData( 'text/html' ); + if ( ! event.dataTransfer ) { + return; + } + + const files = getFilesFromDataTransfer( event.dataTransfer ); + const html = event.dataTransfer.getData( 'text/html' ); /** * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML. @@ -76,32 +79,31 @@ export function DropZoneComponent( { onDragStart( event ) { setIsDraggingOverDocument( true ); - let _type: DropType = 'default'; + if ( ! event.dataTransfer ) { + return; + } /** * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML. * The order of the checks is important to recognize the HTML drop. */ - if ( event.dataTransfer?.types.includes( 'text/html' ) ) { - _type = 'html'; + if ( event.dataTransfer.types.includes( 'text/html' ) ) { + setIsActive( !! onHTMLDrop ); } else if ( // Check for the types because sometimes the files themselves // are only available on drop. - event.dataTransfer?.types.includes( 'Files' ) || - ( event.dataTransfer - ? getFilesFromDataTransfer( event.dataTransfer ) - : [] - ).length > 0 + event.dataTransfer.types.includes( 'Files' ) || + getFilesFromDataTransfer( event.dataTransfer ).length > 0 ) { - _type = 'file'; + setIsActive( !! onFilesDrop ); + } else { + setIsActive( !! onDrop && isEligible( event.dataTransfer ) ); } - - setType( _type ); }, onDragEnd() { setIsDraggingOverElement( false ); setIsDraggingOverDocument( false ); - setType( undefined ); + setIsActive( undefined ); }, onDragEnter() { setIsDraggingOverElement( true ); @@ -112,14 +114,9 @@ export function DropZoneComponent( { } ); const classes = clsx( 'components-drop-zone', className, { - 'is-active': - ( isDraggingOverDocument || isDraggingOverElement ) && - ( ( type === 'file' && onFilesDrop ) || - ( type === 'html' && onHTMLDrop ) || - ( type === 'default' && onDrop ) ), + 'is-active': isActive, 'is-dragging-over-document': isDraggingOverDocument, 'is-dragging-over-element': isDraggingOverElement, - [ `is-dragging-${ type }` ]: !! type, } ); return ( diff --git a/packages/components/src/drop-zone/types.ts b/packages/components/src/drop-zone/types.ts index 3982889a4f3eac..503f400bc4be45 100644 --- a/packages/components/src/drop-zone/types.ts +++ b/packages/components/src/drop-zone/types.ts @@ -26,4 +26,9 @@ export type DropZoneProps = { * It receives the HTML being dropped as an argument. */ onHTMLDrop?: ( html: string ) => void; + /** + * A function to determine if the drop zone is eligible to handle the drop + * data transfer items. + */ + isEligible?: ( dataTransfer: DataTransfer ) => boolean; }; diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index b2195f2c676885..d3cddd9c3a51cd 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -528,14 +528,13 @@ test.describe( 'Image', () => { name: 'Block: Image', } ); - const html = ` -
- Cat -
"Cat" by tomhouslay is licensed under CC BY-NC 2.0.
-
- `; - - await page.evaluate( ( _html ) => { + await page.evaluate( () => { + const { createBlock } = window.wp.blocks; + const block = createBlock( 'core/image', { + url: 'https://live.staticflickr.com/3894/14962688165_04759a8b03_b.jpg', + alt: 'Cat', + caption: `"Cat" by tomhouslay is licensed under CC BY-NC 2.0.`, + } ); const dummy = document.createElement( 'div' ); dummy.style.width = '10px'; dummy.style.height = '10px'; @@ -545,13 +544,17 @@ test.describe( 'Image', () => { dummy.style.left = 0; dummy.draggable = 'true'; dummy.addEventListener( 'dragstart', ( event ) => { - event.dataTransfer.setData( 'default', _html ); + event.dataTransfer.setData( + 'wp-blocks', + JSON.stringify( { blocks: [ block ] } ) + ); + event.dataTransfer.setData( 'wp-block:core/image', '' ); setTimeout( () => { dummy.remove(); }, 0 ); } ); document.body.appendChild( dummy ); - }, html ); + } ); await page.mouse.move( 0, 0 ); await page.mouse.down();