Media Blocks: Strange additional markup appears for each media block inserted

[jasmussen]

Additional, strange, markup is generated when you insert a Cover block, an Image block, or a Media & Text block:

<button type="button" class="browser" style="display: none;"></button> 

Two of these get inserted for each instance of a media block inserted. GIF:

To reproduce

1. Open the web inspector, scroll to the bottom of the DOM to keep an eye on markup that appears
2. Insert a block that leverages Media, such as Image or Cover or Media & Text.
3. Observe how additional markup is created, each time you insert another of these.
4. If you copy and paste a Cover block in place, you will just create more and more of this dummy markup.

Expected behavior
The extra markup may serve a purpose that I'm unaware of, but there certainly doesn't need to be more than one such button.

Additional context

This was tested on a Mac and reproduced in both Firefox, Safari and Chrome, with or without extensions. This is latest master.

[jasmussen]

@gziolo Do you have bandwidth to help me investigate what's going on here? It seems the issue is especially visible with lots of placeholders:

In that it's a harmless bug it's not urgent. But I kind of feel like it's a symptom of an underlying issue.

[gziolo]

Try again with the following patch applied:

diff --git a/packages/media-utils/src/components/media-upload/index.js b/packages/media-utils/src/components/media-upload/index.js
index 160e2707e..d78e608f8 100644
--- a/packages/media-utils/src/components/media-upload/index.js
+++ b/packages/media-utils/src/components/media-upload/index.js
@@ -137,7 +137,7 @@ class MediaUpload extends Component {
 		this.onClose = this.onClose.bind( this );
 
 		if ( gallery ) {
-			this.buildAndSetGalleryFrame();
+			// this.buildAndSetGalleryFrame();
 		} else {
 			const frameConfig = {
 				title,
@@ -147,18 +147,18 @@ class MediaUpload extends Component {
 				frameConfig.library = { type: allowedTypes };
 			}
 
-			this.frame = wp.media( frameConfig );
+			// this.frame = wp.media( frameConfig );
 		}
 
 		if ( modalClass ) {
-			this.frame.$el.addClass( modalClass );
+			// this.frame.$el.addClass( modalClass );
 		}
 
 		if ( unstableFeaturedImageFlow ) {
-			this.buildAndSetFeatureImageFrame();
+			// this.buildAndSetFeatureImageFrame();
 		}
 
-		this.initializeListeners();
+		// this.initializeListeners();
 	}
 
 	initializeListeners() {

It looks like it's coming from wp.media call, so we would have to improve it inside WordPress core.

[paaljoachim]

Is this issue still valid?
@gziolo
Thanks!

[jasmussen]

It's still an issue:

I'll update the title and steps to make it easier to reproduce.

[Mamaduka]

I think this is a duplicate of #9184.