Restrict upload to one image

WordPress · Aug 16, 2024 · 5db40e0 · 5db40e0
1 parent e36addf
commit 5db40e0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -313,15 +313,13 @@ function BackgroundImageControls( {
 		);
 
 	const onSelectMedia = ( media ) => {
-
 		if ( ! media || ! media.url ) {
 			resetBackgroundImage();
 			setIsUploading( false );
 			return;
 		}
 
 		if ( isBlobURL( media.url ) ) {
-			// Still uploading.
 			setIsUploading( true );
 			return;
 		}
@@ -368,7 +366,14 @@ function BackgroundImageControls( {
 		setIsUploading( false );
 	};
 
+	// Drag and drop callback, restricting image to one.
 	const onFilesDrop = ( filesList ) => {
+		if ( filesList?.length > 1 ) {
+			onUploadError(
+				__( 'Only one image can be used as a background image.' )
+			);
+			return;
+		}
 		mediaUpload( {
 			allowedTypes: [ IMAGE_BACKGROUND_TYPE ],
 			filesList,
@@ -401,14 +406,19 @@ function BackgroundImageControls( {
 	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
 	const imgLabel =
 		title || getFilename( url ) || __( 'Add background image' );
-// opaque when loading?
+
 	return (
 		<div
 			ref={ replaceContainerRef }
 			className="block-editor-global-styles-background-panel__image-tools-panel-item"
+			clsx={
+				( 'block-editor-global-styles-background-panel__image-tools-panel-item',
+				{
+					'is-uploading': isUploading,
+				} )
+			}
 		>
 			{ isUploading && <LoadingSpinner /> }
-			<LoadingSpinner />
 			<MediaReplaceFlow
 				mediaId={ id }
 				mediaURL={ url }
@@ -430,7 +440,7 @@ function BackgroundImageControls( {
 					/>
 				}
 				variant="secondary"
-				onError={ () => {} }
+				onError={ onUploadError }
 			>
 				{ canRemove && (
 					<MenuItem

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -135,11 +135,15 @@
 		}
 	}
 
+	&.is-uploading {
+		opacity: 0.5;
+	}
+
 	.block-editor-global-styles-background-panel__loading {
 		height: 100%;
 		position: absolute;
 		z-index: 1;
-		background-color: rgba($gray-900, 0.15);
+		background-color: rgba(255, 255, 255, 0.5);
 		width: 100%;
 		padding: 10px 0 0 0;
 		svg {