Audio and Video blocks: the toolbar "Edit" button disappears or re-appears in a different position

[afercia]

Noticed in the Audio and Video blocks.

When clicking on the "Edit" button in the block toolbar, the button disappears. Depending on the interaction mode (mouse, keyboard) I've noticed different behaviors that I wasn't able to reproduce consistently. Also, not sure if there's a difference between Gutenberg in core (WordPress 5.3-alpha) or the plugin (currently 5.8.0).

Anyways, then the button disappears:

• there's a focus loss: this shouldn't happen as it's a terrible experience for keyboard users and assistive technology users
• there's no way to switch back from the block "placeholder" to the view with the embedded media other than:
  • click on "Insert from URL"
  • the embedded media URL is still there
  • click "Apply"

At this point, the "Edit" button re-appears, sometimes in the same location and sometimes... at the beginning of the toolbar. Couldn't reproduce consistently.

To clarify, I made two animated GIFs. To reproduce, sometimes the disappearing doesn't happen the first time "Edit" is clicked, so try multiple times.

Gutenberg version included in wp trunk 5.3:

Gutenberg plugin 5.8.0:

[afercia]

Related:
#15518 (review)
#15516 (comment)

[afercia]

@draganescu hi! Do I recall correctly you fixed this?

[draganescu]

Hi @afercia it is work in progress. I've been away for the past 2 weeks. I am working on implementing a component that should replace / refactor this whole edit flow thing on all the affected components here:

#16200

[afercia]

Thanks @draganescu !

[swissspidy]

This reminds me of #15641.

[Soean]

We now use the MediaReplaceFlow component in all media related blocks. See #19162