Orphan buttons after focus on an Image or a Gallery

[caxco93]

Describe the bug
Whenever you focus an Image Block or Gallery Block, a button element is created just before the closing body tag. Then, after blurring, the button is still there. This can be performed indefinitely times, leading to a massive amount of orphan button elements

To Reproduce
Steps to reproduce the behavior:

1. Create an Image Block
2. Upload 1 image to the Image Block
3. Select another Block like the Title or click on the white blank space.
4. Select the Image Block
5. Go back to step 3 (please feel free to exit this loop)
6. Check the Elements tab in your Dev Tools, right before the closing body tag

Expected behavior
There shouldn't be any left over button elements

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 Pro
• Browser: Chrome Version 68.0.3440.106 (Official Build) (64-bit)
• Version: Gutenberg 3.6.2

[designsimply]

Tested and confirmed that clicking on an image block or clicking on another kind of block after clicking on an image results in the following empty button HTML appearing just above the </body> tag:

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=14478&action=edit running WordPress 4.9.8 and Gutenberg 3.6.2 using Firefox 61.0.2 on macOS 10.13.6.}

Note: clicking between paragraphs or other types of blocks doesn’t seem to trigger the empty buttons.

[jorgefilipecosta]

This is a complex problem I was able to reproduce it in my tests.
When If I focused the title and then I focused any block a new button element appears and stays in the dom forever. If I repeat the same tests with the sidebar closed or with the publish sidebar open the problem stops happening so I think it may be related with the main sidebar.

[youknowriad]

I can reproduce with Gallery today but not the image block

[talldan]

I can still reproduce this.

[talldan]

I found another way to reproduce this, switching between the document and block tabs in the sidebar.

Debugged it by breaking on subtree modifications of the body element. It's caused by the MediaUpload component. The featured image uploader is the cause of it in the sidebar. Every time that's constructed it initialises wp.media:

gutenberg/packages/media-utils/src/components/media-upload/index.js

Line 150 in a59a5d9

this.frame = wp.media( frameConfig );

It looks like it's this bit of code that appends the button when that initialisation happens:
https://github.com/WordPress/wordpress-develop/blob/3dd39ffecea808afe86b8071331551d9d5e8cf89/src/js/media/views/uploader/window.js#L30

Not quite sure why it does that, but I'll keep digging to see if I can find out 😄

[talldan]

I've opened a trac issue for this as well:
https://core.trac.wordpress.org/ticket/49431

It might be that the issue can be solved in wp core alone, but until we can verify where the fix should take place I think it's best to leave both issues open.

[noisysocks]

I'm inclined to say that the block editor should do what the classic editor does and not reinitialise the media frame when it already exists. See this comment for more info.

[dsifford]

Chiming in here to say that I'm able to reproduce this with just the <MediaPlaceholder> component.

[glendaviesnz]

Just confirmed that this still happens in WP5.8 and Gutenberg 11.4.1

[jasmussen]

I'm seeing this button appear unrelated to the media placeholder component. Just select the title block, then the another block, then the title block:

[glendaviesnz]

I couldn't replicate this on WP 5.9 and GB 13.1:

image-buttons.mp4

Seems to have been resolved somehow, can't see any obvious fix anywhere, but going to close for now. Feel free to reopen if you can still replicate.