From 16d64bb25858649bfeff72bce756559a7398f09b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 23 Nov 2022 16:42:58 +0100 Subject: [PATCH 01/17] Prepublish: suggest uploading external images --- .../post-publish-panel/maybe-upload-media.js | 159 ++++++++++++++++++ .../post-publish-panel/prepublish.js | 2 + 2 files changed, 161 insertions(+) create mode 100644 packages/editor/src/components/post-publish-panel/maybe-upload-media.js diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js new file mode 100644 index 0000000000000..61edc51bd838a --- /dev/null +++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js @@ -0,0 +1,159 @@ +/** + * WordPress dependencies + */ +import { PanelBody, Button, Spinner } from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { upload } from '@wordpress/icons'; +import { store as blockEditorStore } from '@wordpress/block-editor'; +import { useEffect, useState } from '@wordpress/element'; +import { isBlobURL } from '@wordpress/blob'; + +/** + * Internal dependencies + */ +import { store as editorStore } from '../../store'; + +function flattenBlocks( blocks ) { + const result = []; + + blocks.forEach( ( block ) => { + result.push( block ); + result.push( ...flattenBlocks( block.innerBlocks ) ); + } ); + + return result; +} + +function Image( block ) { + const { selectBlock } = useDispatch( blockEditorStore ); + return ( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions + { + selectBlock( block.clientId ); + } } + key={ block.clientId } + alt={ block.attributes.alt } + src={ block.attributes.url } + style={ { + width: '30px', + height: '30px', + objectFit: 'cover', + margin: '5px', + } } + /> + ); +} + +export default function PostFormatPanel() { + const [ blobUrls, setBlobUrls ] = useState( [] ); + const [ isUploading, setIsUploading ] = useState( false ); + const externalImages = useSelect( ( select ) => { + const { getEditorBlocks } = select( editorStore ); + return flattenBlocks( getEditorBlocks() ).filter( ( block ) => { + return ( + block.name === 'core/image' && + block.attributes.url && + ! block.attributes.id + ); + } ); + }, [] ); + const { updateBlockAttributes } = useDispatch( blockEditorStore ); + const mediaUpload = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + + return getSettings().mediaUpload; + }, [] ); + const panelBodyTitle = [ + __( 'Suggestion:' ), + + { __( 'Upload external media' ) } + , + ]; + + useEffect( () => { + externalImages.forEach( ( image ) => { + if ( ! blobUrls[ image.attributes.url ] ) { + window + .fetch( image.attributes.url ) + .then( ( response ) => response.blob() ) + .then( ( blob ) => + setBlobUrls( ( blobs ) => [ + ...blobs, + { clientId: image.clientId, blob }, + ] ) + ) + // Do nothing, cannot upload. + .catch( () => {} ); + } + } ); + }, [ externalImages ] ); + + const nonUploadableImages = externalImages.filter( + ( image ) => + ! blobUrls.find( ( { clientId } ) => image.clientId === clientId ) + ); + + function uploadImages() { + setIsUploading( true ); + Promise.all( + blobUrls.map( ( { clientId, blob } ) => { + return new Promise( ( resolve, reject ) => { + mediaUpload( { + filesList: [ blob ], + onFileChange: ( [ media ] ) => { + if ( isBlobURL( media.url ) ) { + return; + } + + setBlobUrls( ( blobs ) => + blobs.filter( + ( { clientId: id } ) => id !== clientId + ) + ); + updateBlockAttributes( clientId, { + id: media.id, + url: media.url, + } ); + resolve(); + }, + onError() { + reject(); + }, + } ); + } ); + } ) + ).then( () => { + setIsUploading( false ); + } ); + } + + return ( + +
+ { blobUrls.map( ( { clientId: _clientId } ) => { + const image = externalImages.find( + ( { clientId } ) => clientId === _clientId + ); + return ; + } ) } +
+ + { isUploading && } +
+

{ __( 'Some images can only be uploaded manually.' ) }

+
+ { nonUploadableImages.map( ( image ) => ( + + ) ) } +
+ + ); +} diff --git a/packages/editor/src/components/post-publish-panel/prepublish.js b/packages/editor/src/components/post-publish-panel/prepublish.js index 656272bf64bef..193960b9cc834 100644 --- a/packages/editor/src/components/post-publish-panel/prepublish.js +++ b/packages/editor/src/components/post-publish-panel/prepublish.js @@ -20,6 +20,7 @@ import MaybeTagsPanel from './maybe-tags-panel'; import MaybePostFormatPanel from './maybe-post-format-panel'; import { store as editorStore } from '../../store'; import MaybeCategoryPanel from './maybe-category-panel'; +import MaybeUploadMedia from './maybe-upload-media'; function PostPublishPanelPrepublish( { children } ) { const { @@ -103,6 +104,7 @@ function PostPublishPanelPrepublish( { children } ) { { siteHome } + { hasPublishAction && ( <> Date: Wed, 23 Nov 2022 17:58:18 +0100 Subject: [PATCH 02/17] Adjust copy and display of image thumbs. --- .../post-publish-panel/maybe-upload-media.js | 50 +++++++++++++------ 1 file changed, 35 insertions(+), 15 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js index 61edc51bd838a..3cfa04ed84a75 100644 --- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js +++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js @@ -37,10 +37,11 @@ function Image( block ) { alt={ block.attributes.alt } src={ block.attributes.url } style={ { - width: '30px', - height: '30px', + width: '36px', + height: '36px', objectFit: 'cover', - margin: '5px', + borderRadius: '2px', + cursor: 'pointer', } } /> ); @@ -68,7 +69,7 @@ export default function PostFormatPanel() { const panelBodyTitle = [ __( 'Suggestion:' ), - { __( 'Upload external media' ) } + { __( 'External media' ) } , ]; @@ -131,25 +132,44 @@ export default function PostFormatPanel() { return ( -
+

+ { __( + 'There are some external images in the post. You can upload them to the media library.' + ) } +

+
{ blobUrls.map( ( { clientId: _clientId } ) => { const image = externalImages.find( ( { clientId } ) => clientId === _clientId ); return ; } ) } +
- + { isUploading && } -
-

{ __( 'Some images can only be uploaded manually.' ) }

-
+

+ { __( 'The following images can only be uploaded manually.' ) } +

+
{ nonUploadableImages.map( ( image ) => ( ) ) } From a6322babfaac1bc98812527833274cbff3bdf0ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 23 Nov 2022 18:42:36 +0100 Subject: [PATCH 03/17] Allow any image to be uploaded through the server --- lib/experimental/rest-api.php | 9 ++ packages/block-library/src/image/image.js | 22 +++-- .../post-publish-panel/maybe-upload-media.js | 98 +++++++++---------- 3 files changed, 68 insertions(+), 61 deletions(-) diff --git a/lib/experimental/rest-api.php b/lib/experimental/rest-api.php index 4eca4232d3eb5..a8fd2b5c41d87 100644 --- a/lib/experimental/rest-api.php +++ b/lib/experimental/rest-api.php @@ -111,3 +111,12 @@ function gutenberg_auto_draft_get_sample_permalink( $permalink, $id, $title, $na return $permalink; } add_filter( 'get_sample_permalink', 'gutenberg_auto_draft_get_sample_permalink', 10, 5 ); + +add_action( 'wp_ajax_gutenberg_fetch_media', 'gutenberg_fetch_media' ); + +function gutenberg_fetch_media() { + $response = wp_remote_get( $_GET['url'] ); + header( 'Content-Type: ' . $response['headers']['content-type'] ); + echo wp_remote_retrieve_body( $response ); + wp_die(); +} diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index b551decdb00db..44f1f64d839a9 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -182,7 +182,13 @@ export default function Image( { } window - .fetch( url ) + .fetch( + `${ + window.ajaxurl + }?action=gutenberg_fetch_media&url=${ encodeURIComponent( + url + ) }` + ) .then( ( response ) => response.blob() ) .then( ( blob ) => setExternalBlob( blob ) ) // Do nothing, cannot upload. @@ -370,13 +376,6 @@ export default function Image( { label={ __( 'Crop' ) } /> ) } - { externalBlob && ( - - ) } { ! multiImageSelection && canInsertCover && ( + { externalBlob && ( + + ) } ) } diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js index 3cfa04ed84a75..73fbaa4b95d61 100644 --- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js +++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js @@ -77,7 +77,13 @@ export default function PostFormatPanel() { externalImages.forEach( ( image ) => { if ( ! blobUrls[ image.attributes.url ] ) { window - .fetch( image.attributes.url ) + .fetch( + `${ + window.ajaxurl + }?action=gutenberg_fetch_media&url=${ encodeURIComponent( + image.attributes.url + ) }` + ) .then( ( response ) => response.blob() ) .then( ( blob ) => setBlobUrls( ( blobs ) => [ @@ -91,40 +97,42 @@ export default function PostFormatPanel() { } ); }, [ externalImages ] ); - const nonUploadableImages = externalImages.filter( - ( image ) => - ! blobUrls.find( ( { clientId } ) => image.clientId === clientId ) - ); - function uploadImages() { setIsUploading( true ); Promise.all( - blobUrls.map( ( { clientId, blob } ) => { - return new Promise( ( resolve, reject ) => { - mediaUpload( { - filesList: [ blob ], - onFileChange: ( [ media ] ) => { - if ( isBlobURL( media.url ) ) { - return; - } + externalImages.map( ( image ) => + window + .fetch( + `${ + window.ajaxurl + }?action=gutenberg_fetch_media&url=${ encodeURIComponent( + image.attributes.url + ) }` + ) + .then( ( response ) => response.blob() ) + .then( + ( blob ) => + new Promise( ( resolve, reject ) => { + mediaUpload( { + filesList: [ blob ], + onFileChange: ( [ media ] ) => { + if ( isBlobURL( media.url ) ) { + return; + } - setBlobUrls( ( blobs ) => - blobs.filter( - ( { clientId: id } ) => id !== clientId - ) - ); - updateBlockAttributes( clientId, { - id: media.id, - url: media.url, - } ); - resolve(); - }, - onError() { - reject(); - }, - } ); - } ); - } ) + updateBlockAttributes( image.clientId, { + id: media.id, + url: media.url, + } ); + resolve(); + }, + onError() { + reject(); + }, + } ); + } ) + ) + ) ).then( () => { setIsUploading( false ); } ); @@ -140,16 +148,15 @@ export default function PostFormatPanel() {
- { blobUrls.map( ( { clientId: _clientId } ) => { - const image = externalImages.find( - ( { clientId } ) => clientId === _clientId - ); - return ; + { externalImages.map( ( image ) => { + return ; } ) } +
+

-

- - { isUploading && } -

- { __( 'The following images can only be uploaded manually.' ) } + { isUploading && }

-
- { nonUploadableImages.map( ( image ) => ( - - ) ) } -
); } From 1e6fba18a5e2fa3c35e172b7ea0e6e5e091b0558 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 23 Nov 2022 18:46:15 +0100 Subject: [PATCH 04/17] Remove dead code --- .../post-publish-panel/maybe-upload-media.js | 34 ++++--------------- 1 file changed, 7 insertions(+), 27 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js index 73fbaa4b95d61..e4a0b5e9c4bf1 100644 --- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js +++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js @@ -6,7 +6,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { upload } from '@wordpress/icons'; import { store as blockEditorStore } from '@wordpress/block-editor'; -import { useEffect, useState } from '@wordpress/element'; +import { useState } from '@wordpress/element'; import { isBlobURL } from '@wordpress/blob'; /** @@ -48,7 +48,6 @@ function Image( block ) { } export default function PostFormatPanel() { - const [ blobUrls, setBlobUrls ] = useState( [] ); const [ isUploading, setIsUploading ] = useState( false ); const externalImages = useSelect( ( select ) => { const { getEditorBlocks } = select( editorStore ); @@ -66,6 +65,11 @@ export default function PostFormatPanel() { return getSettings().mediaUpload; }, [] ); + + if ( ! externalImages.length ) { + return null; + } + const panelBodyTitle = [ __( 'Suggestion:' ), @@ -73,30 +77,6 @@ export default function PostFormatPanel() { , ]; - useEffect( () => { - externalImages.forEach( ( image ) => { - if ( ! blobUrls[ image.attributes.url ] ) { - window - .fetch( - `${ - window.ajaxurl - }?action=gutenberg_fetch_media&url=${ encodeURIComponent( - image.attributes.url - ) }` - ) - .then( ( response ) => response.blob() ) - .then( ( blob ) => - setBlobUrls( ( blobs ) => [ - ...blobs, - { clientId: image.clientId, blob }, - ] ) - ) - // Do nothing, cannot upload. - .catch( () => {} ); - } - } ); - }, [ externalImages ] ); - function uploadImages() { setIsUploading( true ); Promise.all( @@ -148,7 +128,7 @@ export default function PostFormatPanel() {
From ade128f1ec418e444ede6e2fd475558b3fed7c77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Wed, 23 Nov 2022 19:11:10 +0100 Subject: [PATCH 05/17] Use primary button and merge with the row of pictures. --- .../components/post-publish-panel/maybe-upload-media.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js index e4a0b5e9c4bf1..abe6bbecf09fc 100644 --- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js +++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js @@ -135,17 +135,15 @@ export default function PostFormatPanel() { { externalImages.map( ( image ) => { return ; } ) } -
-

- { isUploading && } -

+
+ { isUploading && } ); } From 534a18b431d63a78dcf80fd83aebb1993fcc13ac Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Wed, 23 Nov 2022 21:13:18 +0100 Subject: [PATCH 06/17] Update lib/experimental/rest-api.php Co-authored-by: Timothy Jacobs --- lib/experimental/rest-api.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/experimental/rest-api.php b/lib/experimental/rest-api.php index a8fd2b5c41d87..b8939c126ee91 100644 --- a/lib/experimental/rest-api.php +++ b/lib/experimental/rest-api.php @@ -115,7 +115,7 @@ function gutenberg_auto_draft_get_sample_permalink( $permalink, $id, $title, $na add_action( 'wp_ajax_gutenberg_fetch_media', 'gutenberg_fetch_media' ); function gutenberg_fetch_media() { - $response = wp_remote_get( $_GET['url'] ); + $response = wp_safe_remote_get( $_GET['url'] ); header( 'Content-Type: ' . $response['headers']['content-type'] ); echo wp_remote_retrieve_body( $response ); wp_die(); From 6421e2c319b68bf6bed89717efe822f4ac54f76d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Thu, 24 Nov 2022 15:22:21 +0100 Subject: [PATCH 07/17] Add animation to the image elements. --- .../post-publish-panel/maybe-upload-media.js | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js index abe6bbecf09fc..986cbca1f79bd 100644 --- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js +++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js @@ -1,7 +1,13 @@ /** * WordPress dependencies */ -import { PanelBody, Button, Spinner } from '@wordpress/components'; +import { + PanelBody, + Button, + Spinner, + __unstableMotion as motion, + __unstableAnimatePresence as AnimatePresence, +} from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { upload } from '@wordpress/icons'; @@ -29,13 +35,15 @@ function Image( block ) { const { selectBlock } = useDispatch( blockEditorStore ); return ( // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions - { selectBlock( block.clientId ); } } key={ block.clientId } alt={ block.attributes.alt } src={ block.attributes.url } + animate={ { opacity: 1 } } + exit={ { opacity: 0, scale: 0 } } style={ { width: '36px', height: '36px', @@ -43,6 +51,7 @@ function Image( block ) { borderRadius: '2px', cursor: 'pointer', } } + whileHover={ { scale: 1.08 } } /> ); } @@ -132,9 +141,11 @@ export default function PostFormatPanel() { gap: '8px', } } > - { externalImages.map( ( image ) => { - return ; - } ) } + + { externalImages.map( ( image ) => { + return ; + } ) } + + { isUploading ? ( + + ) : ( + + ) }
- { isUploading && } ); } diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index adb1e317096a9..1b5443d9d92cb 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -6,7 +6,7 @@ // Ensure the post-publish panel accounts for the header and footer height. min-height: calc(100% - #{$header-height + 84px}); - .components-spinner { + > .components-spinner { display: block; margin: 100px auto 0; } From 72f459139c3d74746011a50fe49b2b9c320252b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 24 Nov 2022 16:54:22 +0100 Subject: [PATCH 12/17] Make more accessible --- .../post-publish-panel/maybe-upload-media.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js index 711917481ae47..0cff54ef097f8 100644 --- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js +++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js @@ -34,11 +34,19 @@ function flattenBlocks( blocks ) { function Image( block ) { const { selectBlock } = useDispatch( blockEditorStore ); return ( - // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions { selectBlock( block.clientId ); } } + onKeyDown={ ( event ) => { + if ( event.key === 'Enter' || event.key === ' ' ) { + selectBlock( block.clientId ); + event.preventDefault(); + } + } } key={ block.clientId } alt={ block.attributes.alt } src={ block.attributes.url } From dbe29c3fdda6e050a0db839c8444f88ce4e93a2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 8 Dec 2022 11:57:07 +0200 Subject: [PATCH 13/17] Explain why --- .../src/components/post-publish-panel/maybe-upload-media.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js index 0cff54ef097f8..168257fe15591 100644 --- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js +++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js @@ -140,6 +140,11 @@ export default function PostFormatPanel() { 'There are some external images in the post. You can upload them to the media library.' ) }

+

+ { __( + 'Images from different domains may not always load correctly, load slowly, or be removed unexpectedly.' + ) } +

Date: Thu, 8 Dec 2022 15:53:53 +0200 Subject: [PATCH 14/17] Change text --- .../components/post-publish-panel/maybe-upload-media.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js index 168257fe15591..3e1d0b910a010 100644 --- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js +++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js @@ -137,12 +137,7 @@ export default function PostFormatPanel() {

{ __( - 'There are some external images in the post. You can upload them to the media library.' - ) } -

-

- { __( - 'Images from different domains may not always load correctly, load slowly, or be removed unexpectedly.' + 'There are some external images in the post which can be uploaded to the media library. Images coming from different domains may not always display correctly, load slowly for visitors, or be removed unexpectedly.' ) }

Date: Fri, 17 Feb 2023 23:18:32 +0200 Subject: [PATCH 15/17] Fix select call --- .../post-publish-panel/maybe-upload-media.js | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js index 3e1d0b910a010..0097b3f0ea741 100644 --- a/packages/editor/src/components/post-publish-panel/maybe-upload-media.js +++ b/packages/editor/src/components/post-publish-panel/maybe-upload-media.js @@ -66,22 +66,20 @@ function Image( block ) { export default function PostFormatPanel() { const [ isUploading, setIsUploading ] = useState( false ); - const externalImages = useSelect( ( select ) => { - const { getEditorBlocks } = select( editorStore ); - return flattenBlocks( getEditorBlocks() ).filter( ( block ) => { - return ( - block.name === 'core/image' && - block.attributes.url && - ! block.attributes.id - ); - } ); - }, [] ); + const { editorBlocks, mediaUpload } = useSelect( + ( select ) => ( { + editorBlocks: select( editorStore ).getEditorBlocks(), + mediaUpload: select( blockEditorStore ).getSettings().mediaUpload, + } ), + [] + ); + const externalImages = flattenBlocks( editorBlocks ).filter( + ( block ) => + block.name === 'core/image' && + block.attributes.url && + ! block.attributes.id + ); const { updateBlockAttributes } = useDispatch( blockEditorStore ); - const mediaUpload = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - - return getSettings().mediaUpload; - }, [] ); if ( ! mediaUpload || ! externalImages.length ) { return null; From 46a6e9332e02c9bbcebf696058e1a9316f2b02b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 21 Jun 2023 12:31:09 +0300 Subject: [PATCH 16/17] add e2e tests --- test/e2e/specs/editor/blocks/image.spec.js | 46 ++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index f9fe9398e5d82..5f802d0e85063 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -825,6 +825,52 @@ test.describe( 'Image', () => { await expect( linkDom ).toBeVisible(); await expect( linkDom ).toHaveAttribute( 'href', url ); } ); + + test( 'should upload external image', async ( { editor } ) => { + await editor.insertBlock( { + name: 'core/image', + attributes: { + url: 'https://cldup.com/cXyG__fTLN.jpg', + }, + } ); + + await editor.clickBlockToolbarButton( 'Upload external image' ); + + 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 upload through prepublish panel', async ( { + editor, + page, + } ) => { + await editor.insertBlock( { + name: 'core/image', + attributes: { + url: 'https://cldup.com/cXyG__fTLN.jpg', + }, + } ); + + await page + .getByRole( 'button', { name: 'Publish', exact: true } ) + .click(); + await page.getByRole( 'button', { name: 'Upload all' } ).click(); + + await expect( page.locator( '.components-spinner' ) ).toHaveCount( 0 ); + + 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.describe( 'Image - interactivity', () => { From 00df9eca31b6c4d43bd230842f54c2250d146359 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Thu, 22 Jun 2023 12:35:12 +0300 Subject: [PATCH 17/17] Fix lingering upload button --- packages/block-library/src/image/image.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 8ffce5ec2119f..d9da5067f3625 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -176,12 +176,14 @@ export default function Image( { if ( ! isExternalImage( id, url ) || ! isSelected || - ! canUploadMedia || - externalBlob + ! canUploadMedia ) { + setExternalBlob(); return; } + if ( externalBlob ) return; + window // Avoid cache, which seems to help avoid CORS problems. .fetch( url.includes( '?' ) ? url : url + '?' )