added some extra social icons

lib/blocks.php

@@ -332,6 +332,7 @@ function gutenberg_register_legacy_social_link_blocks() {
 		'amazon',
 		'bandcamp',
 		'behance',
+		'bitbucket',
 		'chain',
 		'codepen',
 		'deviantart',
@@ -353,18 +354,21 @@ function gutenberg_register_legacy_social_link_blocks() {
 		'mastodon',
 		'meetup',
 		'medium',
+		'messenger',
 		'pinterest',
 		'pocket',
 		'reddit',
 		'skype',
 		'snapchat',
+		'slack',
 		'soundcloud',
 		'spotify',
 		'tumblr',
 		'twitch',
 		'twitter',
 		'vimeo',
 		'vk',
+		'whatsapp',
 		'wordpress',
 		'yelp',
 		'youtube',

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

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const BitbucketIcon = () => (
+	<SVG
+		width="24"
+		height="24"
+		preserveAspectRatio="xMidYMid"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="-0.9662264221278978 -0.5824607696358868 257.93281329857973 230.8324730411935"
+	>
+		<Path d="M8.308 0A8.202 8.202 0 0 0 .106 9.516l34.819 211.373a11.155 11.155 0 0 0 10.909 9.31h167.04a8.202 8.202 0 0 0 8.201-6.89l34.82-213.752a8.202 8.202 0 0 0-8.203-9.514zm146.616 152.768h-53.315l-14.436-75.42h80.67z" />
+	</SVG>
+);

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

@@ -1,6 +1,7 @@
 export * from './amazon';
 export * from './bandcamp';
 export * from './behance';
+export * from './bitbucket';
 export * from './chain';
 export * from './codepen';
 export * from './deviantart';
@@ -22,12 +23,14 @@ export * from './mail';
 export * from './mastodon';
 export * from './meetup';
 export * from './medium';
+export * from './messenger';
 export * from './patreon';
 export * from './pinterest';
 export * from './pocket';
 export * from './reddit';
 export * from './skype';
 export * from './snapchat';
+export * from './slack';
 export * from './soundcloud';
 export * from './spotify';
 export * from './telegram';
@@ -38,5 +41,6 @@ export * from './twitter';
 export * from './vimeo';
 export * from './vk';
 export * from './wordpress';
+export * from './whatsapp';
 export * from './yelp';
 export * from './youtube';

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

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const MessengerIcon = () => (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 30 30"
+		width="24px"
+		height="24px"
+	>
+		<Path d="M 15 3 C 8.373 3 3 8.149 3 14.5 C 3 17.901215 4.5506695 20.947232 7 23.052734 L 7 28 L 11.835938 25.582031 C 12.845524 25.846308 13.903007 26 15 26 C 21.627 26 27 20.851 27 14.5 C 27 8.149 21.627 3 15 3 z M 13.861328 11.357422 L 16.8125 14.3125 L 22.083984 11.357422 L 16.138672 17.800781 L 13.255859 14.703125 L 7.8457031 17.730469 L 13.861328 11.357422 z" />
+	</SVG>
+);

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

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const SlackIcon = () => (
+	<SVG
+		width="24"
+		height="24"
+		xmlns="http://www.w3.org/2000/SVG"
+		enable-background="new 0 0 2447.6 2452.5"
+		viewBox="0 0 2447.6 2452.5"
+	>
+		<Path d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z" />
+			<Path d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z" />
+			<Path d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z" />
+			<Path d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0" />
+	</SVG>
+);

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

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const WhatsappIcon = () => (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 30 30"
+		width="24px"
+		height="24px"
+	>
+		<Path d="M 15 3 C 8.373 3 3 8.373 3 15 C 3 17.251208 3.6323415 19.350068 4.7109375 21.150391 L 3.1074219 27 L 9.0820312 25.431641 C 10.829354 26.425062 12.84649 27 15 27 C 21.627 27 27 21.627 27 15 C 27 8.373 21.627 3 15 3 z M 10.892578 9.4023438 C 11.087578 9.4023438 11.287937 9.4011562 11.460938 9.4101562 C 11.674938 9.4151563 11.907859 9.4308281 12.130859 9.9238281 C 12.395859 10.509828 12.972875 11.979906 13.046875 12.128906 C 13.120875 12.277906 13.173313 12.453437 13.070312 12.648438 C 12.972312 12.848437 12.921344 12.969484 12.777344 13.146484 C 12.628344 13.318484 12.465078 13.532109 12.330078 13.662109 C 12.181078 13.811109 12.027219 13.974484 12.199219 14.271484 C 12.371219 14.568484 12.968563 15.542125 13.851562 16.328125 C 14.986562 17.342125 15.944188 17.653734 16.242188 17.802734 C 16.540187 17.951734 16.712766 17.928516 16.884766 17.728516 C 17.061766 17.533516 17.628125 16.864406 17.828125 16.566406 C 18.023125 16.268406 18.222188 16.319969 18.492188 16.417969 C 18.766188 16.515969 20.227391 17.235766 20.525391 17.384766 C 20.823391 17.533766 21.01875 17.607516 21.09375 17.728516 C 21.17075 17.853516 21.170828 18.448578 20.923828 19.142578 C 20.676828 19.835578 19.463922 20.505734 18.919922 20.552734 C 18.370922 20.603734 17.858562 20.7995 15.351562 19.8125 C 12.327563 18.6215 10.420484 15.524219 10.271484 15.324219 C 10.122484 15.129219 9.0605469 13.713906 9.0605469 12.253906 C 9.0605469 10.788906 9.8286563 10.071437 10.097656 9.7734375 C 10.371656 9.4754375 10.692578 9.4023438 10.892578 9.4023438 z" />
+	</SVG>
+);

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

@@ -18,6 +18,11 @@
 	color: #fff;
 }
 
+.wp-social-link-bitbucket {
+	background-color: #fff;
+	color: #2684ff;
+}
+
 .wp-social-link-codepen {
 	background-color: #1e1f26;
 	color: #fff;
@@ -108,6 +113,11 @@
 	color: #fff;
 }
 
+.wp-social-link-messenger {
+	background-color: #fff;
+	color: #448aff;
+}
+
 .wp-social-link-patreon {
 	background-color: #ff424d;
 	color: #fff;
@@ -189,6 +199,11 @@
 	color: #fff;
 }
 
+.wp-social-link-whatsapp {
+	background-color: #fff;
+	color: #49c859;
+}
+
 .wp-social-link-yelp {
 	background-color: #d32422;
 	color: #fff;

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

@@ -9,6 +9,9 @@
 .wp-social-link-behance {
 	color: #0757fe;
 }
+.wp-social-link-bitbucket {
+	color: #2684ff;
+}
 
 .wp-social-link-codepen {
 	color: #1e1f26;
@@ -78,6 +81,10 @@
 	color: #02ab6c;
 }
 
+.wp-social-link-messenger {
+	color: #448aff;
+}
+
 .wp-social-link-meetup {
 	color: #f6405f;
 }
@@ -147,10 +154,30 @@
 	color: #3499cd;
 }
 
+.wp-social-link-whatsapp {
+	color: #49c859;
+}
+
 .wp-social-link-yelp {
 	color: #d32422;
 }
 
 .wp-social-link-youtube {
 	color: #f00;
 }
+
+.wp-social-link-slack path:nth-child(1) {
+	fill: #36c5f0;
+}
+
+.wp-social-link-slack path:nth-child(2) {
+	fill: #2eb67d;
+}
+
+.wp-social-link-slack path:nth-child(3) {
+	fill: #ecb22e;
+}
+
+.wp-social-link-slack path:nth-child(4) {
+	fill: #e01e5a;
+}

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

@@ -5,6 +5,7 @@ import {
 	AmazonIcon,
 	BandcampIcon,
 	BehanceIcon,
+	BitbucketIcon,
 	ChainIcon,
 	CodepenIcon,
 	DeviantArtIcon,
@@ -26,12 +27,14 @@ import {
 	MastodonIcon,
 	MeetupIcon,
 	MediumIcon,
+	MessengerIcon,
 	PatreonIcon,
 	PinterestIcon,
 	PocketIcon,
 	RedditIcon,
 	SkypeIcon,
 	SnapchatIcon,
+	SlackIcon,
 	SoundCloudIcon,
 	SpotifyIcon,
 	TelegramIcon,
@@ -41,6 +44,7 @@ import {
 	TwitterIcon,
 	VimeoIcon,
 	VkIcon,
+	WhatsappIcon,
 	WordPressIcon,
 	YelpIcon,
 	YouTubeIcon,
@@ -79,6 +83,12 @@ const variations = [
 		title: 'Behance',
 		icon: BehanceIcon,
 	},
+	{
+		name: 'bitbucket',
+		attributes: { service: 'bitbucket' },
+		title: 'Bitbucket',
+		icon: BitbucketIcon,
+	},
 	{
 		name: 'chain',
 		attributes: { service: 'chain' },
@@ -200,6 +210,12 @@ const variations = [
 		title: 'Medium',
 		icon: MediumIcon,
 	},
+	{
+		name: 'messenger',
+		attributes: { service: 'messenger' },
+		title: 'Messenger',
+		icon: MessengerIcon,
+	},
 	{
 		name: 'patreon',
 		attributes: { service: 'patreon' },
@@ -236,6 +252,12 @@ const variations = [
 		title: 'Snapchat',
 		icon: SnapchatIcon,
 	},
+	{
+		name: 'slack',
+		attributes: { service: 'slack' },
+		title: 'Slack',
+		icon: SlackIcon,
+	},
 	{
 		name: 'soundcloud',
 		attributes: { service: 'soundcloud' },
@@ -290,6 +312,12 @@ const variations = [
 		title: 'VK',
 		icon: VkIcon,
 	},
+	{
+		name: 'whatsapp',
+		attributes: { service: 'whatsapp' },
+		title: 'Whatsapp',
+		icon: WhatsappIcon,
+	},
 	{
 		name: 'yelp',
 		attributes: { service: 'yelp' },

packages/block-library/src/social-links/style.scss

@@ -103,6 +103,38 @@
 	}
 }
 
+// This needs specificity because themes usually override it with things like .widget-area a.
+.wp-block-social-links .wp-social-link-slack .wp-block-social-link-anchor {
+	&,
+	&:hover,
+	&:active,
+	&:visited,
+	svg path {
+		color: currentColor;
+		fill: currentColor;
+	}
+}
+
+.wp-block-social-links.is-style-default .wp-social-link-slack path:nth-child(1),
+.wp-block-social-links.is-style-pill-shape .wp-social-link-slack path:nth-child(1) {
+	fill: #36c5f0 !important;
+}
+
+.wp-block-social-links.is-style-default .wp-social-link-slack path:nth-child(2),
+.wp-block-social-links.is-style-pill-shape .wp-social-link-slack path:nth-child(2) {
+	fill: #2eb67d !important;
+}
+
+.wp-block-social-links.is-style-default .wp-social-link-slack path:nth-child(3),
+.wp-block-social-links.is-style-pill-shape .wp-social-link-slack path:nth-child(3) {
+	fill: #ecb22e !important;
+}
+
+.wp-block-social-links.is-style-default .wp-social-link-slack path:nth-child(4),
+.wp-block-social-links.is-style-pill-shape .wp-social-link-slack path:nth-child(4) {
+	fill: #e01e5a !important;
+}
+
 // Provide colors for a range of icons.
 .wp-block-social-links:not(.is-style-logos-only) {
 	// Generic items such as mail, feed, etc.

test/integration/fixtures/blocks/core__social-link-bitbucket.html

@@ -0,0 +1 @@
+<!-- wp:social-link-bitbucket {"url":"https://example.com/"} /-->

test/integration/fixtures/blocks/core__social-link-bitbucket.json

@@ -0,0 +1,11 @@
+[
+	{
+		"name": "core/social-link",
+		"isValid": true,
+		"attributes": {
+			"url": "https://example.com/",
+			"service": "bitbucket"
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__social-link-bitbucket.parsed.json

@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/social-link-bitbucket",
+		"attrs": {
+			"url": "https://example.com/"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]

test/integration/fixtures/blocks/core__social-link-bitbucket.serialized.html

@@ -0,0 +1 @@
+<!-- wp:social-link {"url":"https://example.com/","service":"bitbucket"} /-->

test/integration/fixtures/blocks/core__social-link-messenger.html

@@ -0,0 +1 @@
+<!-- wp:social-link-messenger {"url":"https://example.com/"} /-->

test/integration/fixtures/blocks/core__social-link-messenger.json

@@ -0,0 +1,11 @@
+[
+	{
+		"name": "core/social-link",
+		"isValid": true,
+		"attributes": {
+			"url": "https://example.com/",
+			"service": "messenger"
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__social-link-messenger.parsed.json

@@ -0,0 +1,11 @@
+[
+	{
+		"blockName": "core/social-link-messenger",
+		"attrs": {
+			"url": "https://example.com/"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]

test/integration/fixtures/blocks/core__social-link-messenger.serialized.html

@@ -0,0 +1 @@
+<!-- wp:social-link {"url":"https://example.com/","service":"messenger"} /-->

test/integration/fixtures/blocks/core__social-link-slack.html

@@ -0,0 +1 @@
+<!-- wp:social-link-slack {"url":"https://example.com/"} /-->