Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Iterate on social block placeholder #19020

Open
karmatosed opened this issue Dec 9, 2019 · 9 comments
Open

Iterate on social block placeholder #19020

karmatosed opened this issue Dec 9, 2019 · 9 comments

Comments

@karmatosed
Copy link
Member

@karmatosed karmatosed commented Dec 9, 2019

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

image

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:

image

@jasmussen

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Dec 10, 2019

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:

coblocks

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 #17278 and #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 #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.
  • #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

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Dec 26, 2019

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)

Screen Shot 2019-12-26 at 1 02 25 PM

CoBlocks Social Profiles block (initial state)

Screen Shot 2019-12-26 at 1 01 32 PM

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

Screen Shot 2019-12-26 at 1 02 33 PM


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

Screen Shot 2019-12-26 at 1 02 25 PM

Possible solution

social-3 2019-12-26 13_00_31


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

Screen Shot 2019-12-26 at 1 11 14 PM

Possible solution: Remove left-border for nested blocks.

social 2019-12-26 12_47_12

@karmatosed karmatosed changed the title Iteratee on social block placeholder Iterate on social block placeholder Dec 26, 2019
@jasmussen

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Jan 6, 2020

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

This comment has been minimized.

Copy link
Member Author

@karmatosed karmatosed commented Jan 6, 2020

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

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Jan 6, 2020

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:

social links

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

This comment has been minimized.

Copy link
Member Author

@karmatosed karmatosed commented Jan 6, 2020

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

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Jan 6, 2020

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

This comment has been minimized.

Copy link

@paaljoachim paaljoachim commented Jan 13, 2020

Testing the Social Media Block.

Adding the Social Media Block adds the various social icons seen here.
Screen Shot 2020-01-13 at 02 06 10

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.

Screen Shot 2020-01-13 at 02 10 44

Deselecting the block I see the Facebook icon.
Screen Shot 2020-01-13 at 02 09 52

Checking the frontend I see this:
Screen Shot 2020-01-13 at 02 13 54
(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

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Jan 13, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.