From e36addff93ef5bc42dfc3fd663a5353eddfa2835 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 16 Aug 2024 10:25:11 +1000
Subject: [PATCH 1/6] First commit - testing a loading spinner over the control

---
 .../global-styles/background-panel.js         | 25 ++++++++++++++++---
 .../src/components/global-styles/style.scss   | 12 +++++++++
 2 files changed, 33 insertions(+), 4 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
index 1373c54764d15..4b25719a43ba8 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -23,6 +23,8 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 	Dropdown,
+	Placeholder,
+	Spinner,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -268,6 +270,14 @@ function BackgroundControlsPanel( {
 	);
 }
 
+function LoadingSpinner() {
+	return (
+		<Placeholder className="block-editor-global-styles-background-panel__loading">
+			<Spinner />
+		</Placeholder>
+	);
+}
+
 function BackgroundImageControls( {
 	onChange,
 	style,
@@ -277,6 +287,7 @@ function BackgroundImageControls( {
 	displayInPanel,
 	defaultValues,
 } ) {
+	const [ isUploading, setIsUploading ] = useState( false );
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
 		[]
@@ -289,6 +300,7 @@ function BackgroundImageControls( {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
+		setIsUploading( false );
 	};
 
 	const resetBackgroundImage = () =>
@@ -301,12 +313,16 @@ function BackgroundImageControls( {
 		);
 
 	const onSelectMedia = ( media ) => {
+
 		if ( ! media || ! media.url ) {
 			resetBackgroundImage();
+			setIsUploading( false );
 			return;
 		}
 
 		if ( isBlobURL( media.url ) ) {
+			// Still uploading.
+			setIsUploading( true );
 			return;
 		}
 
@@ -349,6 +365,7 @@ function BackgroundImageControls( {
 				backgroundSize: sizeValue,
 			} )
 		);
+		setIsUploading( false );
 	};
 
 	const onFilesDrop = ( filesList ) => {
@@ -356,9 +373,6 @@ function BackgroundImageControls( {
 			allowedTypes: [ IMAGE_BACKGROUND_TYPE ],
 			filesList,
 			onFileChange( [ image ] ) {
-				if ( isBlobURL( image?.url ) ) {
-					return;
-				}
 				onSelectMedia( image );
 			},
 			onError: onUploadError,
@@ -387,12 +401,14 @@ 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"
 		>
+			{ isUploading && <LoadingSpinner /> }
+			<LoadingSpinner />
 			<MediaReplaceFlow
 				mediaId={ id }
 				mediaURL={ url }
@@ -414,6 +430,7 @@ function BackgroundImageControls( {
 					/>
 				}
 				variant="secondary"
+				onError={ () => {} }
 			>
 				{ canRemove && (
 					<MenuItem
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index b8dd3700a77f8..fa1848fcb8871 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -134,6 +134,18 @@
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
+
+	.block-editor-global-styles-background-panel__loading {
+		height: 100%;
+		position: absolute;
+		z-index: 1;
+		background-color: rgba($gray-900, 0.15);
+		width: 100%;
+		padding: 10px 0 0 0;
+		svg {
+			margin: 0;
+		}
+	}
 }
 
 .block-editor-global-styles-background-panel__image-preview-content,

From 5db40e0ce014f5598695a353f91f84614d73691e Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 16 Aug 2024 13:42:46 +1000
Subject: [PATCH 2/6] Restrict upload to one image

---
 .../global-styles/background-panel.js         | 20 ++++++++++++++-----
 .../src/components/global-styles/style.scss   |  6 +++++-
 2 files changed, 20 insertions(+), 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
index 4b25719a43ba8..ca88f34ae6661 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -313,7 +313,6 @@ function BackgroundImageControls( {
 		);
 
 	const onSelectMedia = ( media ) => {
-
 		if ( ! media || ! media.url ) {
 			resetBackgroundImage();
 			setIsUploading( false );
@@ -321,7 +320,6 @@ function BackgroundImageControls( {
 		}
 
 		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
index fa1848fcb8871..645030dd9ad30 100644
--- 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 {

From 91f06d9363bee59fcca81d7e38ea1f0dfe1125e9 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 16 Aug 2024 14:46:34 +1000
Subject: [PATCH 3/6] Ensuring max width of container while uploading.

---
 packages/block-editor/src/components/global-styles/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 645030dd9ad30..d99ee0f146531 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -137,6 +137,7 @@
 
 	&.is-uploading {
 		opacity: 0.5;
+		width: 100%;
 	}
 
 	.block-editor-global-styles-background-panel__loading {

From fb50928788ee53d9bfdb2ac7d34e5e414815bbb3 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 16 Aug 2024 14:48:28 +1000
Subject: [PATCH 4/6] Revert last commit. It did nothing.

---
 packages/block-editor/src/components/global-styles/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index d99ee0f146531..645030dd9ad30 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -137,7 +137,6 @@
 
 	&.is-uploading {
 		opacity: 0.5;
-		width: 100%;
 	}
 
 	.block-editor-global-styles-background-panel__loading {

From 3228d929132b59fb396bb8fefb64d69d73786364 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 16 Aug 2024 14:52:19 +1000
Subject: [PATCH 5/6] There is no clsx prop. Duh.

---
 .../src/components/global-styles/background-panel.js     | 9 ++++-----
 1 file changed, 4 insertions(+), 5 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
index ca88f34ae6661..82e0a12b3c79a 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -410,13 +410,12 @@ function BackgroundImageControls( {
 	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',
+			className={ clsx(
+				'block-editor-global-styles-background-panel__image-tools-panel-item',
 				{
 					'is-uploading': isUploading,
-				} )
-			}
+				}
+			) }
 		>
 			{ isUploading && <LoadingSpinner /> }
 			<MediaReplaceFlow

From 1f1df1469f1756dd164f40ad350e7094e1154b7f Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Fri, 16 Aug 2024 15:01:19 +1000
Subject: [PATCH 6/6] Remove uploading style and hide label

---
 .../src/components/global-styles/background-panel.js       | 7 +------
 .../block-editor/src/components/global-styles/style.scss   | 5 -----
 2 files changed, 1 insertion(+), 11 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
index 82e0a12b3c79a..c01db44792989 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -410,12 +410,7 @@ function BackgroundImageControls( {
 	return (
 		<div
 			ref={ replaceContainerRef }
-			className={ clsx(
-				'block-editor-global-styles-background-panel__image-tools-panel-item',
-				{
-					'is-uploading': isUploading,
-				}
-			) }
+			className="block-editor-global-styles-background-panel__image-tools-panel-item"
 		>
 			{ isUploading && <LoadingSpinner /> }
 			<MediaReplaceFlow
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 645030dd9ad30..acd5fd6f41c7b 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -135,15 +135,10 @@
 		}
 	}
 
-	&.is-uploading {
-		opacity: 0.5;
-	}
-
 	.block-editor-global-styles-background-panel__loading {
 		height: 100%;
 		position: absolute;
 		z-index: 1;
-		background-color: rgba(255, 255, 255, 0.5);
 		width: 100%;
 		padding: 10px 0 0 0;
 		svg {