Cover Block: Show spinner while uploading

packages/blob/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New feature
+
+- Added a new `getBlobTypeByURL` function. Returns the file type of the blob or undefined if not a blob.
+
 ## 2.8.0 (2020-04-15)
 
 ### New feature

packages/blob/README.md

@@ -40,6 +40,20 @@ _Returns_
 
 -   `(File|undefined)`: The file for the blob URL.
 
+<a name="getBlobTypeByURL" href="#getBlobTypeByURL">#</a> **getBlobTypeByURL**
+
+Retrieve a blob type based on URL. The file must have been created by
+`createBlobURL` and not removed by `revokeBlobURL`, otherwise it will return
+`undefined`.
+
+_Parameters_
+
+-   _url_ `string`: The blob URL.
+
+_Returns_
+
+-   `(string|undefined)`: The blob type.
+
 <a name="isBlobURL" href="#isBlobURL">#</a> **isBlobURL**
 
 Check whether a url is a blob url.

packages/blob/src/index.js

@@ -36,6 +36,19 @@ export function getBlobByURL( url ) {
 	return cache[ url ];
 }
 
+/**
+ * Retrieve a blob type based on URL. The file must have been created by
+ * `createBlobURL` and not removed by `revokeBlobURL`, otherwise it will return
+ * `undefined`.
+ *
+ * @param {string} url The blob URL.
+ *
+ * @return {string|undefined} The blob type.
+ */
+export function getBlobTypeByURL( url ) {
+	return getBlobByURL( url )?.type.split( '/' )[ 0 ]; // 0: media type , 1: file extension eg ( type: 'image/jpeg' ).
+}
+
 /**
  * Remove the resource and file cache from memory.
  *

packages/blob/src/test/index.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { isBlobURL } from '../';
+import { isBlobURL, getBlobTypeByURL } from '../';
 
 describe( 'isBlobURL', () => {
 	it( 'returns true if the url starts with "blob:"', () => {
@@ -16,3 +16,13 @@ describe( 'isBlobURL', () => {
 		expect( isBlobURL() ).toBe( false );
 	} );
 } );
+
+describe( 'getBlobTypeByURL', () => {
+	it( 'returns undefined if the blob is not found', () => {
+		expect( getBlobTypeByURL( 'blob:notexisting' ) ).toBe( undefined );
+	} );
+
+	it( 'returns undefined if the url is not defined', () => {
+		expect( getBlobTypeByURL() ).toBe( undefined );
+	} );
+} );

packages/block-library/src/cover/edit.js

@@ -17,6 +17,7 @@ import {
 	PanelRow,
 	RangeControl,
 	ResizableBox,
+	Spinner,
 	ToggleControl,
 	withNotices,
 	__experimentalBoxControl as BoxControl,
@@ -40,6 +41,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { withDispatch } from '@wordpress/data';
 import { cover as icon } from '@wordpress/icons';
+import { isBlobURL } from '@wordpress/blob';
 
 /**
  * Internal dependencies
@@ -259,6 +261,7 @@ function CoverEdit( {
 		setGradient,
 	} = __experimentalUseGradient();
 	const onSelectMedia = attributesFromMedia( setAttributes );
+	const isBlogUrl = isBlobURL( url );
 
 	const toggleParallax = () => {
 		setAttributes( {
@@ -470,6 +473,7 @@ function CoverEdit( {
 		{
 			'is-dark-theme': isDark,
 			'has-background-dim': dimRatio !== 0,
+			'is-transient': isBlogUrl,
 			'has-parallax': hasParallax,
 			[ overlayColor.class ]: overlayColor.class,
 			'has-background-gradient': gradientValue,
@@ -536,6 +540,7 @@ function CoverEdit( {
 						style={ { objectPosition: positionValue } }
 					/>
 				) }
+				{ isBlogUrl && <Spinner /> }
 				<InnerBlocks
 					__experimentalTagName="div"
 					__experimentalPassedProps={ {

packages/block-library/src/cover/editor.scss

@@ -12,6 +12,22 @@
 		color: inherit;
 	}
 
+	// Applied while media is being uploaded
+	&.is-transient::before {
+		background-color: #fff;
+		opacity: 0.3;
+	}
+
+	// Shown while media is being uploaded
+	.components-spinner {
+		position: absolute;
+		z-index: z-index(".wp-block-cover__inner-container");
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%); // Account for spinner dimensions
+		margin: 0;
+	}
+
 	.block-editor-block-list__layout {
 		width: 100%;
 	}

packages/block-library/src/cover/shared.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlobTypeByURL, isBlobURL } from '@wordpress/blob';
+
 const POSITION_CLASSNAMES = {
 	'top left': 'is-position-top-left',
 	'top center': 'is-position-top-center',
@@ -38,6 +43,11 @@ export function attributesFromMedia( setAttributes ) {
 			setAttributes( { url: undefined, id: undefined } );
 			return;
 		}
+
+		if ( isBlobURL( media.url ) ) {
+			media.type = getBlobTypeByURL( media.url );
+		}
+
 		let mediaType;
 		// for media selections originated from a file upload.
 		if ( media.media_type ) {