Iterate on social block placeholder

[karmatosed]

Currently, the starting point of social links is a lot visually:

Considering what the other placeholders have, it might be nice to reduce the options and have a starting step. Here, for example, are the columns and navigation ones:

[jasmussen]

Thanks for the ticket. I would definitely welcome help improving this block.

Currently I personally believe the setup state a.k.a. "placeholder" is the biggest issue, and rightly what this ticket should probably focus on.

One design principle that may be worth remembering here is to move closer to what you'll see on the front-end. The gray blob placeholder has no indication what the end result will look like. Imagine a page template that features a gray blob Social Links placeholder towards the end — users will likely mistake it for an Image.

It works better for the Image block and other literally big-footprint blocks, because the gray blob is a callback to desktop publishing placeholders, where you'd draw a big square with a cross in it to indicate to the layouter that this spot should be filled by an image yay big.

Social links, when properly configured, will look like colored candy-beans in a row, which is very unlike the gray blob. This is what has informed the current setup state for Social Links: 6 blocks pre-inserted, one of them configured.

As we explore improving this, I would recommend looking at the Coblocks block called Social Profiles. I would call it the gold standard for a social links block setup state:

Some notes on that:

• Coblocks does not use child blocks, so it’s only got 8 links and they are hardcoded and can’t be rearranged, and it can’t be made plugin extensible
• Social Links uses child blocks, which means blocks can be rearranged, deleted, preinserted, preconfigured, and extended by plugins (once Social Links Block: Allow plugins to change the default links inserted #17278 and Social Links Block: Allow plugins to add additional logos/social links #17277 are addressed).
• It also means that all the clunky UI from child blocks encumber the block: what has focus? How do I delete the block? Those movers are clunky (also Social links: Inconsistent clicking behavior  #18370). What does the left border indicate?

We know that child blocks will be used in many many more places, for example the Quote block or the Gallery block, where paragraphs and images inside would benefit from being direct manipulation and easy to rearrange with separate consistent mover controls.

So it's worth noting that iterating the child block UI, will benefit every block that uses child blocks, including blocks very similar to this one, such as the Navigation block and the Buttons (plural) block.

• Selecting parent blocks is still being improved, most recently with edit/select tools.
• Social links: Inconsistent clicking behavior  #18370 aims to explore better focus rectangles to clearly indicate what actually has focus, and not necessarily paint borders around the child block just because the child block is being edited.
• A detached toolbar can be more contextual and out of the way of the block being edited.
• Mover controls being absorbed by the toolbar can lighten the UI in such a small space.
  Most importantly, any positive change to child blocks benefits every block already using it, including Navigation Block.

[mapk]

I took a look at a few reasons why our Social Links block doesn't present the best initial set up state and came up with some ideas.

1. Initial State

When adding the block to the page, we drop the user right into a nested block which isn't how the CoBlocks version works. This may be the cause to some confusion.

Core Social Links block (initial state)

CoBlocks Social Profiles block (initial state)

Possible solution
If we just showed the parent block instead, this is what you'd see as soon as the block is added:

---

2. Too many options?

At the getgo the Social Links blocks offers 6 options right away. This might be a bit much for an average user.

Current setup state

Possible solution

---

3. The thick left-border

This left-border is obviously too much in the context of nested blocks and feels quite awkward.

Current left-border

Possible solution: Remove left-border for nested blocks.

[jasmussen]

One of the challenges that both this social links block, and indeed the Buttons block has, is to better indicate what has focus. The thick left border does not indicate focus or even "the block is selected", it simply means something inside this block has focus. This is part of what #18667 hopes to address — better indicating what has focus, and reducing non-focus borders to not mistake them for focus.

[karmatosed]

I am going to ask perhaps a question that seems obvious but, do we need to have buttons showing by default? Why can't the placeholder just be to select one social link? I used this over the break and found having multiple ones loaded by default was a lot to experience.

[jasmussen]

Why can't the placeholder just be to select one social link? I used this over the break and found having multiple ones loaded by default was a lot to experience.

To be sure I'm understanding you right — instead of inserting a social links block that is "pre-populated", just insert an empty one so you can use the Add button to add your own, one by one.

We actually did explore this when building, and it's a bit awkward:

Consider the use of this block inside a page or post template, which is likely where it will be used the most, as this is kind of a "set it and forget it" block. In this case, the block would be completely empty and invisible.

By being pre-populated with a few popular networks by default, on the other hand, as soon as you select the block you know what it's about. And similar to the Coblocks version, if you don't fill out any of the pre-populated ones they won't show up in the published version.

I recognize this isn't ideal either, as one can feel the need to remove those empty pre-inserted ones — even if they don't show up when published, the fact the the blocks are there feels wrong! This is the problem Coblocks solved by not using child blocks.

[karmatosed]

Thanks for showing that, yes it is a bit stark to have the +.

Could we just have one them over a row of them? Maybe best guess Twitter or fallback on WordPress? The problem I myself felt it was a lot to remove everything I didn't want when using this.

[jasmussen]

Reducing it to just the WordPress one preinserted could work. It could be interpreted as a fun callback to the "blogroll" which came with the .org link preinserted :)

[paaljoachim]

Testing the Social Media Block.

Adding the Social Media Block adds the various social icons seen here.

The first thing I want to do is click the ones I do not plan on using, and press backspace/delete key to get rid of the icons I do not need. But they do not go away. As they just remain as ghosts. The one Social icon that I do use Facebook shows stronger then the ghosts I want to remove and send to the light.
(I noticed I had to go to the conceptual 3 dots menu and click Remove Block to remove one social icon. Remove block seems a bit weird as to me that would remove the full Social Media Block and not only one social icon. As in a way one social icon is not a block. Ok it is probably a nested block but that is not something the regular user could know or care about.)

Bottom line is that there needs to be a simpler way to quickly remove the social icons not to be used. I also think that the most used social networks should be added by default such as Facebook, LinkedIn and Instagram. Others can manually be added by the user.

Deselecting the block I see the Facebook icon.

Checking the frontend I see this:

(Which likely means that the Gridd theme from @aristath has yet to add a frontend CSS for the social Media icons. I thought that Gutenberg would automatically add the frontend styles in addition to the backend styles.)

Ps
I do think the Social Media Icon Block can gain some inspiration from the link structure in the Buttons Block where one can also add a open in new tab.
See this issue: #18486

ps2.
A sudden inspiration and not well thought out yet.
What about a list in the right sidebar showing the active social icons. One could then remove social icons from the list and they would also be removed from the layout area.

[jasmussen]

The first thing I want to do is click the ones I do not plan on using, and press backspace/delete key to get rid of the icons I do not need. But they do not go away

This is a great thought, and it is a foundational issue to fix. Not just for this block, but for the Butttons block as well, and indeed any other block with child blocks.

I believe that the solution is to more clearly indicate what has focus, and we are trying to do that with #19344. Right now it looks like the social icon has focus, when in fact the URL bar has focus.

[maddisondesigns]

Just wondering why the WordPress icon is added by default to this block? It's supposed to be a "Social Links" block. While there may be a small number of people who want to link to their dot org profiles, the majority of users aren't going to want a WordPress icon and you're just forcing them to have to remove it every single time. If you're going to have some default icons, then they should be Twitter, Facebook, Instagram, LinkedIn & YouTube. They're the most common social platforms used by the majority of people.

Also, the Block Editor is supposed to show the blocks as they appear on the front-end, but these icons are styled differently in the editor and on the front-end. In particular, when hovering over the icons.

In the Block Editor:

On the front-end:

[mapk]

There's been some significant updates with G2. Here's what the intitial state of this block looks like now.

It still has lots to improve on. But seeing as this issue is primarily around the placeholder or initial setup screen, let's just consider that.

1. The blue border indicates that I've got the WordPress icon selected, but the icon in the toolbar is the block's icon. This is a bit confusing.
2. I wonder if it would help to show the unused icons in black and white, and the used icons in color rather than just fading out the unused ones?

Here's how this block currently works, just FYI.

[mkaz]

Going back to @karmatosed idea above. I think exploring removing the placeholders all together might be worth exploring since having them is confusing users also. There was another recent report about removing the default WordPress icon being an extra step and not as easy.

What if there was a placeholder item not as actually icons but a filler with instructions it click to add, something close to the idea of the Image Placeholder? @mtias has same placeholder ideas in this issue that feel related: #19256

[mtias]

The only thing I would change is that once you have any icon set, selecting the block should not show placeholders anymore, just the + if you want to add more. The initial state with a row of icons seems a much better experience than just an empty block. I also find the WordPress one a bit weird as the primary / default item.

[mrwweb]

Just want to echo what others are saying. Having used this block a number of times in the last few days:

• As @maddisondesigns mentions, having the WP icon default first and prefilled is really annoying. I have had to delete it every time I use this block.
• The placeholders are very unwieldy. When placed in a narrow column, they exceed the column width and the later placeholders become unclickable.
• It feels really weird that I can delete a placeholder icon block that doesn't really exist. As @mtias suggests, the very first change I'd make is to remove all placeholders once a first icon is set.
• Because of all the placeholders and the lack of drag-and-drop, moving an icon from the end of the row to first in the list is very inconvenient.
• I'd much prefer a single placeholder icon. Thinking about the way the buttons block works, when I insert social icons, could focus immediately be put into the first placeholder position with all the options expanded for me to select the first icon?

[mrleemon]

Personally, I find the social icon placeholders in the social block very confusing. Do all these icons get added by default? Do I have to delete the ones I don't plan to use?