Consider changing embed blocks icons

[maddisondesigns]

Issue Overview

The icons for all the Embed blocks are meaningless, way too tiny, and too hard to read. Not only that, half the icons are identical. You would expect all the social media icons to have their respective icons. Why does the Twitter embed not have a twitter icon!? Same for Facebook, Instagram etc... Instead it has an icon of a pin and two angled brackets. A typical user is not going to know what that's supposed to represent. I don't even know what that's supposed to represent. Icons should be distinctive, easy to read and represent what function the button/link is performing.

Steps to Reproduce (for bugs)

1. Edit a page, click the Insert Block icons and switch to the Embed tab

Expected Behavior

I should be able to tell at quick glance, and without even reading the text, what each icon represents

Current Behavior

Icons are meaningless as well as confusing, and very hard to read as they're so tiny

Possible Solution

Redesign icons so they're more meaningful. Make every icon Different. Increase size of every icon.

Related Issues and/or PRs

3708

Firefox Quantum 57.0 Gutenberg Version 1.8.1 macOS Sierra 10.12.1

[jasmussen]

In https://github.com/WordPress/dashicons/issues/203 we discussed the situation, which led to those embed icons.

There are a number of meta-issues that lead to this:

1. Dashicons are 20x20px — that's a small canvas to draw on.
2. WordPress has an embed whitelist that includes all those embed services, and Gutenberg simply surfaces them.

Because there are so many, we decided not to go with logos for these, especially since they are just aliases for the generic embed block. As such we decided to go with embed categories instead of having to maintain a list of logos for that many services, that would need to be kept up to date with redesigns.

I do agree icons could be bigger and better, absolutely. Given the canvas footprint of Dashicons, though, that's not an easy task — they can be scaled to 1.5x without being blurred, i.e. 30px:

But that's not great either.

Another option is to create a separate set of icons just for showing in the inserter, which is certainly an option. We have to keep in mind the extra work for plugins devs, to have to provide multiple sizes of icons in such a situation.

In the end there's no easy fix here. Could definitely use improvement.

[maddisondesigns]

Sorry, but that first option isn't a good enough solution. Just because Dashicons doesn't currently have icons for all the different services, isn't a good enough reason not to put them in. If WordPress is going to continue to use Dashicons, then Dashicons needs to improve and add an icon for each social service.

In WordPress/dashicons#203 you say

However this is a lot of logos, and as we add oembeds in the future, even more will come. Keeping and maintaining logos in an icon set like this is a losing game

Once all the icons are created for all the existing social services, maintaining them is hardly a losing game. Large companies, like most of these existing services, are rarely going to change their logo. The number of WordPress oEmbeds that are added each year, are miniscule. In the last 5 years (going back to WP 3.5 in 2012), there's been approximately 20 oEmbeds added. That's 4 per year, on average, and each year there were less and less added. There's been 1 oEmbed added since WP 4.5, back in early 2016. So, to say that they would be hard to maintain, I think is misleading.

Dashicons aren't just 20x20px. You're using the SVG versions. There is so much whitepace around those block icons at the moment, they could be quite easily be increased in size by another 10px without making it looked squashed. If FontAwesome has no issues with creating clear brand icons at small sizes, then there shuold be no excuse for Dashicons either.

Having icons that don't acutally mean anything, literally makes them useless, so why bother having them at all? As leading Usability Expert, Jakob Nielsen states;

In addition to conveying brand personality through color and style, icons must first and foremost communicate meaning in a graphical user interface. Icons are, by definition, a visual representation of an object, action, or idea. If that object, action, or idea is not immediately clear to users, the icon is reduced to mere eye candy — confusing, frustrating, eye candy — and to visual noise that hinders people from completing a task.

The icons currently in use at the moment, provide no benefit whasoever in providing a visual aid as to what functionality each provides. If you removed the text from beneath each icon, you would have absolutely no idea what each one represented.

[DevinWalker]

Quick Concepts

I believe it's important that, if we continue to use icons for each blog, that each block's icon be properly representative of its functionality. The embeds currently break this rule and @maddisondesigns brings up some good counter-points to the argument of not having individual icons for the embeds.

To move things along I decided to showcase what it would look like to have icons for the blocks. For this, I used font awesome icons.

Current icon size (20x20)

Larger Icon Size (30x30)

[michealengland]

Possible Alternative Idea

Just some outside of the box thinking on an alternative idea. I agree that it would be difficult to constantly follow every branding guideline for each item. However, introducing another dependency such as Font Awesome may not be the best idea either.

Embed URLs Test

After testing out embed blocks I've found that no matter which embed block is used, the block will automatically display the embed. For example if I paste an Instagram URL into the Twitter Embed the block converts to Instagram automatically. I found this to be true on other blocks as well and haven't found a case yet where this wasn't true.

Possible Solution

I could be wrong, but do we really need so many embed blocks when one would do the job? What if instead we just made one really nice block with a great icon. Embed support overtime will likely grow and by using one we wouldn't have to worry about updating and managing icons for each individual URL.

[maddisondesigns]

I wasn't actually suggesting to use FontAwesome, I was just using it as a comparison. Likewise, I don't think Devin was suggesting to use it either. WP currently uses Dashicons, so it should be up to Dashicons to include the various social platforms.

With that said though, I do agree that it's ridiculous that there's so many different embed blocks. There should be just one Embed block, that allows you to embed any supported url.

[michealengland]

I didn't mean to imply that anyone was suggesting to use it Font Awesome specifically. Just that the idea of an additional icon font would introduce another dependency.

Although, I do like the presented by @DevinWalker because it feels natural when looking at it.

Has anyone seen any reason as to why there are so many embed blocks instead of one? I can't remember if the earlier version of Gutenberg had only one block or has always had many. I'll do some looking around and report back if I find something helpful.

[DevinWalker]

I'm not suggesting Gutenberg includes FontAwesome. It would be nice to have one embed block that displays when someone types in "Facebook", or "Insta..." whatever network they're looking for in the quick find.

[karmatosed]

I think for now let's close this. We have now a 3 column spacing on the icons to respond to all devices better. Let's revisit if we get testing feedback from usability tests that the target isn't working - right now we are not.

[maddisondesigns]

@karmatosed Can you please reopen this. It's not just about the spacing. If you read my initial issue that I raised you'll see that it was primarily about the icons. They literally mean nothing at the moment and icons that don't reflect anything meaningful are basically pointless.

[karmatosed]

I still don't feel we have signs in testing that the icons also are an issue. I would love if you want to do specific testing to revisit this with evidence. Right now, I am not convinced we have that from users. Just because something is close if we get evidence we can reopen. Maybe the WordCamp US testing will bring that to us.

[JJJ]

These icons feel like placeholders to me. It would feel more natural to have service icons than generic associations that aren't surfaced anywhere else in the UI.

Just because Dashicons doesn't currently have icons for all the different services, isn't a good enough reason not to put them in. If WordPress is going to continue to use Dashicons, then Dashicons needs to improve and add an icon for each social service.

I'll second this.

I get there are many reasons for WordPress (and Dashicons) not to commit the rest of the world into including third-party service icons forever when/where they aren't really necessary. And deciding exactly which services to include (and why) is rarely uncontentious, and issues in the Font Awesome GitHub repository are a good example of that.

All of that said, I feel it is unintentionally user-hostile not to include service icons. Users who want to quickly include a Twitter card expect to find a Twitter icon at a glance, not a thumbtack in a rectangle. It's arguably more confusing to include an unexpected icon with text, than it is to omit the icon entirely and only show the service name alone.

[JJJ]

If there are issues with adding service icons into the Dashicons library, we could attempt to gather the favicons from supported services and store them in a transient, but fallback to what we have now when a favicon can't be found?

---

Tangent: I'm not confident if there is another more widely adoptable icon standard (other than Favicons) that would be better optimized for this use case, and (now that I'm typing this) I'm a little surprised a standard hasn't emerged for websites to supply their own SVG based monotone icon yet.

I'd call them "remoticons".

[sc456a]

Just adding another voice supporting branded icons and a single embed option in this interface. Current design feels like a step backwards.

[runofthemill]

One embed option seems like a good solution; if there's concerns about surfacing the block in search, perhaps meta data could be added so the embed block appears in search results if you search for "Twitter" or "Facebook" or "Vimeo", etc.

[karmatosed]

I have changed the title to focus this issue not on size but on the icons alone. This now can be reopened with that focus.

[Soean]

Can we close this ticket and use #9124 for this issue?

[designsimply]

Closing in favor of consolidating to #9124 which is shorter and has a clear path.