From f2edcf585b11bbaa33f6be6eaaf32572c90c0eda Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 13 Aug 2024 18:27:59 +0200 Subject: [PATCH 1/4] Paste: fix blob uploading --- packages/block-library/src/image/transforms.js | 8 +++++++- packages/block-library/src/video/transforms.js | 6 +++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/transforms.js b/packages/block-library/src/image/transforms.js index fda29a2ca2530a..0e1dfb6ee9da44 100644 --- a/packages/block-library/src/image/transforms.js +++ b/packages/block-library/src/image/transforms.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { createBlobURL } from '@wordpress/blob'; +import { createBlobURL, isBlobURL } from '@wordpress/blob'; import { createBlock, getBlockAttributes } from '@wordpress/blocks'; import { dispatch } from '@wordpress/data'; import { store as noticesStore } from '@wordpress/notices'; @@ -123,6 +123,12 @@ const transforms = { anchor, } ); + + if ( isBlobURL( attributes.url ) ) { + attributes.blob = attributes.url; + delete attributes.url; + } + return createBlock( 'core/image', attributes ); }, }, diff --git a/packages/block-library/src/video/transforms.js b/packages/block-library/src/video/transforms.js index c1bbb3431aaf37..b15ae24a530d94 100644 --- a/packages/block-library/src/video/transforms.js +++ b/packages/block-library/src/video/transforms.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { createBlobURL } from '@wordpress/blob'; +import { createBlobURL, isBlobURL } from '@wordpress/blob'; import { createBlock } from '@wordpress/blocks'; const transforms = { @@ -92,6 +92,10 @@ const transforms = { poster: videoElement.getAttribute( 'poster' ) || undefined, src: videoElement.getAttribute( 'src' ) || undefined, }; + if ( isBlobURL( attributes.url ) ) { + attributes.blob = attributes.url; + delete attributes.url; + } return createBlock( 'core/video', attributes ); }, }, From a1ddc9651b788fb6fe8e2d2b9305ac573a471a8b Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 13 Aug 2024 19:46:21 +0200 Subject: [PATCH 2/4] Add e2e test --- test/e2e/specs/editor/blocks/image.spec.js | 30 ++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index c4c725e083625e..a15a117171721e 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -746,6 +746,36 @@ test.describe( 'Image', () => { expect( src ).toMatch( /\/wp-content\/uploads\// ); } ); + test( 'uploads data url through blobs from raw handling', async ( { + editor, + page, + pageUtils, + } ) => { + const blobUrl = await page.evaluate( async () => { + const canvas = document.createElement( 'canvas' ); + canvas.width = 20; + canvas.height = 20; + + const ctx = canvas.getContext( '2d' ); + ctx.fillStyle = 'red'; + ctx.fillRect( 0, 0, 20, 20 ); + + return canvas.toDataURL( 'image/png' ); + } ); + + pageUtils.setClipboardData( { html: `` } ); + + await pageUtils.pressKeys( 'primary+v' ); + + const imageBlock = editor.canvas.locator( + 'role=document[name="Block: Image"i]' + ); + const image = imageBlock.locator( 'img[src^="http"]' ); + const src = await image.getAttribute( 'src' ); + + expect( src ).toMatch( /\/wp-content\/uploads\// ); + } ); + test( 'should have keyboard navigable link UI popover', async ( { editor, page, From 757f8e4d5e7e39e15583ed4327127b5e59a076dd Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 14 Aug 2024 12:59:28 +0400 Subject: [PATCH 3/4] Fix attribute name for Video block --- packages/block-library/src/video/transforms.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/video/transforms.js b/packages/block-library/src/video/transforms.js index b15ae24a530d94..4325cd1e7e7e9d 100644 --- a/packages/block-library/src/video/transforms.js +++ b/packages/block-library/src/video/transforms.js @@ -92,9 +92,9 @@ const transforms = { poster: videoElement.getAttribute( 'poster' ) || undefined, src: videoElement.getAttribute( 'src' ) || undefined, }; - if ( isBlobURL( attributes.url ) ) { - attributes.blob = attributes.url; - delete attributes.url; + if ( isBlobURL( attributes.src ) ) { + attributes.blob = attributes.src; + delete attributes.src; } return createBlock( 'core/video', attributes ); }, From d5636d736be2569adfdb03f1d73cf1804fa337d8 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 15 Aug 2024 08:54:08 +0200 Subject: [PATCH 4/4] Check if e2e test is the cause --- test/e2e/specs/editor/blocks/image.spec.js | 30 ---------------------- 1 file changed, 30 deletions(-) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index a15a117171721e..c4c725e083625e 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -746,36 +746,6 @@ test.describe( 'Image', () => { expect( src ).toMatch( /\/wp-content\/uploads\// ); } ); - test( 'uploads data url through blobs from raw handling', async ( { - editor, - page, - pageUtils, - } ) => { - const blobUrl = await page.evaluate( async () => { - const canvas = document.createElement( 'canvas' ); - canvas.width = 20; - canvas.height = 20; - - const ctx = canvas.getContext( '2d' ); - ctx.fillStyle = 'red'; - ctx.fillRect( 0, 0, 20, 20 ); - - return canvas.toDataURL( 'image/png' ); - } ); - - pageUtils.setClipboardData( { html: `` } ); - - await pageUtils.pressKeys( 'primary+v' ); - - const imageBlock = editor.canvas.locator( - 'role=document[name="Block: Image"i]' - ); - const image = imageBlock.locator( 'img[src^="http"]' ); - const src = await image.getAttribute( 'src' ); - - expect( src ).toMatch( /\/wp-content\/uploads\// ); - } ); - test( 'should have keyboard navigable link UI popover', async ( { editor, page,