Gutenberg: Interactive blocks: Map, Contact Form, Audio, Playlist

[jasmussen]

Here are a stack of new blocks that depict slightly more complex blocks. Working on these blocks raised a few questions that @j-falk also raised in Slack: where does configuration happen? While we have many ideas, there's no place like mockups to hash them out, so here goes.

Map

Empty:

Empty, Hover:

Neutral:

Hover:

Selected:

Caption:

---

Contact Form

Neutral:

Hover:

Selected:

---

Audio Shortcode

Empty:

Empty, Hover:

Neutral:

Hover:

Selected:

Caption:

---

Playlist Shortcode

Empty:

Empty, Hover:

Neutral:

Hover:

Selected:

Caption:

---

Questions

Some issues arise that need discussing:

• What do we do with the type switcher when the block can't be converted into something else, or there isn't yet any compatible block types installed via plugins? Do we still show it as a type indicator?
• It is tempting, like on the Playlist, to show a "Edit Contact Form" button on the block placeholder itself, to open the modal where editing the form will likely happen. Is that a better UI than the edit button on the toolbar?

[youknowriad]

Do you think showing a "preview" of the Contact Form is worth it? I mean, can't we just show the form for adding/editing the fields instead (to avoid having to click on a button to open a modal or something)?

Btw, great work as always @jasmussen

[jasmussen]

Do you think showing a "preview" of the Contact Form is worth it?

Not sure. The contact form is probably not going to be a core block, and so it's more of a "this is what a plugin could add" concept block. It's tricky because should the form be enabled or disabled in this view? How do you select "just the block" (same problem as with an embedded YouTube video, how do you select it without pressing play).

On the flipside to this argument, perhaps the form is disabled until you click into the block. Then it becomes editable right there. I like that.

[joyously]

To avoid "using" the block while editing, perhaps these types of blocks should stay in the mode of data entry, and the control block could have a Preview button. This would help in verifying the inputs, such as comparing two videos that look similar, and selecting and moving the block.

[inhll]

It is tempting, like on the Playlist, to show a "Edit Contact Form" button on the block placeholder itself, to open the modal where editing the form will likely happen. Is that a better UI than the edit button on the toolbar?

I would say the edit button remaining on the toolbar is the best option. Clicking the edit button could pop up a modal to allow form editing in a context that is clearer than having to remove and re-add the block.

[mtias]

Let's create individual issues so we can assign them.

[jasmussen]

Let's create individual issues so we can assign them.

On it.

[jasmussen]

Closing in favor of #803, #804, #805. Contact Form was always meant to be an example of how a plugin could add such a block, not an effort we should pursue.