From b20feeb356717e860a6c646c4ddb966f01f778d9 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 14 Nov 2024 14:08:44 +1100 Subject: [PATCH 1/4] Fix media placeholder to only activate for media objects. --- .../src/components/inserter-draggable-blocks/index.js | 11 ++++++++++- .../src/components/media-placeholder/index.js | 7 +++++-- packages/components/src/drop-zone/index.tsx | 7 +++++++ packages/components/src/drop-zone/types.ts | 7 ++++++- 4 files changed, 28 insertions(+), 4 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 5a63535be3d3c..1ff055b1554eb 100644 --- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js +++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js @@ -29,6 +29,15 @@ const InserterDraggableBlocks = ( { 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 ); @@ -63,7 +72,7 @@ const InserterDraggableBlocks = ( { ? [ createBlock( 'core/block', { ref: pattern.id } ) ] : blocks; event.dataTransfer.setData( - 'text/html', + blocksContainMedia ? 'media' : 'text/html', serialize( parsedBlocks ) ); } } diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index 07a3f8829e71d..f85978057ac6b 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/packages/block-editor/src/components/media-placeholder/index.js @@ -288,7 +288,7 @@ export function MediaPlaceholder( { } } - async function onHTMLDrop( HTML ) { + async function onMediaDrop( HTML ) { const blocks = pasteHandler( { HTML } ); return await handleBlocksDrop( blocks ); } @@ -380,7 +380,10 @@ export function MediaPlaceholder( { } return ( - + ); }; diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx index b1bd0199e877d..0499e2902b4e1 100644 --- a/packages/components/src/drop-zone/index.tsx +++ b/packages/components/src/drop-zone/index.tsx @@ -46,6 +46,7 @@ export function DropZoneComponent( { label, onFilesDrop, onHTMLDrop, + onMediaDrop, onDrop, ...restProps }: WordPressComponentProps< DropZoneProps, 'div', false > ) { @@ -60,6 +61,7 @@ export function DropZoneComponent( { ? getFilesFromDataTransfer( event.dataTransfer ) : []; const html = event.dataTransfer?.getData( 'text/html' ); + const media = event.dataTransfer?.getData( 'media' ); /** * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML. @@ -67,6 +69,8 @@ export function DropZoneComponent( { */ if ( html && onHTMLDrop ) { onHTMLDrop( html ); + } else if ( media && onMediaDrop ) { + onMediaDrop( media ); } else if ( files.length && onFilesDrop ) { onFilesDrop( files ); } else if ( onDrop ) { @@ -84,6 +88,8 @@ export function DropZoneComponent( { */ if ( event.dataTransfer?.types.includes( 'text/html' ) ) { _type = 'html'; + } else if ( event.dataTransfer?.types.includes( 'media' ) ) { + _type = 'media'; } else if ( // Check for the types because sometimes the files themselves // are only available on drop. @@ -116,6 +122,7 @@ export function DropZoneComponent( { ( isDraggingOverDocument || isDraggingOverElement ) && ( ( type === 'file' && onFilesDrop ) || ( type === 'html' && onHTMLDrop ) || + ( type === 'media' && onMediaDrop ) || ( type === 'default' && onDrop ) ), 'is-dragging-over-document': isDraggingOverDocument, 'is-dragging-over-element': isDraggingOverElement, diff --git a/packages/components/src/drop-zone/types.ts b/packages/components/src/drop-zone/types.ts index 3982889a4f3ea..d80b0b06b539a 100644 --- a/packages/components/src/drop-zone/types.ts +++ b/packages/components/src/drop-zone/types.ts @@ -1,4 +1,4 @@ -export type DropType = 'file' | 'html' | 'default'; +export type DropType = 'file' | 'html' | 'media' | 'default'; export type DropZoneProps = { /** @@ -26,4 +26,9 @@ export type DropZoneProps = { * It receives the HTML being dropped as an argument. */ onHTMLDrop?: ( html: string ) => void; + /** + * The function is called when dropping media into the `DropZone`. + * It receives the media being dropped as an argument. + */ + onMediaDrop?: ( media: string ) => void; }; From 8fae30f8ede5593d0a11984f2b3a60e031f15424 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 14 Nov 2024 15:57:26 +1100 Subject: [PATCH 2/4] Update e2e string --- test/e2e/specs/editor/blocks/image.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index 6110a125ff6f7..90ffb56e60985 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -545,7 +545,7 @@ test.describe( 'Image', () => { dummy.style.left = 0; dummy.draggable = 'true'; dummy.addEventListener( 'dragstart', ( event ) => { - event.dataTransfer.setData( 'text/html', _html ); + event.dataTransfer.setData( 'media', _html ); setTimeout( () => { dummy.remove(); }, 0 ); From ee7f1c2d44947333447d4d187438fdf2fde86ef3 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 15 Nov 2024 11:33:00 +1100 Subject: [PATCH 3/4] Use default type instead of media --- .../components/inserter-draggable-blocks/index.js | 2 +- .../src/components/media-placeholder/index.js | 13 +++++-------- packages/components/src/drop-zone/index.tsx | 7 ------- packages/components/src/drop-zone/types.ts | 7 +------ 4 files changed, 7 insertions(+), 22 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 1ff055b1554eb..0e1aaadc72e67 100644 --- a/packages/block-editor/src/components/inserter-draggable-blocks/index.js +++ b/packages/block-editor/src/components/inserter-draggable-blocks/index.js @@ -72,7 +72,7 @@ const InserterDraggableBlocks = ( { ? [ createBlock( 'core/block', { ref: pattern.id } ) ] : blocks; event.dataTransfer.setData( - blocksContainMedia ? 'media' : 'text/html', + blocksContainMedia ? 'default' : 'text/html', serialize( parsedBlocks ) ); } } diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index f85978057ac6b..2f1a47be2f5a6 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/packages/block-editor/src/components/media-placeholder/index.js @@ -288,8 +288,10 @@ export function MediaPlaceholder( { } } - async function onMediaDrop( HTML ) { - const blocks = pasteHandler( { HTML } ); + async function onDrop( event ) { + const blocks = pasteHandler( { + HTML: event.dataTransfer?.getData( 'default' ), + } ); return await handleBlocksDrop( blocks ); } @@ -379,12 +381,7 @@ export function MediaPlaceholder( { return null; } - return ( - - ); + return ; }; const renderCancelLink = () => { diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx index 0499e2902b4e1..b1bd0199e877d 100644 --- a/packages/components/src/drop-zone/index.tsx +++ b/packages/components/src/drop-zone/index.tsx @@ -46,7 +46,6 @@ export function DropZoneComponent( { label, onFilesDrop, onHTMLDrop, - onMediaDrop, onDrop, ...restProps }: WordPressComponentProps< DropZoneProps, 'div', false > ) { @@ -61,7 +60,6 @@ export function DropZoneComponent( { ? getFilesFromDataTransfer( event.dataTransfer ) : []; const html = event.dataTransfer?.getData( 'text/html' ); - const media = event.dataTransfer?.getData( 'media' ); /** * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML. @@ -69,8 +67,6 @@ export function DropZoneComponent( { */ if ( html && onHTMLDrop ) { onHTMLDrop( html ); - } else if ( media && onMediaDrop ) { - onMediaDrop( media ); } else if ( files.length && onFilesDrop ) { onFilesDrop( files ); } else if ( onDrop ) { @@ -88,8 +84,6 @@ export function DropZoneComponent( { */ if ( event.dataTransfer?.types.includes( 'text/html' ) ) { _type = 'html'; - } else if ( event.dataTransfer?.types.includes( 'media' ) ) { - _type = 'media'; } else if ( // Check for the types because sometimes the files themselves // are only available on drop. @@ -122,7 +116,6 @@ export function DropZoneComponent( { ( isDraggingOverDocument || isDraggingOverElement ) && ( ( type === 'file' && onFilesDrop ) || ( type === 'html' && onHTMLDrop ) || - ( type === 'media' && onMediaDrop ) || ( type === 'default' && onDrop ) ), 'is-dragging-over-document': isDraggingOverDocument, 'is-dragging-over-element': isDraggingOverElement, diff --git a/packages/components/src/drop-zone/types.ts b/packages/components/src/drop-zone/types.ts index d80b0b06b539a..3982889a4f3ea 100644 --- a/packages/components/src/drop-zone/types.ts +++ b/packages/components/src/drop-zone/types.ts @@ -1,4 +1,4 @@ -export type DropType = 'file' | 'html' | 'media' | 'default'; +export type DropType = 'file' | 'html' | 'default'; export type DropZoneProps = { /** @@ -26,9 +26,4 @@ export type DropZoneProps = { * It receives the HTML being dropped as an argument. */ onHTMLDrop?: ( html: string ) => void; - /** - * The function is called when dropping media into the `DropZone`. - * It receives the media being dropped as an argument. - */ - onMediaDrop?: ( media: string ) => void; }; From c35aa686360015cbd90005a7bb149c29e8f09bd6 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 15 Nov 2024 12:42:27 +1100 Subject: [PATCH 4/4] update e2e --- test/e2e/specs/editor/blocks/image.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index 90ffb56e60985..b2195f2c67688 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -545,7 +545,7 @@ test.describe( 'Image', () => { dummy.style.left = 0; dummy.draggable = 'true'; dummy.addEventListener( 'dragstart', ( event ) => { - event.dataTransfer.setData( 'media', _html ); + event.dataTransfer.setData( 'default', _html ); setTimeout( () => { dummy.remove(); }, 0 );