Gallery block: fix bug with stalled upload when image size too large (#…

…34371) * Flag isTemp to false on upload error to prevent the isTemp effect running again and showing stalled upload Co-authored-by: Glen Davies <glen.davies@a8c.com>
WordPress · Sep 2, 2021 · 32a370f · 32a370f
1 parent da052f0
commit 32a370f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -16,9 +16,24 @@ figure.wp-block-gallery {
 		flex: 0 0 100%;
 	}
 
-	.components-form-file-upload {
+	> .components-form-file-upload {
 		flex-basis: 100%;
 	}
+
+	.wp-block-image {
+		.components-notice.is-error {
+			display: block;
+		}
+		.components-notice__content {
+			margin: 4px 0;
+		}
+		.components-notice__dismiss {
+			position: absolute;
+			top: 0;
+			right: 5px;
+		}
+	}
+
 	// @todo: this deserves a refactor, by being moved to the toolbar.
 	.block-editor-media-placeholder.is-appender {
 		.components-placeholder__label {

diff --git a/packages/block-library/src/gallery/use-get-media.js b/packages/block-library/src/gallery/use-get-media.js
@@ -10,18 +10,13 @@ export default function useGetMedia( innerBlockImages ) {
 
 	const imageMedia = useSelect(
 		( select ) => {
-			if (
-				! innerBlockImages?.length ||
-				innerBlockImages.some(
-					( imageBlock ) => ! imageBlock.attributes.id
-				)
-			) {
+			if ( ! innerBlockImages?.length ) {
 				return currentImageMedia;
 			}
 
-			const imageIds = innerBlockImages.map(
-				( imageBlock ) => imageBlock.attributes.id
-			);
+			const imageIds = innerBlockImages
+				.map( ( imageBlock ) => imageBlock.attributes.id )
+				.filter( ( id ) => id !== undefined );
 
 			if ( imageIds.length === 0 ) {
 				return currentImageMedia;

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -246,7 +246,7 @@ export function ImageEdit( {
 		} );
 	}
 
-	const isTemp = isTemporaryImage( id, url );
+	let isTemp = isTemporaryImage( id, url );
 
 	// Upload a temporary image on mount.
 	useEffect( () => {
@@ -264,6 +264,7 @@ export function ImageEdit( {
 				},
 				allowedTypes: ALLOWED_MEDIA_TYPES,
 				onError: ( message ) => {
+					isTemp = false;
 					noticeOperations.createErrorNotice( message );
 					setAttributes( {
 						src: undefined,