Embed blocks: Clicking pencil/edit the pencil becomes hidden,

[paaljoachim]

Describe the bug
I am calling this a "bug."
Clicking the pencil/edit icon opens the embed link. The pencil is removed. If one clicks outside of the box it stays on the embed link. Here it should revert to the link if there is one and show the video.

To Reproduce
Steps to reproduce the behavior:

1. Embed a youtube video.
2. Click pencil/edit.
3. Clicking outside the box the embed url box is still there. It should revert to last selected video.
4. Looking for pencil to bring back the embed is not possible. One has to click the embed button.

Expected behavior
Clicking pencil/edit. Should keep the pencil icon visible. As one can click it once to open the embed url link box. Then click it again to close.
When link url box is visible and there is already a link in it. Clicking outside the box the box should revert back to the video.

Screenshots

Video options:

Clicking edit/pencil (the pencil is now hidden):

Desktop (please complete the following information):

• OS: Mac OS 10.13.6
• Browser Chrome and Desktop Server
• Gutenberg version 4.1.1

[youknowriad]

From my understanding there are two patterns with the blocks:

Blocks with a setup state:

Setup state is the first step when you insert the block. you need to first "setup" the block before using it and then preview it properly. You also also have buttons to revert to the setup state. and I think that's the case for the embed block.

Blocks with different selected/unselected states:

There are other blocks where selecting them triggers a different UI where you could tweak the block settings and when you unselect the block once again, you revert the "preview" UI. (We have some of this in the image captions...)

---

I don't think mixing both patterns is a good idea like proposed here but I'll defer to design.

[kjellr]

I think in general, the edit flow for replacing a the source (link, media item, etc) for some blocks is a bit confusing. We're working to improve this for the image block in #14142.

There may be things in there we can borrow for this situation as well.

[sarahmonster]

Ideally, we would redesign this pattern across all the blocks that use it, so we have a consistent pattern throughout, and users don't need to learn a slightly different pattern for the same interaction. Can we widen the scope of #14142 so that it encompasses other blocks, as well?

[afercia]

Note: this happens also with the Audio block, Twitter block, and I guess with other embed blocks too. Updating the issue title.

[mapk]

Looks like this is being worked on in #15516 and #15518.

Once these are merged, we can close this.

[paaljoachim]

This is what it looks like in Gutenberg version 7.7.1.

[paaljoachim]

I believe this issue can be closed. Just reopen if I am mistaken.