WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#30148 closed defect (bug) (fixed)

Twenty Fifteen: Non-supported networks in the social menu show up blank on the front end

Reported by: chellycat Owned by: iandstewart
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.1
Component: Bundled Theme Keywords: has-patch commit
Focuses: Cc:
PR Number:

Description

Steps to Reproduce:

  1. In Twenty Fifteen, create a new menu and assign it to the "Social Links Menu" location. Save the menu.
  2. Add a few social links (for example, Twitter, Facebook, Google Plus). Observe how the Genericons appear.
  3. Now, return to your social menu admin, and add a few links to networks that aren't supported in Genericons (such as http://last.fm, http://spotify.com/). Save the menu.
  4. Observe how nothing appears on the front end for these networks, because there is no associated Genericon. However the links DO show up in the source code, and they are clickable in the menu -- they're just invisible.

I can see this being confusing for new users, especially if they don't read the documentation first.

Should there be a default Genericon that always appears in the case of non-supported icons?

Attachments (4)

30148.diff (2.7 KB) - added by iamtakashi 5 years ago.
Add "unapprove" icon as a fallback for non-supported social networks.
30148.1.diff (3.3 KB) - added by iamtakashi 5 years ago.
Add "unapprove" icon as a fallback for non-supported social networks, and mention about in readme.txt
30148.2.diff (2.7 KB) - added by iamtakashi 5 years ago.
30148.3.diff (587 bytes) - added by iamtakashi 5 years ago.
Reflect the change from "no" to "share" icon in readme.txt

Download all attachments as: .zip

Change History (21)

#1 @chellycat
5 years ago

In the ticket description, I suggested adding "Spotify" when I meant "Sound Cloud" - http://soundcloud/ . Spotify is supported and Sound Cloud is not.

Here's a screenshot that shows how the menu looks with unsupported networks (as noted by the gaps): https://cloudup.com/cObk7bCk9tP

#2 @iamtakashi
5 years ago

We could add semi-transparent "unapprove" icon as a fallback.

https://cldup.com/Ioh0_S37Cv.png

@iamtakashi
5 years ago

Add "unapprove" icon as a fallback for non-supported social networks.

#3 @iamtakashi
5 years ago

  • Keywords has-patch added

#4 follow-up: @chellycat
5 years ago

Should we add a line to the README that explains the unsupported icon fallback?

#5 in reply to: ↑ 4 @iamtakashi
5 years ago

Replying to chellycat:

Should we add a line to the README that explains the unsupported icon fallback?

It won't harm. Can you make a patch with 30148.diff?

#6 @iandstewart
5 years ago

  • Keywords needs-refresh added
  • Milestone changed from Awaiting Review to 4.1

@iamtakashi
5 years ago

Add "unapprove" icon as a fallback for non-supported social networks, and mention about in readme.txt

#7 @iandstewart
5 years ago

  • Keywords commit added

#8 @iandstewart
5 years ago

  • Keywords needs-refresh removed

#9 @iandstewart
5 years ago

  • Owner set to iandstewart
  • Resolution set to fixed
  • Status changed from new to closed

In 30212:

Twenty Fifteen: add a fallback icon for social links where we don't have an icon

Props iamtakashi, fixes #30148

#10 @zoonini
5 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

We may want to consider displaying the generic "Share" Genericon instead of the new "unsupported" icon. It's a bit more user-friendly, just in case a site owner really wants to add an unsupported social link.

http://genericons.com/#share

There are other themes that already do this.

Suggested here.

#11 @sixhours
5 years ago

I agree w/ Kathryn on this (and also sorry I didn't see this earlier :))

The Share icon is a more positive fallback -- it still gives the user visual feedback without saying "no, don't use this network" outright.

#12 @iandstewart
5 years ago

Kathryn has me convinced.

So, "no" icon vs "share" icon:

In the worst case scenario where the user adds _only_ unsupported links or mostly unsupported links, in both cases they will learn something visually with some feedback from the default icon (that is, that the fancy logo isn't supported).

In both cases there is the issue that there are icons that can't be differentiated from one another.

But in one case — the "no" icon — there is an icon that might look like a bug too.

As far as how it might affect visitors to the blog in the worst-case scenario both cases have icons that can't be differentiated from one another.

Which leaves us with …

in one case — the "no" icon — there is an icon that might look like a bug too

… which sounds like a defect.

#13 @iamtakashi
5 years ago

OK, I've heard. Making a patch.

@iamtakashi
5 years ago

#14 @iandstewart
5 years ago

With the mail icon and the share icon replacing the "no" icon.

https://cldup.com/ydm0_SecGb.png

#15 @iandstewart
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 30810:

Twenty Fifteen: using an opaque share icon as the default instead of semi-opaque "no" icon that suggests a bug.

Props iamtakashi, fixes #30148.

@iamtakashi
5 years ago

Reflect the change from "no" to "share" icon in readme.txt

#16 @iamtakashi
5 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

#17 @SergeyBiryukov
5 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 30828:

Twenty Fifteen: Reflect the change from "no" to "share" icon in [30810] in readme.txt.

props iamtakashi.
fixes #30148.

Note: See TracTickets for help on using tickets.