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

[chellycat]

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?

[chellycat]

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

[iamtakashi]

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

[iamtakashi]

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

[chellycat]

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

[iamtakashi]

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?

[iamtakashi]

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

[iandstewart]

In 30212:

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

Props iamtakashi, fixes #30148

[zoonini]

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.

[sixhours]

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.

[iandstewart]

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.

[iamtakashi]

OK, I've heard. Making a patch.

[iandstewart]

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

[iandstewart]

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]

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

[SergeyBiryukov]

In 30828:

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

props iamtakashi.
fixes #30148.