Social Links: Add Patreon, Telegram, and Tiktok icons (#26118)

* Social Icons: Adds Patreon, Telegram, Tiktok

Adds the icons for Pateron, Telegram, and Tiktok

Closes: #25008, #24572, #21701

* Add icons to PHP server-side rendering

* Fix TikTok capitalization and copy/paste miss

packages/block-library/src/social-link/icons/index.js

@@ -22,13 +22,16 @@ export * from './mail';
 export * from './mastodon';
 export * from './meetup';
 export * from './medium';
+export * from './patreon';
 export * from './pinterest';
 export * from './pocket';
 export * from './reddit';
 export * from './skype';
 export * from './snapchat';
 export * from './soundcloud';
 export * from './spotify';
+export * from './telegram';
+export * from './tiktok';
 export * from './tumblr';
 export * from './twitch';
 export * from './twitter';

packages/block-library/src/social-link/icons/patreon.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { Circle, Rect, SVG } from '@wordpress/primitives';
+
+export const PatreonIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 569 546" version="1.1">
+		<Circle cx="363" cy="205" r="205" />
+		<Rect width="100" height="546" x="0" y="0" />
+	</SVG>
+);

packages/block-library/src/social-link/icons/tiktok.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const TiktokIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 32 32" version="1.1">
+		<Path d="M16.708 0.027c1.745-0.027 3.48-0.011 5.213-0.027 0.105 2.041 0.839 4.12 2.333 5.563 1.491 1.479 3.6 2.156 5.652 2.385v5.369c-1.923-0.063-3.855-0.463-5.6-1.291-0.76-0.344-1.468-0.787-2.161-1.24-0.009 3.896 0.016 7.787-0.025 11.667-0.104 1.864-0.719 3.719-1.803 5.255-1.744 2.557-4.771 4.224-7.88 4.276-1.907 0.109-3.812-0.411-5.437-1.369-2.693-1.588-4.588-4.495-4.864-7.615-0.032-0.667-0.043-1.333-0.016-1.984 0.24-2.537 1.495-4.964 3.443-6.615 2.208-1.923 5.301-2.839 8.197-2.297 0.027 1.975-0.052 3.948-0.052 5.923-1.323-0.428-2.869-0.308-4.025 0.495-0.844 0.547-1.485 1.385-1.819 2.333-0.276 0.676-0.197 1.427-0.181 2.145 0.317 2.188 2.421 4.027 4.667 3.828 1.489-0.016 2.916-0.88 3.692-2.145 0.251-0.443 0.532-0.896 0.547-1.417 0.131-2.385 0.079-4.76 0.095-7.145 0.011-5.375-0.016-10.735 0.025-16.093z" />
+	</SVG>
+);

packages/block-library/src/social-link/index.php

@@ -190,6 +190,10 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'Medium',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path d="M20.962,7.257l-5.457,8.867l-3.923-6.375l3.126-5.08c0.112-0.182,0.319-0.286,0.527-0.286c0.05,0,0.1,0.008,0.149,0.02 c0.039,0.01,0.078,0.023,0.114,0.041l5.43,2.715l0.006,0.003c0.004,0.002,0.007,0.006,0.011,0.008 C20.971,7.191,20.98,7.227,20.962,7.257z M9.86,8.592v5.783l5.14,2.57L9.86,8.592z M15.772,17.331l4.231,2.115 C20.554,19.721,21,19.529,21,19.016V8.835L15.772,17.331z M8.968,7.178L3.665,4.527C3.569,4.479,3.478,4.456,3.395,4.456 C3.163,4.456,3,4.636,3,4.938v11.45c0,0.306,0.224,0.669,0.498,0.806l4.671,2.335c0.12,0.06,0.234,0.088,0.337,0.088 c0.29,0,0.494-0.225,0.494-0.602V7.231C9,7.208,8.988,7.188,8.968,7.178z"></path></svg>',
 		),
+		'patreon'       => array(
+			'name' => 'Patreon',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 569 546" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><circle cx="363" cy="205" r="205" /><rect width="100" height="546" x="0" y="0" /></svg>',
+		),
 		'pinterest'     => array(
 			'name' => 'Pinterest',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path d="M12.289,2C6.617,2,3.606,5.648,3.606,9.622c0,1.846,1.025,4.146,2.666,4.878c0.25,0.111,0.381,0.063,0.439-0.169 c0.044-0.175,0.267-1.029,0.365-1.428c0.032-0.128,0.017-0.237-0.091-0.362C6.445,11.911,6.01,10.75,6.01,9.668 c0-2.777,2.194-5.464,5.933-5.464c3.23,0,5.49,2.108,5.49,5.122c0,3.407-1.794,5.768-4.13,5.768c-1.291,0-2.257-1.021-1.948-2.277 c0.372-1.495,1.089-3.112,1.089-4.191c0-0.967-0.542-1.775-1.663-1.775c-1.319,0-2.379,1.309-2.379,3.059 c0,1.115,0.394,1.869,0.394,1.869s-1.302,5.279-1.54,6.261c-0.405,1.666,0.053,4.368,0.094,4.604 c0.021,0.126,0.167,0.169,0.25,0.063c0.129-0.165,1.699-2.419,2.142-4.051c0.158-0.59,0.817-2.995,0.817-2.995 c0.43,0.784,1.681,1.446,3.013,1.446c3.963,0,6.822-3.494,6.822-7.833C20.394,5.112,16.849,2,12.289,2"></path></svg>',
@@ -218,6 +222,14 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'Spotify',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10c5.523,0,10-4.477,10-10C22,6.477,17.523,2,12,2 M16.586,16.424 c-0.18,0.295-0.563,0.387-0.857,0.207c-2.348-1.435-5.304-1.76-8.785-0.964c-0.335,0.077-0.67-0.133-0.746-0.469 c-0.077-0.335,0.132-0.67,0.469-0.746c3.809-0.871,7.077-0.496,9.713,1.115C16.673,15.746,16.766,16.13,16.586,16.424 M17.81,13.7 c-0.226,0.367-0.706,0.482-1.072,0.257c-2.687-1.652-6.785-2.131-9.965-1.166C6.36,12.917,5.925,12.684,5.8,12.273 C5.675,11.86,5.908,11.425,6.32,11.3c3.632-1.102,8.147-0.568,11.234,1.328C17.92,12.854,18.035,13.335,17.81,13.7 M17.915,10.865 c-3.223-1.914-8.54-2.09-11.618-1.156C5.804,9.859,5.281,9.58,5.131,9.086C4.982,8.591,5.26,8.069,5.755,7.919 c3.532-1.072,9.404-0.865,13.115,1.338c0.445,0.264,0.59,0.838,0.327,1.282C18.933,10.983,18.359,11.129,17.915,10.865"></path></svg>',
 		),
+		'telegram'      => array(
+			'name' => 'Telegram',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path d="M28.9700376,63.3244248 C47.6273373,55.1957357 60.0684594,49.8368063 66.2934036,47.2476366 C84.0668845,39.855031 87.7600616,38.5708563 90.1672227,38.528 C90.6966555,38.5191258 91.8804274,38.6503351 92.6472251,39.2725385 C93.294694,39.7979149 93.4728387,40.5076237 93.5580865,41.0057381 C93.6433345,41.5038525 93.7494885,42.63857 93.6651041,43.5252052 C92.7019529,53.6451182 88.5344133,78.2034783 86.4142057,89.5379542 C85.5170662,94.3339958 83.750571,95.9420841 82.0403991,96.0994568 C78.3237996,96.4414641 75.5015827,93.6432685 71.9018743,91.2836143 C66.2690414,87.5912212 63.0868492,85.2926952 57.6192095,81.6896017 C51.3004058,77.5256038 55.3966232,75.2369981 58.9976911,71.4967761 C59.9401076,70.5179421 76.3155302,55.6232293 76.6324771,54.2720454 C76.6721165,54.1030573 76.7089039,53.4731496 76.3346867,53.1405352 C75.9604695,52.8079208 75.4081573,52.921662 75.0095933,53.0121213 C74.444641,53.1403447 65.4461175,59.0880351 48.0140228,70.8551922 C45.4598218,72.6091037 43.1463059,73.4636682 41.0734751,73.4188859 C38.7883453,73.3695169 34.3926725,72.1268388 31.1249416,71.0646282 C27.1169366,69.7617838 23.931454,69.0729605 24.208838,66.8603276 C24.3533167,65.7078514 25.9403832,64.5292172 28.9700376,63.3244248 Z" /></svg>',
+		),
+		'tiktok'        => array(
+			'name' => 'TikTok',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path d="M16.708 0.027c1.745-0.027 3.48-0.011 5.213-0.027 0.105 2.041 0.839 4.12 2.333 5.563 1.491 1.479 3.6 2.156 5.652 2.385v5.369c-1.923-0.063-3.855-0.463-5.6-1.291-0.76-0.344-1.468-0.787-2.161-1.24-0.009 3.896 0.016 7.787-0.025 11.667-0.104 1.864-0.719 3.719-1.803 5.255-1.744 2.557-4.771 4.224-7.88 4.276-1.907 0.109-3.812-0.411-5.437-1.369-2.693-1.588-4.588-4.495-4.864-7.615-0.032-0.667-0.043-1.333-0.016-1.984 0.24-2.537 1.495-4.964 3.443-6.615 2.208-1.923 5.301-2.839 8.197-2.297 0.027 1.975-0.052 3.948-0.052 5.923-1.323-0.428-2.869-0.308-4.025 0.495-0.844 0.547-1.485 1.385-1.819 2.333-0.276 0.676-0.197 1.427-0.181 2.145 0.317 2.188 2.421 4.027 4.667 3.828 1.489-0.016 2.916-0.88 3.692-2.145 0.251-0.443 0.532-0.896 0.547-1.417 0.131-2.385 0.079-4.76 0.095-7.145 0.011-5.375-0.016-10.735 0.025-16.093z" /></svg>',
+		),
 		'tumblr'        => array(
 			'name' => 'Tumblr',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path d="M17.04 21.28h-3.28c-2.84 0-4.94-1.37-4.94-5.02v-5.67H6.08V7.5c2.93-.73 4.11-3.3 4.3-5.48h3.01v4.93h3.47v3.65H13.4v4.93c0 1.47.73 2.01 1.92 2.01h1.73v3.75z" /></path></svg>',

packages/block-library/src/social-link/socials-with-bg.scss

@@ -108,6 +108,11 @@
 	color: #fff;
 }
 
+.wp-social-link-patreon {
+	background-color: #ff424d;
+	color: #fff;
+}
+
 .wp-social-link-pinterest {
 	background-color: #e60122;
 	color: #fff;
@@ -144,6 +149,16 @@
 	color: #fff;
 }
 
+.wp-social-link-telegram {
+	background-color: #2aabee;
+	color: #fff;
+}
+
+.wp-social-link-tiktok {
+	background-color: #000;
+	color: #fff;
+}
+
 .wp-social-link-tumblr {
 	background-color: #011835;
 	color: #fff;

packages/block-library/src/social-link/socials-without-bg.scss

@@ -82,6 +82,10 @@
 	color: #f6405f;
 }
 
+.wp-social-link-patreon {
+	color: #ff424d;
+}
+
 .wp-social-link-pinterest {
 	color: #e60122;
 }
@@ -111,6 +115,14 @@
 	color: #1bd760;
 }
 
+.wp-social-link-telegram {
+	color: #2aabee;
+}
+
+.wp-social-link-tiktok {
+	color: #000;
+}
+
 .wp-social-link-tumblr {
 	color: #011835;
 }

packages/block-library/src/social-link/variations.js

@@ -26,13 +26,16 @@ import {
 	MastodonIcon,
 	MeetupIcon,
 	MediumIcon,
+	PatreonIcon,
 	PinterestIcon,
 	PocketIcon,
 	RedditIcon,
 	SkypeIcon,
 	SnapchatIcon,
 	SoundCloudIcon,
 	SpotifyIcon,
+	TelegramIcon,
+	TiktokIcon,
 	TumblrIcon,
 	TwitchIcon,
 	TwitterIcon,
@@ -197,6 +200,12 @@ const variations = [
 		title: 'Medium',
 		icon: MediumIcon,
 	},
+	{
+		name: 'patreon',
+		attributes: { service: 'patreon' },
+		title: 'Patreon',
+		icon: PatreonIcon,
+	},
 	{
 		name: 'pinterest',
 		attributes: { service: 'pinterest' },
@@ -239,6 +248,18 @@ const variations = [
 		title: 'Spotify',
 		icon: SpotifyIcon,
 	},
+	{
+		name: 'telegram',
+		attributes: { service: 'telegram' },
+		title: 'Telegram',
+		icon: TelegramIcon,
+	},
+	{
+		name: 'tiktok',
+		attributes: { service: 'tiktok' },
+		title: 'TikTok',
+		icon: TiktokIcon,
+	},
 	{
 		name: 'tumblr',
 		attributes: { service: 'tumblr' },