Social block: Odd first experience with the block

[mapk]

Describe the bug
I went to add the Social block and give it a run through, but ran into an odd experience right away. The block dropped me into the inner blocks which highlighted Facebook as the first thing, but I had no idea what to actually do with it. I looked in the sidebar and didn't see any messaging there either. So I went to delete the block, and it didn't delete the Social block, but rather just the inner block.

cc: @jasmussen as you've been involved with this block. If I'm addressing anything already included in your comment here #16897 (comment) , just let me know and we can close this.

Side note: Dropping people into the inner block as the first experience is proving to be confusing according to some of the usability tests I'm running. This could be due to the order of tasks I give them, but the Cover block, for example, drops the user into the inner block. I ask the user to make the Cover block full-width, and the user struggles through this to make the Paragraph/Heading inner block full-width instead of the Cover block itself because they are already focused into the inner block. Anyways, I digress...

To reproduce
Steps to reproduce the behavior:

1. Add the Social block.
2. Look for visual indication of what to do next. I didn't see any.
3. Now try deleting the block.
4. Notice that the "email" icon stays.
5. Now click it... and observe how all the other icons reappear.

Expected behavior
I expect clear visual indicators that tell or guide me to how I enter the appropriate social links.

Screenshots

Desktop (please complete the following information):

• OSX
• Firefox 68
• Gutenberg 6.4+

[jasmussen]

As is, this is intentional insofar as the unselected block is a preview, and the selected block shows additional UI, i.e. the placeholders. However taking this to the extreme, as soon as you insert the social links block, basically all the presets are unconfigured, i.e. when you deselect you'd see an empty space.

For that reason we pre-configured the email block to not be empty, so at least it wouldn't collapse. Another idea Marcus tried was to have instead of the email button, a WordPress button pre-inserted, linking to https://wordpress.org.

Initially we wanted to have it so if all child blocks are unconfigured, they show up even when you deselect the block, and it is only when you configure one or more of the pre inserted ones that these disappear. However this added code complexity to the point where we abandoned that idea, as we wanted this to be a good first example of handling child blocks in a less clunky way.

In the end we decided to go with this, with option to revisit. However we could either revisit the "WordPress is preconfigured", or the "nothing is preconfigured" idea (where everything collapses on deselect). What do you think?

[mapk]

As is, this is intentional insofar as the unselected block is a preview, and the selected block shows additional UI, i.e. the placeholders.

This makes sense, but the grey icons didn't signal as placeholders for me. I had to click on one to realize that I needed to add a URL.

For that reason we pre-configured the email block to not be empty, so at least it wouldn't collapse.

This treatment separation is probably contributing to some of my confusion.

Since we're preselecting the FB icon when adding this block to the document, would it be feasible to also open the URL popover so that it's clear what the next step is? That's the disconnect for me.

The absence of a border on the inner block also left me feeling not quite sure what was being targeted. It does look nice, but didn't convey the information I needed to understand where I was at in the nested path. Because I see the outline of the entire block, I figured that's what I was editing.

Another problem I encountered was this really weird hover inconsistency.

Or even this one below when I have a social icon linked. There's a bit of confusion around why the placeholders are grey in one instance as opposed to colored in another. It doesn't feel right that the hovered state is the "what this could look like" state.

I hope I'm not raining on anyone's parade with these comments. It's a terrific block, and one I can imagine being used frequently. There's just some UX flows that need refinement.

[jasmussen]

I'll take a look at some changes based on this, Monday.

[mkaz]

In the end we decided to go with this, with option to revisit. However we could either revisit the "WordPress is preconfigured", or the "nothing is preconfigured" idea (where everything collapses on deselect). What do you think?

I vote for the WordPress.org link as the pre-configured, or nothing pre-configured starting with just the inserter. The problem with the mailto: is that it ends up inserting an invalid link.

[mkaz]

Since we're preselecting the FB icon when adding this block to the document, would it be feasible to also open the URL popover so that it's clear what the next step is? That's the disconnect for me.

This was the default behavior tried out previously, but ended up causing accessibility issues with being able to tab through the icons.

Discussion here: #16897 (review)

[mapk]

This was the default behavior tried out previously, but ended up causing accessibility issues with being able to tab through the icons.

I see that now. You end up caught in a loop unable to move to the next child block. Oooof.