Gutenberg: Add Block: Twitter Embed

[mapk]

Looking at a Twitter embed block. I've mocked up a few states for this, and wanted to open this up for discussion.

Empty Block:
Need an empty field to paste in the Twitter embed HTML.

Neutral:
I imagine the styling would be structured similarly to the blockquote styling.

Hover:

Selected:
When selected the switcher would reveal it as a Twitter embed and not a blockquote. The 'edit' button would be to allow the user to click back to the 'empty' state to edit the HTML embed code or update it.

[jasmussen]

Nice work.

Should we maybe pull it back a bit, though? I think we can just make a thin shell wrapper for the existing oembed feature. That would essentially only require a URL to the tweet in the wrapper, and we just let Twitter show us their standard embed stuff inside an iframe, like this:

[mapk]

I love the idea of just keeping the OG styling from Twitter (and any other embed for that matter). After some discussion, I also realized that our Editor doesn't need the embed code, but can just work from the URL itself. So I made some changes around that as well.

Empty Selected UI

Neutral

Hover UI

Selected UI

[jasmussen]

Looks great!

[kopepasah]

I agree that keeping the standard styles is the best option.

Going to pick up this ticket.

[youknowriad]

I thought @notnownikki was already working on this?

[notnownikki]

I am :)

[notnownikki]

I have it working from just the tweet URL, it used the Twitter embed API to fetch the html. I'm just working on sandboxing the returned html in the editor, and it's pretty much done

[kopepasah]

@notnownikki okay, sounds good. Reassigning.

[notnownikki]

The mockups here are appreciated :) I've been doing more API interaction code than UI work so far (there'll be a reusable <Sandbox> component for us to sandbox third party html in the editor) so the UI thinking here helps me a lot :)

[jasmussen]

I'm closing this in favor of #1034, and because the embed block as inspired by this is in!