Fix css and image upload issues

packages/block-editor/src/components/media-placeholder/index.js

@@ -128,15 +128,54 @@ export function MediaPlaceholder( {
 
 	const onFilesUpload = ( files ) => {
 		if ( isGallery ) {
-			// Because the Gallery hands the files over to Image component InnerBlocks just
+			// Because the refactored Gallery hands the files over to Image component InnerBlocks just
 			// hand the handling of the files over to the Gallery
 			onSelect( files );
 			return;
 		}
 		onFilesPreUpload( files );
 		let setMedia;
 		if ( multiple ) {
-			setMedia = onSelect;
+			// This is still needed to handle v1 versions of the Gallery block. It can be removed
+			// once all Gallery instances are forced to migrate.
+			if ( addToGallery ) {
+				// Since the setMedia function runs multiple times per upload group
+				// and is passed newMedia containing every item in its group each time, we must
+				// filter out whatever this upload group had previously returned to the
+				// gallery before adding and returning the image array with replacement newMedia
+				// values.
+
+				// Define an array to store urls from newMedia between subsequent function calls.
+				let lastMediaPassed = [];
+				setMedia = ( newMedia ) => {
+					// Remove any images this upload group is responsible for (lastMediaPassed).
+					// Their replacements are contained in newMedia.
+					const filteredMedia = ( value ?? [] ).filter( ( item ) => {
+						// If Item has id, only remove it if lastMediaPassed has an item with that id.
+						if ( item.id ) {
+							return ! lastMediaPassed.some(
+								// Be sure to convert to number for comparison.
+								( { id } ) => Number( id ) === Number( item.id )
+							);
+						}
+						// Compare transient images via .includes since gallery may append extra info onto the url.
+						return ! lastMediaPassed.some( ( { urlSlug } ) =>
+							item.url.includes( urlSlug )
+						);
+					} );
+					// Return the filtered media array along with newMedia.
+					onSelect( filteredMedia.concat( newMedia ) );
+					// Reset lastMediaPassed and set it with ids and urls from newMedia.
+					lastMediaPassed = newMedia.map( ( media ) => {
+						// Add everything up to '.fileType' to compare via .includes.
+						const cutOffIndex = media.url.lastIndexOf( '.' );
+						const urlSlug = media.url.slice( 0, cutOffIndex );
+						return { id: media.id, urlSlug };
+					} );
+				};
+			} else {
+				setMedia = onSelect;
+			}
 		} else {
 			setMedia = ( [ media ] ) => onSelect( media );
 		}

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

@@ -5,11 +5,13 @@ figure.wp-block-gallery {
 
 	display: block;
 	margin: 0;
-
-	.components-drop-zone {
-		display: none;
-		pointer-events: none;
+	&.has-nested-images {
+		.components-drop-zone {
+			display: none;
+			pointer-events: none;
+		}
 	}
+
 	> .blocks-gallery-caption {
 		flex: 0 0 100%;
 	}
@@ -65,8 +67,12 @@ figure.wp-block-gallery {
 		margin: 0 8px 0 4px;
 	}
 }
-.blocks-gallery-item {
 
+/**
+ * Deprecated css past this point. This can be removed once all galleries are migrated
+ * to V2.
+ */
+.blocks-gallery-item {
 	// Hide the focus outline that otherwise briefly appears when selecting a block.
 	figure:not(.is-selected):focus,
 	img:focus {
@@ -155,4 +161,10 @@ figure.wp-block-gallery {
 	&.is-right {
 		right: -2px;
 	}
+}
+
+.wp-block-gallery ul.blocks-gallery-grid {
+	padding: 0;
+	// Some themes give all <ul> default margin instead of padding.
+	margin: 0;
 }