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.

Sign up for GitHub

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

Jump to bottom

Try: Better social links placeholder. #26953

Merged
merged 2 commits into from
Nov 18, 2020
Merged

Try: Better social links placeholder. #26953

merged 2 commits into from
Nov 18, 2020

Conversation

jasmussen
Copy link
Contributor

As we've explored and polished the social links placeholder to look more like the end result, there was recently some confusion around the dummy icons not being clickable:

Screenshot 2020-11-13 at 09 18 42

This PR changes how the setup state works, so that the "plus" to append is overlaid on the placeholder itself:

after

@jasmussen jasmussen added [Type] Enhancement A suggestion for improvement. [Block] Social Affects the Social Block - used to display Social Media accounts labels Nov 13, 2020
@jasmussen jasmussen self-assigned this Nov 13, 2020
@github-actions
Copy link

github-actions bot commented Nov 13, 2020 •
edited
Loading

Size Change: +251 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/block-library/editor-rtl.css 9.04 kB +122 B (1%)
build/block-library/editor.css 9.04 kB +119 B (1%)
build/block-library/index.js 147 kB +10 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.8 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 664 B 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/index.js 133 kB 0 B
build/block-editor/style-rtl.css 11.3 kB 0 B
build/block-editor/style.css 11.3 kB 0 B
build/block-library/style-rtl.css 8.1 kB 0 B
build/block-library/style.css 8.1 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.87 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48 kB 0 B
build/components/index.js 171 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/compose/index.js 9.95 kB 0 B
build/core-data/index.js 14.8 kB 0 B
build/data-controls/index.js 827 B 0 B
build/data/index.js 8.8 kB 0 B
build/date/index.js 11.2 kB 0 B
build/deprecated/index.js 768 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.92 kB 0 B
build/edit-navigation/index.js 11.2 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.48 kB 0 B
build/edit-post/style.css 6.47 kB 0 B
build/edit-site/index.js 23.2 kB 0 B
build/edit-site/style-rtl.css 3.89 kB 0 B
build/edit-site/style.css 3.89 kB 0 B
build/edit-widgets/index.js 26.4 kB 0 B
build/edit-widgets/style-rtl.css 3.16 kB 0 B
build/edit-widgets/style.css 3.16 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/index.js 42.5 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/element/index.js 4.62 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/index.js 6.86 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keyboard-shortcuts/index.js 2.54 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.81 kB 0 B
build/nux/index.js 3.42 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/rich-text/index.js 13.3 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.05 kB 0 B
build/viewport/index.js 1.86 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@mkaz
Copy link
Member

mkaz commented Nov 13, 2020

This works, but I don't think is addressing the underlying need.

The three blank icons are confusing people, and they think they should be able to click on them and interact.

social-links-placeholder

How about making clicking on the blank icons interactive, the same behavior as the inserter. So when you click any of them it just opens the block inserter and when one is inserted you don't see the blank ones any more?

Thoughts?

To implement we need to create a customer renderAppender for the empty state, should be doable.

An alternative is to use text there and just explain it "Click + to add a social link"

@jasmussen
Copy link
Contributor Author

Good thoughts.

It's important to get this right because the setup state for blocks needs a new approach, one that isn't a white box. And if we can extrapolate a pattern here that works well, we can slowly apply it to additional blocks. Key for that to work is that the pattern is simple and relatively easy to replicate.

Making each of the dots clickable is one good option, though if we do that it also needs some thought as to how that behavior can be made generic and reproducible for other blocks.

Before that, I tried a small CSS patch just to get a feel for it:

  • Only 3 placeholder dots
  • They fade out almost completely when you select the block

placeholder

What do you think?

@mkaz
Copy link
Member

mkaz commented Nov 16, 2020

I like this much better, to me it seems more clear what to do when you click in. 👍

@jasmussen
Copy link
Contributor Author

Should we try as is and then upgrade from there if it needs more?

This was referenced Nov 16, 2020
Merged
Closed
mkaz
mkaz approved these changes Nov 16, 2020
View reviewed changes
Copy link
Member

@mkaz mkaz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 We got tacit approval from @shaunandrews in his comment here

So yes, let's try it out. It is no less confusing 😁

@jasmussen jasmussen merged commit 81edd89 into master Nov 18, 2020
@jasmussen jasmussen deleted the try/polish-social-links branch November 18, 2020 09:39
@github-actions github-actions bot added this to the Gutenberg 9.5 milestone Nov 18, 2020
@zzap zzap mentioned this pull request Jan 27, 2022
Closed
9 tasks
@jsnajdr jsnajdr mentioned this pull request Oct 12, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mkaz mkaz mkaz approved these changes

@shaunandrews shaunandrews Awaiting requested review from shaunandrews

Assignees

@jasmussen jasmussen

Labels
[Block] Social Affects the Social Block - used to display Social Media accounts [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
Gutenberg 9.5
Development

Successfully merging this pull request may close these issues.
2 participants
@jasmussen @mkaz