Embed Icons: New icons for different types of embeds

[jasmussen]

In the Gutenberg editor, we are creating embed aliases for every oembed WordPress supports. There are a lot of them:

Don't worry, these embeds will get a separate tab in the inserter (see WordPress/gutenberg#1325) — they are mostly there so that you can search. This helps fix the "mystery meat embed discovery" issue. Did you know you can embed a WordPress post into a WordPress post? I sure didn't. I know now. Yo dawg.

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, which is why for Gridicons we have a strict no logos rule (and put all logos into a separate set instead).

How about we create multiple embed icons. One that is an absolutely generic embed, and then multiple specific embeds, like "video embed", "post embed", things like that? Here's a quick brainstorm:

• Every icon should probably have the same silhuette. Like a horizontal square, which is the usual shape of an embed.
• The generic embed could be this silhuette, with a tiny code bracket and some sort of media icon
• Video embed could be the silhuette with a play button (kind of like the current generic embed)
• Audio embed: same as above but with musical note
• Photo embed: same as above but with photo
• Gallery embed: same as above but with gallery
• Post embed: same as above, but with pin/post icon
• "Widget" embed (like polldaddy, slideshare, other embeds that adds features to your site): silhuette but perhaps with a cog inside?

CC: @TheTracyL @field2 @folletto

[folletto]

Issue Title mentions "embed"
Issue Body refers to "oembed"

Just to be clear, we are exclusively referring to "oembeds" right?

Assuming yes...

---

1. Meta consideration: if the icons are all grouped in the same tab, I think that giving them all the same "silhouette" might be an unnecessary repetition, as they would be all grouped, and all together, so it would be a tab with only that silhouette, giving no advantage to the use of the silhouette. However, if the icon is meant to be used elsewhere too where it gets mixed with other kinds of embeds, then I think it makes sense to have a basic silhouette to differentiate them from the rest.
2. Totally agreed on the incremental nature of the icons: basic icon, that gets a higher specificity the more it's known about the type of embed.
3. I'd probably differentiate more the "Widget" ones. If we use the silhouette idea, might be something like a double bordered silhouette, and then inside any icon, or other ideas. The cog would work too but only if we can keep that for all widgets regardless (again both meant as a standardization technique)

---

Question

I recall there's inside registerBlockType the use of icon (ref) as a parameter. Are we conidering a pure SVG code can be passed there, thus allowing components to specify their own icon without a need to insert it every time to Dashicons?

[jasmussen]

Yes, oembed. 3rd parties can create their own non-oembed-blocks if they like.

I recall there's inside registerBlockType the use of icon (ref) as a parameter. Are we conidering a pure SVG code can be passed there, thus allowing components to specify their own icon without a need to insert it every time to Dashicons?

I seem to recall that should work, yes, but I'm not entirely sure. It should work. Maybe worth opening a ticket?

All your thoughts here are good. On this one:

I think that giving them all the same "silhouette" might be an unnecessary repetition

Good point. But is there another way we can indicate relationship here? Like if the generic embed has that standard roundrect with media & brackets icon, can we reuse this in a small way on the subsequent specific oembeds? Like perhaps a little brackets roundrect icon in the corner? Or is there simply not room?

[folletto]

Good point. But is there another way we can indicate relationship here? Like if the generic embed has that standard roundrect with media & brackets icon, can we reuse this in a small way on the subsequent specific oembeds? Like perhaps a little brackets roundrect icon in the corner? Or is there simply not room?

My question is more: if they show only in a tab with other Oembeds and nothing else, do we need to mark them visually in a coordinated way? I'm not sure right now as I don't have full idea of the uses of these icons. If they are always shown grouped together and never mixed with other block types in lists, then I think we can safely decide to not "mark" them in coordinated way, to get more space to express the icon, thus more clarity.

If they are meant to be mixed, then I'd favor strongly to mark them in some coordinated way. And I think your square idea works well, even if I'd probably suggest to try to do a "hollow" square, not filled, and see how it looks like (ligther, allows easier reuse).

Bonus: as we are using SVG as sources too now, we might even mark the border with a class and color it independently... ;)

[TheTracyL]

I think it would be helpful if we met as a team about this. Can we schedule a time in #design-dashicons to make a plan? @jasmussen @folletto @field2?

[jasmussen]

Sure. What's a good time?

[field2]

I'm open any time EST this week.

…

On Mon, Jun 26, 2017 at 4:14 AM, Joen Asmussen ***@***.***> wrote: Sure. What's a good time? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#203 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABlIlL4-szfD_s8gcikatABfmN61Agmjks5sH2h7gaJpZM4OAnIi> .

-- Ben Dunkle 716-289-6814 ben@field2.com field2.com @empireoflight (WordPress, Twitter, Dribbble)

[jwold]

I'm interested in attending the meeting if it works for my schedule. Subscribed to this ticket to followup. Love designing icons! :)

[field2]

We could revive the weekly #design-dashicons meetings at 7pm Friday UTC. That's probably not a good time for everyone, however. What about Friday at 3pm UTC?

[jwold]

Friday at 3:00pm UTC (I think that's 7:00am PST) would work for me to meet, at least a few times! :)

[jasmussen]

Friday isn't ideal for me, but I can make 3pm utc.

[folletto]

I should be able to join too.

[field2]

This is ready to merge into the master branch. Can someone handle this? I'm not sure how to resolve conflicts between the last PR and this one...

[jasmussen]

Thanks, Ben, I'll do a rebase and merge tomorrow.

[folletto]

Did #239 also close this one, or are we keeping this open to track a more extensive list?

[jasmussen]

Sorry, forgot this one. Yeah we can close it, thanks 👍