Social Links: add X

[jeherve]

Fixes #53223

What?

This adds a new Social Link icon, for the X service (aka Twitter).

Why?

X remains a popular service, and some folks may want to use the new service name and icon on their site.

How?

It doesn't replace the existing Twitter icon, as discussed in the issue above. Instead, it adds a new icon that can be found when searching for X or for Twitter.

Testing Instructions

1. Go to Appearance > Site Editor
2. Insert a Social Icons block
3. In that block, search for "X" or "Twitter", and try the new icon that pops up.

Testing Instructions for Keyboard

This PR doesn't change keyboard interactions.

Screenshots or screencast

[carlomanf]

The old one still shows in the search results. It should be hidden, or users might think they need to add both.

[t-hamano]

Thanks for submitting the PR, @jeherve!

I think the code is mostly fine, but I have two points I would like to discuss.

• The question is whether the slug should be x. For example, if we use x-twitter, twitter-x, etc., the keyword itself in the block variation will be unnecessary. Incidentally, x-twitter is used in Font Awesome.
• I would like to ping @WordPress/gutenberg-design to confirm the design of the SVG icon 🙏

[jameskoster]

Icon looks fine to me.

Not entirely sure I understand the reasoning behind keeping the old block / icon... Anyone using the Twitter block will need to manually switch over which seems a bit of a pain. Perhaps there's a reason that someone would want to use the old logo that I'm not seeing?

[jeherve]

Thanks for the feedback. I've pushed the changes you suggested.

• The question is whether the slug should be x. For example, if we use x-twitter, twitter-x, etc., the keyword itself in the block variation will be unnecessary. Incidentally, x-twitter is used in Font Awesome.

We definitely can, although it seems that would be a first with social links here. I'll let someone else decide if that's okay. Just let me know!

Not entirely sure I understand the reasoning behind keeping the old block / icon... Anyone using the Twitter block will need to manually switch over which seems a bit of a pain. Perhaps there's a reason that someone would want to use the old logo that I'm not seeing?

This was discussed here:
#53223 (comment)

I think this was suggested because some folks may not want to use the new name and logo on their sites.

[carlomanf]

Not entirely sure I understand the reasoning behind keeping the old block / icon... Anyone using the Twitter block will need to manually switch over which seems a bit of a pain. Perhaps there's a reason that someone would want to use the old logo that I'm not seeing?

This was discussed here: #53223 (comment)

I think this was suggested because some folks may not want to use the new name and logo on their sites.

The comment you linked to doesn't say anything about what users want to use, it just suggests keeping the old one without giving a reason. I also don't see why someone would object to merely the logo but happily continue to use the service and link to their profile, wouldn't they want to remove the link altogether?

[jeherve]

The comment you linked to doesn't say anything about what users want to use, it just suggests keeping the old one without giving a reason.

I think the key in that comment was this part:

less forceful of a change on our end

I think there can be a few examples where this makes sense:

• I could imagine some folks added the Twitter logo to their site last year, and who haven't made a lot of changes to their site since then. They may not be aware of the recent changes in Twitter's branding and editorial direction, and may be confused if their site starts showing a "X" black symbol from one day to the next.
• They may be aware of the changes, but may want to keep the blue bird icon since that's a logo their visitors may easily recognize.
• They may know about the changes, and may not wish to display the new logo on their site. They may prefer to show that they preferred "old Twitter", for example.

That said, automatically updating everyone to the new logo may make sense as well, I personally do not have any strong opinion for or against.

I also don't see why someone would object to merely the logo but happily continue to use the service and link to their profile, wouldn't they want to remove the link altogether?

That's a good point. If you do not like the new logo or the changes that happened with Twitter in the past few months, maybe you'd be better off removing the link entirely, instead of keeping either a Twitter logo or an X logo. We cannot make that choice for the site owner though.

[carlomanf]

• They may know about the changes, and may not wish to display the new logo on their site. They may prefer to show that they preferred "old Twitter", for example.

I have seen some profiles start using the old Twitter logo as their profile picture, which seems to convey the meaning, but in the social links context, I don't think the intent is clear and it just looks like they are late to update it. I also think this is an extremely small number of users.

• I could imagine some folks added the Twitter logo to their site last year, and who haven't made a lot of changes to their site since then. They may not be aware of the recent changes in Twitter's branding and editorial direction, and may be confused if their site starts showing a "X" black symbol from one day to the next.

While the confusion is plausible, they would figure it out within minutes, so this isn't really a scenario of someone consciously wanting to keep the old logo.

• They may be aware of the changes, but may want to keep the blue bird icon since that's a logo their visitors may easily recognize.

I don't think this is a scenario of someone wanting to keep the old logo permanently, so this might just be an argument to delay the change?

[richtabor]

I think it’s fine to add the X icon alongside the Twitter icon.

I don’t love changing people’s sites right off; but rather give them the choice to use the new icon if they’d like to.

[t-hamano]

Discussions at FontAwesome may be helpful in determining whether to replace existing icons or add new ones; at FontAwesome, it appears that they were eventually added as new icons.

If we add a new one in Gutenberg as well, is it OK to leave the slug as x? Or x-twitter or twitter-x?

[jameskoster]

I don’t love changing people’s sites right off; but rather give them the choice to use the new icon if they’d like to.

I do agree but the problem is; if you maintain dozens of sites, each with multiple instances of the Twitter block, and you just want to use the correct branding then it's going to be a real pain updating them all.

An idea:

1. Add X as a new block for 6.4.
2. Replace Twitter with X for 6.5 and release a "Twitter" block plugin.

This way folks have a way to use the new branding asap, albeit manually. Over time instances of the Twitter block get updated, and folks who need to use the old logo can install a plugin to do so.

[richtabor]

Add X as a new block for 6.4.
Replace Twitter with X for 6.5 and release a "Twitter" block plugin.

Yea, that's probably fine.

[t-hamano]

I noticed a difference in line thickness between the logo published on the brand toolkit page and the logo actually used in the application. I cannot determine which was intended, but this may be addressed later.

Desktop App (thick line)

iPhone App (thick line)

Brand Toolkit Page (thin line)

[ndiego]

This is looking really good, thanks for working on this! Just a small tweak to the logo and a label change, then I think this is good to go. 💪

[ndiego]

Works like a charm. LGTM! 💪

[mikachan]

I just cherry-picked this PR to the release/16.7 branch to get it included in the next release: 0deec5f