From 42755e05e39493a929ee160b4f7fa0261e0674e7 Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Mon, 4 Aug 2025 11:26:35 +0530 Subject: [PATCH 1/6] feat: implement drag and drop upload support --- .../block-library/src/utils/poster-image.js | 64 ++++++++++++++----- .../block-library/src/utils/poster-image.scss | 27 ++++++++ 2 files changed, 75 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/utils/poster-image.js b/packages/block-library/src/utils/poster-image.js index eeb694f571a21f..c869f6fdbf65c3 100644 --- a/packages/block-library/src/utils/poster-image.js +++ b/packages/block-library/src/utils/poster-image.js @@ -6,26 +6,60 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor'; +import { + MediaUpload, + MediaUploadCheck, + store as blockEditorStore, +} from '@wordpress/block-editor'; import { Button, BaseControl, + DropZone, + Spinner, + withNotices, __experimentalHStack as HStack, __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; +import { isBlobURL } from '@wordpress/blob'; import { __, sprintf } from '@wordpress/i18n'; -import { useRef } from '@wordpress/element'; +import { useRef, useState } from '@wordpress/element'; import { useInstanceId } from '@wordpress/compose'; +import { useSelect } from '@wordpress/data'; const POSTER_IMAGE_ALLOWED_MEDIA_TYPES = [ 'image' ]; -function PosterImage( { poster, onChange } ) { +function PosterImage( { poster, onChange, noticeUI, noticeOperations } ) { const posterButtonRef = useRef(); + const [ isLoading, setIsLoading ] = useState( false ); const descriptionId = useInstanceId( PosterImage, 'block-library-poster-image-description' ); + const { getSettings } = useSelect( blockEditorStore ); + const onDropFiles = ( filesList ) => { + getSettings().mediaUpload( { + allowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES, + filesList, + onFileChange: ( [ image ] ) => { + if ( isBlobURL( image?.url ) ) { + setIsLoading( true ); + return; + } + + if ( image ) { + onChange( image ); + } + setIsLoading( false ); + }, + onError: ( message ) => { + noticeOperations.removeAllNotices(); + noticeOperations.createErrorNotice( message ); + }, + multiple: false, + } ); + }; + return ( !! poster } onDeselect={ () => onChange( undefined ) } + className="tools-panel-poster-image" > { __( 'Poster image' ) } + { noticeUI } { + { isLoading && } ) } ) } + ) } /> @@ -128,4 +160,4 @@ function PosterImage( { poster, onChange } ) { ); } -export default PosterImage; +export default withNotices( PosterImage ); diff --git a/packages/block-library/src/utils/poster-image.scss b/packages/block-library/src/utils/poster-image.scss index 0d16fabb1c2b9f..52f4c9f11d37a4 100644 --- a/packages/block-library/src/utils/poster-image.scss +++ b/packages/block-library/src/utils/poster-image.scss @@ -13,6 +13,29 @@ opacity: 1; margin-top: $grid-unit-20; } + + .components-drop-zone__content { + border-radius: $radius-small; + } + + // Align text and icons horizontally to avoid clipping when the poster image is not set. + .components-drop-zone .components-drop-zone__content-inner { + display: flex; + align-items: center; + gap: $grid-unit-10; + + .components-drop-zone__content-icon { + margin: 0; + } + } + + .components-spinner { + position: absolute; + top: 50%; + left: 50%; + margin-top: -9px; + margin-left: -9px; + } } .block-library-poster-image__toggle, @@ -31,6 +54,10 @@ height: auto !important; outline: $border-width solid rgba($black, 0.1); + .tools-panel-poster-image:has(.components-notice) & { + margin-top: $grid-unit-10; + } + .block-library-poster-image__preview-image { object-fit: cover; width: 100%; From d32c1fc412c8d46833b27eb2163d8a3a11ff298d Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Mon, 4 Aug 2025 11:50:37 +0530 Subject: [PATCH 2/6] refactor: improve code quality --- packages/block-library/src/utils/poster-image.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/utils/poster-image.js b/packages/block-library/src/utils/poster-image.js index c869f6fdbf65c3..570b51cd5e33d7 100644 --- a/packages/block-library/src/utils/poster-image.js +++ b/packages/block-library/src/utils/poster-image.js @@ -36,9 +36,13 @@ function PosterImage( { poster, onChange, noticeUI, noticeOperations } ) { 'block-library-poster-image-description' ); - const { getSettings } = useSelect( blockEditorStore ); + const { mediaUpload } = useSelect( + ( select ) => select( blockEditorStore ).getSettings(), + [] + ); + const onDropFiles = ( filesList ) => { - getSettings().mediaUpload( { + mediaUpload( { allowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES, filesList, onFileChange: ( [ image ] ) => { @@ -55,6 +59,7 @@ function PosterImage( { poster, onChange, noticeUI, noticeOperations } ) { onError: ( message ) => { noticeOperations.removeAllNotices(); noticeOperations.createErrorNotice( message ); + setIsLoading( false ); }, multiple: false, } ); From 6bc0b2f733c0e7f0e3db7e1de3c1574bba142cf5 Mon Sep 17 00:00:00 2001 From: yogeshbhutkar Date: Mon, 4 Aug 2025 13:36:41 +0530 Subject: [PATCH 3/6] fix: show loading indicator wherever applicable --- packages/block-library/src/utils/poster-image.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/utils/poster-image.js b/packages/block-library/src/utils/poster-image.js index 570b51cd5e33d7..a8e59c92fc942e 100644 --- a/packages/block-library/src/utils/poster-image.js +++ b/packages/block-library/src/utils/poster-image.js @@ -65,6 +65,14 @@ function PosterImage( { poster, onChange, noticeUI, noticeOperations } ) { } ); }; + const getPosterButtonContent = () => { + if ( ! poster && isLoading ) { + return ; + } + + return ! poster ? __( 'Set poster image' ) : __( 'Replace' ); + }; + return ( - { ! poster - ? __( 'Set poster image' ) - : __( 'Replace' ) } + { getPosterButtonContent() }