Social Links: Improve selected state of empty block #29756
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jasmussen
added
the
[Block] Social
|
Size Change: +230 B (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
|
☝️ I forgot to update the PR title from the work in progress 🙈 |
annezazu
reviewed
Mar 12, 2021
There was a problem hiding this comment.
Thanks so much for spinning this up. I have to agree with your sentiment of adding a helpful starter text as right now this experience for some reason makes me think that I broke something when selecting the block. To go from a colorful array of 3 to suddenly an empty block feels "broken" from a user point of view rather than a placeholder experience (just my two cents). With that said, I do think this iteration is great if it's paired with an intro text as you suggested perhaps if someone clicks away (similar to the navigation block).
link.text.mov
Otherwise, right now, it's really easy to think you're adding a link when you're actually just adding an empty social icon:
link.social.icon.mov
mkaz
force-pushed
the
try/polish-social-links-placeholder
branch
from
0be7dd1
to
b019166
Compare
mkaz
approved these changes
Mar 13, 2021
There was a problem hiding this comment.
This changes look good, and an improvement so 👍
I do like the idea of additional text next to the appender. The good thing is the work is already done in InnerBlocks component to support additional text, this is how we do the current placeholders.
What happens now is we hide the placeholder icons when the block is selected using this CSS defined in editor.scss:
.is-selected > .wp-block-social-links__social-placeholder {
opacity: 0;
width: 0;
}
I stubbed out a PR in #29851 that shows the approach we can use by creating a SelectedPlaceHolder component that is just the text and swap it with the icons when the block isSelected. Take a look, needs design improvement.
|
Let's land this and continue improving. I'll take a look at #29851 next. Thanks. |
This was referenced Mar 16, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Recent conversations and testing of the social links setup state makes it clear that it's not obvious that you need to add the blocks and configure them yourself.
The block features a placeholder skeleton showing blobs that emulate the appearance of 3 social links. This skeleton serves to indicate that a social links block has been inserted.
But it is not yet configured, you have to click it and add blocks yourself, as we have no way to know what social profiles to link to.
This PR changes the behavior so instead of fading out the skeleton indicator partially onselect, it disappears completely, and the appender button instead becomes shaped like the social link, to help indicate the next step.
Before:
After:
The PR here is inspired by designs in #29505, and by conversation in #29366.
A further enhancement would be to show a text-label, "Click the plus to add your first link", in the body of the empty block. But I'll need a little help to make that happen, if we feel it necessary, and I think it might be good to start with this first.
How has this been tested?
You can test with this demo content:
Please test all variations of social links blocks, and all size combinations. Please test with and without blocks inside.
Checklist: