Social Links: Update Placeholder experience when first inserting Social Links #25941
Conversation
mkaz
added
the
[Block] Social
|
Size Change: -2.01 kB (0%) Total Size: 1.19 MB
ℹ️ View Unchanged
|
mkaz
force-pushed
the
try/19020-social-placeholder
branch
from
b995cb8
to
74bac8b
Compare
|
This is what I see:
This is a good feature! It can benefit the navigation menu and buttons blocks also. It definitely needs a different design :D — ideally something that looks like social links. I'll help you with that. But in principle this seems to work well for me. |
|
I've had a moment to reflect on this PR, and I think we have to zoom out for a bit. Right now, when we refer to "Placeholders" in block editor parlance, we think mostly of this:
It's a big white box with text and buttons inside, always 200px tall. But in most cases, this placeholder looks nothing like the end result. The navigation menu is an excellent example of this — if you squint, there's no way to distinguish a nav menu placeholder from an image placeholder, even though they're vastly different. More importantly, the navigation placeholder looks nothing like its own end result. That's the driving force behind this good rethink by @shaunandrews in #23207 (comment):
Instead of using a big box, it provides some handy links to quickly complete the setup state for the block, while at the same time looking just a little bit like the end result. We might be able to get even closer, but this is a good step in the right direction. All of the above was also the driving force behind preinserting a number of icons when you insert it the first time. And in addition to that, to give a feeling of what the end result might look like. Putting that all together — squint and it looks right, keep it simple, don't be a giant white box — perhaps we could do with something as simple as this?
Those colored dots look like the classic social link blobs, but blurred out to indicate they aren't set up. As son as you add a single button, they disappear. Speaking of, the "add" menu looks like this:
I do love how it shows 6 icons and has a search feature. But we need to update the search icon to be this one:
and is there any way we can customize the defaults showing up there? I think there's some frecency going on here, but amazon and behance really don't deserve to be at the top, they are just riding on alphabetization here. |
|
By the way, if you dig the above, I can push the code to make the setup state look like the mockup. |
|
@jasmussen I do like the above 👍 As far as the inserter and the icon, it is still using the common InnerBlocks inserter, so it will require further modifications to allow customizing the icon and other aspects (sort order). We can push those forward in other PRs if think it it is the right approach. |
This prevents the icons disappearing when losing focus and the URL is not set. This causes is a little unexpected and is not how other placeholders behave, for example the image placeholder still shows without an image set and the block not selected.
The placeholder prop can hold a component that will show in front of the appender if specified and there are no blocks in the block list. Added to help Social Links render a better placeholder experience.
|
Let's feel it, and if the blur doesn't work I'll try one where I recreate 4 dummy icons and make them semi transparent. |
The placeholder prop accepts a component to render if there are no blocks. The component is shown inline with the appender. This was added to support a better experience for Social Links placeholder.
Improve the default experience for social links when no links are specified. This uses the new placeholder prop in InnerBlocks and BlockList.
mkaz
force-pushed
the
try/19020-social-placeholder
branch
from
74bac8b
to
9312add
Compare
|
@jasmussen I just pushed up a change using blurred placeholder. Take a look and let me know if that is what you are thinking. Here's it in action:
|
|
I have a very strong (negative) reaction to the blurred blobs, but its likely just personal preference. That said, I also have a concern that the blur would look really strange on some site designs with image/color backgrounds; Its also not very representative of the actual output of the rendered block. |
|
@shaunandrews Thanks for the thoughts, I'm fine with altering the blur if it doesn't work. As far as design, this would only ever show in the editor, are you still thinking of design conflicts in that context? As far as end result, comparing it to other placeholders like image, shortcodes, etc... none of those look like the end published result when they have not been filled with content. The goal with the Social Link placeholder is just to fill the space with something, so it's not just the [+] inserter in that space when no icons have been picked. The current solution uses actual icons that requires removing and confuses people, so trying for something. Do you think none blurred circles of color/gray would work better? |
|
Yep, from the blur in #25941 (comment) I thought it was worth trying, because I had this idea that blur might be a way to make skeleton indicators more "real", and potentially use it for placeholders also:
But it isn't working here as I had hoped. I'll push some tweaks to this. |
Yes, specifically in the context of the site editor as well as within patterns with background colors or images. I bet just the plain circle shapes (not blurred) would work just as well, and be more representative of the intended result. |
Yep, that's the alternative I was going for, possibly semi transparent. I'll also use fb/twitter/insta colors. |
|
I pushed some polish. Here's how it looks now:
I think this is worth trying! What do you think? |
|
This works well for me, definitely an improvement to the overall placeholder experience. |
|
I like it better than the blurring. It's a little strange that clicking on the empty shapes doesn't do anything, but I realize that starts to creep back towards the current behavior. -- The empty shapes only makes sense if the block is using the pill or circle style; If you set the default to "Logos Only" this'll break:
(The placeholder shapes don't change when I choose the "Pill Shape" style, but I figured that's just an implementation detail that hasn't been sorted yet.) -- Perhaps unrelated to this PR, the focus shapes are really strange and clicking on the "Browse All" button at the bottom of the inserter unselects the block. |
|
Solid feedback as usual. I tweaked the setup state based on variations. Default:
Icon only:
Pills:
|
|
@jasmussen Works well 👍 |
|
👍 |
Description
Adds a new placeholder prop to InnerBlocks and BlockList to render in front of the appender if specified and no blocks.
An example component is passed in with the Social Links to display when no links have been added. The template of default links is also removed. Combined this is intended to provide a better experience than the appearing/disappearing links that require to be removed, while still be clearing what is happening.
@jasmussen Can you try this out, I have a temp placeholder there that can use some better style and improvement.
Fixes: #19020
Fixes: #21700
How has this been tested?
Create a block with social links
Apply the change and confirm nothing breaks with existing block.
When adding new social confirm the placeholder shows and not the old default list.
Confirm the placeholder is removed when a new link is added
Confirm the placeholder does not break or effect other InnerBlocks (columns is a good test)
Screenshots
Types of changes
Checklist: