Adds TikTok Icon to Social Links Block

[mattxwang]

Hi there,

This is a small PR that adds a TikTok Icon to the Social Links Block, requested in #21701. I added a SVG icon to packages/block-library/src/social-link/icons and in packages/block-library/src/social-link/index.php, added a class .wp-social-link-tiktok, and added fixtures for block save tests.

As a small note, from a quick Google it doesn't seem like TikTok has official branding resources or guidelines (strange for such a popular service). So, I sourced a free-use logo from Flaticon (cited in the comments), and picked a simple black and white for the icon colour. If anybody has suggestions on what I should do instead, I'd be glad to edit the PR.

This closes #21701.

How has this been tested?

To test the changes, I created a fresh install of the latest stable Wordpress, a copy of Gutenberg, and tested it locally in my browser (Chrome & Firefox). In addition, this does not introduce any new warnings/errors with npm run lint or npm run test.

Screenshots

Here is a screenshot of the new icon, both in the block editor lookup panel and on a page:

And this is what the icon looks like when it's hovered:

Types of changes

New feature: adds TikTok Icon.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[carolinan]

The content license of Flaticon and freepik is not compatible with GPL; and not even with the "four freedoms". This icon can not be included in WordPress or Gutenberg.

You can read the limitations on usage and distribution here:
https://www.freepikcompany.com/legal#nav-flaticon

[mattxwang]

The content license of Flaticon and freepik is not compatible with GPL; and not even with the "four freedoms". This icon can not be included in WordPress or Gutenberg.

Ah, that's 100% my fault - I must've missed this when I originally looked up the icon. Thank you for catching this @carolinan!

Hm, after a bit of searching it looks like even Wikipedia can't find a free-use version of the logo, so they have instead used the U.S. fair use for non-free media. Any thoughts/advice on what we should do (for example, contact TikTok? I don't have much experience in the matter!

[talldan]

@jasmussen I know you worked on the social block. Any ideas on how to proceed with finding a compliant version of the TiKTok logo?

I also noticed the embed block for TikTok doesn't have a logo, so that'd be another good place to add the logo.

[jasmussen]

Thank you for the PR, and thank you for the ping!

This conversation touches on a fundamental issue with showing social logos in the first place, not just the Social Links block, but indeed with Dashicons and other projects:

Every single logo is not only copyright their respecive companies, but subject to the brand guidelines for each of these. None of them are GPL.

Most of these provide usage guidelines that suggest using these logos for things like social logos is permitted. This is from Facebook's brand guidelines, for example:

Only use the "f" Logo to promote your presence on Facebook. Don't use the Facebook wordmark, which is the corporate identity that refers to Facebook Inc.

That seems to suggest it's okay to use the logo for social links and embeds and such. But even then, although the Social Links block does try to adhere to brand guidelines, it does come with presets that allow users to break them. This brand guideline is very clear, for example:

Here's our default usage:

That seems within the boundaries, good! But even then, often WordPress themes choose to desaturate these, show them without color. This isn't enforced in theme guidelines, but is technically against Facebook's brand guidelines.

Now expand that to all the logos used, and you end up with a set of unique usage guidelines, one for each logo, and often they conflict.

Again, none of the logos are GPL. Technically, flaticon does not have the right to include the TikTok logo in their icon set and then relicense it under their own terms. That doesn't give us the right to use the logo either — it's just to say that using logos in WordPress software is not as clear cut as it seems. These aren't icons.

So, where do we go from here? We obviously already have some logos in both Social Links, embeds and other things. I tend to think WordPress can proceed according to two principles:

1. Go to the original source, read the guidelines, and follow them as best possible. If they aren't available, at least try and find the logo from an official source. Here's a TikTok SVG.
2. Follow the general advice from this classic post: Themes are GPL, too. It roughly states that things such as image assets aren't required to be GPL (though for the eloquent reasons @carolinan mentions ideally they should be).

Those two principles are what helped make the Social Links block what it is today.

But as you can see, it's not simple, and one of the things I would personally like to see is WordPress doing less curation of logos overall, and leaving more of this to plugin territory. Keeping up with brand guidelines as they change, updating logos as they are redesigned, and generally trying to keep track of licenses across a plethora of icons, feels like a burden the brands themselves should lift, at the very least not WordPress. Most of all, I dislike the idea that we should be arbiters of which logos get added, and which don't.

That's one of the reasons I would hope that we can get #19041 going soon. That ticket enables any plugin to extend the Social Links block with their own icons, relieving WordPress of the burden of all but a core few. This will enable a theme or a plugin to add any number of custom icons. We might even want to create a user-facing option, so a user can paste in an SVG and choose a color.

For all the reasons outlined above, I'm skeptical of us adding and maintaining any additional icons to the Social Links block. This is a personal opinion.

I'm going to add a "needs decision" label to this one, for that reason.

[carolinan]

Great write up, even if I choke every time someone says images are not normally covered by GPL.
They are not, but Matt has decided and repeatedly expressed that all assets must be GPL too.
(Now if we did not have that 100% rule in the WordPress project, my role as a volunteer reviewer would not have to consist of license complaints.... )

The long process would be to have a legal team contact their legal team. But that did not seem to work out for the material icons in Twenty Nineteen. If that has been resolved, we have not been told.

[mattxwang]

Thank you all for the writeups, I've definitely learned a lot from this conversation!

In the meantime, is there anything I can do to help? I recognize that this is my first PR to gutenberg, so I'm not sure what's in scope for me to do. For example, would it be helpful to have me email TikTok's support team? Or would that be something that a maintainer or Automattic would do?

In addition, if this seems unresolvable, I don't mind closing this PR and trying to tackle another issue instead. Thank you again for all the help!

[jasmussen]

Thank you Matt for your desire to help, it's much appreciated!

We haven't traditionally reached out to social networks in cases like these. I think the gist of my notes on GPL, copyright and brand guidelines is that while adding a single icon for a social network seems trivial, in fact it's quite complex.

I would also note that my opinion that WordPress as a project should be careful in how many logos we carry, is a personal opinion. I'm happy to defer to some of the project leads, if they say "it's fine" — after all, adding logos is something that's gone on with WordPress and the Dashicons project for years. So I added the "needs decision" label to encourage processing.

In the mean time, #19041 may be technically difficult to solve, but it is a 100% surefire way forward. It would, as noted, enable anyone to add any icon they like, regardless of what WordPress chooses to carry, making it trivial to scale. If you feel able to tackle that one, it would be amazing.

[nerrad]

@jasmussen I think you encapsulated the trickiness of adding logos in your comment really well.

From my perspective (and to add a "vote" to support a decision) I support taking a stance on not adding any more social icons to the block and instead build in support for plugins (or users) to add their own icons (as proposed by #19041).

@malsf21 thanks very much for picking up this issue to work on and your willingness to contribute. It's much appreciated! If anything you've created space for the team to iron out what approach we should take with this particular block, so it's been very helpful.

[pesieminski]

I understand the concerns, and also the desire to be as 100% GPL as possible, for anything we include in WordPress.

This is just my two cents on these questions, from the POV of working on the legal aspects of both GPL and trademark (which is what covers the company logos/icons). I hope this is useful for the discussion. A little long, but I got on a roll and care a lot about these topics.

TLDR: I don't think it's possible for a trademarked logo to be "100% GPL", but there are good reasons for this which I think we can all accept and are consistent with our values. Using the logos/icons as we're doing here is low risk legally speaking and should be OK, without needing to negotiate any special rights from the companies. Using a particular library or set of icons is a different question - they might have their own licenses which are not GPL compatible. Those licenses are separate from what I'm talking about here which is more general on the question of using other companies' logos within WordPress.

Here's some background on trademark law, the GPL, and how I think it fits together.

The main point of a trademark is to identify the source of.. something. A can of beer, a golf club, a piece of software. When you see a logo you recognize, you should be confident that it was made by the person or company that you think of when you saw the logo. This is idea is very important to us as consumers in general, and especially so when it comes to open source software. If a piece of code is free and available almost anywhere, it is more important than usual to know who wrote it, and who is standing behind to support it.

So, if the fundamental principle of a trademark is to identify the unique source of something, by its nature, a trademark is "proprietary".

How does this idea intersect with the GPL? It's easy to say that the GPL is a software license (copyright law), and is meant to cover code, and a trademark is separate and covered by another set of rules, completely. The two can coexist and maybe conflict sometimes. While this is true, I think it's a cop out. We are rightfully concerned, for example, about software patents that reduce user freedoms - even though this is not an aspect of the software's license itself.

The four freedoms of the GPL start with Freedom 0 - the freedom to run the program, "for any purpose".

For any purpose.

Including a purpose that is trademark infringement? Well... technically, if you want to be "100% GPL".. yeah.

But. At the same time, I think we can all recognize, accept, and agree with the idea that trademarks, properly used, are a good and useful thing. We use them across our own community to build brands, reputations, and a clear understanding of who made what. WordPress itself has its own guidelines for using the WordPress logo, and enforces those against those who might use it in a confusing way.

Trademark law developed along similar lines - we can't be prevented from saying the name of another company or brand, or from using their logo EVER. The legal rules of trademark use are meant to prevent end user confusion. Don't impersonate someone else's brand, or pretend you are affiliated with them if you aren't.

It's pretty simple in concept, and consistent with our values. Trademarks get a bad rap, though. Mostly because a lot of big companies are overly aggressive about enforcing trademarks. We work really hard at Automattic to make sure people understand the difference between "good" trademark enforcement and "bad".

If done right, there's a lot of room for wide use of trademarks, logos, etc... without breaking any rules.

Practically what does this mean? My opinion is that trademarks can be used in WordPress in a "95% GPL" way, with the 5% exceptions being cases that we can agree are usefully out of bounds. In other words - they're not allowed because they cause confusion with the person who really owns the trademark, and this is a good reason.

In this case: there aren't any legal rules that prevent us from using the logos of other networks to identify them. The icons are simply shorthand for "click here to post this to Facebook". In the context of how we use them within WordPress, no one thinks that we ARE Facebook, or that we're saying we're affiliated with them because the logo is in the WordPress software. We're not doing anything that is against the rights that trademarks are meant to protect. If anything we are helping to promote the brands and make them more accessible to a wider audience. They want this to happen and this is why many of them make their logos available, albeit with guidelines for use.

Because of this, I would agree with @jasmussen 's suggestion to be courteous to our peers across the internet by using approved, up to date versions of their logos wherever possible. If we do this, there's very little legal risk in using the logos the way that we use them, or the way others might use them in slightly modified form (changing colors slightly, etc). No need to get any special permissions from any companies to use their logos this way. The brand guidelines are also helpful to observe, and are a useful shorthand for what is a confusing use and what is not - though these are not hard and fast legal rules.

Whose job is it to curate these logos, or decide whether they go into core or a plugin... That question is beyond the jurisdiction of this court. :)

[jasmussen]

Thank you Paul, your write-up should help form an excellent basis on which to decide on how to proceed!

[mkaz]

TikTok icon added in #26118