Clicking on an embedded video block should select it

[redknite]

I can edit the vimeo block fine on chrome by clicking on it, but when I'm in firefox clicking on the video block only starts and stops the video. Block section on right continues to show "no block selected" and toolbox that should appear over the box does not show up.

Additionally in my console on firefox I get theses issues noted: (I'm only using the "welcome to gutenburg" post and no changes have been made/saved.)

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable player.js:2

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://fresnel.vimeocdn.com/add/player-stats?session-id=eb87b4def6a15e680e27deb06eb079f4ba309e751542235378&es=1. (Reason: CORS request did not succeed).[Learn More]

in chrome, when I try to view this block in html, I get this noted in my console:

JQMIGRATE: Migrate is installed, version 1.4.1
index.js?ver=1542233778:19 [Violation] Avoid using document.write().
value @ index.js?ver=1542233778:19
value @ index.js?ver=1542233778:19
jc @ react-dom.min.82e21c65.js:134
gc @ react-dom.min.82e21c65.js:127
vb @ react-dom.min.82e21c65.js:126
ub @ react-dom.min.82e21c65.js:126
wg @ react-dom.min.82e21c65.js:137
Ze @ react-dom.min.82e21c65.js:41
player.js:2 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ player.js:2
h.addEvent @ player.js:2
Tu.addEvent @ player.js:2
o @ player.js:2
h.on @ player.js:2
be @ player.js:2
Jf @ player.js:2
(anonymous) @ player.js:2
initializationHandler @ player.js:2
(anonymous) @ player.js:2
player.js:2 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ player.js:2
h.addEvent @ player.js:2
Tu.addEvent @ player.js:2
o @ player.js:2
h.on @ player.js:2
(anonymous) @ player.js:2
th @ player.js:2
(anonymous) @ player.js:2
initializationHandler @ player.js:2
(anonymous) @ player.js:2
player.js:2 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

[designsimply]

Tested and confirmed with WordPress 4.9.8 and Gutenberg 4.3 using Chrome 70.0.3538.77 and Firefox 63.0.1 on macOS 10.13.6 that clicking on a Vimeo embed in the editor does not result in the block being activated and so the caption and block toolbar areas do not show up as expected. I found that if I click on the very very far right side, I can get it to work in case that's helpful debugging info. (2m1s)

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

I did not see any of the same console errors noted though. @redknite may I ask you to note versions for your OS and the browsers you tested with for reference and which theme you are using if you're able?

[redknite]

@designsimply Thanks for the quick reply! I'm on windows 7 running firefox 63.0.1 (64-bit) and Chrome Version 70.0.3538.102 (Official Build) (64-bit). Wordpress is on 4.9.8 and I'm on twentyfifteen 2.0 theme.

[designsimply]

Thanks! The important issue here is that when you click on an embedded video, the toolbar does not appear and I can confirm this problem. I believe the expectation is that the first click on an embedded video should select it (at which point the block toolbar should appear).

I was also curious about the console errors and so I've tested again and here's what I found:

I tested with Firefox 63. on Win7 and now I see the CORS message, however, it is a warning not an error—which may mean it's not significant—and I was unable to see the InvalidStateError on Windows.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://fresnel.vimeocdn.com/add/player-stats?session-id=123ea873be602ee6a0fa58a26b90edb4a2876a4e1542765775. (Reason: CORS request did not succeed).[Learn More]

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=16232&action=edit using Firefox 63 on Windows 7 with WordPress 4.9.8 and Gutenberg 4.5.}

I was able to see the InvalidStateError on macOS after updating the plugin from 4.4 to 4.5 and then viewing the Gutenberg > Demo:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
player.js:2

^{Seen at https://tan-otter.jurassic.ninja/wp-admin/post-new.php?gutenberg-demo running WordPress 4.9.8 and Gutenberg 4.5 using Firefox 63.0.1 on macOS 10.13.6.}

^{Seen at https://tan-otter.jurassic.ninja/wp-admin/post-new.php?gutenberg-demo running WordPress 4.9.8 and Gutenberg 4.5 using Firefox 63.0.1 on macOS 10.13.6.}

Note: the InvalideStateError seems to be an error coming from Vimeo's player directly (I think). I see that error both in the editor view and on the front end and it doesn't seem to have any effect on whether or not I can play the video.

I am not sure whether the console messages are important to the problem in this case but it is still good to explore them!

[designsimply]

I noticed this happens with other video embeds as well.

Video: 1m58s
^{Tested with WordPress 4.9.8 and Gutenberg 53e4c40bd (4.5.1+) using Firefox 63.0.1 on macOS 10.13.6.}

[jasmussen]

This has been discussed in the past, and believed fixed. But it's clearly an issue again. I have reopened #483, which is the best place to discuss this, and I'm going to close this one in favor of that to keep the discussion there. Thank you for resurfacing the issue, let's get it fixed!