Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Iterate on social block placeholder #19020
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:
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.
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)
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
3. The thick left-border
This left-border is obviously too much in the context of nested blocks and feels quite awkward.
Possible solution: Remove left-border for nested blocks.
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.
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.
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.
Testing the Social Media Block.
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.
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.
Checking the frontend I see this:
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.